What I learned This Week

목표

• 리액트로 에브리타임 메인 화면 구현
• 리액트로 에브리타임 쪽지함 구현

결과

🏡 홈

✉ 쪽지함

TIL

210914

• 세미콜론을 잘 찍자
• <a> 는 외부 링크로 이동, <Link> 는 내부에서 주소 이동
• 주소 설정은 App.js에서 <Route exact path>로
• html 안에서 js 쓰려면 {} (jsx)

210916

• return을 빼먹지 말자
• 주소 지정해줄 때 {`/{변수}`}
• css: 가로로 나열할 때 flex, 세로로 나열할 때 block
• 가로로 나열하고 싶은데 세로로만 나열 돼서 해맸는데, 모각코에서 css에서 설정하면 된다고 알려줘서 금방 해결했다!

210917

• Route의 :no를 쓸줄 몰라서 쪽지 디테일 다음에 하기로 함

  

• 전반적으로 하나의 요소를 item으로, 제목과 큰 틀, 그리고 내용을 넣으며 반복문 돌려주는걸 그냥 파일명으로 잡았다. MyBoard만 다르게 했네..

210918

• div 안의 요소 가운데 정렬할 때 justify-content: center
• index에서 content 들어갈 부분 위, 아래 margin 주기 (navigation에 먹히지 않도록)
• 양 끝으로 몰고 싶을 때 justify-content: space-between

210919

• top nav랑 bottom nav에 가려지지 않도록, 내용물의 가장 밖 div에 padding 주기!
• 자주 사용되는 날짜(회색 글씨)는 index.css에 date로 스타일 지정

Prettier 설정

세미콜론 문제나, 편리한 들여쓰기를 위해서 extension을 깔아 설정해 줬다.

이 두가지였다.

ctrl+shift+p를 눌러 settings.json 을 검색하면

이런 파일이 나오고,

  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.singleQuote": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true

얘네들을 추가해주면 저장할 때마다 자동으로 들여쓰기 맞춰주고, 세미콜론도 찍어준당!!!