1. 오늘한것
- 과제 기능구현

 

오늘은 내가 맡은 기능 구현을 다하고 다른 팀원의 기능까지 한번 해보고싶어서 새로 레포지토리를 파서 해보았다.

맡은 부분은 posting시 form의 유효성 검사 부분인데 만들면서 form을 어떻게 재사용할까 고민하면서 해봤는데 어차피 기능별로 폴더구조와 컴포넌트를 나눈거라 그냥 둬도 괜찮은 것 같다.

 

그리고 유효성 검사는 form에서 onSubmit이 될 때 받은 데이터를 조건문으로 값을 검사한 후 조건이 맞지 않으면 alert를 띄우는 방법이 있었는데 custom hook을 찾아보다가 여러개의 input을 받아서 유효성 검사를 한 후 유효성 검사를 한 후 조건마다 error메시지를 같이 return 해주는 custom hook이 있어서 적용해보았다.

 

당연히 직접 만들어서 써보고 싶었지만 먼저 흐름을 알고 하나씩 바꿔가며 적용해보고자 했다.

잘 되던걸 지우고 업그레이드 된 걸 적용시키려니까 조금 아깝긴 했지만... ㅋㅋㅋㅋㅋㅋ

 

처음 그 hook에 대해 작성된 포스팅을 봤을때 이해가 안가고 , 오류가 나는게 많아서 그냥 다른방법 찾아볼까 했다. 그래도 이거 있는것도 못적용시키면 나중에 어뜩하것나... 싶어서 싹지우고 하나씩 적용해서 해보니까 어떻게든 됐다...! 좀 custom hook에 대한 벽이 조금은 내려간 느낌. 

 

2. 개선할점 / 아쉬운점. 

조금 아쉬운건 useForm이라는 hook에 매개변수 받는 값을 설정해줄 수 있는데, redux의 action함수를 넣고 싶었는데 잘 되지 않아서 그냥 hook을 두개 만들어서 따로따로 써버린 것... 이러면 hook을 만든 의미가 없기 때문에 좀 더 찾아서 보완해봐야 한다.

 

거의 필수적인 것 flex, align-items, justify-content, margin, padding.. 등만 조합된 컴포넌트를 만들어서 재사용 했는데 이

 스타일드 컴포넌트에 너무 많은 css를 변수로 받아서 사용하는 것이 아닌지 매니저님께 여쭤보았다.  나중에 디자이너와 같이 일하게 되면 어느정도 짜여진 컴포넌트들이 나오게되고, 지금은 짜여져 있는 디자인도 아니고 중간에 계속 바뀔게 나오기 때문에 그렇다고 한다. 물론 나중에도 그럴일이 없지는 않다고 하시지만... 또 MUI 같은것을 나중에 사용하고 싶으면 어느정도 진입장벽이 있기 때문에 미리 조금씩 봐도 괜찮다고 하신다.

 

나는 간단하게 최소 단위로만 구현해보고 아~ 뭐 쉽겠네 생각했는데... 오만한 생각이었다. 기능뿐만아니라 컴포넌트 나누기, custom hook적용, 유효성 검사,  redux, styled component, 만들때 세세한거 하나 모두 내가 할 일이구나 느끼고서는 다시는 그런생각을 안하기로 했다. ㅋㅅㅋ

 

팀원들 모두 열심히 구현하고 있다. 나도 내가 맡은 페이지는 별로 할게 없을 줄 알았는데, 업그레이드 하자면 할만한 것들이 많았다... 진짜 진짜 다시는 무시하지 않으리라 다짐했다...

 

3. 잘한점 

custom hook과 기능별 컴포넌트를 만들어 놓으니 다른곳에 사용할때 정말 편하게 적용할 수 있었다...!

이래서 컴포넌트와 hook을 쓰는구나 느낌!!

 

 

3. 고민해 볼 것

- 실전 프로젝트 주제

 

 

4. 다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- CSS grid, Grid Garden

- 다양한 custom hook에 도전, pagenation 적용

- uselocation  알아보기

- figma 한번 훑어보기

- 읽어볼만한 책 찾기 

'항해 99' 카테고리의 다른 글

항해99 32일차  (0) 2022.10.23
항해99 31일차  (0) 2022.10.20
항해 29일차  (0) 2022.10.17
항해 4주차 WIL  (0) 2022.10.17
항해 27일차 TIL  (0) 2022.10.17

1. 오늘한것
- 과제 기능구현 

