my dev diary

slice() slice()란? 배열의 특정 범위를 추출해 복사본을 만들어 새로운 배열로 반환함. 원본 배열은 그대로 유지할 수 있다. 구문 arr.slice([begin[, end]]) begin 첫번째 인자? 로는 추출하고자 하는 인덱스의 시작점을 의미함. 음수 인덱스는 배열의 끝에서부터의 길이이다. begin이 undefined면 0번 인덱스부터 추출한다. end 추출할 인덱스의 종료지점을 의미함. 여기서 end 인덱스는 제외하고 추출한다. 만약 end가 없거나 배열의 길이보다 크면, 배열의 시작점부터 끝까지 추출한다. 예제 const array = ['a', 'b', 'c', 'd', 'e']; const array1 = arr.slice(2); // ['c', 'd', 'e'] const ar..

TIL 2023. 7. 27.

이미지 태그에서 loading=“lazy” 이라는 속성을 주어 사용할 수 있다. 뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시키고 이미지가 뷰포트 내에 있으면 로드하는 것을 의미한다. ➔ 사용자가 처음 사이트를 열 때 필요한 리소스 일부만 다운로드하므로 속도가 빨라진다. ➔ 이미지 로딩이 느릴 때 넣으면 좋다. 추가로 loading 속성에는 아래의 값이 지원된다. auto: 속성을 포함하지 않는 것과 동일한 브라우저의 기본 지연 로딩 동작 lazy: 뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시킴 eager: 페이지에서의 위치에 관계없이 리소스를 즉시 로드함 (auto 값은 Chromium 사양에 언급되어 있지 않아 변경될 수도 있으므로 포함될 때까지 이 값은 사용하지 않..

TIL 2023. 7. 24.

프로젝트 개요 프로젝트 명 MoodFood 주요 서비스 설문조사를 이용한 기분에 따른 음식 메뉴 추천 사이트 사용 기술 HTML, CSS, JS, React, Redux, Git, glitch, vercel KPT 회고 Keep - 유지할 점 팀원 전원의 높은 참여도. 프로젝트 후반부 예정에 없던 기능 추가로 초기 계획보다 작업량이 많아졌음에도 끝까지 완성해 낸 책임감. 서로 배려하고 존중하며 질문하는 팀원이 있으면 적극적으로 도와줌. Problem - 문제 기획 단계에서 웹사이트 전반을 구상하지 못해 프로젝트 후반부에 게시판(댓글 달기) 기능을 추가함. 일정 계획이 잘못 세워져 목표한 기간에 맞추려고 촉박하게 진행함. 초기 설계 단계에 시간을 지나치게 많이 소모함. - 원인 CRUD 중 C(설문조사..

WIL 2023. 7. 23.

문제 발생 React 팀 프로젝트를 진행하던 중, clone 후에 yarn start가 안 되는 문제가 발생했다. 오류메시지 원인 'error Command failed with exit code 127.'는 명령을 실행하기 전에 모듈을 설치하는 것을 잊었을 때 주로 발생하는 오류이다. 해결 프로젝트의 루트 디렉터리에서 터미널을 열고 다음 명령을 실행한다. yarn install 위 명령어로 yarn을 설치한 후 yarn start를 입력하니 정상적으로 실행되었다. +) 만약 계속 안될 경우, npm install도 실행해볼 것. 참고 : https://bobbyhadz.com/blog/yarn-error-command-failed-with-exit-code-127

TIL 2023. 7. 19.

목차 프로젝트 개요 와이어프레임 API 설계 프로젝트 개요 프로젝트 명 MoodFood 주요 서비스 기분에 따른 음식 추천 사이트 사용하는 기술 HTML, CSS, JS, React, Redux, Redux Toolkit 와이어프레임 API 명세

TIL 2023. 7. 18.

리액트에서 패키지를 설치할 때 사용하는 npm과 npx의 차이점을 정리해 보았다. npm(Node Package Manager) node.js의 패키지 관리를 위한 패키지 매니저.(package manager) node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하여 패키지를 쉽게 설치/삭제할 수 있도록 도와준다. node.js를 설치하면 자동으로 생성된다. 사용법 # 패키지 설치 npm install 패키지명 # 패키지 삭제 npm uninstall 패키지명 # 패키지 업데이트 npm update 패키지명 위 명령어를 입력하면 원하는 패키지를 로컬인 현재 디렉터리(node_modules)에 설치/삭제할 수 있다. 글로벌 모듈 -g 옵션을 주게 되면 내 컴퓨터 안의 글로벌한 공간에 설치해 프..

TIL 2023. 7. 5.

오류 Firebase를 사용하여 프로젝트 진행 중, 로컬에서는 문제가 없다가 배포 후에 다음과 같은 오류가 생겼다. FirebaseError: Firebase: (auth/unauthorized-domain). 해결 도메인 허가가 안 돼서 생긴 문제이다. Firebase에서 승인된 도메인을 추가해 줬더니 해결됐다. 순서를 요약하면 다음과 같다. Firebase ➔ 빌드 ➔ Authentication ➔ Settings ➔ 승인된 도메인 ➔ [도메인 추가] 버튼 클릭하여 배포한 도메인 추가하기 * 참고 링크

TIL 2023. 7. 4.

로컬에만 남기고 원격 저장소에는 올리고 싶지 않은 파일은 .gitignore에 저장하는데, .gitignore를 잊어버리고 push를 하여 .env파일이 깃허브에 올라갔을 때 삭제하는 방법이 있다. 아래의 명령어를 입력하면 원격 저장소에서 commit history와 함께 삭제되고 로컬 저장소에는 남는다. git rm -r --cached .env 위 명령어를 입력하면 commit이 삭제된 것이 아니라 .env 파일만 삭제된 것임. 그러므로 입력 후 꼭 ➔ add ➔ commit(여기서 .env 파일만 삭제됐다는 기록은 생김) ➔ push 하는 순서를 거쳐야 한다. rm 삭제 --cached 원격에서만 삭제되고 로컬 저장소에서는 삭제되지 않음. -r +) 참고링크 remove env file from g..

TIL 2023. 7. 3.