[3주차] 김채림 미션 제출합니다. #18

chaaerim · 2022-04-01T12:36:09Z

안녕하세요! CEOS 프론트 15기 김채림입니다. 타입스크립트를 제대로 사용해본 적이 처음이라 수 많은 빨간 줄을 봤던 한 주였습니다.. 😇
공부 의지를 불태워주네요..ㅎㅎ...

💻 배포링크
https://chaaerim.github.io/react-todo-15th/
+vercel 오류를 해결하지 못해서 일단 깃허브로 배포했습니다.. vercel에서 빌드는 되었는데 화면에 아무것도 보이지 않아요..^^
typescript를 -g로 설치하지 않은 것이 문제같아서 몇 번이나 삭제하고 다시 설치했는데....아직 해결을 못했습니다......🥲�

📗 수정한 내용
크게 추가한 내용은 없지만 2주차 코드리뷰 반영, 중복제거를 위해 노력했습니다. 원래 TodoLists 컴포넌트 내부에 TodoItem을 중복해서 사용하는 부분이 있어 중복되는 부분을 다른 컴포넌트로 만들까 하다가 컴포넌트의 개수만 너무 많아지는 것 같아 기존에 있는 TodoLists를 활용하는 방향으로 수정해보았습니다.

✏️어려웠던 부분
타입스크립트로 변환하는데 생각보다 시간이 오래걸렸습니다 ..ㅎ 분명 tsc로 컴파일하고 npm start로 빌드했을 때는 오류가 없었는데 화면에는 백지 밖에 보이지 않는 속 터지는 상황이 발생했습니다.
개발자 도구를 확인해보니 Uncaught SyntaxError: Unexpected token '<'라는 에러 메세지가 떠서 package.json에서 원래 있던 homepage 값을 삭제하고 "homepage": “.”로 바꿨더니 해결이 되긴 했는데 저도 어떤 부분에서 에러가 발생한 건지, 어떻게 해결한 건지 감이 안잡혀요.. 혹시 이 부분에 대해서 아시는 분 계신다면 조언 부탁드립니다!

그리고 아직 hooks에 대한 이해도 부족한 것 같습니다..useInput을 만들고 커스텀 훅을 하나 더 만들어보고 싶어서 useAddTodo를 만들어보긴 했는데 과연 제가 만든 것을 hook이라고 할 수 있는지 잘 모르겠습니다. 그냥 기존의 코드를 옮겨 붙여넣기만 한 것 같아서 만들면서도 찝찝한 기분이 들었는데 이 부분에 대해서도 코드리뷰 많이 남겨주시면 감사하겠습니다.

😅 아쉬운 부분
Context API 적용을 추천한다는 코멘트를 마무리 하고 나서 확인해 Context API를 사용해보지 못한 것이 아쉽습니다. 주말 동안 다시 공부해서 적용할 수 있도록 해봐야겠어요!
+커밋메세지도 너무 큰 단위로 작성한 것 같아 아쉽네요ㅠ

S-J-Kim

안녕하세요 채림님

프론트엔드 멘토 김선종입니다.

커스텀 훅도 사용하려 하시고, 이번주에 과제 수행을 위해 많은 노력을 하신게 느껴집니다. 커스텀 훅이라는게 자주 사용하는 로직을 한번 더 추상화 하는것이기 때문에, 기존에 있던 함수들을 모아서 하나의 모듈 처럼 사용할 수 도 있고, 어떤 상태를 변화시키는 특정 로직을 묶어서 추상화해볼 수 도 있습니다. 그런 의미에서 제가 채림님의 코드에서 어떻게 커스텀 훅을 사용해 리팩토링 해볼 수 있는지 몇몇 제안을 해봤습니다. 한번 참고해보시면 좋을 것 같아요,

과제 하느라 고생하셨습니다

S-J-Kim · 2022-04-03T04:07:55Z

src/components/Clock.tsx

+const Clock = () => {
+  //moment.js 모듈 사용
+  const [time, setTime] = useState(moment());
+
+  // 처음 렌더링될 때만 실행
+  useEffect(() => {
+    setInterval(() => {
+      //현재 시간 불러오기
+      setTime(moment());
+
+      //1초마다 반복
+    }, 1000);
+  }, []);
+
+  return <ClockContainer>{time.format('HH:mm:ss')}</ClockContainer>;
+};


import moment from 'moment' const useClock = () => { const [time, setTime] = useState(moment().format('HH:mm:ss')); useEffect(() => { setInterval(() => { setTime(moment().format('HH:mm:ss')); }. 1000); }, []); return [time, setTime]; }

이렇게 시계 텍스트만 리턴하도록 커스텀 훅을 만들면 어떨까요?

import useClock from 'hooks' const Clock = () => { const [currentTime, ] = useClock(); return <ClockContainer>{currentTime}</ClockContainer> }

이렇게 내가 원하는 형태로 시계 컴포넌트를 재사용할 수 있겠죠.

커스텀 훅에 대한 조언 감사드립니다!!! 또 어디에 커스텀 훅을 적용해볼 수 있을까 고민이 있었는데 시계에 적용해보면 좋을 것 같네요!! 감사합니다 😆

