Framework overview 이 글은 노마드 코더의 NextJS 시작하기라는 무료 강의를 듣고 작성되었습니다. 강의링크 1.0 Library vs Framework 1.1 Pages Next.js에는 기본적으로 pages라는 폴더가 있는데, 그 폴더는 라우터 역할을 한다. 안에 index.js를 만들면 로컬호스트의 메인페이지에 자동으로 렌더링 된다. 만약 about.js를 만들면 /about 페이지에 해당 내용이 렌더링 되는 방식이다. 즉 파일의 이름이 url이 된다. 하지만 그 안의 컴포넌트의 이름은 상관이 없다. 하지만 그안에 렌더링 될 컴포넌트는 default export가 되어야 한다. 또한 next.js는 자동으로 404페이지를 제공해준다. pages 폴더 안에는 반드시 index.js가 ..

React Hook 리액트 hooks 에 관한 노마드 코더의 무료 영상을 보고 쓴 리액트 훅에 관한 공부 글이다. 실전형 리액트 Hooks 10개 일단 hook이란 react의 state machine에 연결하는 가장 기본적인 방법이다. 이번 글에서는 useState, useInput, useTab에 관해 설명한다. useState useState는 가장 기본적인 리액트 훅이다. const [state, setState] = useState(0); 가장 기본적인 useState 함수 구문이다. useState는 항상 2개의 값을 return한다. 첫번쨰 변수는 우리가 이용하는 값이고, 두번째 변수는 첫번째 변수를 바꿀수 있게해주는 함수이다. 그리고 useState의 괄호 안에 초기값을 부여 할 수 있다...

리액트로 날씨 사이트 만들기01 - 날씨 API 가져오기 날씨 API키 신청하기 실시간 날씨 사이트를 만들기 위해선 우선 날씨 API키를 얻어 와야 한다. 아래 사이트로 가서 무료 API키를 신청 해보자. https://openweathermap.org/price 신청 후에 기다리면 날씨 API 키를 이메일로 보내준다. 나는 이 프로젝트를 최대한 혼자 힘으로 하고 싶었기 때문에 우선 API DOC을 읽었다. Current weather data 무려 20만개가 넘는 도시의 날씨 정보를 끌어올 수 있으며, 데이터는 JSON, Html, Xml 포맷을 지원한다고 한다. 아래는 API DOC 에 쓰여져 있는 API 호출 방식이다. https://api.openweathermap.org/data/2.5/weat..

그 동안 리액트로는 따라써보기를 많이 했는데, 한 번 스스로 리액트로 날씨API를 끌어와 날씨를 알려주는 간단한 사이트를 하나 만들어 볼 생각이다. 당장 생각나는 걸로는 1. 날씨 API를 끌어와야하고 2. 매시간 업데이트 되어야하며 3. 도시를 고를수 있어야한다. 그 외는 만들어가며 해결해볼 생각이다.