[221128-221204] 바쁘다 바빠 현대사회

 

 

11/28

📝 할 일

•  노마드 코더 리액트 to-do-list 파트 강의 수강

 

✅ 한 일

• 노마드 코더 리액트 to-do-list 파트 강의 수강

곧 3차 과제로 들어가는 투두리스트를 수강하게 되어 반가웠다

사실 3차 과제는 api 를 이용한 투두리스트이고 해당 파트는 값이 랜더링하면 사라지는 거라 사실상 허우대뿐이긴 하지만 뭔가 반가웠다

useState 로 input 의 value 값을 받아오고 그 값을 배열로 데이터를 쌓아서 그 배열을 반복적으로 출력해주는 거였다

정말 간단하게 구현했지만 useState 에 대한 활용도를 넓혀준 수업 같았다

해당 강의에서는 onChange 를 이용해서 input 값의 value 값이 바뀔 때마다 todo 가 추가되도록 해줬는데 나는 onKeyPress, onKeyDown을 사용하여 enter 키를 누를 때마다 todo 가 추가되도록 해주고 싶어서 적용했다

 

<input value={todo} onChange={onChange} type="text" />

onChange 가 아닌 onKeyPress, onKeyDown 등을 사용하면 onChange이벤트를 넣던지 readOnly 속성을 넣어서 변화를 막으라고 위의 이미지처럼 에러가 뜬다

그래서 onChange 를 사용하던가 value 를 defaultValue 속성으로 변경해야 한다고 한다

그러나 defaultValue 로 적용해주면 input에서 다른값으로 고쳤지만 실질적으론 값이 변하지 않는다는 문제점이 있기 때문에 onChange 를 사용해야 한다

 

 

 

 

 

11/29

📝 할 일

• 백준 3문제(24일자 이제야 완.)
• 노마드 코더 리액트 coin-tracker 파트 강의 수강

 

✅ 한 일

• 백준 3문제(24일자 이제야 완.)

24일에 하기로 했던 5문제를 이제야 다 풀었다^^…

브론즈 3에 들어간지 얼마나 되었다고 이렇게 힘들어하는지 모르겠다…

그나마 나머지 3문제는 그렇게 어렵지 않아서 어제 오늘 다 풀 수 있었다

1837번 암호제작 문제는 간단하게 암호를 2부터 k 값까지 나눈 나머지가 0 일 때 나쁜 암호로 지정하고 아니면 좋은 숫자를 출력하도록 했다

2010번 플러그 문제는 간단하게 첫번째 멀티탭을 값을 저장해놓고 다음 멀티탭부터 그 멀티탭에서 1을 빼준 뒤 저장해준 값에 누적해주고 그 값을 출력해줬다

2061번 좋은 암호 문제는 1837 번과 다르게 어렵게 되어 있는 것 같아서 풀다가 설마? 하고 1837번 정답을 제출했더니 정답이라고 나왔다^^.. 아직도 왜 정답인지 모름.

 

 

• 노마드 코더 리액트 coin-tracker 파트 강의 수강

해당 파트는 코인들의 값 정보들을 담고 있는 api로 출력해보는 강의였다

이번에 4차 과제는 제품 정보, 계좌 정보 등 핀테크 관련한 api 들을 이용하여 팀 프로젝트를 해보는 과제라서 우리 팀은 리액트를 기반한 프로젝트를 하기로 결정해서 해당 수업이 도움을 많이 줄 수 있을 것 같아 기대가 되었다

간단하게 useEffect 로 api를 불러서 useState 로 state에 값을 담아주고 그것을 반복해서 출력해주는 강의였다

처음 api를 배웠을 때도 이런 방식으로 했었는데 오랜만이라 좀 생소했다

 

 

 

 

 

11/30

📝 할 일

• 노마드 코더 리액트 movie-app 파트 강의 수강
• 4차 과제 : 핀테크 api 전체 상품 그리드
• 3차 과제 : todo-list 조회, 삭제 기능 추가

 

✅ 한 일

• 노마드 코더 리액트 movie-app 파트 강의 수강

이번에 2차 과제로 movie api 로 movie-app 을 만들어서 이 기회에 리액트로도 만들어 보게 되는구나 또 기대가 되었닿ㅎ... 맨날 기대만ㅎ…

암튼 차례차례 들으면서 해보는데 강의 댓글에 라우터 버전이 달라서 오류가 난다고 해서 5 버전의 switch 도 써보고 6 버전의 routes 도 써봤는데 에러가 오조오억개나가지고 구글링을 했는데도 잘 안나왔다

그래서 혹시나 싶어 파일과 코드를 아예 분리했더니 잘 작동이 되었다

route 안에 해당 페이지에 들어갈 컴포넌트들을 다 넣는 것이 아니라 route 당 컴포넌트 하나만 넣고 해당 컴포넌트 안에 자식 컴포넌트들을 불러들이는 식으로 해야 한다

 

 

• 4차 과제 : 핀테크 api 전체 상품 그리드

메인 페이지의 전체 상품 그리드를 잡는 역할을 맡았다

아직 다른 팀원이 크롤링을 하는 중이라 전체 상품에 대한 정보 api 가 없어서 팀원이 보내준 json placeholder 링크로 json 파일을 하나 만들어서 반복해서 요소를 뿌려줬다

js 로 하는 건 2시간도 안되어서 끝났는데 이제는 오히려 css 에 시간이 많이 든다

노마드 코더가 도움이 많이 되었다

 

 

• 3차 과제 : todo-list 조회, 삭제 기능 추가

저번에 추가하는 건 input 태그로 간단하게 했는데 추가하자마자 조회하는 것에서 막혀서 미루고 있다가 마감일이 일주일 정도 남아서 다시 하기 시작했다

