전체 글
VSCode 에러, eslint prettier 충돌 에러로 빨간줄 지우기
코드 팩토리님의 Nestjs 강의 진행중 vscode에 빨간줄이 넘친다..eslintrc.js에 하기 코드 추가rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto' } ] } module.exports = { parser: '@typescript-eslint/parser', parserOptions: { project: 'tsconfig.json', tsconfigRootDir: __dirname, sourceType: 'module', }, plugins: ['@typescript-eslint/eslint-plugin'], extends: [ 'plugin:@type..
리눅스 로그 검색
TARGET이라는 메시지를 검색하고 TARGET을 포함한 50번째 줄까지의 로그를 확인할 수 있는 명령어단순 확인용으로 사용시 GREP이 적합한 선택grep -n "TARGET" sample.log | head -n 1 | cut -d: -f1 | xargs -I {} sed -n '{} , {}+50p' sample.loggrep -n "S6F11" sample.log:sample.log 파일에서 "S6F11" 문자열이 포함된 줄을 검색합니다.-n 옵션은 해당 줄 번호를 함께 출력합니다. 출력 형식은 줄번호:내용입니다.head -n 1:grep 명령어의 결과에서 첫 번째 줄만 가져옵니다. 이는 "S6F11"이 처음 등장하는 줄입니다.cut -d: -f1:head 명령어의 결과에서 줄 번호만 추출합니다...
연차 관리 캘린더 프로젝트 With ChatGpt #1
1. 프로젝트 초기 설정 npx create-react-app leave-managementcd leave-managementnpm install react-router-dom tailwindcss postcss autoprefixer 상태관리를 위한 react-router-dom과 디자인에 크게 신경쓰지 않기에 tailwindcss를 사용할 예정 (bootstrap 에 익숙하기도 하다) npm audit fix --force 프로젝트의 패키지 종속성에서 발견된 보안 취약점을 자동으로 수정하는 명령어이다. 보안 강화, 자동화, 최신 버전의 패키지 사용 등의 이점이 있지만호환성 문제 및 불안정성으로 인한 버그, 예상치 못한 변경으로 앱 동작 변경이 야기될 수 있다. 본인은 위 명령어를 사용하지 않을 예정..
연차 관리 캘린더 프로젝트 With ChatGpt #0
개인적으로 근태 관리 프로그램이 필요하여 리액트로 간단하게 만들어 보려 한다. 하지만 퇴근 후 만사가 귀찮으니 ChatGpt로 기획안부터 최대한 가이드를 받아 제작해보자. 우선적 목표는 본인이 사용하고자 함이니 사용자와 관리자의 역할을 통합시킨 프로그램을 작성할 예정대규모 보다는 소규모 팀에 적합할 것이다. 하기 문서는 chatgpt로 작성하였으며 일부 수정하여 작성하였다. 연차관리 프로그램 기획안(사용자와 관리자의 역할 통합) 1. 개요연차관리 프로그램은 직원들이 연차를 신청하고, 자신의 연차를 관리할 수 있는 시스템입니다. 모든 사용자는 자신뿐만 아니라 다른 직원들의 연차도 관리할 수 있는 권한을 가집니다. 이를 통해 작은 팀에서 효율적으로 연차를 관리하고 투명하게 정보를 공유할 수 있습니다.2. 주..
리액트 18 버전 정리
Automatic Batching기존 방식Automatic Batching 적용 // 기존 버전setTimeout(() => { setCount((count) => count + 1); setIsFull((isFull) => !isFull); // 각 state의 업데이트 마다 재렌더링이 발생}, 1000)// 현재 버전setTimeout(() => { setCount((count) => count + 1); setIsFull((isFull) => !isFull); // 재렌더링이 마지막에 한 번만 발생 (Automatic Batching)}, 1000);Transitions긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 처리하기 위한 개념 업데이트의 종류긴급한 업데이..
Mini Project
미니 블로그 만들기 요구사항글 목록 보기 기능 (리스트 형태)글 보기 기능댓글 보기 기능글 작성 기능댓글 작성 기능 화면 디자인 프로젝트 생성하기npx create-react-app mini-blog 프로젝트 디렉터리에 들어가서 앱 실행하기cd mini-blognpm start 필요한 패키지 설치react-router-dom v6리액트 앱에서 페이지 전환을 위해 사용거의 모든 리액트 앱에 필수styled-components v5스타일링 라이브러리npm install --save react-router-dom styled-components 주요 컴포넌트 및 폴더 구성하기글 목록 보기 기능 (리스트 형태)PostList, PostListItem글 보기 기능Post댓글 보기 기능CommentList, Co..