기록

웹 호환성을 위한 package.json에 browerslist설정하기

2년전에 했던 프로젝트를 리팩토링하게 되었습니다. 잊고 있던 프로젝트 구조부터 하나하나 파악하게 되었는데, 첫 프로젝트때는 아예 아무것도 없는 cra에서 시작한게 아니라 누군가 우리가 프로젝트를 할 수 있게, 만들어둔 보일러 플레이트에서 프로젝트를 시작하였습니다. 이번에 리팩토링을 하기위해 프로젝트 구조를 먼저 파악하려하였습니다.구조를 보고 포맷팅을 설정하면서 pacakge.json에서 이전에는 발견하지 못했던 "browserslist": { 를 발견하였습니다.{ "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome..

최신 업데이트 이후 pnpm 실행 시 버전 충돌 에러 해결 ( feat. brew 삭제 후 재설치 )

pnpm 최신 업데이트 이후 다음과 같은 에러를 겪었습니다.ERR_PNPM_NO_GLOBAL_BIN_DIR Unable to find the global bin directoryRun "pnpm setup" to create it automatically, or set the global-bin-dir setting, or the PNPM_HOME env variable. The global bin directory should be in the PATH.에러 문구에서 나온대로 pnpm self-update를 입력하였습니다. 그랬더니 한 번은 파일이 생성되는 것처럼 동작했는데, 다시 실행하니 이번에는 아래와 같은 메시지가 발생하였습니다.pnpm command "self-update" not found해당..

리액트 요소에 유니크키 생성하는 방법

매일매일 프론트엔드를 보고 정리한 글입니다. https://www.maeil-mail.kr/question/42 리액트에서 순회하는 배열의 각 요소 key값에 index값을 넣으면 안된다는 것은 리액트를 학습하는 사람이라면 누구나 알고 있는 사실입니다. 배열이 삭제, 수정, 등록될 때, 배열의 순서가 바뀌는 경우가 있기 때문입니다. 그럼 key는 유니크한 값이어야하는데, 생성하는 방법에는 어떤 것들이 있을까요?Key가 중요한 이유React는 key prop을 사용하여 DOM을 효율적으로 업데이트하고 상태 변경을 반영합니다. React의 재조정(reconciliation) 과정에서 키는 어떤 아이템이 변경, 추가 또는 제거되었는지 결정하는 데 사용됩니다.키가 없다면 React는 전체 리스트를 다시 렌더링해..

자바스크립트에서의 함수와 일급객체

연관 면접 질문자바스크립트 함수에 대해서 아는대로 설명해주세요.참고 링크 https://www.maeil-mail.kr/question/33🗝️ 키 포인트 : 일급객체, 익명함수와 함수 표현식, 호이스팅, 클로저, 고차함수, 화살표 함수 함수와 일급 객체함수는 값처럼 취급 될 수 있으며 고차 함수를 포함한 다양한 패턴을 구현할 수 있습니다.여기서 일급 객체란?아래 특징을 갖고 있는 객체를 말합니다.무명의 리터럴로 생성할 수 있다. 런타임에 생성이 가능하다- 무명의 리터럴은 이름이 없는 리터럴 값을 의미합니다. 자바스크립트에서 이것은 주로 익명 함수(anonymous function)를 가리키는데, 함수의 이름 없이 직접 표현식으로 작성하는 방식입니다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다..

같이의 가치 = 항해플러스 프론트엔드 5기 회고

사람들과 함께 학습하며 성장하는 것을 좋아하는 편입니다.함께 나누면서 성장하고 있음을 느꼈을 때 행복감은 말로 할 수 없을 만큼 신나거든요!! 그런 환경을 만들어야 혼자일 때보다 더 노력합니다. 취업 준비 기간이 길어지면서 변화된 환경이 필요하다 느꼈고, 마침 지인의 추천으로 항해99에서 하는 항해플러스 프론트엔드 과정을 듣게 되었습니다.이 글을 항해플러스 프론트엔드 5기 과정을 수료 후 적는 회고글입니다. 경력이 없던 저는 항해플러스 프론트엔드 과정이 경력자 대상의 스터디라고 들어서 참여하기 전에 고민을 많이 했던 것 같습니다. 그러다 항해플러스 백엔드 과정을 듣고 오랜 취업 준비 기간에서 제대로 된 학습의 방향성을 찾게 되었다는 지인의 후기를 듣고 항해플러스 5기를 신청하게 되었습니다!!( 이제부터 ..