S-J-Kim · 2022-04-03T04:15:55Z

src/interface/interface.tsx

+}
+
+//handleTodoInput 인터페이스 정의
+export interface ITodoInputTypes {


props의 인터페이스는 보통 이름에 props가 들어갑니다

Suggested change

export interface ITodoInputTypes {

export interface ITodoInputProps {

그렇군요!! 인터페이스를 처음 만들어봐서 네이밍할 때 고민했었는데 감사합니다!! 반영해서 수정해보겠습니다!

usernamebuzz

안녕하세요 채림님! 3주차 코드리뷰 파트너 오민지입니다 :)
코드를 잘 작성해주셔서 제 코드랑 다른 점 하나 코멘트 남기고 갑니다!
확실히 로컬 스토리지를 사용하니까 코드가 길어지는데 이 부분을 훅으로 처리하니까 보기 편한 것 같아요 👍
다만 아쉬운 점은 배포 링크가 오류가 뜨네요 :'( 오늘 스터디 세션 때 뵙겠습니다!!

usernamebuzz · 2022-04-03T04:47:00Z

src/components/TodoInput.tsx

+
+const TodoInput = ({ handleTodoInput }: ITodoInputTypes) => {
+  const { todoText, handleInputChange, handleInputInitialize } = useInput('');
+  const handleInputSubmit = (e: React.SyntheticEvent) => {


저는 이 부분을 e: React.FormEvent으로 설정했는데 혹시 SyntheticEvent를 설정하신 이유가 있는지 궁금합니다!

저도 궁금하네요 🙌

배포 오류가 뜬다니... 제 화면에서는 잘 보이는데 왜 이럴까요.. 배포 끝까지 절 괴롭히네요 흐흐흐ㅡ그흑

저번주 현재님 코드리뷰 참고했던 부분인데 멘토님께서 이번주 프짱님 리뷰에서 다시 한 번 짚어주셨습니다! e: React.SyntheticEvent보다 민지님, 성우님께서 사용하신 e: React.FormEvent<HTMLFormElement>를 사용해주는 것이 좋다고 하네요! 저도 이부분 참고해서 수정해보려구요 ㅎㅎ

sungwoo-shin

안녕하세요. 3주차 리뷰파트너 신성우 입니다! 채림님 코드를 읽으면서 정말 많이 배웠습니다. 특히 custom hooks와 관련해서 많은 참고가 되었습니다. 이번주 과제에 많은 열정을 쏟으신게 코드에서 느껴져서 자극이 되네요. 잘 작성해주신 코드라 제가 코멘트 드릴것은 별로 없었지만 몇가지 의견과 궁금한점 남깁니다! 😁

+) 배포 링크를 클릭하니 흰화면만 나오네요. 확인 해보시면 좋을것 같습니다!

sungwoo-shin · 2022-04-03T06:33:38Z

src/App.tsx

+const TodoContainer = styled.div`
+  margin: 0 auto;
+  margin-top: 3rem;
+  background: rgba(189, 187, 187, 0.8);
+  width: 30rem;
+  height: 39rem;
+  border-radius: 30px;
+  box-shadow: 0 5px 18px -7px rgba(0, 0, 0, 1);
+  padding: 30px;
+`;


개인적인 의견으로 styled compenets 관련 코드가 컴포넌트 관련 코드 하단에 위치하는게 코드 가독성 측면에서 더 좋은것 같습니다!

코멘트 감사드립니다!! 참고해서 수정해보겠습니다 ㅎㅎ

sungwoo-shin · 2022-04-03T06:38:24Z

src/components/TodoBox.tsx

+import styled from 'styled-components';
+import { ITodo } from '../interface/interface';
+import useAddTodo from '../hooks/useAddTodo';
+import useInput from '../hooks/useInput';


불필요한 코드 같습니다!

sungwoo-shin · 2022-04-03T06:47:20Z

src/components/TodoInput.tsx

+
+const TodoInput = ({ handleTodoInput }: ITodoInputTypes) => {
+  const { todoText, handleInputChange, handleInputInitialize } = useInput('');
+  const handleInputSubmit = (e: React.SyntheticEvent) => {


저도 궁금하네요 🙌

sungwoo-shin · 2022-04-03T06:51:00Z

src/interface/interface.tsx

+}
+
+// todolist, handleTodoDelete, handleTodoToggle 인터페이스 정의
+export interface ITodoListsTypes {


타입스크립트 기초에 대해 공부하면서 알게되었는데 export를 한번에 해주는게 일반적이라고 합니다!

Suggested change

export interface ITodoListsTypes {

export type {

ITodo,

ITodoInputTypes,

ITodoItemTypes,

ITodoListsTypes,

}

와.. 이렇게 하면 하나하나 export를 작성하지 않아도 되는군요...!!! 공부가 부족했던 부분이네요!! 감사합니다!!!!

sungwoo-shin · 2022-04-03T06:54:13Z

src/components/TodoInput.tsx

+        onChange={handleInputChange}
+        placeholder="할 일을 입력하세요"
+        type="text"
+        required


새로운 속성 배우고 감니당~

이부분은 저도 시원님 코드 리뷰 하면서 배웠던 부분인데 한번 가져다 써봤어요 ㅎㅎ

sungwoo-shin · 2022-04-03T07:05:54Z

src/components/TodoItem.tsx

+  text-decoration: ${({ isCompleted }: { isCompleted: boolean }) =>
+    isCompleted ? 'line-through' : 'none'};
+  color: ${({ isCompleted }: { isCompleted: boolean }) =>
+    isCompleted ? '#adb5bd' : 'black'};


Suggested change

text-decoration: ${({ isCompleted }: { isCompleted: boolean }) =>

isCompleted ? 'line-through' : 'none'};

color: ${({ isCompleted }: { isCompleted: boolean }) =>

isCompleted ? '#adb5bd' : 'black'};

import styled, { css } from "styled-components";

...

${({ isCompleted }) =>

isCompleted && {

css`

text-decoration: line-through;

color: #adb5bd;

`}

이렇게도 작성해볼 수 있을것 같습니다!

wow.....props 한번만 전달 받아서 이렇게 쓸 수가 있군요.. 대박...혹시 스터디 시간에 설명 조금 부탁드려도 될까요,,,,,?

chaaerim added 30 commits March 23, 2022 04:17

first commit

ad4ee26

feat: add clock function

bdc392f

style : background color setting

e5152b9

feat : add TodoInput

ae0b47d

feat : add onInsert function

354e4e5

feat : add TodoLists, TodoItem

f7804e6

feat : add onDelete function

7770956

feat : add onToggle function

39059ef

feat : add yetTodo, doneTodo counting

c25923c

feat : add saveTodos function

b2d375e

feat : add localStorage

d59f330

fix : delete console.log

79fac1f

style : update styled-components

639e436

style : update GlobalStyle

36f79db

test : test vercel

200b79f

refactor : refactor code

de0145a

test : test typescript

f2ab2c8

refactor : refactor with typescript

dd5d4a3

refactor : TdoLists component 중복 제겨

7de1b0d

feat : add useInput hook

48911b8

feat : add useAddTodo hook

6743e0d

refactor : strict true 설정 추가, interface 추가

9322aad

fix : reinstall typescript

9bb272f

chore : container height 단위 rem으로 통일

f872280

test : test vercel

d955ffe

fix : reinstall typescript

d1e23c1

test

cece619

test

c917dfc

test

df31240

refactor: reinstall typescript

5decab9

S-J-Kim reviewed Apr 3, 2022

View reviewed changes

usernamebuzz reviewed Apr 3, 2022

View reviewed changes

sungwoo-shin reviewed Apr 3, 2022

View reviewed changes

chaaerim added 3 commits September 7, 2022 00:50

Update README.md

b471510

Update README.md

0b6fcf7

Update README.md

a4fad81

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[3주차] 김채림 미션 제출합니다. #18

[3주차] 김채림 미션 제출합니다. #18

chaaerim commented Apr 1, 2022 •

edited

Loading

S-J-Kim left a comment

S-J-Kim Apr 3, 2022

chaaerim Apr 3, 2022

S-J-Kim Apr 3, 2022

chaaerim Apr 3, 2022

usernamebuzz left a comment

usernamebuzz Apr 3, 2022

sungwoo-shin Apr 3, 2022

chaaerim Apr 3, 2022

chaaerim Apr 3, 2022

sungwoo-shin left a comment •

edited

Loading

sungwoo-shin Apr 3, 2022

chaaerim Apr 3, 2022

sungwoo-shin Apr 3, 2022

sungwoo-shin Apr 3, 2022

sungwoo-shin Apr 3, 2022

chaaerim Apr 3, 2022

sungwoo-shin Apr 3, 2022

chaaerim Apr 3, 2022

sungwoo-shin Apr 3, 2022

chaaerim Apr 3, 2022

	export interface ITodoInputTypes {
	export interface ITodoInputProps {

-export interface ITodoListsTypes {
+export type {
+  ITodo,
+  ITodoInputTypes,
+  ITodoItemTypes,
+  ITodoListsTypes,
+}

-  text-decoration: ${({ isCompleted }: { isCompleted: boolean }) =>
-    isCompleted ? 'line-through' : 'none'};
-  color: ${({ isCompleted }: { isCompleted: boolean }) =>
-    isCompleted ? '#adb5bd' : 'black'};
+import styled, { css } from "styled-components";
+...
+${({ isCompleted }) =>
+    isCompleted && {
+    css`
+      text-decoration: line-through;
+      color: #adb5bd;
+    `}

[3주차] 김채림 미션 제출합니다. #18

Are you sure you want to change the base?

[3주차] 김채림 미션 제출합니다. #18

Conversation

chaaerim commented Apr 1, 2022 • edited Loading

S-J-Kim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

usernamebuzz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sungwoo-shin left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaaerim commented Apr 1, 2022 •

edited

Loading

sungwoo-shin left a comment •

edited

Loading