1회차 수업 - 8/9 (화) 20:00

[starkoora]

1회차 수업(개발자 취업 과정에서 기술 과제가 갖는 의미) 관련 논의를 올리는 이슈입니다

[BusyCranis]

사전 과제에서
새로고침 하거나 껐다가 다시 켜도 페이지 상태를 그대로 유지되게 하는거
어떤식으로 구현하시는지 궁금합니다.

[YOOJS1205]

안녕하세요.
게시물 추가, 삭제, 수정할 때 실시간 처리를 위해 추가, 삭제, 수정 성공 시마다 todo 목록을 다시 불러오는 api를 재호출하는 방식을 선택했는데, 이를 useGetList라는 Custom Hooks로 만들었습니다.

• 저의 의도는 useEffect의 의존성 배열에 list를 넣어 todo 목록이 변경될때마다 getList 함수를 호출하려고 했으나, 컴포넌트에서 useGetList 훅을 호출하려고 하니 무한 리렌더링이 발생하였습니다. 원인과 해결방법이 궁금합니다.

아래 사진은 컴포넌트에서 useGetList 훅을 사용한 사진입니다.

[uhgenie7]

어제 시간 부족으로 1-4) 챕터에서 끝나고 말았는데 혹시 토요일에 간단하게라도 1-5) 부분을 언급해주실 수 있을까요? 실무에서 이런 경우가 정말 많은데 (이런 기능을 만들 수 있느냐) 기능을 만들 수 있을지 없을지 견문이 짧아 저도 알 수가 없어서 당황한 경우가 정말 많습니다. PoC(Proof of Concept) 기반으로 의사결정한다는 말씀이 잘 안 와닿아서 여쭤봅니다. 물론 시간이 모자라서 다루기 힘들 거 같다고 하셔도 괜찮습니다!

[starkoora]

@uhj1993 여러가지 전달해드리고 싶은게 많은 주제이기는 해서 다음 강의 서두에 다루도록 하겠습니다 :)

[starkoora]

@YOOJS1205 안녕하세요 ukrbublik/react-awesome-query-builder#669 링크 참고하여 재현가능한 형태(ex. 코드샌드박스(권장) or github 링크)의 코드 첨부하여 지금 작성하신 내용 포함 새 이슈로 올려주시면 좋을거 같아요
직접 돌려보면서 확인하는게 정확할거 같네요

[starkoora]

사전 과제에서 새로고침 하거나 껐다가 다시 켜도 페이지 상태를 그대로 유지되게 하는거 어떤식으로 구현하시는지 궁금합니다.

@BusyCranis 어떤 상태를 유지하고 싶으신가에 따라 다르겠지만 특정 id의 페이지를 보고 있는지 등의 상태라면 수업에서 언급드렸듯 url을 상태 저장소로 사용할 수 있습니다 (path / query parameter)

[yejee1228]

관심사의 분리에 대한 강의 내용에 궁금한 점이 있습니다.
view 와 domain이 분리되지 않으면 개인적으로는 탈락시키신다고 하셔서, 매우 중요한 부분이라고 생각이 되었습니다.
어제 예를 들어주신 부분처럼 여러 개의 액션을 switch문으로 감싼다거나, if 문으로 분기처리 하는 등 하나의 함수(변수)가 여러 개의 액션을 포함하는 것을 분리하라는 말씀은 이해되었습니다.

혹시 컴포넌트로(?, 혹은 파일단위로) 분리하는 것도 포함이 될지요?
예를 들어, 회원가입 페이지를 구현한다고 하면 저는,

1. styled-component : 각 태그 구현
2. redux : 회원가입 시 사용자가 입력하는 데이터를 모아두는 상태모듈 구현 (insert 를 action으로 구현)
3. component: 회원가입 화면을 view로 구현하며 style import, onclick 등의 이벤트액션 구현하며 상태 변경. api가 포함되어있어, api부분은 분리가 필요해 보임.
4. (next.js사용): pages/auth에서 회원가입 component import

이런식으로 분리했었는데요, 이러한 분리 또한 해당 내용에 포함되는 걸까요?
혹시 더 분리할 수 있는 방법이 있을까요?

[starkoora]

@yejee1228 관심사의 분리는 말씀하신 것처럼 여러 부분에서 적용될 수 있는 것이기 때문에 지금 이해하고 계시는대로 이해하셔도 괜찮을 것 같고요

view와 domain 관련 작성하신 코드 중 간단한 예시를 들어드리자면
https://github.com/yejee1228/wanted-pre-onboarding-challenge-fe-1/blob/main/components/auth/Login.tsx#L39-L72
저라면 작성하신 코드 중 doLogin 부분을 들어내서 별도의 파일로 분리할 것 같습니다

