Jaypedia

React Study 해커톤과 건강 악화로 2주 연속 참여하지 못했던 React Study, 오늘은 드디어 참여할 수 있게 되었다. 나는 Custom Hook 부분 발표를 맡아서 했다. 공식 문서를 요약하고, 유용한 Hook을 내가 사용한 것을 예시로 들며 소개해 주었다. 다른 분들의 발표도 매우 유익했다. 발표를 들으며 노션에 필기해두었는데, 정리해서 블로그에도 올릴까 생각중이다. 이력서 감 잡기 난생 처음 작성해 보는 개발자 이력서라서 어떻게 하면 잘 쓸지에 대한 고민이 있고 막막했는데, 다른 사람들의 이력서를 보면서 조금씩 감을 잡고 있다. 어느정도 작성이 되었다 싶으면 다른 사람들에게 보여주면서 피드백을 요청해 보려고 한다. 사실 현재 노션 템플릿이 그다지 마음에 들진 않아서, 템플릿부터 좀 바꿔..

이번엔 글쓰기 기능을 구현해 보자. 저번에 UI는 완성해 놓았다. Ant Design을 활용해서 깔끔한 UI가 완성되었다. 🚀 목표 글쓰기 버튼을 눌렀을 때, 임시 DB 파일인 data.json에 작성한 글이 등록되도록 하는 것이 목표이다. 이 역시 저번에 했던 영화 앱에서 했던 것과 매우 유사한데, 그 당시에는 TIL에만 간략하게 정리하고 따로 게시물로 정리해 놓진 않아서 이번 기회에 정리해 보려고 한다. 🤔 고민했던 것 글을 작성한 후 글쓰기 버튼을 눌렀을 때, 모달이 떠서 '정말 작성하시곘습니까?' 같은 안내 문구가 또 나오게 해야 하나 싶었다. 그런데 다른 웹 사이트의 글쓰기 기능을 본 결과, 있어도 그만 없어도 그만 같았다. 그래서 일단은 넣진 않는 걸로. ✅ 유효성 검사 글 제목이나 내용 중 ..

커뮤니티 페이지에서 카테고리 버튼을 눌렀을 때 해당하는 카테고리에 맞는 글만 보여지도록 구현해야 했다. 카테고리는 중복 선택이 안 된다는 것을 감안해서 Ant Design의 Radio Button을 활용하기로 했다. 기존에는 Tag 컴포넌트를 사용했었지만 Radio.Button으로 바꿔주었다. axios를 활용해 카테고리 배열을 가져온 후, categories가 undefined가 아니면 map을 돌려서 라디오 버튼을 생성해 준다. 이 때 "모든 글"을 볼 수 있도록 버튼이 하나 더 있어야겠다고 생각했다. 그래서 defaultValue에도 설정해 주었다. onChange 속성에는 함수를 넣어주었다. useState 훅을 활용해서 category를 바꿔 준다. 이렇게 onChange 이벤트가 일어날 때마다..

1. CodeSquad Day 3 정말 오랜만에 알고리즘을, 그것도 백준에서 2문제를 풀었다. 추가 문제도 있었지만, 나중에 풀어보는 것으로. 우선순위를 잠시 미뤄두었다. 내일은 CS 2번째 문제가 올라올텐데 어떤 문제가 나올지 궁금하다. 이번에도 잘 학습해보자! 2. React Project Community Detail page * Styled Components 파일을 따로 빼서 적용하니 훨씬 깔끔해졌다. jsx 확장자 파일에는 스타일이 포함되지 않는다. * mock data를 만들 때 백엔드 DB API를 참고했는데 좀 다른 부분이 있어서 이 부분을 멘토님에게 질문을 드렸고, 나의 의문사항이 반영되었다. * My movies 프로젝트에서 했던 것처럼 axios와 json server를 활용해서 데..

1. CodeSqaud Day 1 올해 첫 월요일이자 코드스쿼드 마스터즈 첫 날. 오전에는 오리엔테이션, 오후에는 미션을 했다. 9시부터 10시 반까지는 게더타운에서 코드리뷰를 하고 있길래, 가서 열심히 들었다. 나도 발표하고 싶었지만 아직 완성되지 않은 부분이 많아서 다른 분들 설명을 열심히 들어보았다. 정말 다들 잘 하셔서 놀랐다! 배울 게 앞으로도 정말 무수히 많을 것이다. 내 코드도 좀 다듬어주었다. 아직 못한 부분은 내일 아침에 더 할 예정이다. 2. React project 커뮤니티 페이지를 만들고 있다. 우선 기능을 구현하기 전에 전체적인 골격을 만들어주었다. 게시판 CRUD를 Ant Design을 이용해서 구현해야 한다. 커뮤니티 메인 페이지는 Layout과 Table을 활용해 보았다. S..