- Axios 세션 수강

 

과제 기능을 구현하는데 거의 시간을 할애함... 

그리고 스타일드 컴포넌트를 잘 사용하기 위해 노력했다.

재사용성을 고려해서 자주사용하는 css만 이용하는 컴포넌트를 만들어서 최대한 활용하려고 했다.

 

그래서 기능구현도 구현이지만 그런 작업들이 생각보다 손이 많이 가서 조금 늦어진 것 같다.

그래도 한번 만들어 놓으면 상세페이지까지 레이아웃을 편하게 가져갈 수 있기 때문에 나중에는 훨씬 시간이 단축될거라 믿는다..

 

이전보다 스타일드 컴포넌트를 활용을 훨씬 잘 활용했던 것 같다. 이전 코드와 비교했을때 StDiv를 남발하던 때보다 더 깔끔한 코드가 되었지만, 아직 좀 먼 것 같다.

확실히 이럴땐 잘 쓴 코드 한번 보면 깨닫는게 많긴한데.. 내일 매니저님 코드를 볼 수 있다면 좋겠다... 

 

 

 

2. 개선할점 / 아쉬운점. 

- 폼 유효성 검사와 커스텀훅을 제대로 못만지게 아쉽다. 내일은 전부 완료해야지..

 

 

3. 고민해 볼 것

- 좀 더 체계적으로 컴포넌트 스타일링 할 수 있는 방법.

- 폼 유효성 검사는 custom hook으로 useForm을 이용하면 좀 더 보기 좋게 구현가능할 것 같다. 

 

 

 

4. 다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- CSS grid, Grid Garden

- component 잘게 쪼개기, custom hook 만들어보기

- uselocation  알아보기

- figma 한번 훑어보기

- 읽어볼만한 책 찾기 

'항해 99' 카테고리의 다른 글

항해99 31일차  (0) 2022.10.20
항해 30일차  (0) 2022.10.20
항해 4주차 WIL  (0) 2022.10.17
항해 27일차 TIL  (0) 2022.10.17
항해 26일차 TIL  (0) 2022.10.15

1. 4주차동안 한것

  • 주특기 기간 2주차 진행중
  • React, Redux toolkit 등을 이용하여 CRUD 프로젝트 만들기, 
  • 혼공스 스터디

 

클래스형 VS 함수형 라이프사이클, react hooks 정리

https://cerulean-can-4f5.notion.site/vs-react-hooks-76a5522615284310b3d2cf51ec043096

 

라이프사이클(클래스형 vs 함수형), react hooks

WIL

cerulean-can-4f5.notion.site

2. 좋았던 점

  • toolkit의 thunk로 비동기 통신으로 데이터를 받아와서 만드니 한층 더 재밌다...?

 

 

 

3. 개선할점 / 아쉬운점. 

  • styled component의 만든 의의도 분명 재사용성의 이유가 클텐데 그동안 마구잡이로 남발하여쓰다가, 이제서야 의미있게 사용하는 법을 깨달았다. 
  • 100번 삽질하는것도 의미 있지만 좋은 코드를 보는 것도 중요한 것 같다. 좋은 코드를 찾을 수 있는 깃헙 레포를 찾아봐야겠다.

 

 

4. 목표

  • 심화 주차 과제를 첨부터 혼자서 만들어보기 
  • custom hook관련 강의 듣기
  • immer 적용해보기

'항해 99' 카테고리의 다른 글

항해 30일차  (0) 2022.10.20
항해 29일차  (0) 2022.10.17
항해 27일차 TIL  (0) 2022.10.17
항해 26일차 TIL  (0) 2022.10.15
항해 25일차 TIL  (0) 2022.10.15

카카오 데이터 센터에 불이나서 티스트리 블로그를 쓸 수가 없다... 그래서 메모장에다가 쓴걸 옮겨썻다.


1. 오늘한것
- 심화주차 과제를 위한 공부를 했다.
우선 redux toolkit 사용법이 이해가 잘 안갔는데, 지금은 어느정도 이해가 가고 있다. 특히 thunk쓰는 이유를 알게 된 게 과제를 하는데 도움이 크게 된 것 같다.
그동안 리덕스를 쓸때 새로고침을 하면state가 사라졌는데, 지금 json-server를 이용하여 데이터 베이스를 이용하고 있다. 이제 화면을 띄울때 서버와 통신을 해서 데이터를 받아와서 이용한다. 그러기 위해선 화면을 띄우기전 서버와 통신을해야하는데 그 과정을 thunk를 통해 한다. 

