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

오늘한것

1. 팀과제 조사

2. todolist 기존 코드 수정

3. 매니저님께 질문

 

 

우선 과제 예시 사이트에서는 todolist에 부여되는 id를 만드는 것을 패키지를 이용해서 하였다. 원래 redux 모듈안에 변수를 만들어서 id값을 만들었는데, 매니저님께서 다른방법을 쓰라고 하셔서 다른 방법을 생각중이었다. 다른 패키지 도움 없이 만드려고 하니까 여러가지 상황을 고려할게 많아져서 머리가 아파졌다. 특히나 문제는 detail창에 들어 갔다 나오면 state값이 초기값으로 바뀌어 중복값이 나오는 것이 문제. 

머리를 뽑다가 같은 팀원분과 서로 문제를 공유했다. 팀원분의 문제는 이미 내가 시행착오를 겪었던 문제라서 금방 해결이 되었고, 팀원분도 지금 내문제를 해결했던 문제라서 알려주셨다.

 

방법은 옵셔널체이닝을 사용해서 todo를 저장하는 dispatch시에 todos 배열이 undifined이나 null이라면 그 값을 id에 넣지 말고 0을 넣어라, 근데 배열안에 값이 존재한다면 배열의 마지목요소의 id값에 1을 더해서 id를 만드는 방법을 이용했다.

 

 그런데 또다시 발생한 문제는 detail.jsx, 디테일 페이지에서 생긴 문제이다. useEffect안에서 url에서 가져온 id값으로dispatch를 하여 todo객체를 가져와 그 정보를 보여주는 페이지인데, 내일은 이 문제 해결법을 생각해봐야겠다.

 

 

 

Styled Component

매니저님도 잘쓰면 좋다고 하시고, 나도 처음써보기 때문에 많이 미숙한 것같아 제대로된 사용법을 익히고자 정리했다.

노션을 이용해 정리

https://cerulean-can-4f5.notion.site/Styled-Component-dc541dca81ba47b9a4f5d3ec7555e6bd

 

Styled Component

Styled Component

cerulean-can-4f5.notion.site

 

 

다음 목표 및 개선해야할점

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

- 드림코딩 javascript 문법 promise, async await 

- CSS grid, Grid Garden

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

- react hook 공부

 

 

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

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

+ Recent posts