개발일지

Throttling짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것. 최초, 마지막 이벤트만 실행1. timerId의 초기값은 null 이다.2. 버튼 클릭 시 throttle함수 내부로 들어가 timerId값이 있으면 함수 종료3. 할당된 값이 없으면 setTimeout함수로 들어가 delay(버튼 클릭 시 인자로 전달되는 2초) 이후 내부 로직이 실행된다(추가요청 안 받아요 콘솔)4. 버튼을 여러 번 클릭해도 첫 이벤트 실행 시 바로 종료되어 버리기 때문에 클릭 종료 후 2초 뒤 로직이 실행된다(추가요청받아요 콘솔) let timerId = null; const throttle = (delay) => { ..

설치 명령어npm install json-server포트 변경npx json-server db.json --port 4000서버 접속http://localhost:4000/ axios와 json-server로 CRUD 만들기.envGetPostDeletePatchInterceptor.env외부로 알려지면 안 되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들을 보안이나 유지 보수를 용이하게 하기 위해 환경변수로 만들어 변수를 꺼내와 사용하는 것서버 주소 값을 REACT_APP_SERVER_URL 변수에 담아 프로젝트 전반에서 변수명으로 주소에 모두 접근이 가능하다.env 파일REACT_APP_SERVER_URL=http://localhost:4000 GetuseEffect으로 컴포넌트가 마운트 ..

ReadMe프로젝트에 대한 간단 설명을 담은 문서 마크다운으로 작성한다 마크다운태그 등을 이용하여 문서나 데이터의 구조 등을 명기하는 언어의 한 가지로 텍스트 문서들을 작성할 때 자주 사용되며, 다른 마크업 언어들에 비해 문법이 쉽고 간단한 것이 특징이다. HTML 등의 서식 문서들로 쉽게 변환되기 때문에 README 파일이나 온라인 게시물 등에 사용된다. 장점1. 간결하다.2. 별도의 도구없이 작성가능하다.3. 다양한 형태로 변환이 가능하다.4. 텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.5. 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.6. 지원하는 프로그램과 플랫폼이 다양하다.단점1. 표준이 없다.2. 표준이 없기 때문에 도구에 따라서 변환방식이나 ..

필수 구현 기능로그인, 회원 가입Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해 보세요.아이디(이메일), 패스워드소셜 로그인 (구글, 깃헙)CRUDFirestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링을 구현해 보세요.CUD(등록, 수정, 삭제)가 일어날 때마다 R(조회)해서 자연스럽게 화면 변경을 해보세요.마이 페이지내 게시물 보기Authentication 에서 제공하는 uid를 이용해서 내 게시물들이 모일 수 있게 해 보세요.프로필 수정 기능Storage 에서 제공하는 api를 이용하여 이미지 업로드와 다운로드 url 을 받아서 이미지 핸들링을 해보세요.배포하기Vercel 이라는 호스팅플랫폼을 이용해 배포합니다.배포에 적용될 브랜치는..

Firebase 환경 설정npm 설치 명령어npm install firebase공식 문서https://firebase.google.com/docs/web/setup?hl=ko  1. 회원가입, 로그인 후 시작하기 클릭  2. 프로젝트 추가 클릭  3. 프로젝트에 맞는 이름 설정 4. 구글 애널리틱스 사용여부 확인 (뉴스피드 프로젝트의 경우, 체크 해제함)   5. [웹 앱에 Firebase 추가] → [앱 등록] 클릭 6. 아래 를 클릭하면 웹 앱을 만들 수 있다 (Firebase 호스팅은 체크하지 않음 ) 7. 이후 api인증키를 받아서 사용하면된다 (인증키 확인하는 방법)  8. Firebase 연결 확인 방법8 - 1. src 폴더에 firebase.js 파일을 만들고 초기 설정 만들기// Imp..

Firebase 구글이 제공하는 클라우드 기반의 백엔드 서비스를 제공한다데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등의 다양한 서비스를 제공한다  Firebase 사이트https://console.firebase.google.com/ Firebase 장점 다양한 기능을 제공하여 애플리케이션 개발을 간편화하여 빠르게 개발할 수 있다데이터베이스, 인증, 스토리지, 호스팅, 애널리틱스 등 다양한 백엔드 서비스를 통합하여 제공한다. 이를 통해 개발자들은 서비스를 별도로 구축하거나 연동하는 데 드는 비용과 시간을 절약할 수 있다.실시간으로 데이터가 업데이트되는 애플리케이션에 적합한 기능을 제공한다. 이를 통해 개발자들은 데이터 업데이트에 대한 빠른 응답성과 실시간 데이터 동기화를 구현할 수 있다.다양한 ..

설치 명령어 npm install react-router-dom Router Hook 종류useNavigateuseParamsLinkuseLocation기타 사용 방법 1. Router.js 설정 import import { BrowserRouter, Route, Routes } from "react-router-dom"; 2. 연결 페이지 import Work는 Works의 하위 페이지이다.{} : id를 파라미터로 보내 조건에 맞는 페이지를 로딩할 것} /> path에 지정된 url  외 다른 경로를 입력했을 경우 홈 화면으로 보내준다replace가 없을 경우 ex.works/aaa 로 입력 할 경우 홈 화면으로 들어가는데 뒤로가기를 누르면 다시 잘못된 경로로 들어가 홈 화면을 반복하게된다replac..

리액트 숙련 개인과제 필수 요구사항팬레터 CRUD 구현 (작성, 조회, 수정, 삭제)아티스트별 게시물 조회 기능 구현 (Home - Read)원하는 아티스트에게 팬레터 등록 구현 (Home - Create)팬레터 상세 화면 구현 (Detail - Read)상세화면에서 팬레터 내용 수정 구현 (Detail - Update)상세화면에서 팬레터 삭제 구현 (Detail - Delete)[ ] styled-components를 이용하여 스타일링인라인 스타일링이나 일반 css 파일을 이용한 스타일링 방식 지양 (이번 과제 한정)모든 태그를 styled-components 화 할 필요는 없으나 스타일링이 들어가는 경우는 styled-components 화 할 것[ ] 전역 스타일에 reset.css를 적용해 주고 ..

const memberClick = (member) => { setSelectedColor(member); navigate("/Jjanggu"); }; const members = { jjanggu: "짱구", cheolsu: "철수", yurl: "유리", maenggu: "맹구", huni: "훈이", }; {Object.keys(members).map((item, idx) => { return ( { memberClick(item); }} // 선택한 리스트를 찾기 위한 변수 selecte..

// 게시물 삭제 const removeComment = (id) => { if (window.confirm("게시물을 삭제하시겠습니까?")) { alert(`${selectedComment.writedTo}에게 작성된 게시물이 삭제되었습니다.`); const deleteComment = comments.filter((item) => item.id !== id); localStorage.setItem("comments", JSON.stringify(deleteComment)); setComments(deleteComment); return closeModal(); } alert("삭제를 취소했습니다."); return; };​// 게시..