REST API? RESTful API? 종종 들어봤지만 헷갈리는 REST API는 도대체 무엇일까? - API 먼저 API가 무엇인지 간단히 짚고 넘어가자. UI(User Interface)가 사용자와 프로그램간의 연결이라면 API(Application Programming Interface)는 컴퓨터 프로그램간에 정보를 주고받는 방법 혹은 연결이다. 우리는 API를 통해 서로 다른 컴퓨터, 프로그램 사이에서 정보를 주고 받는다. 인터넷으로 버스 노선을 검색하면 우리의 컴퓨터는 버스 노선을 제공하는 서버와 API를 통해서 정보(버스 노선 데이터)를 주고 받는다. 그렇다면 REST API란 무엇일까? REST API는 이러한 API중 REST 구조를 따르는 API라고 한다. - REST 배경 REST의 ..

- HTTP의 비연결성(Connectionless) HTTP 통신은 클라이언트가 서버에 요청(request)을 해서 응답(response)을 받으면 tcp/ip 요청을 끊어 연결을 해제한다. 이것이 http의 특징인 비연결성이다. 비연결성은 서버의 자원을 효율적으로 사용할 수 있다는 장점이 있지만, 양방향 통신을 하기 어렵다는 단점이 있다. 서버는 클라이언트의 요청에 응답하는 것 뿐, 주체적으로 데이터를 보낼 수 없기 때문이다. - HTTP로 구현한 양방향 통신 그래서 양방향 통신이 필요할 땐, HTTP로 얼추 양방향 통신이 되게 만들었다. 폴링(Polling) 주기적으로 http 요청을 보내 데이터를 받아와 데이터를 갱신하는 방법이다. 갱신할 데이터가 없어도 클라이언트에서 계속 요청을 보내니 비효율적이..

코드를 분할하면, 한번에 내려받는 양을 줄여주고 이는 첫 페이지의 렌더링 시간 단축으로 이어진다. Dynamic import는 코드를 분할하는 하나의 방법이다. import - JavaScript | MDN The static import statement is used to import read-only live bindings which are exported by another module. developer.mozilla.org 클릭시 컴포넌트가 추가되는 간단한 웹이다. Todo 컴포넌트를 하나 만든다. // Todo.js export default function Todo({ title }) { return {title} } 먼저 그냥(static) import 해보자. 버튼을 누르면 Todo ..

- create-react-app create-react-app은 편한 리액트 개발 환경을 제공해준다. Create React App Set up a modern web app by running one command. create-react-app.dev 바벨과 웹팩뿐만 아니라 테스트 시스템, HMR(hot-module-replacement), css 후처리 등이 포함되어 있다. 패키지 버전업만 해주면 되기 때문에 유지 보수도 간단한다. 나도 리액트 프로젝트를 만들 일 있으면 create-react-app으로 환경 세팅한다. (공부하면서 create-react-app 말고 아예 제로부터 셋업 해보는 것도 하나의 목표이다!!) $ npx create-react-app 1-3-create-react-app..

오늘은 쿠키, 세션, JWT를 알아보자. - 배경 http프로토콜의 특징인 stateless 때문에 서버는 유저정보를 유지하고 있지 못한다. 연결이 끊나면 서버는 이전 상태를 보존하지 않는다. 그래서 유저 입장에선 똑같은 사이트를 여러번 방문해도, 서버 입장에선 유저가 매번 처음 방문한 것처럼 받아드린다. 이 특징 때문에 불편한 상황이 발생한다. - 페이지를 이동할 때마다, 매번 로그인을 해야하나? - 쿠키(Cookie) Using HTTP cookies - HTTP | MDN An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user's web browser. The browser ma..

- 리액트 우선 리액트가 무엇인지 간단히 짚고 넘어가자면, 리액트는 페이스북에서 만든 UI 개발을 위한 자바스크립트 라이브러리다. 웹이 발전하면서 싱글 페이지 어플리케이션에 대한 수요가 증가했고, 리액트를 사용하면 효율적인 싱글 페이지 어플리케이션을 개발할 수 있다. https://www.npmtrends.com/react-vs-vue-vs-angular 프론트엔드에서 가장 유명한 세가지 라이브라리를 비교해 봤을 때, 리액트의 다운로드 수가 압도적으로 많은 것을 알 수 있다. 나도 그래서 자연스럽게 리액트를 시작한 것 같다. 리액트는 api통신이나 클릭과 같은 이벤트로 상탯값이 변경되었을 때, 변경된 값을 자동으로 UI에 업데이트(렌더링) 해준다. 이때, 효과적인 렌더링을 위해서 리액트는 가상돔(Virt..

웹 개발을 리액트로 처음 입문해서 지금도 인턴을 하며 리액트를 사용하고 있지만 사실 리액트를 이해하진 못한채 사용해 왔다. 왜 리액트를 사용하는지, 어떻게 리액트가 작동되는지 모른채 리액트를 사용하다 보니, 실력이 느는 느낌이 안들었다. 오류가 나면 구글링을 통해 해결하고 어찌어찌 작동은 하는데 코드는 점점 스파게티코드가 되어갔다. 이렇게 계속하는 것은 밑 빠진 독에 물 붓는 것과 같아서 이참에 책 한권을 사서 공부하기로 결심했다. 리액트뿐만 아니라 redux, nextjs, typescript도 다르고 있어서 마음에 들었다. 오늘은 5월 5일 어린이날, 매일매일 공부해서 5월 안에 끝내보자. 성장하는 개발자가 되자.

자바스크립트로 할 수 있는 것 중 하나가 DOM을 조작하는 것이다. DOM을 조작하기 앞서, 우선 DOM이 무엇인지 간단히 알아보자. DOM 이란 Document Object Model (DOM) - Web APIs | MDN The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or X developer.mozilla...

티스토리 스킨 커스터마이징하는 프로젝트를 여기서 중단하려 한다. 처음 시작할 땐, 배경 툴바 등등 이것저것 만들어 완전 나만의 사이트로 꾸미려 계획했지만 열정이 식어버렸다 ㅜㅜ 마음이 떠난 이유는 1. 스킨을 새로 만드는 것이 아닌, 기존의 스킨을 수정하는 것에서 오는 한계 이미 만들어진 스킨을 편집하는 것이어서, 코드를 수정할 때 많은 사이드이펙트가 발생했다. 레이아웃이나 스타일 중 하나를 수정하면 수정할게 또 생기고, 수정하면 또 생기고, 또생기고 ... 이런 식의 꼬리에 꼬리를 무는 작업을 하다 보니 정말 진이 빠졌다. 그리고 티스토리 자체에서 삽입하는 같은 태그들을 수정할 수 없다는 한계도 있었다. 2. 몹쓸 미적감각 사실 그런 한계가 있더라도 스킨을 바꾸는 것은 가능하다. 하지만 문제는 내가 바..

이번엔 다크모드 버튼을 만들어보자. 상단바의 검색버튼 옆에다 만들 것이고, 이번엔 기능만 구현하고 디자인은 다음에 하도록 하자. 상단바 태그 안에 버튼 태그를 만들자. 다크모드 해당 태그의 CSS를 추가해 버튼의 위치를 검색버튼 옆으로 위치시키자. 버튼을 만들 동안 배경색을 넣어서 편하게 편집하도록 하겠다. #darkModeButton { position: absolute; top: 20px; right: 80px; cursor: pointer; background-color: red; } 이제 button에 JavaScript를 추가해 다크모드 기능을 만들어 보자. 1. button을 누르면 태그의 class를 변경하는 함수를 실행시키도록 한다. 2. 해당 class의 배경색, 글자색을 정의함으로써 다..