my dev diary

목차 프로젝트 개요 와이어프레임 API 설계 프로젝트 개요 프로젝트 명 MoodFood 주요 서비스 기분에 따른 음식 추천 사이트 사용하는 기술 HTML, CSS, JS, React, Redux, Redux Toolkit 와이어프레임 API 명세

TIL 2023. 7. 18.

리액트에서 패키지를 설치할 때 사용하는 npm과 npx의 차이점을 정리해 보았다. npm(Node Package Manager) node.js의 패키지 관리를 위한 패키지 매니저.(package manager) node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하여 패키지를 쉽게 설치/삭제할 수 있도록 도와준다. node.js를 설치하면 자동으로 생성된다. 사용법 # 패키지 설치 npm install 패키지명 # 패키지 삭제 npm uninstall 패키지명 # 패키지 업데이트 npm update 패키지명 위 명령어를 입력하면 원하는 패키지를 로컬인 현재 디렉터리(node_modules)에 설치/삭제할 수 있다. 글로벌 모듈 -g 옵션을 주게 되면 내 컴퓨터 안의 글로벌한 공간에 설치해 프..

TIL 2023. 7. 5.

오류 Firebase를 사용하여 프로젝트 진행 중, 로컬에서는 문제가 없다가 배포 후에 다음과 같은 오류가 생겼다. FirebaseError: Firebase: (auth/unauthorized-domain). 해결 도메인 허가가 안 돼서 생긴 문제이다. Firebase에서 승인된 도메인을 추가해 줬더니 해결됐다. 순서를 요약하면 다음과 같다. Firebase ➔ 빌드 ➔ Authentication ➔ Settings ➔ 승인된 도메인 ➔ [도메인 추가] 버튼 클릭하여 배포한 도메인 추가하기 * 참고 링크

TIL 2023. 7. 4.

로컬에만 남기고 원격 저장소에는 올리고 싶지 않은 파일은 .gitignore에 저장하는데, .gitignore를 잊어버리고 push를 하여 .env파일이 깃허브에 올라갔을 때 삭제하는 방법이 있다. 아래의 명령어를 입력하면 원격 저장소에서 commit history와 함께 삭제되고 로컬 저장소에는 남는다. git rm -r --cached .env 위 명령어를 입력하면 commit이 삭제된 것이 아니라 .env 파일만 삭제된 것임. 그러므로 입력 후 꼭 ➔ add ➔ commit(여기서 .env 파일만 삭제됐다는 기록은 생김) ➔ push 하는 순서를 거쳐야 한다. rm 삭제 --cached 원격에서만 삭제되고 로컬 저장소에서는 삭제되지 않음. -r +) 참고링크 remove env file from g..

TIL 2023. 7. 3.

오류 Error message dev브랜치에서 내 브랜치로 git pull을 하던 중 아래와 같은 오류가 발생했다. hint: You have divergent branches and need to specify how to reconcile them. hint: You can do so by running one of the following commands sometime before hint: your next pull: hint: hint: git config pull.rebase false # merge hint: git config pull.rebase true # rebase hint: git config pull.ff only # fast-forward only hint: hint: You..

TIL 2023. 6. 29.

localStorage란? - 브라우저 내에 임시로 데이터(key-value)를 저장할 수 있게 함. - 네트워크 요청 시 서버로 전송되지 않음 ➔ 서버로 전송되는 쿠키보다 더 많은 자료를 보관할 수 있음. ➔ 서버에 저장할 정도로 중요하진 않은 정보(정보가 날아가도 상관은 없지만 있으면 편리한 정보)를 저장 ex) “오늘 그만 보기” 버튼 클릭 여부 로컬스토리지에 데이터 추가하기 or 수정하기 localStorage.setItem("상품명", "화이트 셔츠") * 데이터 확인 : 개발자도구 ➔ Application ➔ Storage ➔ Local Storage 로컬스토리지에서 데이터 가져오기 localStorage.getItem("상품명") // "화이트 셔츠" 로컬스토리지의 데이터 삭제하기 local..

TIL 2023. 6. 27.

목차 프로젝트 개요 와이어프레임 API 설계 Commit Convention 프로젝트 개요 프로젝트명 : Garden Gram 주요 서비스 및 핵심 목적 : 반려식물을 키우는 사람들의 정보공유, 소통을 위한 SNS : 이미지 중심의 소셜 네트워크 서비스로, 좋아요 기능을 지원한다. 프로젝트 일정 23/06/26 - 23/07/03 와이어프레임 로그인 페이지 / 로그아웃 페이지 메인페이지 게시글 업로드 페이지 마이페이지_메인 / 수정 API 설계 Commit Convention 커밋 유형 의미 Feat 새로운 기능 추가 Fix 버그 수정 Docs 문서 수정 Style 코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우 Refactor 코드 리팩토링 Test 테스트 코드, 리팩토링 테스..

TIL 2023. 6. 26.

Redux란? “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리) 중앙 state 관리소 : 모든 State는 이곳에서 생성되고 관리된다. 리덕스를 사용하면 State를 공유하고자 할 때 부-모 관계가 아니어도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다. useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다. Redux 설치 프로젝트 생성 후 vscode 터미널에서 아래의 코드 입력 # redux와 react-redux를 설치한다. yarn add redux react-redux # 아래와 같은 의미 yarn add re..

TIL 2023. 6. 22.