아주 최소 사이즈로 기능 구현을 하고 있는데, toolkit을 사용하는법이 능숙해지면 실제 과제를 할때에는 좀 더 수월 할 것으로 예상된다.

 

2. 개선할점 / 아쉬운점. 

  • React lifecycle에 관한 개념
  • 전역상태관리의 필요성

3. 고민해 볼 것

- 실전 프로젝트 제안해볼만한 주제가 있는지

 

 

4. 다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- CSS grid, Grid Garden

- component 잘게 쪼개기, custom hook 만들어보기

- uselocation  알아보기

- figma 한번 훑어보기

- 읽어볼만한 책 찾기 

'항해 99' 카테고리의 다른 글

항해 29일차  (0) 2022.10.17
항해 4주차 WIL  (0) 2022.10.17
항해 26일차 TIL  (0) 2022.10.15
항해 25일차 TIL  (0) 2022.10.15
항해 24일차 TIL  (0) 2022.10.13

1. 오늘한것

  • 팀원들과 협업을 위해 Git 사용법 공유 및 세팅 
  • S.A 작성(figma를 이용한 와이어프레임, api 설정, 협업을 위한 create-react-app 세팅)
  • 심화주차 강의 듣기 완료

우선 그래도 나름 첫날에 꽤나 많은 진척이 있다고 봐도 무방할 것 같다. 

심화주차 강의를 스-윽 들어봤는데 아직 thunk와 middleware에 대한 부분은 좀 더 해봐야 알겠지만, 그래도 봤을때 그렇게까지 못할만한건 아니라는 생각이 들어 조금은 마음이 놓였다...? 

 

처음  figma를 사용하여 팀원들과 와이어프레임을 짰는데 아직 미숙하지만 잘써서 나혼자서도 와이어프레임을 이쁘게 그리는 날이 왔으면 한다. 사뒀던 udemy 강의를 조금 훑어볼때가 된거 같다!  그리고 폴더 구조, 기본적으로 받아야할 패키지, 라이브러리등을 미리 세팅하여 깃헙에 올려두는 작업까지 했다. 

 

또한 앞으로 협업을 위해서는 깃 사용이 필수적인데, 팀원들끼리 서로 사용법을 익히고 알려주는 시간을 가졌다. 아직 서로 깃과 깃헙에 대한 개념이 완벽한게 아니지만 다행히도 여러 시행착오를 겪고 도와주며 협업을 할 수 있는 기본적인 수준까지는 할 수 있다고 생각한다.

 

또 매니저님께서 협업하는 방식에 대해서도 알려주셨는데, 막막했던게 조금은 알것같다. 기능단위로 component를 쪼개는 방법도 알려주셨는데, 이게 회사들마다 정해진 규칙이 있는건지 여쭤봐야 겠다. 

 

일요일 저녁까지 개인공부를 하다가 이후에 기능을 나누고 월요일부터 제대로 만들게 될 것 같다. 

 

오늘은 배운걸 적용할 시간이 없었지만 내일은 새로 적용해볼 생각에 기대가 된다!

 

 

2. 개선할점 / 아쉬운점. 

  • React lifecycle에 관한 개념
  • 전역상태관리의 필요성
  •  

3. 고민해 볼 것

- 실전 프로젝트 제안해볼만한 주제가 있는지

 

 

4. 다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- CSS grid, Grid Garden

- component 잘게 쪼개기, custom hook 만들어보기

- redux thunk, toolkit, axios등 미리 훑어보기 

- styled component 오버라이딩, uselocation  알아보기

- figma 한번 훑어보기

- 읽어볼만한 책 찾기 

'항해 99' 카테고리의 다른 글

항해 4주차 WIL  (0) 2022.10.17
항해 27일차 TIL  (0) 2022.10.17
항해 25일차 TIL  (0) 2022.10.15
항해 24일차 TIL  (0) 2022.10.13
항해 23일차 TIL  (0) 2022.10.12

1. 오늘한것

  • 숙련주차 테스트 
  • fetch, async / await 개념 공부

 

테스트를 보고 좀 풀어진 날.. 시험은 이미 많이 다뤘던 코드들이라 어렵지는 않았다. 

 

시험을 보고 나머지 async / await 개념을 공부했는데, 이전에 프로미스를 좀 알고 하니까 더 이해가 잘되는 것 같다.

 

