Frontend

구글 로그인을 적용해보고 있던 중 사람들이 .env 파일을 많이 사용하길래 이게 대체 뭐지 하고 알아보고 싶어졌다!.  📌.env이란? .env 파일은 환경 변수를 저장하는 데 사용되는 파일이다. 환경 변수는 운영 체제나 실행 환경에서 프로그램이나 스크립트가 실행될 때 참조할 수 있는 동적으로 할당된 값이다. 이러한 변수들은 보안, 설정, 구성 데이터를 포함하며, 코드에서 직접 하드코딩하는 것보다 외부에서 관리하는 것이 더 안전하고 유연한다! 1. 루트경로에 .env 파일 생성  2. 필요한 환경 변수를 추가합니다. 예를 들어: DATABASE_PASSWORD=verysecretpasswordAPI_KEY=123abcXYZ 3. gitignore 파일에 .env를 추가하여 Git 저장소에 업로드되지 않..

프로젝트를 진행하다가 프론트엔드쪽에서는 컴포넌트가 완성이 됐지만 백엔드에서는 아직 api가 나오지 않아 react msw 기반의 임의에 mock api를 사용해 먼저 api interlocking을 진행하고 있다.  📌 MSW ?백엔드 없이도 네트워크 요청을 모방하여 테스트하고 개발할 수 있게 해주는 도구다. MSW는 서비스 워커 API를 사용하여 실제 네트워크 요청을 가로채고, 미리 정의된 응답을 반환함으로써, 개발 중이거나 테스트 환경에서 백엔드 서버 없이도 API 호출을 모방할 수 있게 해준다. 이를 통해, API 의존성 없이 프론트엔드 개발과 테스트를 진행할 수 있으며, 네트워크 상태나 오류 처리 등을 쉽게 시뮬레이션 할 수 있다.  📌MSW 설치 방법 npm install msw --save..

마운트(생성) ✔️constructor : 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드✔️getDerivedStateFromProps : props로 받아온 것을 state에 넣을 때 사용하는 메서드이며, 컴포넌트가 처음 렌더링 되기 전에 호출되며 리렌더링 되기 전에도 항상 실행된다.✔️render : 컴포넌트를 렌더링 하는 메서드✔️componentDidMount : 컴포넌트의 첫 렌더링을 마친 후 호출되는 메서드이며, 이 메서드가 호출되는 시점에선 이미 컴포넌트가 화면에 출력된 상태이다. 이 단계에선 axios, fetch 등을 사용해 해당 컴포넌트에서 필요하는 데이터를 요청하는 등의 작업을 진행한다.업데이트(갱신) ✔️getDerivedStateFromProps : 마운트 단계와 동일하며, 컴포..

📌React fetch 방법 import { useEffect,useState } from "react"; export default function tomato() { const [isLoading, setIsloading] = useState(true) const [movies, setMovies] = useState([]); const getMovies = async () => { const response = await fetch("https://nomad-movies.nomadcoders.workers.dev/movies"); const json = await response.json(); setMovies(json); setIsloading(false); } useEffect(() => { g..

✅Layouts Next.js는 처음에는 layout 컴포넌트에 있는 export된 디폴트 컴포넌트를 렌더링한다. react규칙으로 내부에 있는 컴포넌트들은 자동으로 children이라는 props로 바뀌게 된다. 레이아웃은 중첩이 가능하다. 제일 하위에 있는 폴더로 들어가면 모든 상위에 있는 layout다 출력되는 것이다. 제일 상위에 있는 폴더는 하위에 있는 폴더가 다 노출되지 않는다. ✅(폴더이름) route groups은 폴더 이름을 괄호로 묶어줘야 한다. 괄호로 묶은 폴더는 url에 전혀 영향을 미치지 않는다. routes를 그룹화해서 logical groups으로 만들 수 있다. 이것을 사용함으로써 일부 레이아웃을 선택하거나 선택 해제하여 복잡한 일을 할 수 있다. ✅Metadata 웹의 he..

✔️Optional Chaining(옵셔널 체이닝)이란? Optional chaining은 객체 체인마다 속성 값이 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성에 접근할 수 있다. Optional chaining 연산자 ?. 를 객체 속성에 접근하거나 함수 호출에서 사용할 때, 객체 속성 값이 nullish(`null` 또는 `undefined`)이거나 함수가 없다면, 연산자 ?. 왼쪽 표현식은 `undefined`로 단락(short-circuiting)되어 에러가 발생하지 않는다. 이렇게 중첩된 객체에서 존재하지 않는 특정 property를 조회할 때 오류 없이 항상 undefined를 반환하고 넘어가게 해주는 문법이 optional chaining이다. 따라서 값이 ..

프로젝트의 성능을 좌우하는 webpack, 수정하고 수정하다보면 내가 도대체 지금 뭘 하고 있나 싶을 때도 있다그 계기로 webpack에 대해 자세히 정리하고 싶었다!  webpack이란??웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Image 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 의미한다. 모듈 번들러는 웹 애플리케이션을 구성하는 자원(컴포넌트, 이미지, CSS파일 등등)을 모듈 단위로 나누어 필요할때마다 조합하여 하나의 결과물로 산출시키는 역할을 한다. 프론트엔드 업계에서 많이 사용되는 프레임워크인 리액트, 뷰는 프로젝트 파일의 크기가 꽤나 크다..

해시테이블 종류 -  Object, Map, Set해시테이블은 속도가 빠르기에 자주 사용되며, 대부분의 프로그래밍 언어에서는 아래와 같은 해시 자료구조를 가지고 있다Javascript: Map, Object(객체에서는 key로 문자열만 사용 가능), Set본래 자바스크립트에서 해시테이블 자료구조는 Object가 대표적이었으나, ES6에서 Map과 Set이 추가되었다.  🏷️Object 이용하기Object.keys(객체) &&Object.values(객체) JSON.stringify(객체) : 객체 문자열로 변환 in을 이용해 key와 value값 출력시키기  of && Object.entries()를 이용해 key와 value값 출력시키기 (보통 of는 배열을 순회할 때 많이 사용된다) ✔️Object..