JavaScript
-
[Express.js] Routing(express.Router())Back-End/Express.js 2021. 2. 2. 15:37
🤯 서론 서버를 열기 위한 최소한의 공부를 목표했지만... 역시 쉽지가 않다ㅎㅎㅎㅎㅎ Express-generator 로 서버환경을 구현했다보니, app.js 코드들이나 디렉토리들을 하나하나 분석하기도 해야했고 그러다보니, 우리가 요청하는 URI에 따른 서버로직을 구현하기 위해 필요한 Routing과, 여기에 사용되거나 혹은 생성기에 기본적으로 포함되었던 Middleware의 의미와 간단한 이해를 정리해야겠다고 느꼈다. 📗 Routing [Express 공식문서] 라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러..
-
[Express.js] Express 설치 및 실행Back-End/Express.js 2021. 2. 1. 23:14
😲 서론 이 포스팅은 내게 아주 큰 의미를 가진다. 프론트엔드 개발자를 준비해온 내가, 백엔드(서버)에 관련해 처음 작성하는 글일테니!😀 혼자 2차 프로젝트를 진행하면서, 데이터를 JSON의 로컬fetch() 로 대체할까 고민을 많이 했다. 결론적으론, 동적 라우팅이나 로그인/회원가입 구현을 위해 Express로 서버를 간단히 구현해보기로 결정했다. Javascript를 처음 공부하면서 포스팅을 하지 않았던 것이 후회되어, 이번엔 학습과 정리를 동시해 진행기로 했다!! 📗 Node.js 란? 나는 'Node.js = 백엔드(서버)' 라고 인지하고 있었다. 이번에 Express를 공부하며 정말 잘못된 생각이라는 것을 느꼈다! Express 정리에 앞서, Node.js 와 npm부터 차근차근 정립할 필요성을..
-
[Javascript] 비동기 - #2. PromiseFront-End(Web)/Javascript 2021. 2. 1. 19:30
나도 그렇고, fetch()-then 이나 async/await 을 사용하면 최초에 Promise 라는 결과값이 반환되는 것을 볼 수 있었을 것이다. 또한, 자세히 보면 이 Promise는 객체(Object) 형태를 하고 있으며, 아래와 같이 어떠한 값들을 포함하고 있었다. 이 Promise는 저번에 알아본 콜백지옥을 대체한다고 했는데, 이에 대해 좀 더 자세히 공부해보았다. 📒 Promise 란? - Promise가 필요한 이유 1) 콜백지옥 저번 비동기 시간에 얘기한 콜백지옥이다. 보시다시피 가독성도 나쁠 뿐더러, 에러 발생 가능성이 높기 때문에 대안이 필요했던 것이다. 2) 에러 처리의 한계 try { setTimeout(() => { throw new Error('Error!'); }, 1000)..
-
[Javascript] 비동기 - #1. 비동기 개념과 Callback FunctionFront-End(Web)/Javascript 2021. 1. 30. 07:37
Javascript 메서드를 사용하면 인자로 받는 함수를 '콜백함수' 라고 명명하는 것을 보았을 것이다. React 작업을 하면서, fetch() 함수의 .then 혹은 async/await 등 '비동기 프로그래밍'을 자주 적용했다. 위 내용들 모두, 해당 코드를 진행함과 동시에 다음 코드로 넘어가기 위한 '비동기'의 목적이라 막연하게 알고 있었다. (컴퓨터 언어 특성상 코드는 위에서 아래로 순차적으로 실행되기 때문! - 싱글 스레드) 그렇지만, 그래서 비동기가 뭔데? 라는 질문에 저 이상으로 답을 할 수 없었고, 이번 기회에 Javascript의 비동기 관련된 동작원리를 시리즈로 정리하면서 공부하고자 포스팅을 시작하였다. 📒 비동기(Asynchronous) vs 동기(Synchronous) - 동기(S..
-
[Javascript] 2차원 배열 만들기(Array.from())Front-End(Web)/Javascript 2021. 1. 3. 16:56
미니 프로젝트를 진행하며, 100개의 정보를 10개씩 2차원 배열의 형태로 가공해야하는 문제가 있었다. 물론 이중 for문을 돌리면 심플하게 구현할 순 있지만, state로 활용했을 때 [] => 2차원 배열 업로드 전 초기화에서 문제가 있었다. (0번째 인덱스 배열을 초기값으로 쓰려고 했으나, default는 [] 1차원 배열이기에 에러 처리가 되었다.) 정답과 비교해보니, Array.from() 이라는 메서드를 활용하기도 해서 2차원 배열에 대한 고찰을 적어내려 가보고자 한다. 🧑💻 2차원 배열 만들기 1. 2중 for문 : 가장 직시적인 형태, row 및 columns 길이만큼 각각 반복하며 요소들을 push 한다. function get2DArray(r, c) { const result = []..
-
[CSS/Side Lib.] SASS, SCSSFront-End(Web)/HTML, CSS 2020. 12. 29. 15:40
오늘은 React-router 와 SASS 세션이 진행되었다. SASS를 처음 접하다보니, 구글링을 병행하면서 별도 포스팅을 진행하겠다. 🧑💻 Session : Sass - Sass 란? Sass(Syntactically Awesome style sheets)는 CSS Pre-Processor(전처리기, 스크립트 확장 언어) 라고 정의한다. Sass에서 추가적인 기능들을 구현한 뒤, 컴파일러가 브라우저에서 인식하는 CSS 언어로 전환해준다. (파일 확장자는 .css -> .scss) 스타일들의 네스팅을 통해 불필요한 클래스명을 줄임으로서 복잡한 코드를 간결하게 만들고, 코드 가독성을 높인다. 속성과 값에 대한 변수 저장을 통해 코드의 재활용으로 효율적인 마크업이 가능하다. * CSS 전처리기 3대장 :..
-
[React.js/Side Lib.] React-RouterFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 29. 00:52
미니 프로젝트에서 네비게이션 메뉴에 React-Router를 적용해서 페이지를 변경해보았다. 범용적인 라이브러리기에 기술 포스팅을 하였다. 🧑💻 Routing - SPA(Single Page Application) React-Router 에 대해 공부하기 전에, 그 사용목적에 대해 얘기하려면 SPA 방식의 학습이 선행되어야 한다. SPA는 말 그대로, 페이지가 1개인 어플리케이션을 의미한다. 여기에서 페이지라 함은 HTML 파일을 의미한다. 그래서, 리액트같은 라이브러리(혹은 프레임워크)가 브라우저에서 뷰 렌더링을 담당하게 하고, 필요한 데이터만 전달받아 표현하게 된다. 기존의 MPA 와 가장 큰 차이는, 각 주소가 HTML 페이지가 아닌 JS파일(컴포넌트)을 불러와서 뷰를 수정하는 'Routing' ..
-
[React.js] React 소개(wecode)Front-End(Web)/React - 프레임워크(React, Next) 2020. 12. 28. 16:29
3주차 foundation 주차이다. 드디어, React 라이브러리 세션이 시작되었고, 첫 개념에 대한 정립을 해주는 유용한 시간을 마련해주셨다. 🧑💻Session : React 1. Why React? - Web Application의 발전 HTML/CSS/Javascript(DOM, Event) -> jQuery(Method 모음) -> React/Vue/Angular(Framework & Libarary) - Angular, Vue (Framework) Angular : 2010년 Google이 개발한 Framework. Typescript 기반으로 안정적이고 기능이 많으나, 러닝커브가 높다. Vue : 2014년 중국 Evan You 개인이 개발한 Framework. 코드가 깔끔해고 배우기가 쉬..