Jaypedia

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를 써보니 정말 편리하고 시각적으로 잘 들어오는 게 느껴졌다. 색깔 구분도 명확하고, 포인터가 딱 있어서 좋다. 다운만 받아보고 읽지 않았던 도 읽기 시작했다! 많이 읽진 않았지만 오늘부터 꾸준히 읽어 보려고 한..

12월 2일부터 24일, 지금까지 계속 리액트로 미니 프로젝트를 진행 중이다. 중간에 다른 이벤트들이 있어서 잠깐 보류한 적도 있었지만, 그래도 계속해서 달려오고 있고, 31일에 최종 마무리를 해서 완성할 예정이다. 사실 이번 프로젝트는 리액트를 알고 활용하면서 작품을 만든다기보다는 리액트를 배워나가면서 하나의 프로젝트를 완성시켜보는, 공부와 경험을 위한 프로젝트이다. 그렇기 때문에 코드의 품질은 아직 신경쓰지 않고, 우선 기능 구현과 익숙해지는 것을 우선하면서 진행하고 있다. CRUD 기능을 구현하고 있는데, 그중에 Update 기능을 어떻게 구현했는지 풀어서 써 보려고 한다. 사실 기능 구현은 다 했기 때문에 구현만 끝내고 넘어갈 수도 있겠지만, 한 번 정리를 해 두면 나중에 다시 같은 기능을 구현할..

1. React movie project (1) 영화 별점 로직 수정 별점 부분을 수정하느라 꽤나 많은 시간을 소요했다. Ant Design에서 별점(rating)을 가져와서 영화 별점을 매기는 것이었는데, 5점 만점 체계였다. 그런데 나는 10점 만점 체계로 하고 싶었다. 처음에는 단순하게, 그냥 데이터도 5점 만점으로 저장하고 렌더링할 때만 2배로 해서 할까 싶었다. 그러나 멘토로부터 피드백을 받았는데 DB와 UI의 일관성이 있어야 한다고 했다. 그래서 다른 방법을 구상해 보기로 했다. 우선 사용자가 입력한 rating을 db에 저장 시 2배로 저장해 줘야 한다. Ant Design 체계에서는 5점 만점에 4로 설정했더라도, db에서는 그게 8점으로 저장이 되어야 한다. 그렇게 하기 위해 46번째 라..

React 오늘은 어제 계획했던 대로 React에 올인을 했다. Modal 안에 Form을 구현하는 것이었는데, 다 처음 하는 것이었지만 워낙 Ant Design의 홈페이지에 예시가 잘 나와 있어서 가져다가 좀 응용해서 쓰면 구현이 되었다. Ant Design을 많이 활용해서 영화 생성 기능을 구현했고, 정규 표현식도 추가해 주었다. 사실 정규 표현식도 내가 짤 필요 없이 Ant Design에서 제공해 주는 Form에 쓸 수 있는 rules라는 속성을 활용하면 되어서 편리했다. 또한 유저가 이미지를 올리지 않았을 때 기본 이미지가 보일 수 있도록 삼항 연산자를 활용해 수정해주었다. 영화를 수정할 수 있는 기능도 구현했다. 영화를 받아와서 폼 안에 채워준 후, 수정이 반영될 수 있게 axios의 patch..