Jaypedia

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

✔️ CodeSqaud Timeline 📆 11/1~12/2 : 코드스쿼드 코코아 프리코스 5주간 진행 📆 12/6~12/8 : 코드스쿼드 마스터즈 코스 테스트 3일 📆 12/10 : 테스트 합격 메일 수신 📆 12/13 : 코코아 사람들과 다같이 2차 미팅 📆 12/14 : 코드스쿼드 마스터즈 코스 최종 합격 메일 수신 📆 1/3 : 코드스쿼드 마스터즈 코스 시작 타임라인을 정리해 놓고 보니, 2021년의 한 달 반이라는 시간을 코드스쿼드와 함께했다. 코코아 과정을 시작할 때만 해도 마스터즈 코스를 갈지에 대한 확신은 없었는데 시간이 지나면서 점점 꼭 가야겠다는 확신이 들었다. 왜냐면 코코아 과정의 미션을 하면서 나의 부족한 점이 계속해서 보였기 때문이다. 또 열정 있고 열심히 하시는 분들을 보면서 동..

오늘 하루는 1월 1일이라는 상징적인 날이어서 그런지, 뭔가 평소와 같이 공부보다는 재정비의 시간을 가지고 싶었다. 2022년 1월 1일을 맞이해서 썸네일도 계절에 맞게 바꿔보았다. 재정비를 하더라도 커밋 잔디심기는 하고 싶어서 leetcode에서 알고리즘을 도전했는데, 30분 이상 머리를 싸맸지만 풀리지 않아서 보류해 두었다. 알고리즘을 꽤 간만에 도전하는 거여서 더 그런 것일 수도 있겠다는 생각이 든다. 그동안 프로젝트를 위주로 하면서 알고리즘은 잠시 쉬었었다. git 책을 읽고 명령어를 쳐 보며 CLI와 좀 더 친숙해지는 시간을 가졌고, pro git에서 tagging 부분을 읽어보았다. tagging 부분을 정리해서 이것을 commit했다. 미뤄두었던 영어 공부도 꾸준히 다시 시작하고 싶어서, 비..

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의 기본 컬러도 ..

React project 본격적으로 Mountain project를 시작했다. 나는 산 검색과 리스트 페이지를 하고 있다. 내가 맡은 부분을 구현하기 위해 search라는 브랜치를 만들어서 거기에 커밋하고 있다. 내일 미팅 때 검토를 받고, 구현했을 때 막혔던 부분들이나 미흡한 부분을 피드백 받은 후 merge를 진행할 예정이다. 네비게이션 바는 이런 식으로 만들어 보았다. Ant Design의 Menu 컴포넌트를 활용했다. 여기에 React router dom의 Link 컴포넌트를 써서 클릭하면 해당 페이지로 이동하도록 구현했다. 로고는 우선 삼각형 아이콘으로 대체했는데, 산 이미지로 바꾸는 게 나아 보인다. 산의 리스트를 보여주는 부분은 전에 했던 영화 보여주는 것과 로직이 흡사하다. 아직 백엔드와 ..

1. Git & Github amend, cherry pick, reset, revert, stash 같은, 들어는 봤지만 많이 쓰지 않았던 git 명령어들을 써 보면서 감을 익혀보았다. 어제의 목표대로 챕터 4와 5를 읽으며 천천히 따라했다. 이중에서도 amend와 stash는 정말 유용한데 내가 프로젝트 할 땐 쓴 적이 없다가, 신기하게 오늘 딱 쓸 일이 생겨서 이 둘을 모두 쓰게 되었다. 오늘 배운 것을 오늘 바로 적용할 수 있어서 좋았다. 덕분에 커밋하고 푸시까지 한, 오타 났던 커밋을 깔끔하게 수정할 수 있었다. 2. React 사진 업로드 기능 구현 완료 이제 사진 업로드 기능을 마무리했다. 영화 포스터를 넣으니, 그럴듯한 페이지가 완성되었다! Cloudinary를 이용해서 사진의 용량이 크더..

1. Git & Github, Sourcetree 본격적인 협업을 위해서 알아야 하는 필수적인 깃 사용법을 다지려고 했다. 혼자서 프로젝트 할 때와는 또 다르기 때문에 알아둬야 할 것들이 좀 있었다. 책은 예전에 구매해뒀던 라는 유명한 책을 읽었다. 총 9챕터인데, 아직 4챕터를 읽는 중이다. 사실 3챕터에 있는 내용이 협업 때 정말 필수적이라 이 부분을 잘 읽고 협업 때 깃 사용할 때 적용하려고 한다. VS Code의 Source control과 CLI만 계속 써오고 있었는데 Sourcetree를 써보니 정말 편리하고 시각적으로 잘 들어오는 게 느껴졌다. 색깔 구분도 명확하고, 포인터가 딱 있어서 좋다. 다운만 받아보고 읽지 않았던 도 읽기 시작했다! 많이 읽진 않았지만 오늘부터 꾸준히 읽어 보려고 한..