본문 바로가기

Front-End94

커스텀 Hooks 벨로퍼트와 함께하는 모던 리액트: 커스텀 Hooks 만들기 커스텀 Hooks에 관한 "첫인상" (1) 여러가지 Hooks들을 합친 함수로 모듈화가 가능(한 것 같다) (2) 자주 사용되는 로직을 모듈화 가능(예: input 관련된 state) (*궁금한 점*) 어떻게 쓰이는걸까.. onChange나 다른 함수가.. 어떻게 값을 반영하는걸까.. 1. src 폴더에 hooks 디렉터리 만들기 2. use[함수명].js (예: useInputs.js) 3. useState, useEffect, useReducer, useCallback등 Hooks를 활용하여 기능을 구현. 4. *컴포넌트에서 사용하고 싶은 값들을 반환* => 여기서는 initialForm으로 초기화를 했는데, 객체, 단일변수 모두 가능한 것 .. 2023. 3. 6.
reflow, repaint (랜더 트리, reflow, reflow를 줄이는 예) 브라우저의 이해 #1 Reflow, Repaint에 대하여 알아봅니다. 폴시랩 자바스트립트, PHP, 워드프레스, HTML, CSS, 팁, 가이드, 일상이야기. falsy.me [브라우저의 랜더링 과정을 이해하고 reflow와 repaint를 줄여서 성능을 높이자. 불필요한 성능 저하를 줄이자] 1. 브라우저의 랜더링 과정 DOM 트리와 스타일 규칙을 합쳐서 랜더 트리를 생성. reflow: 배치. 레이아웃을 위치시킴 랜더 트리: display none의 경우 DOM에는 존재하지만, 시각적으로는 존재하지 않기 때문에 랜더 트리에 할당되진 않는다. position이 absolute,fixed 의 경우 DOM 트리와 다른 위치의 랜더 트리에 할당 랜더트리가 탐색되고 paint 메서드가 호출되어 UI 기반의 .. 2023. 3. 5.
useReducer를 사용하는 이유 그리고 initialState가 객체일 때 사용하는 방법에 대한 생각 정리 useState가 있기 대문에 useReducer를 사용하는 이유를 몰랐다. useState로 관리를 하면 된다고 생각했기 때문에, 늘어나는 useState를 보면서 "이게 맞나?" 하는 의문이 들때도. 그런데, 팀원분들과 코드리뷰를 하면서 useReducer를 모듈화 하신 분이 계셔서 관심을 갖고 사용해보려고 했다. 내가 생각하는 useReducer를 사용하는 이유 useState가 많아지는 상황이라면 사용을 고려할 수 있다. 모듈화를 통해 코드를 분리하여 재사용이 가능하다. useReducer에서 reducer를 모듈화 하기 위한 방법을 이전부터 고민하긴 했다. 검색했을 때 보통의 예시는 increase와 decrease에 대한 정석 코드. 처음에는 코드를 기억했다. 1. 구조는 useState와 똑.. 2023. 3. 3.
리액트 프로젝트 진행시 고민하는 부분 0. eslint, prettier, husky 1. 폴더 - component - pages - router 2. 컴포넌트 - Input - button - 기본 컴포넌트 - 중복 컴포넌트 3. App, index, router . . . 4. useState가 많아지는 경우. - useReducer 5. 최적화 - useReducer - useMemo - useCallback 6. axios 사용 7. 전역 데이터 관리 - Reducer / contextAPI / Recoil... => . . . 언제. . . 8. css module - import styles from '[파일명].module.css' 9. 배포방법 - AWS - vercel 10. github Actions CI/CD 2023. 3. 3.
css module 컴포넌트에 props로 css module 변수를 전달하는 경우, styles.className 이 아니라, styles[className] 을 사용하면 된다. //Button.tsx 버튼 2023. 3. 2.
axios 공식문서 따라서 (일부) 작성하면서 이해하기! axios-docs 지금까지는 fetch를 사용했지만, 다른 팀원들 전부 axios를 사용했기 때문에 axios를 공부하려고 한다. 흥미로운 점은, (1) 인스턴스를 만들고 (2) 인터셉터를 활용 (3) response에 대한 모듈화(인 것 같았다) fetch를 썼던 이유는 추가적인 패키지를 설치할 필요가 없었기 때문이었고 기본적인 GET, POST, DELETE, UPDATE하는데 문제는 없었다.(...) 나는 fetch(즉, API 통신 부분)를 특별하게 모듈화 하지 않았지만(못했지만..) 일반적으로는 모듈화를 통해 중복코드를 줄이면서, 코드를 분리해 뷰는 뷰만, API는 API 만 집중하도록 만드는 패턴이 자연스러운 것 같다. (MVC로 가는 길) (프로그래머스 과제관 해설에서도 fetch 사용, .. 2023. 2. 27.
TypeScript 제네릭 (arg: T):T 여기서 는 Type의 약자로 제네릭을 선언할 때 T를 관용적으로 사용한다. 여기에서 다이아몬드 연산자 안에 있는 T는 타입변수라고 한다. 이제 이 identify 함수는 T라는 타입 변수를 갖게 된다. 그리고 argument와 return의 type은 T라는 타입 변수로 동일하다. async-await은 Promise를 자동으로 만들어주고 Promise를 해체해서 결과만을 반환해줌. 이때 반환형이 Promise였다면 T타입 형태로 반환 const c = new someClass(...) someFunction(...); 컴파일 될 때 자리에 이 들어가게 됨. 이 경우, someFunction(..)이라면 T 타입이 인자, 본문, 반환형에 모두 써줄 수 있음 https://heropy... 2023. 2. 23.
코어 자바스크립트 2023/03/05 02 실행 컨텍스트 1. 실행 컨텍스트 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 => 콜스택에 쌓았다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행 -> 실행 컨텍스트를 생성하고 콜스택에 담는다. 그 후 실행 컨텍스트와 관련된 코드들을 순차 실행(즉, 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점) 2. VariableEnvironment 3. LexicalEnvironment 2-3-1 environmentRecord와 호이스팅 - 호이스팅: 식별자들을 최상단으로 끌어올림(그 뒤 실제 코드를 실행). environmentRecord의 수집 과정을 추상화한 개념 - 함수 선언문: 전체 호이스팅 - 함수 .. 2023. 2. 9.
기초부터 완성까지, 프런트엔드 2023/02/01 (수) 2장 HTML과 CSS 2.1 HTML 1. 시맨틱 - '의미론적인' : 가독성이 높아지고 유지보수가 쉬워진다. 계층적으로 파악하기도 용이하다. (예) 태그를 마구 사용하는 것 보다, 상황에 따라 의미있는 태그를 사용하는 것. 등 2. SEO(Search Engine Optimization): 검색 엔진 최적화. 사이트를 찾기 쉽도록 개선하는 노력 (1) 시맨틱하게 HTML 작성 (2) 작성 (3) 을 이용해서 페이지에 설명 남기기 (4) 로 인코딩 방식 지정하기: 통일된 방식으로 인코딩을 노출함 (5) open graph, twitter 태그를 사용해 외부 사용자를 유인하라 2.2 CSS 1. (예) 선택자 { 프로퍼티: 값; } 2. 스타일 상속: 상위 요소에 적용된 내용이.. 2023. 2. 2.

티스토리툴바