본문 바로가기

분류 전체보기

 (138)
[면접대비] 상태관리, Redux 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? keyword: state props LifeCycle dom redux react-query 데이터의 일관성을 유지하기 위해 상태관리를 합니다. 동일한 상태를 여러 컴포넌트에서 사용했을 때 같은 값을 가지기를 기대하고, 상태를 쉽게 파악할 수 있는 구조로 관리해서 예상하지 못한 결과가 나오지 않도록 하여 유지관리를 용이하게 하고 데이터의 일관성을 유지할 수 있게 하기 위해서입니다. 만약 컴포넌트가 부모자식 관계라면 props로 상태를 공유할 수 있으나 사이에 여러 컴포넌트가 있으면 props-drilling이 발생해 유지관리가 어렵게 됩니다. redux는 store로 상태를 한번에 관리할 수 있게 해 관리를 용이하게 할 수 있습니다..
Next.js: youtube API 생성 새로운 프로젝트가 시작되었다. youtube API로 연결해서 코드할 때 듣기 좋은 리스트를 선별하는 것이 목적이었다. Google Debelopers Console의 라이브러리 중 youtube Data aPI v3을 선택하였다. API를 신청한 뒤 사용자 인증정보에서 API key를 얻으면 된다. 얻은 API key는 폴더의 가장 바깥에 .env 파일을 만들어 암호화한다. gitignore에 .env 파일을 넣어 github에 넣지 않도록 주의한다. query string을 이용해서 검색 기능을 만들어 주었다. youtube에 할당된 요청 수는 많지 않다. firebase처럼 생각하고 계속 요청을 보내다가는 어느새 용량 제한에 걸려버린다. 용량을 더 많이 할당받으려면 요청 서식을 보내고, 검토를 받아..
fetch error: 404 error 유튜브 API를 이용하여 검색 결과에 대한 영상 리스트를 얻는 것이 목적이다. 이를 위해서 API key를 다운받았고, 쿼리스트링을 이용한 검색 조건을 맞추었다. 그러나 계속해서 404 error가 발생하였다. payload가 생성되었고, query에 해당하는 id값이 적절하게 들어갔음에도 오류가 발생한 것이다. 원인은 fetch 내 주소에 'https://'를 생략하고 www부터 적은 것이었다. 이 경우 네트워크-헤더-일반 태그에서 오류가 발생했음을 확인할 수 있다. 금방 수정할 수 있는 오류라서 다행이다.
Typescript: axios 사용, 함수의 type axios로 데이터를 불러와도 어떠한 형태의 데이터가 오는지 확언할 수 없기 때문에 아래의 data 항목에는 any가 할당된다. 오류가 발생하지는 않지만 Typescript를 사용하는 올바른 예시라고는 할 수 없다. 따라서 promise를 반환한다는 것을 알려주고 Todos 배열로 들어오는 것을 알려줘야 한다. 아래의 get으로 들어오는 데이터는 Todos 배열로 들어오는 것을 알려줬다. 1) 함수의 결과를 알려주는 promise는 없어도 data의 타입은 Todos[]로 들어간다. 2) axios의 get 요청으로 불려온 Todos[]는 없으면 data는 any가 된다. 함수의 타입을 모르는 경우 등에 유틸리티를 이용하여 알아낼 수 있다. Promise를 반환하는 경우 특히 유용하게 사용될 수 있을 것..
Typescript: Redux Toolkit store type Redux Toolkit을 사용하면서 Dispatch와 useSelector를 사용하면 빨간줄로 확인할 수 있는 오류는 발생하지 않았다. 그러나 데이터는 생성하지 않고 오류를 발생시킨다. 알고보니 Dispatch와 useSelector를 사용하는데 store에 type을 지정해야 했다. Typescript는 모든 오류를 빨간 줄로 알려줄 것이라는 생각은 하지 않아야 겠다. export type AppDispatch = typeof store.dispatch; export const useAppDispatch: () => AppDispatch = useDispatch; export type RootState = ReturnType; export const useAppSelector: TypedUseSele..
Typescript: Type 선언 Type로 선언해서 객체의 타입을 미리 지정할 수 있다. type Todo = { id: string; title: string} type Todos = Todo[] 사용할 때는 Todo["id"]로 타입을 지정하면 선언된 Type 내부의 key에 따라 정의될 수 있다. * 주의사항 : Json server를 사용한다면 id값은 꼭 string으로 지정해야 한다. 버전이 업그레이드 되면서 id값을 number로 지정하는 기능은 지원하지 않게 되었다. Todos로 선언할 때 key값에 대해 고민했는데, 넣지 않아도 되는 사항이었다. 의외로 해법은 간단할 수 있다는 것을 실감하고 있다.
Next.js: 코드 스플리팅(Code Splitting) TTV(Time to View) : 사용자가 콘텐츠를 볼 수 있는데까지 걸리는 시간. TTI(Time to Interaction) : 사용자가 콘텐츠를 사용할 수 있는데까지 걸리는 시간. 코드 스플리팅(Code Splitting) Next.js에서는 컴포넌트를 동적으로 import하여 사용할 수 있습니다. Next.js의 번들러에서 번들 시 이러한 컴포넌트는 코드가 자동으로 나누어져 번들링 됩니다. 그 결과 실행되지 않아도 불러와졌던 컨텐츠는 런타임시 필요한 모듈만 불러올 수 있게 됩니다. 따라서 로딩 시간이 짧아지므로 TTV가 향상됩니다. 그러나 런타임시 필요한 모듈을 불러오는 형식이므로, 모듈의 크기가 클 경우에는 오랫동안 빈 화면만 나타낼 수도 있습니다. Code Splitting 1. 개요 코드 ..
Javascript: 라이브러리, 프레임워크 라이브러리 - 프로그래밍에 사용할 수 있게 미리 만들어져 있는 함수나 변수들의 묶음이다. - 기능의 모듈화로 이루어진 프로그램의 집합이다. - 여러 곳에 가져다 쓸 수 있다. - 라우팅 관련 설정 등을 개발자가 해야 한다. - 빌드시 발생하는 링킹(Linking)에 따라 정적 라이브러리와 동적 라이브러리로 나뉜다. - 정적 라이브러리란 코드를 복사해서 사용하는 방식이다. - 동적 라이브러리란 코드의 주소를 복사해서 사용하는 방식이다. 프레임워크 - IOC(Inversion of Control)가 발생한다. - 라우팅 방법은 정해져 있고 코드만 적재적소에 넣으면 된다. 동적 라이브러리와 정적 라이브러리에 대한 자세한 내용을 참고한 블로그다. 라이브러리(Library)에 대한 이해 서론 개발하다 보면 라이브..
Next.js: Link React에서 Link 기능을 사용하는 것과 유사하지만 형식에 차이가 있다. 1. import Link from "next/link" 를 사용해야 한다. 2. 'Link to=경로'가 아니라 Link 'href=경로'로 사용해야 한다. 3. 서버 컴포넌트에서도 사용할 수 있다. 계속 오류가 나서 서버 컴포넌트에서 사용하는게 아닌가... 하고 지웠는데 문법 오류였다. 누르면 각 항목에 대한 디테일 페이지로 이동할 수 있다.
Repository 강제 push 깃헙으로 연결하는 중 다음과 같은 오류가 발생했다. pull을 요청하기에 pull을 진행하였다. 그러나 다음과 같은 에러창이 다시 한번 떴다. 강제로 push하는 것으로 오류를 없앨 수 있다. 명령어는 다음과 같다. git push -u origin +main

티스토리툴바