https://cerulean-can-4f5.notion.site/JS-87dad6779e144d748b8ccf1259bd2d2e

 

JS의 비동기 처리 방법

동기 (Synchronous)와 비동기(Asynchronous)

cerulean-can-4f5.notion.site

 

또 원래 했던 todolist프로젝트에 공용 api로 fetch하는 연습을 해봤다. 확실히 코드를 직접 작성해봐야 이해가 간다. 

내일이면 심화주차를 들어가는데 redux toolkit, thunk, axios등을 배울 예정인데... 아주! 기대가 된다.

 

 

 

2. 개선할점 / 아쉬운점. 

  • React lifecycle에 관한 개념
  • 전역상태관리의 필요성

 

3. 고민해 볼 것

- 실전 프로젝트 제안해볼만한 주제가 있는지

 

 

4. 다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- CSS grid, Grid Garden

- component 잘게 쪼개기, custom hook 만들어보기

- redux thunk, toolkit, axios등 미리 훑어보기 

- styled component 오버라이딩, uselocation  알아보기

- figma 한번 훑어보기

- 읽어볼만한 책 찾기 

 

'항해 99' 카테고리의 다른 글

항해 27일차 TIL  (0) 2022.10.17
항해 26일차 TIL  (0) 2022.10.15
항해 24일차 TIL  (0) 2022.10.13
항해 23일차 TIL  (0) 2022.10.12
항해 22일차 TIL  (0) 2022.10.11

오늘한것

1. callback, promise 정리

2. 리액트 강의(fetch 부분)보고 적용해보기

3. 매니저님께 질문

 

거의 비동기 처리방법 callback, promise, async / await 부분 공부해서 정리하는데 시간을 많이 썼다.

promise까지 공부하고 실제로 어떻게 돌아가는지 해봐야지 명확할 것 같아서, 강의에 fetch사용하는 부분이 있길래 적용해보았다.

 

아래는 노션으로 작성한 비동기 처리 방법 공부 내용이다. 

https://cerulean-can-4f5.notion.site/JS-87dad6779e144d748b8ccf1259bd2d2e

 

JS의 비동기 처리 방법

동기 (Synchronous)와 비동기(Asynchronous)

cerulean-can-4f5.notion.site

아직 async / await은 작성되어 있지 않긴 하지만 내일 완료 할 것 같다.

 

 

내일이면 또 테스트를 본다...보는건 문제가 아니지만 시간이 너무 빠르게 가는것 같다. 

일주일 뒤면 백엔드랑 같이 미니프로젝트 같이 할 수 있는거 맞나 싶기도하고 같이 빨리 만들어보고 싶기도하고 그렇다 허허...

 

고민해 볼 것

- 실전 프로젝트 제안해볼만한 주제가 있는지

 

다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- async await 정리

- CSS grid, Grid Garden

- component 잘게 쪼개기, custom hook 만들어보기

- redux thunk, toolkit, axios등 미리 훑어보기 

- styled component 오버라이딩, uselocation  알아보기

- figma 한번 훑어보기

- 읽어볼만한 책 찾기 

 

 

'항해 99' 카테고리의 다른 글

항해 26일차 TIL  (0) 2022.10.15
항해 25일차 TIL  (0) 2022.10.15
항해 23일차 TIL  (0) 2022.10.12
항해 22일차 TIL  (0) 2022.10.11
항해 99 3주차 WIL  (0) 2022.10.09

오늘한것

1. 팀과제 서로 공유 및 발표

2. todolist에 styled component 다시 설정, globalstyles, theme등 적용

3. 매니저님께 어제 해결하지 못한 문제 질문

 

 

 날씨가 많이 쌀쌀해졌다. 점심식사 후에 뚜아 산책을 하는데 맨투맨을 입었는데도 너모나 추워서 또 금방 겨울이 오겠구나 했다. 사실 빨리 겨울이 왔으면 한다. 잘배워서 실전프로젝트로 서비스 만드는걸 하고 싶기 때문에... 그런데 또 시간가는걸 보면 그렇게 조급해하지 않아도 되는것 같기도... 많이 배우기도 배웠지만 일주일 뒤면 벌써 한달이기 때문이다.

 

 또 오늘은 협력사 세션이 있었다. LetinAR 이라는 AR glass 업체이다. 학부때 꽤 여러번 듣기도하고, 어느정도 수준까지 기술이 발전했나 봤더니... 진짜 사용하는날이 얼마 안남았을 것 같다고 느꼈다. 상용화가 되기 위한 대부분의 조건은 맞춰졌는데 아직 하드웨어 기술이 부족하다고 한다. 5년정도로 상용화를 예상하시는 것 같은데 그 이유를 말씀해주는 협력사 관계자분의 통찰력이 굉장히 좋다고 느꼈다. 

 

 그러나 항해99를 하고 있는 나와 다른 분들은 살짝은 기분이 언짢고, 좋지 않은 느낌이 들 수 있는 말씀을 해주셨는데, 곧 웹개발영역을 AI로 많은 부분이 대체 될 가능성에 대해 말씀해주셨다. AI가 시장을 먹는 두가지 조건이 있는데, 명확한 룰이 존재하고(ex 바둑) 사람이 만들어놓은 데이터가 굉장히 많은 영역(번역기, 그림)이 AI에게 먹힐 가능성이 높다고 하셧다.

 

