my dev diary

프로젝트 개요 프로젝트 명 : Garden Gram 기획의도 : 최근 MZ세대에서 식물 키우기가 취미로 급부상 중이나, 이 취미를 공유하고 소통할 온라인 공간이 부족함. ➞ 반려 식물 이야기를 여러 사람들과 실시간으로 공유하는 SNS 제작하기. 필수 기능 구현 페이지 구성 : 메인페이지, 상세페이지, 로그인/회원가입 페이지 로그인 기능 이메일 회원가입 이메일 로그인 로그아웃 기능 유효성 검사 피드 업로드 기능(CRUD) 사진 및 코멘트 업로드 피드 수정, 삭제(등록자만) 사용자 프로필 수정 및 탐색 기능(사이드바 사용) 유저 프로필 수정 본인 피드 모아 보기 firebase 적용 vercel을 이용하여 배포하기 추가 기능 404 page 추가 탑 버튼 추가 구글 소셜 로그인 기능 KPT 회고 KEEP 수..

WIL 2023. 7. 2.

오류 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.

React Hooks 리액트에서 제공하는 기능. import 해야 사용 가능하다. React Hooks - useState useState useState는 가장 기본적인 hook. 함수 컴포넌트 내에서 가변적인 상태를 가지게 해 줌. 기본적인 형태 import { useState } from 'react'; const [state, setState] = useState(초기값); 함수형 업데이트 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다. // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 형태 setSta..

TIL 2023. 6. 21.

목차 Styled Components Sass CSS RESET Styled Components CSS-in-Js 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식. Styled Components 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 패키지란? React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 npm이라는 마켓 안에 모여 있음 사용하고자 하는 패키지를 npm install 또는 yarn add를 통해서 설치해서 사용 가능함. 사용하기 1. VScode Extensions 설치 vscode-styled-components 설치 2. vscode에서 프로젝트를 열고 vscode 터미널에서 아래 명령을 입력해서 패..

TIL 2023. 6. 20.

개발 환경 세팅 필수 프로그램 크롬 브라우저 VScode git Node 설치 확인 : 터미널에 node -v 입력 후 버전 확인 * NPM(Node Package Manager)은 노드 설치 시 자동으로 같이 깔림. : 노드 패키지 매니저. 마켓이면서 동시에 명령어이다. : 이것을 통해 리액트 패키지 등등을 설치할 수 있다. * yarn : npm 패키지. npm 명령어로 설치해줘야 함. : 설치 후에는 npm 명령어, yarn 명령어 둘 다 사용하면서 패키지를 설치할 수 있다. : npm의 역할과 동일하지만 마켓은 아니고 명령어로서 동일한 역할을 한다. : npm보다 성능적으로 조금 개선됨 -g = global 패키지 베이스(프로젝트 안에서만 쓰는 패키지)가 아니라 내 컴퓨터 전반에 사용할 수 있게끔..

TIL 2023. 6. 14.