개발 일지

연습문제를 작성해보기에 앞서 프로젝트 세팅을 해보려고 한다. 번들러는 Vite를 사용하였고, Vite + Typescript + SWC 를 사용하여 프로젝트를 생성하였다. 아래 명령어를 입력하여 간단하게 Vite 프로젝트를 시작할 수 있다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io SWC는 Speedy Web Compiler의 약자로, Rust로 만든 자바스크립트 컴파일러 & 번들링 툴이다. 찾아보니 주로 Next.js와 호환하여 많이 사용하는 듯하다. (참고 글 : https://fe-developers.kakaoent.com/2022/220217-learn-babel-terser-swc/ ) 아무튼..

리액트란? - UI를 랜더링하기 위한 자바스크립트 라이브러리이다. - 공식문서 리액트를 설명하기에 앞서 대부분의 자바스크립트 기반의 프레임워크는 MVC(model-view-controller), MVVM(model-view-view-modal) 아키텍쳐를 사용한다. 여기서 모델은 데이터를 직접관리하는 영역 / 뷰는 사용자에게 보이는 영역 / 컨트롤러는 모델 데이터 조회, 수정, 변경된 사항을 뷰에 반영하는 영역이다. 일반적으로는 사용자의 어떤 행위가 발생하면 컨트롤러를 통해 뷰를 수정한다. 어떤 데이터가 변할 때마다 어디가 변했는지를 확인하는 것보다 그냥 아예 뷰를 갈아끼우는 방법을 고안한 것이 바로 리액트이다. 리액트는 정해진 규칙에 따라 뷰를 새로 렌더링하기로 한 오직 뷰(View) 만 신경쓰는 라이..

내가 보기 편하라고.. 만들어두는 도커 명령어 모음집.. 1. 실행되는 도커 컨테이너를 확인하기 # 전체 확인 docker ps -a # 가동중인 컨테이너만 확인 docker ps 2. 도커 이미지 확인하기 docker image ls 3. 도커 컨테이너 삭제하기 docker rm [컨테이너 이름] -f 4. 도커 컨테이너 실행 중지하기 docker stop [컨테이너 이름] 5. 도커 이미지 삭제 docker image rm image-id 또는 image name

1. Docker 설치하기 https://www.docker.com/ Docker: Accelerated, Containerized Application Development Docker is a platform designed to help developers build, share, and run modern applications. We handle the tedious setup, so you can focus on the code. www.docker.com # 터미널로 설치하기 brew install --cask docker 2. nginx 설치하기 docker pull nginx 3. nginx 실행 docker run --name nginx-server -d -p 80:80 nginx **..

git init git status git add . git commit -m "커밋메세지" git remote add origin "저장소 주소" git push origin main

1. brew 설치여부 확인 brew -v 🧐 설치가 안되어 있다면 👇 https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 2. rbenv 설치 brew install rbenv react native에서 ruby가 필요하다. rbenv는 ruby를 버전별로 지원한다. 3. ruby 2.7.6 설치 (2023년 3월 기준) rbenv install 2.7.6 rbenv global 2.7.6 rbenv rehash gem install bundler 4. node, npm 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/ins..

WARN Issues with peer dependencies found . └─┬ sb 6.5.16 └─┬ @storybook/cli 6.5.16 └─┬ @storybook/core-common 6.5.16 ├── ✕ missing peer typescript@"*" ├── ✕ missing peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" ├── ✕ missing peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0" └─┬ fork-ts-checker-webpack-plugin 6.5.2 └── ✕ missing peer typescript@">= 2.7" Peer dependencies that should be installed: react..

npm 사용시 캐시를 삭제하기 위한 명령어는 다음과 같다. npm cache clean --force 그런데, pnpm 을 사용해서 캐시를 삭제하니 해당 명령어가 작동하지 않았다. pnpm으로 캐시를 삭제하고 싶으면 다음 명령어를 사용한다. pnpm store prune 1. package-lock.json 대신 pnpm-lock.yml 파일 삭제 2. node modules 디렉토리 삭제 3. pnpm install

rebase를 이용해서 이미 push까지 완료한 커밋의 메세지를 변경할 수 있다. 1. git rebase HEAD~1 -i //직전 커밋 * git rebase HEAD~(커밋 단계: 몇 번째 전 커밋인지 작성) -i 2. 해당 명령어 수행시 직전에 작성된 커밋이 나올 것이다. 이때 pick > reword 로만 변경해준다. (아직 커밋 메세지를 변경하지 않는다.) pick 커밋메시지 내용 ↓ reword 커밋메시지 내용(수정하지 않는다.) (pick만 바꾼다.) :wq!로 빠져나온다. 3. 그럼 이제 커밋 메세지를 수정하기 위한 커밋이 나온다. 여기서 커밋 메세지를 수정하고 force push 를 해준다. git push origin 브랜치명 -f

warning: push.default is unset; its implicit value is changing in Git 2.0 from 'matching' to 'simple'. To squelch this message and maintain the current behavior after the default changes, use: git config --global push.default matching To squelch this message and adopt the new behavior now, use: git config --global push.default simple See 'git help config' and search for 'push.default' for furthe..