Frontend

리액트 컴포넌트

리액트 웹 프론트엔드 및 앱 Native, VR 등에서 활용되는 UI 라이브러리로, UI 데이터를 관리하는 방법을 제공한다. 부모 컴포넌트로 내려받는 값을 속성값, 컴포넌트 내부에서 생성/관리되는 값을 상태값이라고 한다. 리액트는 UI에 연결된 속성값과 상태값이 변경되면, 해당 컴포넌트의 render() 함수가 호출되어 화면을 자동으로 갱신한다. 클래스형 컴포넌트에서는 render() 함수 호출 함수형 컴포넌트에선느 해당 함수가 매번 호출되며, 컴포넌트에서 유지해야 할 값들은 Hook을 통해 관리 또한 Virtual DOM을 통해 이전 UI 상태를 메모리에 유지하고 변경될 UI의 최소 집합을 계산하므로, UI를 빠르게 갱신한다. 선언적 UI UI에 변화가 있을 때마다 일일이 코드를 수행하는 것이 아니라,..

순수 함수와 커링 기법

순수 함수 순수 함수란 상태값과 속성값이 같으면 항상 같은 값을 반환하는 함수로, 다른 side effects를 발생시키지 않아야 한다. (HTTP 요청, 데이터 저장, 쿠키 조작 등) 리액트는 컴포넌트의 루틴을 순수 함수로 작성해야 하며, 컴포넌트의 상태값은 불변 객체로 관리해야 한다. const Header = (props) => { {props.title} } 커링 일부의 인자를 고정한 새로운 함수를 반환하는 함수를 만드는 기법 const userLogs = username => message => { console.log(`${username} - ${message}`); }; const log = userLogs('Chinseok Lee'); log('Hello World');

Promise와 async/await

콜백 지옥 JS는 싱글 스레드 환경에서 동작하는 프로그램으로, HTTP 요청을 보낸 후 백엔드가 이를 처리하는 동안에 브라우저는 아무것도 못하는 상태가 된다. 이를 해결하기 위해 현재 대부분의 JS 엔진은 JS 스레드 밖에서 이러한 오퍼레이션을 실행해준다. (비동기 오퍼레이션) 오퍼레이션이 현재 실행 중인 JS 스레드가 아니라 다른 곳에서 실행되므로, HTTP 응답을 받았다는 사실을 알려주기 위해 콜백 함수를 이용한다. 그러나 콜백 함수 내에서 또 다른 HTTP 요청이 발생하면, 두 번째 요청을 위한 콜백을 또 정의하는 과정에서 코드가 복잡해지는데 이것을 콜백 지옥이라고 한다. fs.readdir(source, function (err, files) { if (err) { console.log('Erro..

ES6+ 문법 정리

상수/변수 선언 var 대신에 const 혹은 let을 이용한다. const는 블록 범위의 상수를 선언하며, 상수의 값은 재할당할 수 없다. const number = 42; try { number = 99; } catch (err) { console.log(err); // expected output: TypeError: invalid assignment to const `number' // Note - error messages will vary depending on browser } console.log(number); // expected output: 42 let은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수 있다. let x = 1; if (x..

react-router-dom과 로그인 인증

프론트엔드에서 인증이란, 로그인과 회원가입, 리다이렉션이다. 프론트엔드 애플리케이션은 백엔드에 HTTP 요청을 보냈을 때 403이 리턴되면, 로그인 페이지로 리다이렉트 해야한다. 또한, 로그인한 후 백엔드 서비스로부터 받은 토큰을 어딘가에 저장해 놓고 요청을 보낼 때마다 헤더에 Bearer 토큰으로 지정해 주어야 한다. 서버-사이드 라우팅 사이트.com/login을 입력하고 들어가면 이 요청은 GET 요청으로 해당 사이트의 서버에 전달된다. 서버는 login 경로를 보고 login.html 페이지를 반환한다. 브라우저는 받은 login.html을 렌더링하고, 이 경우 웹 페이지가 새로고침 또는 reloading 된다. 이런 라우팅을 서버-사이드 라우팅이라고 한다. 클라이언트-사이드 라우팅 한 페이지에서만..

백엔드 통합과 CORS

Fetch API fetch는 자바스크립트가 제공하는 메서드로 API 서버로 http 요청을 송신 및 수신할 수 있도록 도와준다. fetch는 url을 매개변수로 받거나 url과 options를 매개변수로 받을 수 있으며, Promise 오브젝트를 리턴한다. 따라서, then과 catch에 콜백 함수를 전달해 응답을 처리할 수 있다. 메서드를 명시하고 싶은 경우나 헤더와 바디를 함께 보내야 할 경우에는 두 번째 매개변수에 요청에 대한 정보가 담긴 오브젝트를 넘겨준다. options = { method: "POST", headers: [ ["Content-Type", "application/json"] ], body: JSON.stringify(data) }; fetch("http://localhost:8..

이벤트 처리

지원되는 이벤트 SyntheticEvent – React (reactjs.org) SyntheticEvent – React A JavaScript library for building user interfaces reactjs.org 예시) 일정 추가하기 state = { todoList: [], current: '' }; onKeyDown 엔터를 누르면 할일 목록에 일정을 추가하는 이벤트 핸들러 이때 todoList에 push하면 안 되고 아래와 같이 setState로 상태값을 변경해주어야 한다. onKeyDown = (evt) => { if ( evt.keyCode === 13 ) { const { todoList, current } = this.state; this.setState({ todoLis..

프론트엔드 기초

프론트엔드 프론트엔드는 사용자 바로 앞에서 사용자와 상호작용하며 애플리케이션 로직을 수행하고, 백엔드 서버로 요청하는 역할로 웹 서비스에서 클라이언트 또는 프론트엔드란 웹 브라우저를 뜻한다. 브라우저는 인터넷을 이용해 서버에 있는 자원을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행시킨다. 브라우저 동작 원리 브라우저의 주소창에 웹 주소를 입력하면 브라우저는 HTTP GET 요청을 서버로 전송하고, 프론트엔드가 있는 웹 서비스의 경우 HTML 파일을 결과로 반환한다. HTML을 받은 브라우저는 파싱과 렌더링 두 단계를 거쳐 텍스트로 된 HTML을 브라우저에게 보여준다. 파싱 브라우저는 HTML을 트리 자료 구조의 형태인 DOM 트리로 변환한다. IMAGE, CSS, SCRIPT 등 다운로드해야 하는 ..