봉봉이봉BBEB 프로젝트
1.봉봉이봉BBEB 프로젝트 시작
BBEB project
2.봉봉이봉 프로젝트 기획안
BBEB
3.BBEB router, 프로필 사진 변경
router, 프로필 사진 변경
4.BBEB hover, active, MUI icon, color 커스텀
폰트 적용했더니 확실히 예쁘다! 빨리 사진들도 넣고싶다. hover & active 이 버튼에 마우스를 갖다대면 색이 진해지게 할 것이다. 이 방법을 써서 구현하고 있었는데 코드 리뷰하면서 PM님이 더 쉬운 방법을 알려주셨다. sx는 MUI 컴포넌트에 스타일을 지정하게 해주는 속성이다. 
현재까지 게시글, 헤더, 프로필을 완성했다. 그런데 생각보다 수정해야할 부분이 많아서 전체적인 코드 정리를 위한 이슈를 팠다! px => %로 레이아웃 크기 단위 변경 지금까지 모든 작업을 px로 조정했는데 문제가 생겼다. px로 레이아웃 크기를 조절할 경우 컴퓨터마다 화면 크기가 달라 레이아웃이 안예뻐지는 이슈가 발생했다! 이를 해결하기 위해 %를 단...
6.BBEB MUI component 커스텀(TextField icon button넣기, menu)
광기의 댓글창,, 좀 무섭다 TextField에 IconButton 넣기 TextField 우측에 아이콘 버튼을 넣어볼 것 이다! 원하는 icon을 찾아서 TextFiled 안에 코드를 이렇게 작성해주면 된다. 와.. Menu 위치 조정 
8.BBEB 애니메이션 효과
밀리지 않고 꼬박꼬박 벨로그 작성하는 나 칭찬합니다. 애니메이션 효과를 넣어보겠다. npm install react-reveal로 설치하면 되는데 의존성 충돌이 발생해 npm install react-reveal --force로 설치해줬다! 사이
9.BBEB 마우스 따라다니는 봉봉이
먼저 귀여운 봉봉이를 소환해준다. 마우스를 따라다니는 요소는 크기보다는 비율이 망가지면 안되기 때문에 px로 크기 조절 해줬다. 화면 전체 안에서 움직였을 때 mouseMove 함수를 실행시키기 위해 onMouseMove를 가장 Stack 안에 써줬다. 콘솔에 제대로 찍히는지 확인 스크롤을 따라 내려오지 않는 문제 client를 쓸 경우 스크롤이...
10.BBEB 이모티콘 미리보기, 댓글 더보기 기능
이모티콘 미리보기 이모티콘을 선택하면 저렇게 나오는 미리보기 창을 만들어볼 것 이다! 레이아웃은 카카오톡과 비슷하게 짜봤다. 이모티콘 이미지들은 이모티콘 선택창에서 map을 이용하여 정렬하기 쉽도록 배열로 저장했다.(프론트에서 이미지를 저장, 백엔드에서는 번호만 요청하고 받는 식) useState로 이모티콘이 선택되지 않았을 때는 emoticonSt...
11.BBEB 게시글 번호에 따라 url 다르게
코드를 작성하고보니 url에 따른 게시글 번호인 것 같긴 하지만 일단 정리.. 넘넘 바쁘당 게시글은 했구 댓글 작업하면서 정리 해보겠다. 일단 app.js에서 url을 요렇게 바꿔준다. useParams를 이용해 url에서 postId를 가져온다. get 코드 postId 들어갈 부분에 ${postId} 넣으면 끝
12.BBEB Github Pages로 배포
시간이 많았으면 cicd도 도전하고 싶었는데 촉박해서 쉬운 방법을 선택했다ㅠㅠ Github Pages 배포 터미널에 npm run build 입력 build 파일이 생성됐다 이제 Github Pages로 배포할 것이다. 깃허브 접속 후 레퍼지토리 생성 레퍼지토리 이름은 아이