post-thumbnail

React useEffect vs. useLayoutEffect

React의 함수형 컴포넌트를 이용해 개발하다 보면 useEffect와 useLayoutEffect를 마주치는 일이 많다. 이 두 가지 Hooks를 잘 알지 못하고 코드를 실행시킬 경우 큰 차이점을 느끼기 어려울 수 있다. 그러나 위 두 Hooks는 분명히 다르며, 적

2022년 6월 20일
·
0개의 댓글
post-thumbnail

MobX observer 함수

이전글에서 MobX의 makeObservable 과 makeAutoObservable 함수에 대해 기록해두었다. 이 글에서는 observer 함수가 반환하는 컴포넌트 및 MobX 상태 변경 시 재렌더링하는 방식에 대해 간단히 기록해보려 한다.(혹시나 이 글을 보시는 분

2022년 5월 16일
·
0개의 댓글
post-thumbnail

MobX observable state 생성

진행중인 프로젝트에서 사용하는 MobX의 observable 동작 원리에 대해 간단하게나마 기록해두고자 해서 쓰게 된 글이다. (MobX v6 기준)MobX 상태 저장소를 생성하는 방법은 아래와 같이 세 가지가 있다.makeObservablemakeAutoObserva

2022년 4월 29일
·
0개의 댓글
post-thumbnail

React 상태 관리 (Redux, Mobx, Recoil)

React에서 상태란 컴포넌트에서 관리되는 동적인 정보(데이터)이다. 상태에 따라 View가 렌더링되며, 상태가 변경되면 해당 컴포넌트의 View도 재렌더링되어 바뀌게 된다.React 에서의 데이터 흐름은 단방향이기 때문에, 컴포넌트가 관리하는 데이터를 부모 컴포넌트에

2022년 4월 19일
·
0개의 댓글
post-thumbnail

SSR, SSG와 Next.js

CSR(Client-side rendering) 방식으로도 충분히 훌륭한 SPA 웹 애플리케이션을 만들 수 있다. 그럼에도 불구하고 SSR(Server-side rendering)과 SSG(Static-site generation)을 채택하여 프로젝트를 진행하는 경우가

2022년 4월 6일
·
0개의 댓글
post-thumbnail

인증, access, refresh token 방식

JWT란 인증에 필요한 정보를 문자열로 암호화시킨 토큰이며, access token의 역할을 한다. 클라이언트는 서버에 요청을 보낼 때 HTTP 헤더에 이 access token만 포함하여 넘겨주면, 서버는 이 토큰이 유효한 지 검사 후 클라이언트로 응답을 하게 된다.

2022년 3월 22일
·
0개의 댓글
post-thumbnail

디바운싱, 쓰로틀링

한 input 박스에 엔터 없이도 검색 결과를 나타내는 기능을 구현한다고 가정해본다. 이럴 경우 아래와 같이 input 박스의 객체에 input 또는 change 이벤트리스너를 추가하여야 한다.한 유저가 이 기능을 사용하여 벨로그를 검색하는 상황을 가정해보면, 유저가

2022년 3월 4일
·
0개의 댓글
post-thumbnail

CSS 미디어 쿼리 (반응형 페이지)

프로젝트를 배포 후 접속했을 때 모든 기능이 의도한대로 동작하게 되면 상당한 뿌듯함을 느꼈다. 추가로 컴퓨터가 아닌 iOS, Android 스마트폰에서 접속했을 때 보기 좋은 반응형 페이지를 작성하게 되면 뿌듯함이 더해졌다.부스트캠프에서 처음 프로젝트를 수행할 때는 반

2022년 2월 14일
·
0개의 댓글
post-thumbnail

React + Express >> Heroku 배포하기

React를 연동한 프로젝트를 진행하며 서비스를 배포하기로 결정하여 어떻게 배포할 지 고민하였다. 간편하게 배포만 하는 것이 목표였기 때문에 처음에는 Github Pages를 이용하여 배포했다. 그런데 React 프로젝트 내에서 사용하는 공공데이터포털의 Open API

2022년 2월 1일
·
0개의 댓글
post-thumbnail

리액트 차트 그리기 (feat. chart.js)

개인 프로젝트를 하던 중 그래프로 데이터를 표시하고 싶었던 적이 있다. 캔버스와 데이터를 이용해서 직접 라인 그래프 등을 그릴 수도 있지만, 라이브러리를 이용해서 조금 더 깔끔하고 간편하게 그래프를 그리고 싶어 찾아본 결과 chart.js를 사용하면 해결할 수 있을

2022년 1월 23일
·
0개의 댓글
post-thumbnail

JavaScript Prototype

JavaScript에서의 object는 함수이다. 콘솔 창에 Object를 입력해보면 아래와 같이 값이 나오는 것을 볼 수 있다.object가 함수라는 사실은 JavaScript에서의 Prototype을 이해하는데 있어서 중요한 사실이다. 함수가 생성될 때에는 해당 함

2022년 1월 15일
·
0개의 댓글
post-thumbnail

SOP, CORS란

SOP는 Same Origin Policy의 약자로 어떤 출처에서 가져온 리소스가 다른 출처의 리소스와 상호작용하는 것을 방지하는 정책이다. 악의적으로 한 웹사이트에서 유저 정보 등의 리소스를 접근하여 악용하는 것을 막아주는 보안 정책이다. 이 정책으로 인해 JavaS

2022년 1월 9일
·
0개의 댓글
post-thumbnail

[JavaScript] 비동기 처리

JavaScript는 싱글 스레드로 동작한다. 싱글 스레드로 동작한다는 것은 stack이 하나밖에 없다는 뜻이고, 이럴 경우 동시에 하나의 작업만 처리할 수 있다. 브라우저에서 동작하는 JavaScript의 특성 상 한 번에 하나의 작업만 처리할 수 있다면 작업 속도가

2022년 1월 1일
·
0개의 댓글
post-thumbnail

효율적인 애니메이션: stacking context

reflow / repaint

2021년 12월 12일
·
0개의 댓글
post-thumbnail

Socket.IO의 장단점

Socket.IO란 이벤트를 기반한 서버와 브라우저 간의 양방향 통신을 돕는 라이브러리이다. http는 일반적으로 양방향 통신이 불가능한데, polling, long-polling, WebSocket 등의 시스템 디자인을 사용하여 양방향 통신이 가능한 것처럼 구현할 수

2021년 11월 30일
·
0개의 댓글
post-thumbnail

효율적인 애니메이션: CSS vs. JavaScript

웹 브라우저에 애니메이션을 구현하는 방식에는 여러가지가 있다. CSS에서 transform, transition 속성을 부여할 수도 있고, JavaScript에서 setTimeout(), setInterval(), requestAnimationFrame() 등의 메소드

2021년 11월 22일
·
0개의 댓글
post-thumbnail

TypeScript: 타입 형변환 (type assertions)

TypeScript에서 이전 코드에 선언해 두었던 타입을 변경하기 위해 as를 사용할 수 있다. 타입을 검사하여 오류를 잡아내는 것이 TypeScript를 사용하는 이유인만큼 코드 중간에 타입을 변경하는 것이 안전하다고 하기는 어렵지만, 그래도 기능을 구현하다보면 타입

2021년 11월 15일
·
0개의 댓글
post-thumbnail

TypeScript: 타입 지정

타입스크립트로 프로젝트를 진행하다보면 어떤 타입을 지정해줘야 할 지 몰라서 any를 쓰는 경우가 많아진다. 하지만, any를 사용하게 될 경우 타입의 검사를 실행하지 않게 된다. 타입스크립트를 사용하는 이유가 런타임 이전에 타입을 검사하여 오류를 먼저 잡아내기 위한 것

2021년 11월 9일
·
0개의 댓글
post-thumbnail

TypeScript interface: object 렌더링

타입스크립트에서 interface는 타입 체크를 위해 주로 사용되며, 여러가지 타입을 갖는 객체 등에 새로운 타입을 정의하는 방식으로 작동한다. interface로 정의한 타입의 구현을 강제하여 일관성을 유지하며 기능을 구현하도록 하는 것이다. 아래 코드는 interf

2021년 11월 8일
·
0개의 댓글
post-thumbnail

react-transition-group

리액트에서 SPA 형식으로 페이지를 이동하기 위해 react router를 사용할 수 있다. 유저가 특정 액션을 취하면 페이지를 이동시킬 수 있고, 이 때 원하는 화면을 렌더링 할 수 있다. 오류 없이 동작한다면 기존 화면에서 새로운 화면으로 즉각 변환되는 것이다.간단

2021년 11월 6일
·
0개의 댓글