POTATO THAT WANT TO BE HUMAN

~~~ 지난이야기 ~~~Next.js에서 Naver API를 연동해 기사 데이터를 조회해왔는데 ...1️⃣ 오류 발생필자는 Next.js app router를 사용 중이다.dynamic router를 사용해 게시물 상세 페이지를 구현했었다. 어림도 없지어느 날부터 갑자기 dynamic router 작동이 되지 않는 것이다 ...상세페이지에 들어가면 아래와 같은 화면만 나올 뿐이었다 ..  정말 처음 보는 페이지였다.404면 404지 저건 무슨 형태인가?Malformed URL 부터 에러코드까지 전부 검색해봤지만 비슷한 내용조차 찾지 못했다.. 결국 작동이 되던 때를 생각하며 어디서부터 잘못되었는가를 복기했다.  2️⃣ 돌아가자아, 이건 Naver API 연동부터 잘못됐다라는 느낌이 들어 설정 파일부터 하..

Next.js에서 Naver API를 사용해 뉴스 데이터를 가져와보자  1️⃣ Naver API 애플리케이션 등록하기 먼저 Naver Developers에서 프로젝트를 생성해야 한다.https://developers.naver.com/ NAVER Developers네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음developers.naver.com 다양한 API가 있는데 필자는 뉴스데이터가 필요해 검색API를 선택했다.웹 서비스 URL이 따로 있지 않다면 localhost로 설정하면 된다. 프로젝트가 생성되면 애플리케이션 정보로 Client ID와 C..

Next.js로 개인프로젝트 진행 중 난관에 부딪혔다. 계획: Next.js에 mysql 연결해서 end point API를 만들어서 client component에서 사용해야겠다! 현실: 한 번에 성공할거라고 기대하셨나요? (´･ω･`)? 그래 어떻게 한 번에 성공하겠어 라는 생각으로 6시간을 헤맸다 .. Next.js 내부에서 db연동하고 api를 만들어 쓰는 레퍼런스는 별로 없던 것이 가장 큰 문제였다. api를 위한 서버를 따로 구성하는 사람이 많았다. node.js나 express등등.. 포기할 수 없다. 그렇게 구글링으로 셀 수 없이 많은 시도를 하며 3시간을 보내고 깨달았다. 아! 이렇게해서는 해결할 수 없다! 공식문서부터 살펴보기 시작했다. 그렇게 발견했다. 완벽한 답은 아니였지만 일단 접..

자바스크립트에서는? 자바스크립트에서 key를 통해 객체에 접근하는 법은 다음과 같다. const object = { red: "FF0000", green: "00FF00", blue: "0000FF" }; console.log(object['red']); 그렇다면 타입스크립트에서는? 타입스크립트에서도 똑같다 그런데 string key를 변수에 가둔다면 ?! const object = { red: "FF0000", green: "00FF00", blue: "0000FF" }; let name = 'red'; console.log(object[name]); // Element implicitly has an 'any' type because expression of type 'string' can't be ..

아래와 같이 모두 숫자로 구성된 두 개의 배열이 있다고 가정해보자. const arr1 = [1, 2, 3, 4]; const arr2 = [5, 6, 7, 8]; // 합계 // [6, 8, 10, 12] arr1과 arr2의 합계를 구하고 싶은 경우 map함수을 활용해 다음과 같이 구할 수 있다. arr1.map((ele, idx) => x + arr2[idx]); // [6, 8, 10, 12] map함수는 새로운 배열을 return 하기 때문에 새로운 배열에 할당하면 된다. 정리 const arr1 = [1, 2, 3, 4]; const arr2 = [5, 6, 7, 8]; const sumArr = arr1.map((ele, idx) => {return ele + arr2[idx]});

자바스크립트에서 배열의 길이를 알아내는 것은 아주 간단하다. array.length 를 사용해 배열의 길이를 구할 수 있다. const arr = [1, 2, 3, 4, 5]; console.log(arr.length);// arr 배열의 길이는 5 그렇다면 객체의 길이는 어떻게 알 수 있을까? 우선 객체는 다음과 같이 생겼다. const obj = { name: "dress", color: "green", price: "10,000" } 객체의 길이를 알고자 배열에서 했던 것처럼 obj.length 를 하면 될까? 객체는 배열과 다르게 key와 value로 나뉜다. 위 예시로 보자면 name, color, price가 key가 되고 "dress", "green", "10,000"이 value가 된다. ..

나 : 배열 길이만큼 for문 돌리면서 배열의 값을 state 변수에 저장할게 !! 현실 : 되겠냐 ㅋㅋ 🔎 원인을 알아보자 state 값을 변경시켜주는 setState()는 비동기이기 때문 ! 즉각적으로 상태를 업데이트 시켜준다면 반복문 내에서도 사용이 가능하다. 하지만 setState() 는 Promise 를 이용해 비동기적으로 상태를 변화시키기 때문에 생각처럼 작동하지 않는다. 더 자세히 알아보면, setState()를 호출하게 되면 UpdateQueue에 업데이트 요청이 큐잉되고 비동기적으로 하나씩 처리한다. 이 업데이트 요청이 완료되기 전에 새로운 업데이트 요청이 들어오게 되면 업데이트 전의 값을 기준으로 다시 큐잉되게 한다. 그렇다. for문 안에서 setState() 로 업데이트 요청을 했는..

🔎 리액트의 라이프사이클 리액트는 컴포넌트 기반의 view를 중심으로 한다. 그렇기 때문에 각각의 컴포넌트에는 라이프사이클(수명주기)가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 다음은 리액트의 라이프사이클에 대해 잘 나타낸 다이어그램 사이트이다. 본 글에 사용된 다이어그램 역시 위 사이트를 캡쳐한 것이다. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 리액트의 라이프사이클은 크게 세가지로 나눌 수 있다. 생성 될 때 ➡ 마운트 업데이트 할 때 ➡ 업데이트 제거 할 때 ..