view와 domain의 분리에 대해 참고할만한 좋은 글을 링크로 걸어드리겠습니다
https://medium.com/@shinbaek89/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98-business-logic%EC%9D%98-%EB%B6%84%EB%A6%AC-adc10ae881ab

[movie42]

@YOOJS1205
사진에 있는 코드를 보면

useEffect(()=>{
 getList()
},[getList])

이렇게 되어있는데요.
의존성 배열에 getList를 넣었기 때문에 getList가 변경되면 getList()를 호출하게 되어서 무한으로 fetching이 되는 것 같습니다.
의존성 배열에서 getList를 제거하거나 커스텀 훅에서 status code에 상태에 따라서 isSuccess와 같은 state를 하나 추가하는 등의 변경을 하면 해결이 될 것 같아 보입니다.

[yejee1228]

@starkoora

참고해보겠습니다! 답변 감사합니다!

[ghbaekdev]

타입스크립트 토큰 타입지정 관련하여 질문 있습니다.

token의 타입은 string 이나 없는 경우 null 이라고 생각하여

interface TokenType { Authorization : string | null
로 지정을 했었으나

Type 'TokenType' is not assignable to type 'AxiosRequestHeaders'.
Index signature for type 'string' is missing in type 'TokenType'

에러가 발생하여 해결 못하고 non null assertion operator 로

코딩을 하였었습니다. 혹시 이런 경우는 타입지정을 어떤식으로 해줘야 할까요?

[ysjkof]

@ghbaekdev axios가 string만 받게 돼 있어서 그런 거 같습니다.

 headers: {
        Authorization: localStorage.getItem(TOKEN_KEY) || '',
      },

저는 || 연산자로 로컬스토리지의 값이 null 일 때, 빈 문자열을 반환하게 했습니다.

[fenrirD]

@starkoora
customhook을 만들어 로그인/ 회원가입 폼에 대한 추상화(?) 비스무리한 작업을 진행해 봤습니다. 또한, 추상화를 하다보니 먼 미래에 필요할 혹은 필요하지 않을 기능도 생각해서 구현해야 되는게 아닐까 고민면서 고치고 지우고 하다 피드백을 받고 싶어서 글을 남깁니다. 감사합니다.

https://github.com/fenrirD/wanted-pre-onboarding-challenge-fe-1/blob/main/src/utils/customHook.ts

@ghbaekdev

저도 ts를 잘 몰라서 정확히는 모르겠지만 axios 에서 확인해보니 null 은 고려를 안하는듯합니다.

[ghbaekdev]

@ysjkof

@fenrirD

너무 좋은 정보들이네요 감사합니다ㅎㅎ

[ghbaekdev]

한가지만 더 질문 드릴게요!
const [{ title, content }, handleTodoInput] = useInputs({ title: '', content: '', });

useInput hook을 사용하여

component 분리 시키는 과정에서 initialValue에 들어갈 타입 지정에서 막혔습니당..

제 생각에는

initialValue : { title: string, content: string }
으로 들어가지 않을까 싶었는데 안되더라구요 혹시 이런부분은 어떻게 처리해야 할까요?

[YOOJS1205]

@YOOJS1205 사진에 있는 코드를 보면

useEffect(()=>{
 getList()
},[getList])

이렇게 되어있는데요. 의존성 배열에 getList를 넣었기 때문에 getList가 변경되면 getList()를 호출하게 되어서 무한으로 fetching이 되는 것 같습니다. 의존성 배열에서 getList를 제거하거나 커스텀 훅에서 status code에 상태에 따라서 isSuccess와 같은 state를 하나 추가하는 등의 변경을 하면 해결이 될 것 같아 보입니다.

감사합니다. 시도해볼게요!

[movie42]

@ghbaekdev

initialValue가 any라서 typescript가 뭐라고 하는 것 같네요. 유연하게 key : value를 지정하고 싶다면 제네릭 타입을 지정해주면 되고,
만약에 정해진 타입이 있다고 하면 그 타입을 지정해주면 됩니다.

const [todo, setTodo] = useState({titile: "", content:""})

아마 이렇게 하면 타입 추론이 되서 동작 할 것 같습니다. 만약에 동작하지 않으면

const [todo, setTodo] = useState<{title:string, content:string}>({titile: "", content:""})

이렇게 지정해주면 동작 할 것 같네요.

아래 글이 도움이 될까 해서 남깁니다.

타입추론
제네릭 타입
인터페이스