React project styled components를 적용한 부분을 좀 손봐주었다. feature/.search 브랜치를 develop 브랜치와 머지했다. pull request를 하는데 package.json 파일에서 충돌이 나서, 해결 후에 다시 머지해주었다. community 페이지를 이제 본격적으로 시작해야 한다. 게시판 CRUD 구현을 Ant Design 이용해서 하는 것이다. 프로젝트 외에는 영어 공부를 좀 하고, 포스트를 업로드했다. 개발 공부한다고 영어공부를 좀 소홀히 했는데, 짬을 내서라도 조금씩 표현들을 배우고 익혀야겠다. 확실히 외국어는 꾸준히 하지 않으면 금방 까먹게 된다. 또 내일 시작할 CodeSquad 마스터즈 코스를 위해서 커리큘럼을 좀 정리해 보고, 월별 계획을 짤 수..

1. React mini project 12월 2일부터 시작한 프로젝트를 마무리하고, Readme도 정리해서 올렸다. 그런데 올리는 과정에서 에러가 나서 이것을 고치느라 좀 진땀을 뺐다. 이전에 했던 커밋 기록이 100여 개가 넘는데 이것이 한 번에 다 날라갔었고, 다행히 구글링을 해서 복구할 수 있었다. heroku로 배포를 하고 나서 생긴 .git 파일로 인해서 이게 좀 꼬여서 문제가 생겼던 것이었는데, 그래도 침착하게 잘 풀어나가서 해결해 낼 수 있었다. 내일은 이 프로젝트를 진행하면서 내가 배운 것들과 앞으로의 React 공부 방향성에 대한 글을 써 볼 예정이다. 2. React mountain project 폴더 구조를 개편하고, 파일 이름과 컴포넌트 이름을 바꿔서 좀 더 직관적으로 해당 컴포넌..

React mini project (1) moment.js 이용하여 Date & Time 표시하기 moment.js 라이브러리를 활용해서, 영화 카드를 생성했을 때의 시간을 표시할 수 있도록 했다. 또한 Detail 페이지에서는 영화를 수정했을 경우 Last modifed 라고 표시되며 가장 최근에 수정된 시간이 표시되도록 했다. 사실 이것을 이용한 이유는 format을 좀 더 간편하게 적용하기 위한 것도 있지만 sort 기능을 적용하고 싶어서도 있었는데, 그 부분은 아직 적용하지 못했다. 어떤 방식으로 할 지 고민이 있었기 때문이다. 내일 다시 시도할 예정이다. (2) heroku를 이용하여 배포하기 오늘 가장 많은 시간을 들였던 배포하기. json server를 적용하면서 배포를 하려니 생각보다 까다..

React mini project (1) Responsive layout 모바일에서도 제대로 보일 수 있도록 레이아웃을 변경해 주었다. 뒤늦게 변경하면서 느낀 교훈은, 애초에 처음 앱을 설계할 때부터 모바일을 꼭 고려하고 만들어야 한다는 것이다. 물론 지금은 React를 배우면서 만드는 것이니 뒤늦게 해도 그러려니 하지만, 다음 프로젝트부터는 꼭 처음부터 고려를 해서 만들어 나가야겠다는 생각이 든다. Mobile first라는 말이 있는 만큼, 모바일 버전을 고려해서 만드는 게 중요해 보인다. 특히 전반적인 패딩을 어떻게 줘야할 지 많이 헤맸다. Ant Design의 Space를 써야 할지, 아니면 그냥 CSS로 패딩을 준 후 media query를 이용할지. Space의 경우 여러 Row와 Col이 적..

1. Project (1) 카카오맵 API 사용하기 카카오지도 API 사이트의 가이드를 참조하여 키를 발급하고, 함수형 컴포넌트로 Map을 만들어서 그려주는 것까지 했다. 여기에 약간 추가해서 토글 버튼을 클릭하면 지형정보가 보이게 했다. 아무래도 등산이 주제인 웹사이트이니, 지형이 보이면 좋을 것 같다는 생각에서였다. 그 후 검색 기능을 구현해야 하는데, 이 부분을 바꿔야겠다는 생각이 들어서 내 아이디어를 정리해서 슬랙에 남겼고, 나의 아이디어가 받아들여져서 그대로 구현해 보려고 한다. (2) 네비게이션 바 완성 산 로고도 Canva에서 직접 만들었다. 배경도 투명하게 만들어서 로고처럼 보이게 했다. 내친 김에 Favicon 역시 변경해 주었다. 이건 정말 간단했다. Ant design의 기본 컬러도 ..