Today Hailie Learned

1. 불필요한 연산 줄이기1. 연산된 값을 props로 넘기기2. useMemo로 연산 최적화하기 2. 문자열이면 중괄호 쓰지 않는다.  3. Props에서 spread 연산자가 쓰이면, 관련있는 props, 관련없는 props, 나머지 props로 나눠보자! 4. 너무 많은 props를 넘기는 경우분리를 해보자. 5. props에 객체 전체를 내리지 말고, 꼭 필요한 값만 내리자. 6. React.Fragment의 shortcut: key 값을 위해서는 사용

◆ docusaurus에서 최신 블로그 글 가져오는 방법 (사진이나 글쓴이 없이 제목과 링크만 가져오는 방법) import React from 'react' import recentPosts from '../../../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json' const BlogItem = () => { // console.log(recentPosts) return ( {recentPosts.items.slice(0, 5).map((item, index) => ( {item.title} ))} ) } export default BlogItem 참고) https://stackoverflow.c..

✔️ 환경 변수 파일이란? 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미합니다. .env 파일에 정의된 변수를 의미하고, 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용합니다. ✔️ 환경 변수 파일을 왜 사용할까? 👉보안과 유지보수에 용이하기 때문에! port, db 관련 정보, API_KEY 등 오픈소스에 올리면 안되는 값을 dotenv 패키지(환경변수 파일)를 사용해서 소스코드 내에 하드코딩하지 않고 사용할 수 있다는 장점이 있습니다. ✔️ 사용 방법 ▶ .env 내에서 환경변수 적는 방법 REACT_APP_FIREBASE_API_KEY = "" REACT_APP_FIREBASE_AUTH_DOMAIN = "" ▶ 환경변수 가져와서 사용하는 방법 apiKey: process.e..

지금까지 2번의 프로젝트에서 로그인/ 회원가입 파트를 맡았는데 그때는 모두 로그인, 회원가입을 별도의 경로로 분리해서 만들었다. 그런데 이리저리 구글링을 하다가 위의 gif처럼 탭 형식으로 로그인과 회원가입을 만들어보고 싶었다! 그래서 도전! 사용한 기술스택 React, Typescript, Styled-components 구현할 퀘스트 1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀐다. 2. 클릭되는 로그인/회원가입 탭을 css로 표시한다. 3. 이메일에 @, . 포함되고, 비밀번호가 8자리 이상일 때 버튼이 활성화된다. 1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀌게 하기 탭부분과 폼부분을 나눠서 만들어서 붙이면 된다. 그리고 로그인이 된 상태를 알..

✔️ Next.js는 무엇인가? vercel에서 만든 리액트의 프레임워크!! 클라이언트 사이드 기술과 서버 사이드 기술을 모두 가지고 있는 올인원 솔루션입니다! api를 구현해서 프론트엔드인 리액트와 하이브리드하면 간단하게 서버 기능과 프론트엔드 기능을 모두 가지고 있는 애플리케이션 스택을 구축할 수 있습니다. ** 라이브러리 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다. 폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유롭습니다. ex) 무언가를 자를 때 '도구'인 '가위'를 사용해서 '내가' 직접 컨트롤하여 자른다. ** 프레임워크 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다. 폴더명, 파일명 등에 대한 규칙이 있고 라이브러리에 비해 좀 더 엄격합..

axios는 response.data로 받고, fetch는 response.json()으로 받는다! axios useEffect(() => { axios .get("http://localhost:3001/user") .then((response) => response.data) .then((item) => setUserData(item)); }, []); fetch useEffect(() => { fetch(`http://localhost:3001/user/`) .then((response) => response.json()) .then((item) => setUserData(item)); }, []); 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

리액트에서는 태그 대신 Link를 사용해야한다. 이유는 태그의 href로 이동하면 상태값을 잃고 속도도 저하된다고 한다. 리액트의 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다. 핵심 태그의 href는 페이지를 이동시킬 때 페이지를 새로 불러오게 된다. 그래서 상태 값이 유지되지 못하고 속도도 저하된다. Link 컴포넌트는 브라우저의 주소만 바꾸고 페이지를 새로 불러오지 않는다. 사용 예시 import { Link } from "react-router-dom"; ... log out 😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

대부분의 웹앱에는 인증 DOM이 필요하다. 인증 DOM =Authentication DOM 사용자가 로그인해야만 접근 가능한 구역이 있다. 1. 리액트 앱에서 인증이 작동하는 원리 2. 사용자 인증의 예시 (가입, 로그인, 로그아웃, 로그인 시 보호된 리소스에 접근하는 법) 3. 사용자가 페이지 떠나도 로그인 유지해주는 기능 & 자동 로그아웃 기능 웹사이트에서 인증이 필요한 이유 => 보호해야 할 정보가 있다!! 유저 비밀번호, 데이터베이스에 저장된 데이터 및 미인증 사용자의 접근이 제한된 페이지에 리액트 앱이 요청을 보낼 때 그 요청을 받는 API 엔드 포인트가 그런 데이터에 속한다. 프로필 페이지 자체에도 접근 제한 + 요청받는 API 엔드포인트에도 접근 제한 걸어야 한다. 인증이 어떻게 작동할까? ..

코드 분할 (Code Spliting) 번들링을 할 때, HTML 웹 페이지에 JS를 추가하는데, 모던 웹으로 발전하면서 점점 DOM을 다루는 정도가 정교해지면서 JS 코드 자체가 방대해지고 무거워졌다. 이를 해결하기 위한 방법으로, 번들을 물리적으로 나눈 후, 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오는 것이다. => 이게 바로 코드 분할! 코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능이다. 번들 분할 하는 방법 => 서드파티 라이브러리는 npm을 통해 다운받는 라이브러리인데, 사용자에게 다양한 메소드를 제공하기 때문에 코드의 양이 많고, 번들링 시 많은 공간을 차지한다. 그래서 사용 중인 라이브러리 전부..

useRef란? 1. 특정 요소의 DOM 주소값을 가져오는 React Hook이다. React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있다. React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않고, 원하는 결과가 나오지 않을 수도 있기 때문이다. 그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황이 있다. 이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있다. 하지만 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황을 제외하고는 useRef..