자바스크립트는 싱글 스레드 기반의 언어 이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용한다. 이는 요청이 동기적으로 처리되어 한 번에 한 가지 일만 처리할 수 있음 을 의미한다. 만약 네트워크 요청과 같은 비동기 함수가 동기적으로 이루어지는 함수로 만들어졌다면 네트워크 요청이 다른 서버로 보내지고 컴퓨터는 응답 받기를 기다리며 느려질 것이다. 그 사이에 클릭이나 다른 요소가 렌더링이 되어져야 하는게 있더라도 스택은 네트워크 요청 함수에 블락킹 되어있으므로 아무 일도 일어나지 않게 된다. 이러한 문제는 비동기 콜백을 사용함으로써 해결된다. 비동기 요청은 자바스크립트 엔진을 구동하는 환경인 브라우저 나 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..
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..
상태(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..
Classnames 리액트에서 클래스의 이름을 조건부 로 className을 함께 결합하기 위한 자바스크립트 라이브러리다. classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.2, last published: 6 months ago. Start using classnames in your project by running `npm i classnames`. There are 38065 other projects in the npm registry using classnames. www.npmjs.com 터미널에서 npm을 사용해 설치한다. npm i classnames 아래와 같이 불리언..
404 Page pages폴더 하위에 404.js 이름으로 컴포넌트를 만들고 코드를 작성하면 끝이다. 간단하다. export default function NotFound() { return 'here is 404 pages'; }
Catch ALL URL pages 하위에 파일명을 [...params].js(원하는 이름 사용) 와 같이 설정하면 어떤 URL이라도 잡을 수 있다. [...] 를 통해서 movies라는 폴더 아래 모든 Endpoint를 라우팅 할 수 있다. Link 태그의 href 속성을 수정할 수 있다. {movie.original_title}; useRouter 를 사용해 params 배열을 구조분해할당해서 사용할 수 있다. import { useRouter } from 'next/router'; export default function Detail() { const router = useRouter(); const [title, id] = router.query.params; return ( {title || ..
Dynamic Router Router pages는 페이지 라우팅을 자동으로 설정해주는 폴더로, 정적 라우팅은 물론 동적 라우팅도 가능하다. pages 하위 폴더 구조URL pages/index.js / pages/about.js /about pages/movies/index.js /movies pages/movies/all.js /movies/all pages/movies/[id].js /movies/12 동적 라우팅은 [변수].js 파일을 통해 설정할 수 있다. router 객체에 접근하기 위해서 useRouter를 사용한다 import { useRouter } from 'next/router'; const router = useRouter; import 후 router라는 변수에 저장하는 구조로 사..
