개발자 되는 중/TIL&WIL

내배캠 TIL 2022.12.29

SeonChoco 2022. 12. 29. 22:05

프로젝트 했던 내용을 복습했다.

- 초기 세팅부터 배포까지 혼자 해보려 시도

- 다른 사람들이 짠 코드를 이해하는 시간을 가졌다.

 

오늘 만난 오류들

button안에 button을 넣어놔서 생긴 오류

- 상위 컴포넌트를 div로 바꿔서 해결

 

style을 적용할 때 리액트에서 쓰는 속성값이 아닌 자바스크립트 속성값을 넣어서 생긴 오류

-콘솔창에서 알려주는 리액트 전용 태그로 바꿔줘서 해결

 

나의 yarn.lock과 다른 사람의 yarn.lock이 깃헙에 커밋하면서 섞여서 난 오류

- 초기 세팅부터 다시 하면서 내 컴퓨터 전용 yarn.lock과 package.json 생성

 

- 다음부터는 커밋할 때 이 파일들은 gitignore에 넣어주어 다른 사람들 것과 섞이지 않게 해야 한다.

.env 파일에 지정한 환경변수가 적용되지 않았다.

-튜터님에게 여쭤봤고, 참고할 수 있는 블로그를 주셨는데, 그걸 보고도 실패했다....

 

localStorage에 용량이 가득차서 더 이상 넣을 수 없다는 오류

- localStrorage.clear() 이용하면 해결이 될 줄 알고 코드를 넣었다. 그런데 계속 오류가 나서 튜터님께 물어보러 갔다.

- 브라우저 로컬스토리지 용량 정해져있고 상당히 작다.  chrome 같은 경우 검색을 해보니  5mb였다.  그래서 그 이상의 용량이 들어가면 오류가 났던 것이다. 이런 문제 때문에 현업에서는 로컬스토리지를 이용하는 경우는 잘 없다고 한다.

- 해결방법 1: 용량을 조건으로 걸어 너무 큰 파일을 거른다

- 해결방법 2: 로컬스토리지를 거치지 않고 바로 데이터 url로 만들어서 스토리지로 보내준다.(어떻게 해야하는 거지?)

 

 

오늘 배운 것

 

리액트에서는 이미지를 상대경로로 바로 가져올 수 없고 import 해주면서 새로운 alias를 적용해 이용해야한다. 하지만 public 파일에서는 상대경로로 가져올 수 있다.

public 파일 안에 assets 파일을 만들고 이미지들을 그 안에 보관하고  import 없이 상대경로로 바로 이미지 적용해 보았다.

- 이미지 태그는 img인데 image라고 쓰는 실수를 하였다.

 

package.json은 프로젝트가 어떤 라이브러리들에 의존하고 있는지에 대한 정보를  개발자들이 공유하게 해주고, script를 이용해 변경하는 역할을 한다. 기본적으로 있는게 아니라 npm init -y라는 명령어를 넣어야 파일이 만들어진다. 이때 만들어진 파일들은 정보를 위한 것이여서 삭제를 해도 작동은 잘한다고 한다.

 

글리치를 이용해서 json-server 배포

https://velog.io/@elle2elle/Redux-%EB%B0%B0%ED%8F%AC

 

프로젝트 때 썼던 명령어 순서대로 다시 정리

npm install -g yarn

yarn create react-app 파일명

npm init -y

yarn add styled-components

yarn add redux

yarn add react-redux

yarn add react-router-dom 

yarn add react-redux @reduxjs/toolkit

yarn add json-server

yarn add axios

yarn add react-slick

yarn add slick-carousel

yarn add react-toastify

yarn add react-icons

yarn add firebase

yarn add dotenv

 

package.json 안에 script 안에 json-server 불러오는 단축키 설정하기  

"server" : "json-server --watch db.json --port 3001"

 

 

yarn add와 npm install이 거의 비슷한 역할을 하는 것 같다

npm install 이랑 npm install --save의 차이가 뭐지?

그런데 yarn add를 이용해서 라이브러리를 깔아주니까 dependencies에 자동으로 들어간다. npm을 이용해서 깔았을 때는 그렇지 않았다.

 

 

추가로 시도해보고 싶은 것들 

globalstyle을 이용해서 전체에 폰트 적용하기

삭제와 수정 전에 확인 창 뜨게하기(토스티로)

사진 수정 기능

게시물과 연결된 댓글 삭제 axios

 

 

npm start: .env.development.local > .env.development > .env.local > .env
npm run build: .env.production.local > .env.production > .env.local, .env
npm test: .env.test.local > .env.test > .env (note .env.local is missing)