웹개발 영역도 마찬가지, 일반적인 홈페이지를 만들거나 같은 것은 마이크로소프트에서 이미 많은 테스트를 거쳤다고 한다.

 

사실 어느정도 공감이 되는 부분이 있다. 굉장히 자주 ai를 이용한 프로그램이 나오는 것을 보고, 그 성능에 감탄을 한적이 많다. copilot 같은 경우도 그렇고...

 

그럼 어떻게 살아야 할까?

관계자분이 해주신 조언이 정확히 기억은 안나지만 새로운것을 받아들이고 적용을 빠르게 시키며 직관이 좋은 사람이  이 시장에서 살아남는다 라고 하신 것 같다. 음 직관이 좋다는 말이 여러가지 수를 상상해보고 그중에서 가장 효율적이고 좋은 수를 뽑아낼 수 있는 사람을 의미하는 것 같다. 

 

아직 이 시장의 철학을 논하기에는 부족하다고 느끼지만, 내가 항해99에 참여하고 진로를 바꾼 이유는 시장에서 살아남는 것에 초점을 둔 건 아니다. 해보고 싶은게 있고, 매일 성장하고 내가 가진 기술로 가치있는 것을 만들수 있는 직업을 가지고 싶어서 진로를 바꾼 것이다. 하고싶은걸 꾸준히 하면 부가적인 것들은 따라온다고 믿는다. 그 과정에서 좀 더 다양한 시도를 해봐야 겠다..

 

 


 

결국은 어제 dispatch를 useEffect안에서 못쓰는 오류를 해결하지 못했다. 물론 끝까지 붙들고 있고 싶었지만... 배울게 많기 때문에 충분히 고민했다 생각하고 매니저님께 여쭤봤다. 

 

내 예상은 데이터를 주는 form이나 redux 모듈에서의 문제라고 생각했다. 그런데 아무리봐도 이상한 부분이없다 라고 생각한게 오만한 생각이었다. 

 

리듀서에서 값을 새로 리턴해줄때 원래 state값을 복사해서 이용하는데, 다른 것을 해보면서 그부분을 빼먹은 것 같다... 다른 부분은 다 복사를 해뒀는데... 

 

앞으로는 이렇게 실수할 가능성도 있으니 github의 commit내역도 참고해서 보면 좋을 것 같다. 또 오만하게 생각하지 말고 이상없어보이는 부분도 다시보자!

 

질문하면서 개선할 점은

정제된 질문을 해야하는데 이것저것 시도해 보는데만 급급해서 그 과정들을 기록하지 않았다. 때문에 내가 어느정도까지 해봤는지, 내가 예상한 문제는 무엇인지 설명을 제대로 해드리지 못한점. 

다음부터는 해결이 잘 되지않는 오류가 있다면, 꼭 !!! 기록을 잘 해둬야 겠다.

 

 

다음 목표 및 개선해야할점

- 주 1회 알고리즘 풀이( 평일에는 힘들것 같으니 주말을 이용)

- 드림코딩 javascript 문법 promise, async await 정리 꼬옥 하자 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

- CSS grid, Grid Garden

- component 잘게 쪼개기, custom hook 만들어보기

- redux thunk, toolkit, axios등 미리 훑어보기 

 

'항해 99' 카테고리의 다른 글

항해 25일차 TIL  (0) 2022.10.15
항해 24일차 TIL  (0) 2022.10.13
항해 22일차 TIL  (0) 2022.10.11
항해 99 3주차 WIL  (0) 2022.10.09
항해99 19일차 TIL  (0) 2022.10.09

+ Recent posts