스파르타코딩클럽 리액트 심화반 2주차 후기

리액트 심화반 2주차! 어느정도 앱의 형태가 잡혔다!! 커밋할 체인지들도 너무 많았음ㅎㅎ
이번 주차에 내가 바꾼 것들!

1. Post의 내용을 좀 더 인스타그램스럽게 바꿔보았다. 예를 들면 스크린샷에 보이는 댓글란의 배치! 원형의 사용자 프로필 이미지는 댓글의 내용이 길어질 경우 사용자의 이름 바로 옆에 배치될 수 있도록, flex-start를 적용했고, 사용자의displayName은 댓글 내용과 같은 라인에 배치되되, 약간의 공백과 굵은 글씨로 구별이 될 수 있도록 했다. 또 moment 모듈의 locale/ko를 사용해 댓글과 게시물의 작성 시점을 'SNS스럽게' n시간 전, n일 전으로 렌더링했다.
2. 파이어베이스의 인증 함수를 이용해서 로그인,가입,로그아웃을 구체화시켰고, 로그인 상태에서만 나타나야 할 플러스 버튼(게시물 추가버튼)이나 헤더의 상태 전환 역시 매끄럽게 이뤄진다. (feat. Permit.js)
3. 사실 기능구현이 더 중요한 시점이라 화면 레이아웃이나 디자인 요소는 어느정도만 해도 되는데, 잘하고 싶어서 여기저기 구글링을 했고, 그 과정에서 Figma에 인스타그램 템플릿이 있어서 많이 참고했다. 역시 구글님은 모든 걸 알고 계셔!!!
4. 스파르타코딩클럽의 스파랜드(게더)에 혼자 놀러가보기만 했지 사람들과 소통해본 적은 없었는데, 이번에 심심해서 들어가있다가 ㅅㅎㅇ(실명은 왠지 안될거같아서)매니저님의 주도로 영상으로 사람들과 소통했다. 스파랜드 개장한 이후로 가서 출석체크만 할 줄 알았지 스파르톤할 때 말고는 사람들과 얘기해본 적이 없는데, 이렇게 다양한 환경에서 다른 수강생들과 매니저님, 강사님들과 소통할 수 있다는 것은 스파르타의 큰 장점인 것 같다. 개발을 배우기 전에는 사용해본 적도 없는 슬랙, 노션, 게더 등을 이런 기회로 익숙해지는 것은 나중에도 큰 도움이 될듯?
5. 개발이 (아직은) 너무 재미있다!!! 요리도 직업을 갖게되기 전에는 학구열과 호기심으로 열정 불태울 수 있었는데, 지금이 개발자로썬 포텐셜이 가장 높을 때가 아닐까. 뭐든 배우고 익혀서 할 줄 아는 것이 늘어나는 과정이 즐겁다. 이번에 게시물 추가버튼을 구현하면서 AntDesign의 아이콘을 사용하려고 사이트에 들어갔다가, AntDesign에서 아이콘 뿐만 아니라 몇가지의 컴포넌트들도 제공한다는 것을 알게되서 이번에 좀 써먹어봤다. 유후
6. css를 깊이있게 공부하지는 않았어서 (덜 배웠다는 사실 자체를 스스로 몰랐다.) input 태그의 type을 file로 변경하면 브라우저가 멋대로 못생긴 ui를 렌더링하는 것을 어떻게든 이쁘게 해보려고 애를 썼다. 그 과정에서 input의 속성에 display:none을 입히고, label을 block으로 설정해 라벨만 클릭해도 이미지를 업로드할 수 있도록(원래 라벨 태그가 for=(input의아이디명)을 적용하면 라벨만 클릭해도 인풋에 커서가 들어가는 것을 이용한 것이다) 했다. 훨씬 보기 좋은 UI를 만들어낸 것 같다. input에 특정 프로퍼티를 넘기면 textarea로 구현하도록 코드를 짜는 것도 배웠는데, 꽤나 유용하게 쓸 수 있을 것 같다. 최대한 미니멀리즘을 추구하면서도 재사용이 가능한 컴포넌트는 언제나 환영이니까!!!ㅎㅎ 이제 리액트 환경에서도 리액트네이티브의 요소들을 거의 구현한 상태로 만들 수 있게 됐다 너무 뿌듯하다!!

 

아직도 코딩 안배웠어? 5만원 깎아줄께 형아만 믿어

 

개발일지만 쓸 게 아니라 공부하는 과정에서 얻게되는 프로그래밍 지식도 시간이 되면 최대한 공유하는 글을 써봐야겠다. 좋은거는 나만 알고 있는 것도 안될 일이지!