김도리의 개발자로서 성장기

JWT JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰이다. 로그인 이후 서버가 만들어주는 문자열이다. 이 문자열에는 사용자의 로그인 정보가 들어있고, 해당 정보가 서버에서 발급되었음을 증명하는 서명이 들어있다. 사용자가 로그인을 하면 서버에서 사용자에게 해당 사용자의 정보를 지니고 있는 토큰을 발급해주고, 추후 사용자가 다른 API를 요청할 때 발급받은 토큰과 함께 요청하게 된다. 그럼 서버는 해당 토큰이 유효한지 검사하고, 결과에 따라 작업을 처리하고 응답한다. 모든 API에 토큰을 넣는다는 것이 아니라 본인임을 증명해야하는 API들에 토큰을 넣어 통신해야 한다. 예시) 내 정보 수정, 장바구니 조회 등 const headers = { accept: 'applicatio..

localStorage 브라우저가 가지고 있는 임시 저장 공간 새로고침을 하면 JS 파일들은 모두 처음부터 다시 읽어들이기 때문에 당연하게 모든 state의 데이터는 초기화 됨 state에 저장된 데이터가 초기화되는 것이 싫다면 모두 DB에 저장하면 되는데 별도의 서버나 DB가 없다면 localStorage에 저장하는 방법이 있다. localStorage는 브라우저에 몰래 정보를 저장할 때 사용할 수 있는 공간이다. localStorage 확인 크롬에서 개발자도구를 켜서 Application 탭에 들어가면 좌측 Storage 하위 목록인 Local Storage를 확인할 수 있다. 문법 // 데이터 추가 localStorage.setItem('키값', '데이터'); // 데이터 조회 localStorag..

리액트는 AJAX를 구현하려면 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야 한다. HTTP Client를 내장하고 있는 Angular와 다르게 따로 내장 클래스가 존재하지 않기 때문이다. AJAX (Asynchronous Javascript And XML) 비동기식 자바스크립트와 xml 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 비동기 통신, 클라이언트와 서버간 XML 데이터를 주고받는 기술 비동기 방식 웹페이지를 리로드하지 않고 데이터를 불러오는 방식 서버에 요청한 후 멈추어 있는 것이 아닌 그 프로그램은 계속 돌아감 필요한 부분만 불러와 사용할 수 있다는 장점이 있다. ax..

Hooks 리액트 v16.8에 새로 도입된 기능 useState 함수형 컴포넌트에서도 상태 관리를 할 수 있게 해줌 1. 배열 비구조화 할당 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법 const array = [1, 2]; const one = array[0]; const two = array[1]; 다음 코드는 array 안에 있는 값을 one과 two에 담아주는 코드이다. 이를 배열 비구조화 할당을 사용하면 const array = [1, 2]; const [one, two] = array; 이렇게 표현할 수 있다. 2. useState 사용하기 import { useState } from 'react'; import 구문을 통해 불러오며 아래와 같이 사용한다. const [valu..

Context API란? 컴포넌트간 공동으로 사용해야할 데이터가 있다면 props를 사용했었다. props로만 데이터에 전달할 때 깊이가 깊어지면 여러 컴포넌트를 거쳐 받아야해서 불편하고 실수할 가능성이 커진다. 이렇게 리액트 프로젝트 내에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이 Context API이다. 리덕스, 리액트 라우터, styled-components 등의 리액트 라이브러리들도 Context API 기반으로 구현되어 있다. 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한번에 원하는 값을 받아와서 사용할 수 있다. Context API 사용법 1. 새 Context 만들기 ..

회사에서 Web 서비스나 관리자페이지 개발을 할 때 React를 사용하여 개발을 한다. 여러 프레임워크 중 Vue나 Angular, Svelte가 아니라 왜 React를 써야하는지 알고싶어졌다. React 공식 홈페이지에 가서 어떤 친구인지를 찬찬히 읽어보았다. React 자바스크립트 라이브러리로 UI(User Interface)를 만들기 위해 사용된다. React로 프로젝트를 개발할 때에는 JSX를 사용한다. React 컴포넌트는 render() 메서드를 통해 입력 데이터를 받고 화면에 표시할 것을 반환한다. JSX(JavaScript XML) Javascript에 XML을 추가한 문법이다. 자바스크립트에서 HTML을 작성하듯이 사용하기 때문에 한 파일 내에서 자바스크립트와 HTML을 동시에 작성할 수..

VS Code에서 작업했고, 로컬에서는 JS가 module로 불러올 때 CORS 에러가 나기 때문에 Live Server라는 extension을 설치하여 진행했다. 설치가 끝나면 우측 하단에 Go Live라는 버튼이 생기는데 요거를 클릭하면 가상 서버에 해당 html파일이 띄워진다. 이 상태로 진행해보자. Interactive Web을 배워보고 싶어서 기초부터 시작했다. Interactive Developer라는 진짜 대단한 월클 유투버가 올려주신 강의를 따라서 개발해보았다. 일단 index.html, style.css, test.js, figure.js 파일들을 만든다. style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; hei..