작은 지식주머니

React 앱을 생성할 때 ESLint를 설정하여 각 프로젝트에 맞는 컨벤션을 정할 수 있습니다. 하지만 지금까지 복사 붙여놓기 식으로 ESLint를 써왔어서 내가 쓰는걸 좀 알고 쓰면 좋을 것 같아서 학습 겸 정리를 해보도록 하겠습니다. ESLint 란? JavaScript, JSX의 정적 분석 도구 입니다. 코드를 일관성 있게 짤 수 있도록 도움을 줄 수 있는데요. 협업을 할 경우에 효율이 증폭되는 도구입니다. ESLint 설정을 하는법. 만약 CRA 를 통해서 앱 생성을 하였을 경우 package.json 폴더 안에 eslintConfig 스크립트가 생성되어있습니다. 해당 파일 내에서 수정은 가능하지만 가능하면 root 폴더에 .eslintignore , .eslintrc.js 파일을 생성해서 따로..

React-native 인 액션 챕터 1에서 추가로 설명이 필요할 것 같은 내용을 찾아서 공부한 내용을 기록해두었습니다. chapter 1 . 스레드 처리 네이티브 기기와 통신하는 모든 자바스크립트의 기능은 분리된 별도의 스레드로 처리됩니다. 사용자 인터페이스와 애니메이션 구동이 별도의 간섭없이 자연스럽게 보이게 됩니다. 리액트 네이티브 앱 내에서 실행되는 스레드는 API 호출, 터치 이벤트, 인터렉션입니다. 네이티브 안쪽의 변화가 필요하다면 일괄처리하여 네이티브 쪽으로 전달이 됩니다. 이러한 작업은 이벤트 루프의 마지막 단계에서 매번 이루어지게 됩니다. 이 내용이 요점정리가 되어있었는데요. 조금 더 심도있게 내용 파악이 된다면 좋을 것 같습니다. React-native 0.67.4 아키텍처 React..

작성일자 2023 04 23 / 해당 NEXT.JS 버전 13.3.1 프론트엔드 웹에서 가장 핫하다는 NEXT.JS 저희만 모르고 가면 안되겠죠? 그래서 NEXT 가 가지고 있는 장점이 무엇인가요? 다들 알고있겠지만 CSR과 SSR을 동시에 사용할 수 있다는 점입니다. 하지만 NEXT.JS를 SSR, CSR, SPA 관점으로만 이해하시는 분들이 많았습니다. NEXT.JS는 React 라이브러리를 이용해서 웹 어플리케이션을 만들기 위한 Framework 입니다. React는 UI만을 다뤄오고 React를 이용해 어플리케이션을 개발하면서 필요한 나머지 부분들을 서드파티 라이브러리로 대체되어 개발되고있습니다. NEXT.JS 는 그 React를 사용하고 있는 하나의 프레임워크 라고 생각하시면 될 것 같습니다. ..

글을 너무 오랜만에 씁니다... 이제부터 열심히 써볼려고 합니당.. CATE 어드민 페이지에서는 유저 / 아티스트 / 스페이스 / 전시 등을 각각의 페이지에서 관리하고 있습니다. 각각의 페이지에서 특정 유저들을 검색 할 수 있도록 도와주는 SearchForm 컴포넌트가 있습니다. 해당 컴포넌트는 각 페이지의 데이터 포맷에 맞는 컴포넌트로 분리 되어있었습니다. , , 등등… 해당 컴포넌트에 필요한 UI 컴포넌트의 수와 / 타입이 달랐기 때문에 빠르게 분리하여 작업을 진행하였습니다. 하지만 SearchForm 기능변경 요청이 들어오면 위 컴포넌트의 내용을 전부 변경해야하는 나쁜 코드였습니다. 확장성 측면에서 개선한다면 좋을 것 같아서 SearchForm용 공통 컴포넌트를 제작하기로 결정하였습니다. 우선 어떤..