제어 컴포넌트 VS 비제어 컴포넌트  제어 컴포넌트HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.(공식 문서) 이해를 돕기 위해 예..

React Hook Flow - Mount 부터 Unmount까지  이번 포스팅에서는 React Hook Flow Diagram을 통해 리액트 컴포넌트의 생명주기동안 훅이 언제 실행되는지 공부한 내용을 포스팅 해보려고 한다.추가적으로 useEffect 와 useLayoutEffect를 비교하면서 언제 해당 훅을 사용하는게 좋을지도 같이 고민한 내용도 추가했다. Mount, Update, Unmount?- Mount: 컴포넌트가 페이지에 처음 렌더링 될 때를 의미- Update: 부모 컴포넌트가 리렌더링 or state, props가 변경되어 리렌더링 될 때를 의미- Unmount: 컴포넌트가 DOM에서 제거될 때를 의미 이제 React Hook Flow를 보면서 Mount, Update, Unmout 마..

Call Stack, Task Queue, Event Loop  JavaScript 언어를 공부하던 중 비동기 처리 방식을 이해하기 위해서는 Call Stack, Task Queue, Event Loop의 개념을 알아야 한다는 것에서부터 흥미를 느껴 공부한 내용을 기록해보려고 한다. 작성 순서1. Call Stack, Task Queue, Event Loop 란?2. Call Stack, Task Queue, Event Loop 이해하기 위한 나만의 설명 + 사진   그럼 이제 자바스크립트에서 함수를 호출할 때 보이지 않는 곳에서 무슨 일이 일어나는지에 대해서 살펴보자. 1. Call Stack, Task Queue, Event Loop 란?콜 스택(Call Stack)모든 프로그래밍 언어에는 보이지 않..

[CSS] - visibility VS display 애니메이션 적용 차이  어떻게 해야 더 깔끔하게 코드를 작성할 수 있을까? 공부중 다른 개발자분의 드롭다운 메뉴 CSS 코드를 보게 되었다. 여기서 지나칠 수 있었지만 나는 드롭다운 메뉴를 구현할 때 display(block, none)를 이용해 작성하는데왜 이분은 visibility(visible, hidden)를 사용할까? 라는 의문을 계기로 코드를 동작시켜보며 알게된 내용을 공유하고자 포스팅하게 되었다. Display우리가 흔히 사용하는 display 속성은 요소를 어떠한 형태로 나타나게 할 것인지를 말하는 속성으로 4가지가 있다.display : blockdisplay : inline-blockdisplay : inlinedisplay : no..

input type="submit" VS button type="submit"   강의를 들으면서 공부 중 제출 버튼을 구현하는데 button이 아닌 input에 type을 submit으로 지정해서 버튼을 구현하는 모습을 보고 궁금증이 생겼다. 결론적으로는 둘 다 사용가능하지만 button을 더 많이 사용합니다. 기능적 차이는 없을까?폼 전송 기능을 담당하는 과 은 기능적으로 동일합니다.기능적으로는 button에 type을 명시하지 않으면 기본적으로 submit을 실행하기 때문에 form에서 사용하기에 딱 입니다. Button의 type 속성값브라우저별 기본 button 요소의 기능이 다를 수 있기 때문에 꼭 넣는걸 추천합니다.- type="submit" : 폼의 전송 기능을 담당합니다.- type="..

3D 애니메이션 구현 (backface-visibility, perspective)완성본 배운점요소 회전 시키기 (동전 뒤집기)요소를 회전시켰을 때 원근감이 느껴지도록 하려면 rotate와 perspective를 함께 사용해야 합니다.스타벅스 배지가 실제로 이미지에 붙어 있는 것 같은 효과를 주기 위해 회전 효과가 필요했는데 rotateX 뿐만 아니라, 다음처럼 스크린을 감싸는 부모 요소에 perspective라는 프로퍼티를 추가해줘야 했습니다.그 이유는 perspective가 원근감을 결정하기 때문! 1.  초기 모습, 코드 앞 뒤     2. absolute- front에 absolute를 넣어 부모 요소를 기준으로 배치해줍니다..container .item...

RSC VS SSR 무슨 차이가 있을까?   포스팅 하게 된 계기 유튜브에서 프론트관련 영상을 보던중 RSC라는 단어를 처음 들어서 검색하던 중 React와 관련된 내용인데 React를 사용하는 입장에서 처음 들어보는 단어이기에 흥미가 생겨 찾아보기 시작했습니다. 필자는 Next.js App router를 사용해 프로젝트를 진행해본 경험이 있습니다.App router를 사용해본 사람은 'use client'를 무조건 보고 사용해 본 경험이 있을겁니다. 이러한 지시어가 RSC에서 온 개념 생기면서 나오면서 생긴 기능이라는 말이 흥미로웠습니다. React18에서 새롭게 등장한 가장 핫한 기능인 React Server Component(RSC)에 대해 작성해보겠습니다. React Server Component..

JavaScript Array.fill()의 함정 (참조 타입과 원시 타입의 차이)  작성 배경DFS, BFS와 같은 그래프 알고리즘을 구현하면서 2차원 배열을 만들어 초기화하는 경우가 많습니다.특히 인접 리스트를 만들거나 방문(boolean) 배열을 초기화할 때 충분히 만날 수 있는 문제라고 생각합니다. (그게 바로 저..)  사전 지식JavaScript에서 데이터 타입은 크게 두 가지로 나뉠 수 있습니다.1. 원시 타입- Number, String, Boolean, null, undefined 등- 값 자체가 복사됨2. 참조 타입- Object, Array 등- 메모리 주소가 복사됨 예시 코드// 1. 원시 타입 예시const 원시타입배열 = new Array(3).fill(false);원시타입배열[..

프로젝트 최적화 - bundle analyzer를 사용해 bundle size 줄이기 Bundle이란?여러 개의 파일을 하나로 묶어서 처리하는 것을 의미합니다.JavaScript 파일들을 묶어서 생성되며, 웹 애플리케이션에서 필요한 리소스를 단일 파일로 묶어 관리하고 전달하는 데 사용된다. 웹 애플리케이션의 경우 HTML, CSS, Javascript로 구성되는데 이들을 따로 모두 요청하게 되면 서버-클라이언트 요청 교환 횟수가 늘어나고 응답시간이 느려질 수 있는데 이런 필요한 파일들을 하나로 묶어 사용해 크기를 줄이고 요청횟수를 줄인다.일반적인 react앱과 달리 nextjs앱은 기본적으로 코드스플리팅을 지원해 페이지별로 필요한 스크립트만 번들링하게 된다.하지만 그렇다하더라도 불필요한 스크립트가 같이 ..