1. 버튼 클릭 시 useState를 활용해 type의 변수 값을 변경해주고 싶을 때 코드의 중복되는 부분을 함수로 작성해 전달해 주려했는데 무한 반복이 돌아간다. const [type, setType] = useState(''); const handleSortChange = (type) => { setType(type); }; 이는 버튼을 클릭했을 때 함수를 전달하면 발생하는 에러로 button 위 함수가 실행될 때 state를 변화하는 코드이기 때문에 계속 렌더되는 에러가 발생한다. state 변화시킬 땐 아래 방법으로 작성 ( ) => arrow function으로 함수를 전달해주거나 ( ) => 바로 setType() 코드를 작성해 변수를 업데이트 하거나 돔 요소에 id 값을 지정해주고 이벤트 핸..

공식 페이지 Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 리액트로 프로젝트를 진행하면서 새롭게 프로젝트를 만들게 된다면 next js를 사용해 개발해보고 싶었습니다. Next.js는 Zeit에서 만든 React 프레임워크로 리액트만으로 개발를 진행하면 핵심기능 외의 라이브러리(라우터, 상태 관리 등)를 추가로 설치해 조합해야 했지만, Next에선 별도의 설치없이 프론트앤드 개발에 필요한 다양한 기능을 여러 3rd 라이브러리로 기본으로 제공합니다. Next 프로젝트 생성 기본 설치를 위해선 npx 혹은 yarn을 통해..

1. VS code 1 ) 설치 URL 비주얼스튜디오코드는 마이크로소프트사에서 만든 텍스트 에디터로 ts기반으로 개발된 오픈소스 프로젝트입니다. 웹개발 및 다양한 언어 개발에 유용하게 활용됩니다. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2 )..

최근 M1 맥북을 구매하게 되면서 프론트 개발에 필요한 프로그램 설치를 진행하였습니다. 리마인드겸 정리해두는게 좋을 것 같아 설치한 목록을 정리해보려고 합니다. 추가 사항이 생기면 아래에 계속 업데이트 해두겠습니다. 1. Node.js & npm 1) 설치 URL https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) 설치 단계 사이트에 접속해 macOS Inataller 아이콘을 클릭하면 패키지 다운로드가 진행됩니다. 다운로드 폴더 내부에 node-v16.13.0.pkg와 같이 노드 버전이 명시된 패키지 파일을 확..

[ firebase 연동 코드 ] import firbase from 'firebase'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, }; const firebaseApp = firebase.initializeApp(firebaseConfig); const db = firebaseApp.firestore(); const auth = firebase.auth(); export { auth }; export default db;..

Friebase에서 프로젝트를 생성하고 웹 프로젝트에 연동하는 단계에 대한 방법에 대해 알아보자. 1 . 프로젝트 생성 STEP 1. 내 콘솔로 이동 → 프로젝트 추가 (+) 클릭 STEP 2. 프로젝트 이름 & ID 지정 ✍ 프로젝트 이름 지정 후 연필 아이콘 클릭해 고유한 프로젝트 ID 지정한다. STEP 3. Google 애널리틱스 사용 설정 해당 프로젝트에 Google 애널리틱스 사용을 설정할지 선택 후 프로젝트 만들기 버튼 클릭하면 프로젝트 생성 완료! 2 . 프로젝트 연동 STEP 1. 프로젝트 생성 후 아이콘 클릭 프로젝트 유형에 따라 아이콘을 선택 ( iOS , 안드로이드 or 웹 앱 ) 웹 앱 프로젝트의 경우 아이콘을 클릭한다. STEP 2. 웹 앱 Firebase 추가 설정 ..