Cohe

1. 기본 구조 설정먼저, 헤더의 기본 구조를 설정합니다. 우리의 헤더는 로고, 네비게이션 메뉴, 검색 기능을 포함합니다..left-btn,.right-btn { margin: 10px; padding: 10px; background-color: white; border: none;}.left-btn { float: left;}.right-btn { float: right; display: flex; align-items: center;}이 코드는 헤더의 좌우 요소들을 적절히 배치합니다.2. 로고 및 아이콘 스타일링로고와 각종 아이콘의 크기를 조절합니다..left-btn > button > img { width: 60%; height: auto;}.r..

404 error 처리 → 권장은 element다.403과 같은 처리는 xfunction App() { const {pathname} = useLocation(); return ( {pathname} 이 페이지는 존재하지 않습니다 } />타입 스크립트 만들기 mkdir ts-practics → cd ts-practics → npm inti이럼 ts-practics 에 package.json이 생김, 거기에 아래와 같은 내용을 추가해주면 됨 (주석은 지우기), "compileroptions":{ "target": "es5", -> ES5방식으로 사용하겠다. ES6으로 설정하면 화살표 함수 사용이 가능 "module": "commonjs", -> 컴파일 된 코드가 어떤 모듈에서 실행할지..

npm create reac리액트 라투어SPA (Single Page Application) : 전통적인 멀티 페이지가 아니다!리액트는 rerendering이라는 방식을 쓰고 있다.spa의 단점 :앱의 규모가 커지면 js 파일도 너무 커져서 로딩이 지연됨(과하게 오래걸림) ← 멀티 페이지와 다름브라우저에서 랜더링이 완료되기까지 빈 화면이 나오게 됨 ⇒ 때문에 progress 화면을 따로 띄우게 된다자스는 싱글스레드 작업이기 때문!그래서 규모가 큰 어플리케이션은 ssr(server side rendering) 방식으로 처리하게 된다.웹팩 설정(서버측 설정)장점 : 다양한 이벤트를 줄 수 있으며 한 페이지 내에서 다양한 걸 할 수 있다t-app router-toturial웹에서 라우팅이란?브라우저의 주소 상..

1. API 연동의 기본 · GitBookyarn add axios 을 다운 받는다.테스트 종류 :raw.githubusercontent.com useEffect 가 세가지 형태로 쓰인다.컴포넌트가 처음 불러올 때 로드하는 경우postman으로 알려줄 수 있음 rest API 서버 역할을 해주는 것이 없는데, 이에 대한 보완법통신 데이터 받아서 테스트 할 수 있는게 있다!JSONPlaceholder - Free Fake REST API프롬프트아래 양식에 따라 포트폴리오에 적을 프로젝트 예시를 적어줘. 프로젝트 설명 (한줄, 기술과 비즈니스 관점 포함하여.)주요 기술 (언어, 프레임워크, 라이브러리, 인프라 포함)개발 사항 (간략하게)테스트 (현업에서 보안, 성능적으로 크리티컬한 사항들)트러블슈팅 / 성능..

2. Context API를 활용한 상태 관리 · GitBookContextAPI 사용방법createContext() 생성자식 컴포넌트에서 Consumer를 이용해서 데이터 받기 => useContext() 훅을 사용할 수 있음.부모 컴포넌트에서 Provider를 사용하여 value값을 제어Provider 와 Consumer 를 독립적으로 분리하기ContextAPI는 전역으로 사용하는 값이기 때문에 파일을 독립적으로 분리해서 작성하도록 변경하위 컴포넌트에서는 훅을 이용해서 편리하게 사용가능useContext() 훅컴포넌트에서 ContextAPI를 편하게 사용가능하게 하는 훅리턴은 객체이고, 첫번째는 상태 값, 두번째는 값을 저장하는 setter객체 반환Ex) const {state, action} = u..

Next.js 프로젝트 생성하기..수동 생성mkdir next-manualcd next-manualnpm init -y ⇒ pakage.json이 만들어진다.pakage.json을 수정한다접은글 내부에 적 더보기{ "name": "next-manual", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev" }, "keywords": [], "author": "", "license": "MIT" }npm install react@latest react-dom@latest next@latestpage.tsx : view component가 있는 파일 → return 값이 있는 것이다.app 폴더를 만..

Next.jsnext.js는 오픈소스 앱 애플리케이션 프레임워크다next.js는 리액트를 기반으로 구현 및 개발됨사용목적서버사이드 렌더링이나 정적 웹 사이트 생성 등 웹 애플리케이션 개발을 편리하게..리액트 기반이나, 서버의 기능도 일부 가지고 있다.리액트 공식 문서에 서버 사이드 랜더링 웹사이트 구축 시 Next.js로 권장함.특징으로 리액트의 기능성을 살피면서 리액트에서 다룰 수 없는 영역을 포함하는 실전적 웹 프레임워크이기 때문, 보다 개발을 십게, 쾌적한 사용자 경험을 제공.리액트 알고 있다면 훨씬 쉽게 작업할 수 있다.SSR/SSG의 필요성SPA는 클라이언트 사이드 렌더링을 사용하면서 초기 표시가 지연되는 문제가 있음.이에 대한 대안으로 SSR/SSG를 볼 수 있음.SSRserver side R..

숙제 - onToggle, onRemoveimport { useCallback, useReducer, useRef, useMemo, useState, useEffect } from 'react';import CreateUser from './Hook/CreateUser';function countActiveUsers(users) { console.log('활성 사용자 수를 세는 중....');...function reducer(state , action) { switch ... case 'CREATE_USER': return { inputs: initialState.inputs, users: state.users.concat(action.user) }..

삭제 버튼을 누르면 삭제가 되는 걸 만들고 싶어요!!array/userList.js에서 작성function User({user, onRemove}) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({users, onRemove}) { return ( { users.map((user) => ( )) } App.js 에서 작업.... const onRemove = id => { // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열 만듦 // user.id가 파라미터로 전달된 id인 것만 제거한 새로운 배열 생성 // filter를 사용하여 구현 -> true인 애들만 제거..

useState를 통한 컴포넌트에서 바뀌는 값 관리하기리액트 16.8 이전에는 함수현 컴포넌트에 상태를 관리할 수 없었음.16.8 이후 부터는 hooks라는 기능을 도입하면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. (ustState는 이 훅들 중에 하나다)State리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.state가 체인지 되면 변화를 감지하여 리렌더링을 수행한다.클래스 vs 함수형 컴포넌트에서 사용하는 방법은 다르다. 함수형 컴포넌트에서는 hooks 개념을 이용해서 더욱 쉽게 사용 가능함.useState 사용하기syntax : useState(초기값)배열 반환첫번째 배열의 요소에는 현재값을 (getter과 동일)두번째 배열의 요소에는 상태를 변경하는 Sett..