hyehyehye hyehyehye

인증 토큰의 원리 사용자가 유효한 자격 증명을 전송한 뒤 허가 토큰을 생성하지, 저장하지는 않는다. 토큰은 기본적으로 몇 가지 정보를 포함한다. 백엔드에서 이 토큰을 생성하고 그것을 다시 클라이언트에게 전송한다. 이 토큰의 특별한 점은 토큰을 생성한 백엔드만이 해당 토큰의 유효성을 확인하고 검증할 수 있다는 것이다. 백엔드만이 알 수 있는 개인키를 사용해 토큰을 생성했기 때문! -> 백엔드에서 토큰을 생성하고 유효성 검증을 하며 프론트에서는 토큰을 저장하고 이후에 보낼 요청에 첨부하여 해당 토큰을 사용자의 로그인 여부를 판단하는 인디케이터로 사용해야 한다. 백엔드에서 받는 응답으로부터 토큰을 추출해서 저장해야 함 가장 간단한 방법은 local storage! localStorage.setItem('tok..

리듀서 함수는 반드시 순수 함수여야 하며 부수효과가 없고 동기식이어야 한다. 어디에 side effect와 비동기 작업이 실행되어야 하는가? -> useEffect를 사용하여 컴포넌트 안에 넣는다. -> action creator 안에 넣는다. 우리의 logic 코드를 어디에 두어야 하는가? 동기적이고, side effect가 없는 코드 (ex 데이터 변환) : reducer 사용, action creators나 컴포넌트를 피할 것 비동기적이거나 side effect가 있는 코드 : action creators나 컴포넌트를 사용하고 reducer는 절대 사용하지 말 것 리덕스와 함께 useEffect 사용하기 useSelector가 리덕스에 대한 구독을 설정한다. 리덕스 스토어가 변경될 때 마다 컴포넌트..

Typescript 자바스크립트의 수퍼셋 -> 자바스크립트를 토대로 만들어진 프로그래밍 언어 단점 : 타입스크립트는 브라우저 같은 자바스크립트 환경에서는 실행되지 않는다. but 코드를 작성해서 실행하면 자바스크립트로 변환해주는 강력한 컴파일러 기능도 한다. 타입스크립트를 쓰면 개발자가 스크립트 실행 전에 미리 코드에 존재하는 오류를 확인할 기회가 생긴다 -> 이런 오류는 브라우저에서 런타임으로 나타남! 자바스크립트에서는 입력값 요소의 값을 받으면 항상 문자열이다. tsc 어쩌구.ts -> 타입스크립트 컴파일러 실행 타입스크립트 개요 타입스크립트 사용 시 최신 자바스크립트 기능을 사용할 수도 있고, 옛날 브라우저에서 작동하는 코드를 생성, 변환할 수도 있다. lite-server 간단한 개발 서버로, 항..

Fetch를 통해 데이터 가져오기 useEffect로 입력한 함수는 Promise를 반환하면 안된다. -> async, await를 사용하려면 중첩된 내부 함수로 입력해야함. useEffect(() => { const fetchMeals = async () => { await fetch( "https://firebase 경로/meals.json" ); }; }, []); useEffect(() => { const fetchMeals = async () => { const response = await fetch( "https://firebase 경로/meals.json" ); if (!response.ok) { throw new Error("Something went wrong!"); } const re..

Next.js 란? NextJS는 프로덕션용 React 프레임워크 ReactJS의 풀스택 프레임워크 React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리 -> 이는 핵심적으로 사용자 인터페이스 부분인 컴포넌트, 상태, 프로퍼티 등에만 초점을 맞추고 있기 때문에 라이브러리로 분류된다. Next.js는 프레임워크, 즉 React 상에 구축된 프레임워크 핵심 기능 서버 측 렌더링 지원 NextJS가 추가하는 기능 중 가장 중요한 기능은 바로 내장된 기능인 서버 측 렌더링 지원이다. CSR은 무엇을 구축하느냐에 따라 문제가 될 수도 있다. 데이터를 가져오는 부분에서 사용자 경험의 관점에서는 이러한 로딩이 이상적이지 않을 수 있다. 검색 엔진 최적화(SEO)가 중요한 경우에도 문제가 될 수 있..

1) 모든 키 입력마다 확인하며 이 값들을 어떤 상태 변수에 저장할 수 있고, (useState) 2) ref을 이용하여 사용자 값을 모두 입력했을 때 입력 값을 가져올 수도 있다. (useRef) 무엇을 사용할 지는 입력된 값으로 하고자 하는 일에 따라 다르다. 값이 한 번만 필요하다면? useRef 즉각적인 유효성 검증을 위해 키 입력마다 입력 값이 필요하다면? useState 입력된 값을 초기화 하고 싶다면? useState 입력된 값을 초기화 하는 것은 useRef로도 가능은 하지만 DOM을 직접 조작하는 것이기 때문에 좋은 방법이 아니다!!! 브라우저에서 유효성 검증하는 방식은 사용자 경험 측면에서 빠른 반응을 할 수 있으므로 좋다 그러나 서버에서도 검증되어야 하는데, 그 이유는 브라우저에 있는..

Fetch API 브라우저 내장형 JSON 데이터 자바스크립트로의 변환 작업이 필요하지만 그럼에도 불구하고 파일에서 자바스크립트 객체로의 변환이 매우 쉽다. json() 메소드 response 객체에 있는 내장 메소드 Axios 서드 파티 패키지 라이브러리 -> 요청 전송에 성공한다면 오류 상태 코드에 맞는 오류를 만들어서 전달한다. 응답을 기다리게 되다보면 오류를 받을 수도 있고 데이터를 받을 수도 있는데 이 데이터가 비어있을 수도 있다. -> 이런 여러가지 시나리오를 다룰 줄 알아야 한다. Firebase RealTime database -> Rest API가 상대적으로 좋다. fetch()는 데이터를 전송하는데에도 사용할 수 있다. body는 자바스크립트의 객체가 아닌 json 객체를 필요로 한다...

리액트 훅은 클래스 기반 컴포넌트에서는 사용이 불가능하다. render() 메소드는 리액트에 필요한 특정 메소드로 리액트가 jsx 코드 안에 컴포넌트가 사용된 것을 확인하면 그때 호출하는 메소드이다. 함수형 컴포넌트에서의 return 문과 동일하다. render()메소드는 props를 받지 않는다. 클래스 기반 컴포넌트는 함수형 컴포넌트와 함께 작업이 가능하다. class Users extends Component { toggleUsersHandler() { } render() { ... } } -> 클래스 기반 컴포넌트에서 함수를 선언하는 보편적인 방법 클래스 컴포넌트에서 상태를 정의할 때는 constructor를 사용한다. constructor에서는 상태 초기화 같은 초기화 작업을 할 수 있다. 클래..