그래서 조회 api 가져오고, 반복해서 랜더링 하는 함수를 이용하여 뿌리고, 삭제 버튼 추가해서 지우기도 완료했다

근데 추가하고 한번 새로고침을 해줘야 할 일들이 랜더링된다… 추가하자마자 조회하는 건 어떻게 했더라..?

 

 

 

 

 

12/1

📝 할 일

• 백준 5문제
• 3차 과제 : todo-list 추가와 동시에 화면에 나타나도록 설정, 수정 기능

 

✅ 한 일

• 백준 5문제

백준 5문제를 풀려고 했으나 일이 생겨 문제 등록만 하고 아무것도 못함..^^

3차 과제 끝나고 며칠동안까지 백준은 거의 못 풀 듯하다..

 

 

• 3차 과제 : todo-list 추가와 동시에 화면에 나타나도록 설정, 수정 기능

추가와 동시에 조회를 해서 요소들을 반복해서 랜더링하는 방법으로 하려고 했으나 입력이 될때마다 조회하는 값들이 모두 출력이 되어서 리스트 전체를 지웠다가 다시 랜더링을 하게 되었다

하지만 그렇게 하면 추가된 할 일을 포함한 나머지 할 일들이 다같이 지워졌다 랜더링되기 때문에 메모리나 모든 면에서 효율적이지 않은 코드같다

일단 임시방편으로 이렇게 해놓고 좀 더 고민을 해봐야 할 것 같다

수정 기능은 갑자기 일이 생겨서 시작을 하지 못했다

 

 

 

 

 

12/2

📝 할 일

• 3차 과제 : todo-list 수정 기능

 

✅ 한 일

• 3차 과제 : todo-list 수정 기능

for 문을 돌려서 수정 input 요소와 해당 기존 할 일이 적혀있는 텍스트 요소의 dataset 탐색하여 해당 id 값이 동일하다면 수정을 해주라고 설정했다

이렇게 하는 것이 맞는 건지 모르겠지만 내 머리로 더 나은 코드가 생각나지 않기 때문에 임시방편으로 구현해놓고 나중에 피드백을 받아 수정해야겠다

사실 멘토의 피드백에 자꾸 의존하는 것은 좋지 않지만 그것을 고민할 시간에 경험을 쌓는 것이 더 중요하다고 생각하기 때문에 일단 먼저 구현해놓고 리팩토링할 때 좀 더 고민해봐야 겠다

 

 

 

 

 

12/3

📝 할 일

• 3차 과제 : todo-list 추가, 조회, 수정, 삭제 기능들 디버깅

 

✅ 한 일

• 3차 과제 : todo-list 추가, 조회, 수정, 삭제 기능들 디버깅

필수 사항의 모든 기능들을 구현했으니 한번 오류들을 잡아야 할 것 같아서 하루종일 오류들을 찾고 고치는 데 시간을 보냈다

일단 임시방편으로 처리했던 것부터 수정하니 난리가 나서 진땀을 뺐고 해결하고 보니 아무것도 아니라서 어이가 없었다

근데 할 일의 순서를 지정해주는 부분에서 해결을 하지 못했다

조회한 값들의 길이를 추가할 때 순서(order) 의 값으로 넣어주려고 했더니 항목 추가를 한 다음 조회를 하고 있어서 하지 못했다

그래서 화면에 출력되는 할 일(todo)들의 길이를 order 값으로 지정했지만 중간 할 일을 삭제를 하고 다시 추가하면 할 일 길이의 다음 값으로 출력되기 때문에 order 값이 중복된다

또 멘토님께 물어봐야지…

 

 

 

 

 

12/4

📝 할 일

• 3차 과제 : todo-list 일부 선택 사항 완성, 모듈화, css

 

 

✅ 한 일

• 3차 과제 : todo-list 일부 선택 사항 완성, css

필수 사항만 완료하긴 아까워서 시간이 없지만 일부 선택 사항을 구현하기로 했다

그래서 단 시간 내에 쉽게 구현할 수 있는 것만 골라 순서대로 구현했다

 

1. 할 일을 완료한 항목과 완료하지 않은 항목을 분류해서 출력

2. 할 일을 완료한 항목들을 한 번에 삭제

3. 할 일 목록이 출력되기 전 로딩 애니메이션 보이도록 설정

4. 그 외 동작이 완료되기 전 로딩 애니메이션 보이도록 설정

5. 프로젝트를 최대한 예쁘게 만들기

 

이렇게 5가지를 구현했는데 마지막 꺼는 차마 내 입으로 이쁘다고 말하기는 뭐하지만 일단 노력해서 나름 꾸몄으니 이쁘다고 합리화해본다ㅎ..

1번은 select option으로 각 option의 value값으로 true, false를 넣어주고 선택한 후 버튼을 클릭해주면 화면에 랜더링해주는 함수에다가 value 값을 전달해줘서 input checkbox 의 checked 값과 전달된 값이 동일하다면 반대의 todo 를 삭제하도록 설정해줬다

2번은 완료된 할 일들의 아이디를 모두 저장해서 for 문으로 버튼만 누르면 삭제될 아이디가  delete api 함수로 전달되어 삭제되도록 설정했다

3, 4 번은 구현한 것보다 괜찮은 애니메이션을 찾는 데 시간이 더 걸렸다

https://uiball.com/loaders/ 라는 곳을 찾아서 구현을 해보려고 했는데 npm 으로 설치를 해줘야 적용할 수 있었다 나는 cdn 이나 css 를 통해서 구현하고 싶었기 때문에 다음 프로젝트 때 활용해보기로 하고 내가 하고 싶은 노트 컨셉에 맞도록 시계 침이 돌아가는 걸로 정했다