jfmam 개발 블로그

개요 지금의 상태관리 라이브러리가 생겨난 이유에 대해 알아보자 지난 면접에서 물어본 mvc, mvvm 패턴에 대해 이해하고 현재의 라이브러리들이 상태관리를 위해 어떠한 패턴을 도입했는지 알아보자 MVC 패턴 도입 mvc 패턴이란? Model, View, Controller의 줄임말로 패턴을 이용해서 구조화 된 코드를 작성하는 방식이다. 일반적으로 백엔드에서 주로 사용되었으며 각각 해당하는 부분은 다음과 같다. Model: 데이터를 수집 가공 한다 (데이터 베이스 내용 조회, 생성) Controller: Router (Request, Response) View: 뷰 생성 이전에 수업에서 JSP를 사용했을 때 주로 사용하던 패턴이였다. View 부터 데이터베이스 까지 강하게 의존성이 엮어서 위의 다이어그램 ..

개요 react suspense의 사용법에 대해 자세히 알아보자 react suspense 이전의 코드와 현재의 코드를 비교해서 장,단점을 비교해보자 react suspense가 나오게 된 계기는? 동시성(concurrent) 동시성모드 이전의 react는 stack 기반으로 동작 하였습니다. 태스크를 stack 담고 빌 때까지 동기적으로 처리를 하였습니다. 이러한 방법은 많은 태스크를 처리해야 할 때 문제점을 다가왔습니다. 예시로 현재 유저가 검색으로 list를 불러온다고 했을 때 당장에 생각해봐도 loading component를 보여주고 자동완성 UI도 보여주고 api 요청도 하고 유저로부터 input처리도 받게 되고 등 등 요구사항이 늘어날수록 처리해야 되는 것도 많아집니다. 그러다 보니 태스크가..

useCallback 과 useMemo 문제 useCallback과 useMemo는 캐싱을 통해 최적화를 하는데 모든 변수, 함수에 왜 안쓰나? 이유가 있다면 언제 써야 하나? useMemo: 이전에 계산된 값을 기억하여 더욱 빠르게 값을 반환한다. dependency가 변경될 때 함수가 실행된다. useCallback: useMemo는 값을 기억하고 있다면 useCallback은 함수를 기억한다. 작동방식은 useMemo와 같다. useCallback, useMemo 모두 이전에 사용된 값들을 저장하고 있기 때문에 오히려 무분별하게 사용할 경우 최적화가 되지 못하고 가비지 컬렉터가 되지 못해 메모리 사용측면에서 비효율적이 된다. 그렇기 때문에 언제 사용해야 할지 아는 것이 중요하다. 해결방법 일반적으로..

float float란 단어의 뜻 처럼 콘텐츠가 그 주위를 흐르도록 하게하는 css 속성 웹 레이아웃으로 많이 쓰이지만 레이아웃을 목적으로 설치된 것이 아니다. 초기 웹페이지의 경우 이미지 주위에 텍스트를 감싸기 위해 사용되는 용도로 주로 쓰였기 때문이다. 최근에는 flex, grid로 인해 잘 사용되지 않는 추세이다. 기본속성 값: left, right, none 기본값: none 이미지에 float: left속성을 주었을 경우 왼쪽으로 이동이 되며 텍스트 들이 이미지 주변으로 흐른다(float) float 특징 float된 요소는 일반적은 플로우를 벗어나지만 레이아웃에는 영향을 끼친다. 마진 병합이 되지 않는다. float요소는 기본적으로 width가 0이기 때문에 사용할 경우 지정해주자. 세부사항 ..

스토리북 사용하기 프로젝트를 진행하면서 현재 컴포넌트를 만들고 있다. 실제로 이제 스타일링을 적용하고 이벤트를 적용하는 과정에서 잘 동작하는지를 원하는데로 잘 구현이 되는지 확인해 보고 싶었다. 처음엔 마크업을 다른 tsx파일에 작성해 한번 테스트를 해볼까 했지만 최근 테스트 관련한 글을 읽고 UI가 잘 나오는지 확인하기 위해서 스토리북을 사용하는 글을 본적이 있어 스토리북을 사용해 보게 되었다. 문제 발생 storybook을 설치하면서 발생한 문제점이나 의문점들이 발생한 부분에 대해 정리하려한다. 설치환경 yarn berry next.js storybook v6 babel-loader v8 @babel/core v7이슈 node_modules파일이 생성되었다... node_linker의 경우 pnp로 ..

문제 텍스트가 긴 경우 UI에서 모두 보여주게 되었을 때 밑에 오는 컴포넌트 요소들이 묻히거나 디자인 의도대로 나오지 않는 경우가 발생한다. 이 부분을 개선하기 위해 나름 생각했던 부분에 대해 정리를 해보려 한다. 단순하게 maxLength 제한하기 input 태그에서 maxLength를 제한하여 디자인이 깨질 수 있는 것을 미리 방지한다. 그러나 별로 좋은 방법은 아니다.왜냐하면 영어나 한글의 경우 i 와 A 같이 뚱뚱함의 정도가 다르기 때문에 i가100자 들오가는 것과 A가 100자들어가는 것에는 큰 차이가 있다. css 이용하기 css를 이용하여 처리하는 많은 방법이 있고 몇가지 방법을 정리 하려 한다 컴포넌트 width를 제한하여 해당 width만큼은 채우게 하는 방법 overflow: hidde..

Todo [] nextjs를 이용하여 github page를 배포한다. Git 환경설정 리포지토리 만들기 github page에서 리포지토리 생성(create repository) 이름을 xxx.github.io) 로 설정 (계정이름 뒤에 github.io를 붙여서 생성) github page 브랜치 설정하기 gh-pages 브랜치 생성하기 settings > pages > source 의 브랜치를 gh-pages로 변경 프로젝트 환경설정 nextjs를 이용하여 페이지를 만들었으나 github page는 정적사이트를 배포하는데 맞추어져 있음으로 ssr기능을 지원하게 된다면 다른 배포방법을 선택하는 것을 추천한다 nvm을 통해 현재 LTS 버전으로 변경 팀 프로젝트로 진행하는 상황이였기 때문에 node의 ..

개요 코드스타일 통일을 위해 rule을 추가 vscode에서 eslint나 prettier가 제대로 동작하지 않는 경우가 발생하였고 이를 해결하는 방법에 대해 알아보자 lint 적용 방법에 대해 간단한 정리 eslint eslint vscode에서 동작이 제대로 되지 않는 경우 setting.json에 코드 추가 Ctrl + shift + p 를 눌러 setting(JSON) 파일 실행 ... "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[typescript]": { "editor.formatOnSave": true, }, "eslint.alwaysShowStatus": true, "[typescriptreact]": { "editor...