next.js로 코드 짜는 과제 시작! 일단 가이드를 따라하면서 했다. 먼저 api 폴더를 만들어 준 뒤에 컴포넌트를 만드는데 서버, 클라이언트 컴포넌트를 나눠줘야 한다. 나누는데 조금 헷갈리긴 했는데 일단 useEffect, useState를 써줬기 때문에 use client를 넣어줘야 했고, const [pokemons, setPokemons] = useState([]); useEffect(() => { const getPokemons = async () => { const res = await fetch('http://localhost:3000/api/pokemons'); const data = await res.json(); setPokemons(data); ..
프리렌더링서버에서 미리 html을 생성하고, 완성된 html 파일을 브라우저에 전달하는 방식이다. 1. 리액트 코드의 프리렌더링기본적으로 클라이언트 사이드 렌더링(CSR)을 사용한다.이것은 자바스크립트 파일 다운 후 브라우저에서 실행되어,html을 동적으로 생성하는 방식이다. 그것을 확인해보려면 개발자 도구의 네트워크 탭을 보면 알 수 있다.거기서 문서를 보면 와 같은 빈 태그만 존재하는데그렇기 때문에 초기 html 문서에는 콘텐츠가 없다. 2. next.js 코드의 프리렌더링서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)를 지원한다.이는 브라우저가 자바스크립트를 실행하기 전에 서버에서 미리 html을 생성하는 방식이다. 이것도 개발자 도구의 네트워크 탭 문서를 보면 body 태그 안에 모든 ..
useState 기초 과제 풀기 1. 카운터 만들기문제import React from 'react';function Counter() { return ( Count: 0 Increment );} 쓴 코드더보기 import { useState } from 'react';const App = () => { const [num, setNum] = useState(0); return ( {`count: ${num}`} setNum(num + 1)}>Increment );};export default App;2. 텍스트 입력 상태 관리문제import React from 'react';function TextInput() { return ..
이번 타입스크립트 과제 정리! const [countriesList, setCountriesList] = useState([]);먼저 state를 만든다. api에 들어있는 데이터를 일단 쫙 가져와야 하는데 그걸 담는 state를 만들어줘야 한다. 그럼 그 api 데이터를 가져와야 하는데 여기서 좀 생각을 했다. 쿼리냐 이펙트냐. . . 찾아보니까 useEffect는 단순히 컴포넌트가 마운트 될 때 데이터를 가져오는 등의 작업을 처리할 때 사용하고, useQuery는 데이터 페칭, 캐싱, 로딩 상태 관리, 오류 처리 등을 쉽게 관리할 수 있도록 도와준다고 한다. 그래서 지금 상황에서는 서버에서 데이터를 가져오는 것이니까 useQuery가 더 적절한 느낌이었지만,,, 간단한 코드를 짜는 거라 그냥 us..
함수에 타입 지정하기 1. 파라미터와 리턴 타입 지정방법은 :타입을 쓰면 된다.function 인사하기(이름: string, 나이: number): string { return `안녕 내 이름은 ${이름}이고, 나이는 ${나이}살이야`;}function 인사하기2({ 이름, 나이 }: { 이름: string; 나이: number }): string { return `안녕 내 이름은 ${이름}이고, 나이는 ${나이}살이야`;}console.log(인사하기("병수", 12));console.log(인사하기2({ 이름: "병수", 나이: 12 }));function printMessage(message: string): void { console.log(message);}printMessage("Hel..
타입 추론 - type inference 일단, 타입스크립트는 자바스크립트를 기반으로 한 언어이므로 자바스크립트에서 유효한 코드는 타입스크립트에서도 유효하다. 그러나 아래와 같은 코드가 있다면, let a = 5a = '10' 자바스크립트에서는 당연히 되지만, 타입스크립트는 오류를 뱉어낸다.재할당하려는 변수값이 숫자가 아니기 때문에 a 변수에 할당될 수 없다고 하는 오류가 뜬다. 이러한 현상이 나타나는 이유는 타입스크립트의 타입 추론 때문이다. 타입스크립트에서는 타입이 없으면 타입 정보를 제공하기 위해 타입을 추론한다. 즉, 타입 표기가 없는 경우 타입스크립트에서는 코드를 읽고 분석해 타입을 유추해낸다는 것이다. 타입 명시 말 그대로 변수를 선언할 때 변수 값의 타입을 명시함해 데이터 타입을 지정하는 ..
