내용 복습/Next.js (11) 썸네일형 리스트형 타입스크립트의 잉여속성검사(Excess Property Checks) 1. 핵심개념객체 리터럴을 변수에 바로 대입하거나 인자로 넘길 때, 그 타입에 정의되지 않은 속성이 포함되면 오류가 발생한다.하지만 일반 변수에 저장 후 넘기면 오류가 발생하지 않는다.interface User { name: string; age: number;}const u: User = { name: "Alice", age: 30, email: "example@example.com"} 위의 코드에서 u의 email User 타입에 없으므로 에러가 발생한다. 하지만 아래와 같은 예시처럼 잉여속성검사를 우회할 수 있다. 1. 구조적 타이핑 : 타입이 선언된 이름과 무관하게 속성의 구조가 같으면 호환된다고 판단하는 방식. 협업 시 유연함을 주지만, 너무 느슨할 수도 있음.// User에는 emai.. 리액트의 Context API 1. 컨텍스트 API 생성 및 임포트컨텍스트 API는 컴포넌트나 컴포넌트 레이어 간의 데이터 공유를 용이하게 해줍니다. 컨텍스트 값을 생성하고 해당값을 제공함므로서 이 컨텍스트를 묶어주는데, 다수의 컴포넌트 또는 앱의 모든 컴포넌트를 묶어줄 수 있다. 여러 컴포넌트에 제공되는 컨텍스트 값의 장점은 state와 연결이 쉽다는 점이다.이는 state를 해당 컨텍스트 값에 연결하면 앱 전체에 제공되는 방식으로 사용된다. 그러므로 props를 없앨 수 있고 컴포넌트 레이어 간의 전달이 필요없게 된다. 대신 상테에 연결된 컨텍스트 값이 앱의 모든 컴포넌트에 제공되는데, 직접적으로 해당 컴포넌트에 필요한 상태값에 연결된다. 와 같은 형태로 사용될 부분을 감싸주는데, Provider 속성은 개발자가 생성한 것이 아닌.. 다이나믹 라우팅 in Next.js 동적 라우팅(Dynamin routing)은 정적 라우팅(Static routing)과 대비되는 말로 수동으로 경로를 추가하는 정적 라우팅에 반해 라우팅 테이블에서 경로의 현재 상태에 따라 경로를 자동으로 조정한다. 미리 정의·고정된 url이 아니라 동적으로 변화하는 주소에 연결하는 것을 말한다. 즉, 단일 페이지, 하나의 컴포넌트를 사용해 변화하는 데이터를 수용할 수 있는 페이지를 제작할 수 있다. 1. 리액트에서의 다이나믹 라우팅리액트는 SPA이기 때문에 라우팅 시 react-router-dom의 보조를 받는다. 라우트 경로를 설정하는 페이지에서 라우트 할 경로를 선언해주고 사용한다. useParams를 사용해서 파라미터를 받아오는 것이 가능한데 주의할 점은 선언하는 변수명을 URL 파라미터의 이름.. create-react-app 대신 vite로 리액트 프로젝트를 생성하는 이유 프로젝트를 생성하는 것은 할 때마다 약간씩 헷갈린다. 기억왜곡인지 방식을 틀릴 때도 있고, 실수로 폴더 뎁스를 더 타거나 이름을 잘못 설정하기도 하고. 그래서 이번엔 기록으로 남겨두려고 한다. 어느 순간부터 create-react-app(이하 CRA)이 잘 동작하지 않았다. 템플릿을 못 가져와서 올바르게 실행되지 않아 지난번 최종 프로젝트 땐 git에 저장해놓은 패키지를 pull 받아서 사용했었다. 알고보니 CRA는 지원이 중단되었고 Vite라는 리액트 스타터가 뜨고 있다고 한다. 1. React + typesctipt + SWC 설치Vite는 웹팩을 사용했던 CRA와 다르게 내부적으로 esbuild를 사용해 훨씬 빠르다고 한다. 이것을 몰랐다니 억울한 기분이 들었다. 최근 들었던 유데미 강의에서도 파.. [React] cookie 적용 시간 처리 주말동안 메인페이지를 만드는 작업을 진행했는데, 메인페이지에서 로그인 여부에 따른 버튼 노출을 처리하면서 겪은 트러블 슈팅 기록이다. 로그인 이전에는 회원가입과 로그인 버튼을 노출시키고 로그인 이후에 쿠키에 토큰이 들어가면 회원정보를 담은 프로필과 로그아웃 버튼을 노출시켜야 하는데, 리액트에서 쿠키를 사용해본 경험이 없다보니 적용을 처리하는 데에 에러를 겪었다. 쿠키에 토큰이 정상적으로 들어가고 난 이후에 노출되었다면 로그인 시 즉시 적용되어야 하는데, 새로고침을 해야 쿠키가 들어간 것이 적용되었다. 분명 useEffect 훅을 사용하고 있는데도 이런 일이 발생하는 것이 이상했다. 로딩 상태를 관리 하는 코드도 적용해봐도 별다른 차도가 없어서 어떻게 해야하는지 고민하던 차, useEffect의 의존성 배.. [React] 상태관리 라이브러리 Recoil 연습 지난 next.js로 프로젝트를 하면서 프롭스 드릴링이 4번 정도 일어나는 경험을 했기에 상태관리 라이브러리의 필요성은 느끼고 있었다. 아무래도 드릴링 뎁스가 길어지면 코드는 비요율적일 수밖에 없고 사이드 이펙트로 많을 것이기에. 일단 사용하기 편한 recoil을 공부해봤다. 아래 내용은 recoil 공식문서의 todolist 만들기이다. npm install recoil / yarn add recoil 패키지 메니저에 알맞게 설치하고 루트 컴포넌트인 index.js의 본문을 로 감싸준다. recoil을 사용하기 위해선 두가지만 기억하면 되는데, atom과 selector이다. Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌.. [React] state(2) 1. 양방향 바인딩 // Player.jsx import { useState } from "react"; export default function Player({ initialName, symbol }) { const [playerName, setPlayerName] = useState(initialName); const [isEditing, setIsEditing] = useState(false); function handleEditClick() { setIsEditing(true); } function handleChange(event) { setPlayerName(event.target.value) } let editablePlayerName = {playerName} // let btnCapti.. [React] State 정리(1) 1. 파일 구조 설명 파일 구조 index.html파일은 리액트가 제어한다. 그리고 index.jsx에는 reactDOM.createRoot(document.getElementById로 시작하는 코드가 있는데, 전체 코드는 root라는 id를 가진 앱 컴포넌트를 렌더링하는 것이다. index.html은 결국 웹사이트를 방문하면 처음 보게 되는 내용이라는 것이다. 따라서 props나 state의 영향을 받지 않아 변하지 않을 내용(ex. 메인로고)이라면 이 페이지에 삽입해도 되는 것이다. 모든 내용을 컴포넌트에 넣으려고 애쓰지 않아도 된다는 것이 골자이다. src/assets/ 폴더에 이미지를 저장하면 웹사이트 방문자에게 공개적으로 제공되지 않기에 웹사이트 방문자가 접근할 수 없지만, 코드파일에서 사용할 .. 이전 1 2 다음
