김성원의 코딩 일기

나는 si 업체에서 react, ts로 프론트를 개발하고 있다. 기존 html, css, js, jquery로 코딩을 하다. 올해부터 프론트는 react, ts로 코딩하기로 했다.  react 디자인 패턴 - 독학으로 react, ts를 공부하고 업무로 사용하는 것을 처음이라 고민을 많이 했다. 우선 디자인 패턴을 정하고 그것에 맞추어 작업한 적이 없어 이번은 디자인 패턴에 맞추어 작업할 것이며 지금 진행 중에 있다. 백엔드 api도 규격화가 되어 있어 다른 프로젝트들에서도 재사용이 가능한 컴포넌트들은 Container & Presentational 또는 Composition으로 하고 있으며 page들은 Custom Hook으로 진행하고 있다. 컨테이너 & 프레젠테이션 패턴 (Container & Pre..

HTML에서 스타일 적용 방식- html에 스타일을 적용하는 방법은 3가지가 있다.인라인 스타일 (style="")내부 스타일 (클릭 3. 외부 스타일 React에서 스타일 적용 방식- React에도 스타일을 적용하는 방법은 3가지가 있다.인라인 CSS (style={{}})CSS-in-CSS (.css 파일 사용)CSS-in-JS (styled-components, Emotion)적용 방식설명특징인라인 CSSJSX에서 style 속성을 객체 형태로 사용JS 값을 직접 스타일로 사용할 수 있지만 성능 이슈 (렌더링 시 새로운 객체가 생성됨)가 있으며 미디어 쿼리, hover, :before 등의 기능 사용 불가능함CSS-in-CSS기존 CSS 방식과 동일, className으로 적용기존 CSS와 동일한 ..

- react의 생명주기는 총 4개가 존재함. 1. 렌더링정의: 함수가 실행되거나 컴포넌트에서 UI를 그려지는 과정초기 렌더링: 처음으로 컴포넌트가 그려지는 것리렌더링: state나 props가 변경되었을 때 다시 그려지는 것const MyComponent = ({ text }: { text: string }) => { console.log("렌더링"); return {text};}; 2. 마운트컴포넌트가 생성되어 DOM레 추가되는 과정 초기에 한 번만 실행된useEffect(() => {}, [])관련 용어용어설명초기화 (Initialization)컴포넌트가 처음 만들어지는 과정Hydration서버에서 렌더링된 HTML을 React가 활성화하는 과정 (SSR 관련) 3. 업데이트 컴포넌트의 stat..

- 이미 만들어져 있는 hook과 util을 구분하는 것은 쉽다. 그런데 커스텀 hook과 util을 만들 때는 그냥 만들지 않고 명확한 기준점이 필요하다.1. util (Utility Funcions)정의: 특정 기능을 다양한 곳에서 재사용하기 위해 일잔적인 기능을 함수로 만들어 놓음.특징: 상태나 React의 생명주기와 무관하며 어디서든 호출 가능함.예제:// utils/format.tsexport const formatDate = (date: string) => { return new Date(date).toLocaleDateString();}; 2. hook (Custom Hook)정의: react의 상태나 생명주기를 활용하는 함수이며 재사용 가능한 상태 로직을 캡슐화함.특징: useState,..

1. 상태 관리란?상태란? 특정 시점에서 가지고 있는 데이터를 의미하며, 보통 사용자의 입력, UI의 변화 네티워크 요청 결과 등임.상태 관리란? 테이터(상태)를 효과적으로 유지하고 업데이트하는 방법을 의미함. 2. 상태 관리가 필요한 이유상태가 많아지면 컴포넌트 간 데이터 전달이 복잡해지고 유지보수가 어려워 체계적으로 생태를 함. 그래서 상태 관리를 위한 도구나 패턴을 사용함.  2-1 상태 관리 라이브러리를 써야 할 때상태가 많고 컴포넌트 간 공유가 많을 때상태가 여러 곳에서 변경될 때네트워크 상태(비동기 데이터)를 효과적으로 관리할 수 때 3. 상태 관리 방법로컬 상태 (Local State) -> useState, useReducer: 컴포넌트 내부에서만 관리하는 상태전역 상태 (Global, S..

Recoil이란? - Facebook에서 개방한 React 애플리케이션에서 상태 관리를 간편하고 직관적으로 할 수 있도록 설계된 라이브러리입니다. 큰 규모의 애플리케이션에 유용하며 컴포넌트 트리를 따라다닐 필요 없이, 필요한 곳에서 필요한 상태로 쉽게 가져올 수 있어 개발자의 생산성을 높이는데 도움을 줍니다. 특징 및 개념은 아래와 같습니다. 원자 상태 (Atoms): Recoil에서 가장 기본적인 상태 단위를 "아톰(Atoms)"이라고 부릅니다. 아톰은 애플리케이션의 상태를 나타내는 데 사용됩니다. 아톰은 atom 함수를 사용하여 정의하며, 각각의 아톰은 유일한 식별자를 가지고 있습니다. 선택적 불변성 (Immutable Data): Recoil은 불변성 원칙에 따라 상태를 관리합니다. 상태를 변경할 ..

상태 관리란? - 상태 관리(State Management)는 소프트웨어 개발에서 어플리케이션의 데이터와 상태를 관리하는 과정을 가리킵니다. 이는 어플리케이션의 상태를 다루고 업데이트하는 방법을 정의하는 것을 의미합니다. 주로 웹 애플리케이션의 프론트엔드 개발에서 중요한 역할을 합니다. 여기서 "상태"는 어플리케이션의 데이터와 사용자 인터페이스(UI) 상태를 말합니다. 예를 들어, 웹 애플리케이션의 로그인 상태, 사용자의 프로필 정보, 장바구니에 담긴 상품 목록, 사용자가 선택한 옵션, 페이지 내에서의 활성 탭 등이 모두 상태의 일부입니다. 상태 관리의 중요성은 다음과 같은 이유로 인해 부각됩니다: 데이터 공유 및 유지: 여러 컴포넌트 또는 페이지 간에 데이터를 공유하고 유지해야 할 때, 이를 효과적으로..

for문 말고 map() return 밖에는 for문을 사용할 수 있지만 안에는 사용이 불가능한다.(앞에 if와 삼항연산자 처럼) 그래서 map()을 이용한다. (공식 문서로 map()을 확인해보세요~~) key 리액트에서 key는 컴포넌트 배열을 랜더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다. 예를 들어 유독적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 구도 있다. key가 없을 때는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다. (우리가 알기 위함 보다는 컴퓨터가 알 수 있게 하는 기능이라고 생각하면 쉽다.) 그래서 데이터가 가진 ..

ref란? - ref는 특정 DOM에 작업을 해야 할 때 ref를 사용한다. 즉, DOM을 꼭 직접적으로 건드려야 할 때 사용하는 것이다. DOM을 꼭 사용해야 하는 상황 - start만으로 해결할 수 없는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등~~ 위와 같은 사황은 어쩔 수 없이 DOM에 직접적으로 접근해야 하는데, 이때 ref를 사용한다.

- 이벤트 핸들링은 JS공부하면서 알아야 하는 부분이니 특별히 설명하지 않겠습니다~~ 이벤트를 사용할 시 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성한다. - html은 onclick으로 작성하지만 react는 onClick으로 작성한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달한다. 3. DOM 요서에만 이벤트를 설정할 수 있다. - 즉 div, button, input 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 이벤트 종류 대표적인 이벤트 핸들러 종류는 다음과 같습니다. onClick : 마우스 클릭 이벤트를 처리합니다. onChange : 입력값이 변경되었을 때 발생하는 이..