Front-End (55) 썸네일형 리스트형 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 1.2주차 후기2.배운 것들 링크 1. 2주차 후기직무교육을 한지 벌써 2주차가 끝났다.굉장히 빠른 속도로 진도를 나갔고 알고 있던 부분 , 모르는 부분 고루 있었다.React에 대해 잘안다고 생각했는데 많이 부족하다는 걸 느꼈다. 어색했던 동기들과 하나 둘 같이 지내며 친해진 거 같아서 좋았다.첫날보다 오프라인 인원이 조금 줄었으나 여전히 많은 사람들이 강의를 함께 들었다. 이번주는 자바스크립트 , 리액트까지 마무리를 했는데메모이제이션이라는게 특히 인상 깊었다. 최적화는 이런 식으로 진행되는거구나.내가 이런 부분이 부족한거구나.여기 들어오기 전에 나태해질 뻔 했다.뭐가 중요한지 몰라 뭘 공부해야할지 몰랐기 때문이다.유데미에 들어오게 된 건 정말 잘한 거 같다고 다시금 생각했다. 강사님의 강의는 여.. 서버 띄우는법 , http통신 json-server라는 놈을 사용한다.다운 방법https://www.npmjs.com/package/json-server json-server[![Node.js CI](https://github.com/typicode/json-server/actions/workflows/node.js.yml/badge.svg)](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.1, last published: 2 months ago. Start using json-server inwww.npmjs.com이쪽에 들어가서 보면 된다.1.일단 라이브러리 설치한다.npm install json-.. Context API 어떤 상태(state)를 전체적으로 공유하기 위함이다. 3가지만 기억하면 된다.1.createContext 만들기2.Provider(껍데기) 만들기3.내가 쓸 곳에 씌워주기. 1.createContext 만들기const UserContext = createContext(초기값) 2.껍데기 만들기export default function AtuhProvider({children} : {children : Type}) {안에서 state와 state함수 return ( {children} )} 3.내가 쓸 곳에 놓기.//app.tsx 심화적으로 보겠다.import { createContext, useState } from "react";import getAuthDataFromLocalSto.. 메모이제이션 리액트는 상위 컴포넌트의 sate가 업데이트가 되면 그 하위 컴포넌트까지 제렌더링 된다.함수가 다시 호출되고, 값을 다시 부른다는 뜻이다.이렇게 되면 에너지 낭비이기 때문에 리액트에선 3가지 훅을 제공한다.이 3가지 훅은 값이나 함수를 메모리에 저장해 자원을 아낄 수 있다. useCallback(함수),useMemo(값),useReducer 각각 하나씩 살펴보겠다. useCallback 두가지 인자를 받는다.1.메모이제이션2.의존성 배열의존성 배열의 값이 변경되지 않는 한 , 동일한 함수 인스턴스를 반환한다. 사용방법const 변수선언 = useCallback(()=>{},[])const increment = useCallback(()->{ //이 함수 내부에서 발생하는 일이 //굉장히 비용이 많이 발.. 리액트 불변성 State나 props 같은 데이터를 변경할 때 ,기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것 불변성을 지켜야 하는 이유 - 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게 비교해 변경 된 부분만 찾아내고 , 최소한의 DOM 조작이 가능하다. - 예측 가능성 : 상태 변화를 추적하기 쉽고 어떤 부분이 변경되었는지 파악하기 쉽다. - 데이터 흐름 단순화 : 데이터 흐름이 단순해지기에 앱의 안정성을 높일 수 있다. 지키는 방법1.객체나 배열을 직접 수정하지 않기새로운 객체를 생성하여 값을 복사 , 변경해야 할 부분만 수정한다.스프레드 연산자를 사용해 기존 객체를 복사하고 , 변경할 부분을 추가하거나 수정한다. 2.불변성을 보장하는 함수 사용map , filter , r.. 코드분석(To-do-list) 오늘은 To-do-list를 만들어봤다. 투두리스트는 기본기(CRUD)에 정말 좋은 예제라고 생각한다. 어떤 기능인지 살펴보면 ,인풋창에 데이터를 입력하고 버튼을 누르면 밑에 목록이 생기고 ,체크를 하면 밑줄이 처진다.X를 누르면 해당 컴포넌트가 삭제된 것처럼 보이는 기능이다. (현재 서버 없이 혼자 만드는 것이기 때문에 API에 요청을 보내진 않는다.) 전체적으로 보겠다.투두 리스트를 담은 배열 안에,정보들이 담긴 객체가 한덩이 한덩이 있어야 한다.객체 안엔 {id,text , checked}의 앖이 들어가야 한다.그러니까 최종으로 보면 이런 느낌이다. [ {id : 유니크한 값, text : 내가 쓴 내용, isCompleted : true & false} , {id : 유니크한 값, text .. 조건부 렌더링 조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것if문 , 삼항 연산자 , 논리 연산자(&&) if문 if (isLoggedin) { return 로그인 성공; } return ( 실패! );} 삼항 연산자 true false에 따라 결과를 다르게 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin ? "로그인 성공" : "로그인 실패"};} 논리연산자(&&)해당 조건이 참일때만 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin && "로그인 성공" };} 구조분해할당(Destructuring) {...rest} 비구조화할당이라고도 불린다. 구조분해 할당 정의"구조화된 배열을 파괴해 1개 이상의 변수에 할당하는 방법" 두가지를 주로 쓰게 될 것이다.1. 받은 값의 이름 그대로 현재 컴포넌트의 변수로 저장2. [...rest],{...rest} 예를 들어 유저정보를 api로 받는다고 하자.근데 값이 뭐가 들어오는지 , 서버에서 딱히 정의가 되지 않았다면?타입명시를 제대로 못할 때 쓰는 팁이다. 1. 받은 이름 그대로 변수저장하기1. 객체const obj = {name : Alice , age : 30 ,email: 'alice@example.com'}//이게 구조분해할당const{name, age , email} = objconsole.log(name) //Aliceconsole.log(age) //30con.. 이전 1 2 3 4 5 6 7 다음