Today Hailie Learned

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

const fn = { add: (num1, num2) => num1 + num2, connectUserDB: () => { return new Promise((res) => { setTimeout(() => { res({ name: "Hailie", age: 30, gender: "female", }); }, 500); }); }, disconnectDB: () => { return new Promise((res) => { setTimeout(() => { res(); }, 500); }); }, }; module.exports = fn; const fn = require("./fn"); let user; beforeEach(async () => { user = await fn.connectUserDB..

jest는 페이스북에서 만든 테스트팅 도구이다. zero-config 철학을 가지고 있어서 별도의 설정없이 빠르게 테스트 케이스를 만들 수 있는 것이 장점이다. jest 설치하기 npm install jest --save-dev 개발 할때만 사용하기 때문에 뒤에 --save-dev를 붙인다. package.json에서 수정한다. "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, 👇 "scripts": { "test": "jest" }, ~.test.js로 끝나거나 __test__폴더에 담겨있으면 자동으로 테스트 파일로 인식한다! 특정 파일만 테스팅하고 싶으면 npm test 뒤에 파일명이나 특정 경로를 붙이면 된다. //fn.j..

◆ 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. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀌게 하기 탭부분과 폼부분을 나눠서 만들어서 붙이면 된다. 그리고 로그인이 된 상태를 알..

프로젝트 마무리 단계에서나 배포하기 전에 확인하면 좋을 내용을 간단히 정리합니다. 1. 웹 페이지 Title에는 React App 또는 Vite + React app가 아니라 파비콘과 앱 이름이 정확히 적혀 있어야 합니다. 저는 프로젝트에서 Vite라는 빌드 도구를 사용했습니다. 아무런 설정을 하지 않으면 아래와 같이 웹 탭이 생성이 되는데, 프로젝트를 배포할 때에는 꼭 설정을 해서 완성도를 높여야 합니다. 2. SNS로 다른 사람에게 링크로 공유시 og 카드는 제대로 나와야 합니다. (Open Graph태그 설정하기) 'og 카드'라는 단어가 생소해도 위의 캡쳐본을 보면 한눈에 알겠죠? og 카드는 SNS미리보기 화면이라고 생각하면 되고, SNS에 게시되는데 최적화된 데이터를 가질 수 있도록 설정하는 ..

이 내용은 우아한테크코스 테코톡 영상을 보고 정리한 글입니다. MVC란? 유지보수가 편해지는 코드 구성 방식! Model : 데이터와 관련된 부분 View : 사용자한테 보여지는 부분 Controller : Model과 View를 이어주는 부분 MVC는 왜 생겨났을까? 코드가 많아지면 많아질수록 코드가 복잡해져서 코드를 파악 하기도 힘들어지고 기능을 수정할 때마다 대부분의 코드를 갈아엎는 경우가 많았다고 합니다. 유지보수를 편하게 하기 위해 고민하다가 생겨나게 된 디자인 패턴이 바로 MVC 입니다. MVC 맛보기 1. 유저가 '무언가'를 검색함 2. Controller는 유저가 검색한 데이터를 Model에게 요청함. 3. Model은 결과 데이터를 Controller에게 줌 4. Controller는 M..

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

프로젝트를 진행하면서 굳이 전역으로 관리하지 않아도 되는 상태를 전역으로 관리하고 있음을 깨닫고 전역 상태와 지역 상태를 공부하던 중 정리하는 글입니다. 전역으로 상태를 관리하기 위한 대표적인 툴로 Redux, Redux toolkit이 있습니다. 저는 이번 프로젝트에서 Zustand라는 툴로 상태를 전역으로 관리했습니다. 제가 사용한 Zustand에 대해서 간단하게 소개하자면, Redux, Redux toolkit, context API 등과 비교하면 사용하기 정말 쉽고, Provider로 감싸주지 않아도 되서 불필요한 렌더링을 줄일 수 있다는 장점이 있습니다. Zustand 사용법에 대해서는 다른 포스팅에 정리하겠습니다. 💡전역 상태란? 문서의 어떤 곳에서도 접근할 수 있는 영역을 말합니다. 따라서 ..