동기(Synchronous)와 비동기(Asynchronous) 처리방식 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉, A작업이 모두 진행 될때까지 B작업은 대기해야한다. 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉, A작업이 시작하면 동시에 B작업이 실행된다. A작업은 결과값이 나오는대로 출력된다. 동기(synchronous) 동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말한다. 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 요청한 순서대로 결과가 주어져야 한다. 데이터 요청에 따른 응답을 리턴해주기 전까지 다른 활동을 할 수 없으며 기다려야한다. 순서에 맞게 진행되는 장점이 있으나, ..
CSR/SSR/SSG CSR(Client Side Rendering) Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다. CSR은 웹 서비스에서 사용하는 모든 CSS/JS 파일을 index.css index.js 와 같이 하나의 파일로 번들링한다. 모든 페이지에서 이 번들링 된 파일을 사용하여 페이지를 렌더링한다. 서버에 페이지를 요청하면 서버는 아무것도 없는 빈 HTML과 번들링된 index.js index.css 를 제공한다. 브라우저가 응답을 받은 순간, 페이지에는 어떠한 내용도 표시되지 않는다. ..
자바스크립트는 싱글 스레드 기반의 언어 이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용한다. 이는 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리할 수 있음 을 의미한다. 만약 네트워크 요청과 같은 비동기 함수가 동기적으로 이루어지는 함수로 만들어졌다면 네트워크 요청이 다른 서버로 보내지고 컴퓨터는 응답 받기를 기다리며 느려질 것이다. 그 사이에 클릭이나 다른 요소가 렌더링이 되어져야 하는게 있더라도 스택은 네트워크 요청 함수에 블락킹 되어있으므로 아무 일도 일어나지 않게 된다. 이러한 문제는 비동기 콜백을 사용함으로써 해결된다. 비동기 요청은 자바스크립트 엔진을 구동하는 환경인 브라우저 나 Node.js 에서 처리된다. 비동기 처리를 위한 브라우저와 Node.js의 구조 브라우저 환경의 구..
Express Express란? Node.js의 프레임워크이다. 자바스크립트 프레임워크로 React, 자바 프레임워크로 Spring 등등이 있는 것처럼 Express는 Node.js를 빠르고 간결하게 사용할 수 있게 해준다. Express의 특징 Express는 서버 사이드 프레임워크로 Node.js의 API를 단순화하고 유용한 기능을 추가해 쉽게 서버를 구축할 수 있게 해준다. 코드의 양을 줄여주고 유지 보수가 쉽게 해준다. 확장성을 지향한다. 불필요한 간섭이 없고 사용자가 필요한 라이브러리를 추가해서 확장 가능하다. HTTP request와 response를 컨트롤할 수 있다. Express 시작하기 설치 npm init //package.json 파일을 작성한다. npm install express..
문제 설명 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다. 한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하도록 solution 함수를 완성하세..
Node.js Node.js는 Javascript의 runtime 이다. runtime이란? 프로그램이 실행될 때, 그 프로그램이 동작하는 곳이다. 기존의 Javascript 런타임은 크롬, 사파리 같은 웹 브라우저였다. 그런데 Node.js의 등장으로 웹 브라우저가 아닌 곳에서도 Javascript를 실행 할 수 있게 된 것이다. nvm(Node Version Manager) nvm은 Node.js 다양한 버전을 쉽게 설치하고 사용할 수 있게 해준다. 현재 Node.js의 버전을 확인 Node -v 설치되어 있는 모든 Node.js 버전 확인하기 nvm ls 특정 버전의 Node.js 설치하기 nvm install 12.18.3 사용 중인 Node.js 버전을 다른 버전으로 변경 nvm use 14.1..
RestAPI REST API의 탄생 REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다. REST 구성 쉽게 말해 REST API는 다음의 구성으로 이루어져있다. 자원(RESOURCE) - URI 행위(Verb) - HTTP 메소드 표현(Representations) REST 의 특징 Uniform (유니폼 인터페이스) Uniform Interface는 URI로 지정한 리..
상태(State) 모던 웹프론트엔드 개발 UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다. 즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있다. 즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 개발자 입장에선 관리해야하는 데이터들이라고 볼 수 있다. 상태 관리는? 상태를 관리하는 방법에 대한 것 ➡️ 프로덕트가 커짐에 따라 어려움도 커진다. 상태들은 시간에 따라 변화한다. React에선 단방향 바인딩이므로 Props Drilling 이슈도 존재한다. Redux와 MobX 같은 라이브러리를 활용해 해결하기도 한다. Client State & Server ..
Emotion이란? Emotion – Introduction (Edit code to see changes) emotion.sh Emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 프레임워크와 관련없이 사용하는 Framework Agnostic과 React 두 가지 방식으로 사용된다. emotion 설치 # Framework Agnostic $ npm install @emotion/css # React $ npm install @emotion/react import 하기 emotion.js를 사용해야 할 컴포넌트에 먼저 import를 해야한다. /** @jsxImportSource @emotion/react */..
주요 HTTP 통신방법 왜 React에서 주로 Axios를 이용해 통신하는지, HTTP 통신을 가능하게 하는 Ajax와 Fetch와 비교해보자. Ajax Ajax는 Asynchronous JavaScript And XML의 약자로, 말 그대로 자바스크립트에서 비동기적 통신을 가능하게 한다. 순수 Ajax는 XMLHttpRequest()생성자를 통해 자바스크립트에서 구현될 수 있지만 JQuery를 통해 Ajax를 보다 쉽게 쓸 수 있기 때문에 주로 JQuery와 함께 쓰인다. 그러나 Promise 기반이 아니고 JQuery를 사용하지 않으면 쉽게 구현하기 어렵다는 단점이 있다. React에서 promise가 async, await과 사용될 때 그 장점을 생각해보면 Ajax는 매력적이지 않다. Fetch F..
