Jaypedia

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. CodeSquad Day 2 어느새 코드스쿼드 2일차. CodeSquad Log에 글을 남겼다. 내일은 Algorithm Day! 어떤 알고리즘을 풀지 궁금해진다. 알고리즘을 제대로 푼 지가 너무 오래되어서 머리를 좀 굴릴 때가 되었다. 2. React Project 일주일간 했던 것에 대해 간단히 발표하는 미팅을 오늘 8시부터 약 30분간 했다. 사실 이번 주말, 즉 새해에 많이 노력을 투입했어야 하는데 계획을 세우고 재정비를 하느라 그러지 못해서 아쉬운 부분이 있었다. 그래도 우선 커뮤니티 페이지 자체는 완성을 했고, 이제 로직을 붙이고, 백엔드가 완성되는 대로 API 연동도 해야 한다. Styled Components 를 활용해서 인라인 스타일링을 바꾸는 작업도 해 줘야 한다. 아래 글들은 S..

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월 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 컴포넌트를 써서 클릭하면 해당 페이지로 이동하도록 구현했다. 로고는 우선 삼각형 아이콘으로 대체했는데, 산 이미지로 바꾸는 게 나아 보인다. 산의 리스트를 보여주는 부분은 전에 했던 영화 보여주는 것과 로직이 흡사하다. 아직 백엔드와 ..