call > call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정 값으로 지정할 수 있다. apply > apply는 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다. call은 매개변수를 직접 받지만, apply는 배열로 받는다. b

터미널에서 (위치는 작업하는 루트 디렉토리)tree > 만들고 싶은 파일명.txt 입력한다.그러면 파일이 생긴다. 이걸 이용해서 리드미에 넣으면 끝

* type: [#issueNumber - ]Subject * * body(옵션) * * footer(옵션) * `type : 어떤 의도로 커밋했는지를 type에 명시한다.` `subject : 최대 50글자가 넘지 않도록 하고 마침표는 찍지 않는다.` 영문으로 표기

nullish 병합 연산자(??)를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정된 변수를 찾을 수 있다. ?? 연산자는 a 가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b 이다. firstName, lastName, nickNam

옵셔널 체이닝이 필요한 이유 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다면? 존재하지 않는 요소에 접근해 정보를 가져오려 한다면 문제가 생길 것이다. ?.이 추가 되기 전엔 이런 문제들을 해결하기 위해 &&연산자를 이용했다. AND 연산자를 이용하면 코드가 길어진다는 단점이 있다. 옵셔널 체이닝의 등장 > #### ?.은 ...

브라우저는 웹페이지를 만나면 HTML을 읽어(파싱(parsing)) DOM 객체를 생성한다. 태그 가 있을 때, DOM 객체에서 body.id="page"를 사용할 수 있다. 그런데 속성-프로퍼티가 항상 일대일로 매핑되지는 않는다. 속성 (attribute) HTML

index.html Portal.tsx Modal.tsx 포탈 주입

1. 실무에서 클린 코드의 의의 실무에서 클린 코드의 의의 = 유지보수 시간의 단축 흐름 파악이 어렵고, 도메인 맥락 표현이 안 되어, 동료에게 물어봐야 알 수 있는 코드는 유지보수할 때 시간이 오래 걸리며 심하면 기능 추가가 불가능한 상태가 된다. 2. 안일한

리덕스 툴킷을 이용한 다크모드 만들기 스토어 설정 store/store.ts store/themeSlice.ts inititalState 를 localstorage로 불러온다. 스토리지가 비었을 경우 false 할당 액션에 changeMode를 추가하여 tog

React Query 리액트 쿼리를 사용하면 간결하게 패칭 로직을 작성할 수 있다. * 흔한 요청 방식의 문제점* 데이터가 모든 애플리케이션 인스턴스에 공유되며 다른 사용자에 의해 임의로 변경된다. 데이터가 최신 여부를 보장할 수 없으며 항상 갱신이 필요하다. 최적

redux-toolkit을 이용한 todolist 만들기 configureStore() createStore를 더 좋은 개발 경험을 위해 기본 설정들을 자동화 시켰다. 기본 미들웨어로 redux-thunk를 추가하고 개발 환경에서 리덕스 개발자 도구(Redux Dev

2주가 지났다. 그립컴퍼니 과제가 마무리됐고, 이제는 휴먼스케이프 기업 과제 시작이다. 오늘 코드 리뷰를 하면서 나왔던 몇 가지 주제들 ** 리액트 라우터 사용 시 navlink를 사용하도록 하자. api통신중 오류가 나면 브라우저 network에서도 error 확인

리액트와 로컬스토리지를 이용한 데이터 저장 간단한 투두리스트를 이용해 알아보자 먼저 코드를 보자 onClick 함수 실행 시 setTodo를 이용해 데이터를 추가한 후 ref를 이용한 key값도 같이 localstorage에 보낸다. useEffect에서 key데

Hoisting > JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로

TypeScript 적응기 튜플 Tuples 튜플은 길이와 타입이 고정된 배열 2번째 인덱스에선 넘버 타입이므로 toLowerCase() 불가능하다. 이렇게 적용해도 에러가 발생한다. 제네릭 Generics option에 어떠한 값이 올질 모를 때 T를 적용해

recoil은 내부적으로 contextAPI를 기반으로 한다.recoil 역시 컴포넌트를 공급자(RecoilRoot)로 감싸줘야 한다.키에 고유한 값을 집어넣고, default 값을 지정할 수 있다.TodoListState는 state와 유사하다.setTodoList로

json to ts: json file을 ts interface로 변경해줌react-use: react-hooks처럼 자주 쓰이는 기능들을 함수화day js: date를 쉽게 구할 수 있다. (moment js는 용량이 크다)https://squoosh.app

원티드 프리온보딩 코스 중 scss를 사용하게 됐는데,사용하면서 궁금한 것들을 공부해봤다.SCSS 파일을 불러오려면 import 하면 된다.근데 @use 이렇게 생긴 놈을 발견했는데 이건 무엇에 쓰이는 것일까?import와 use의 공통점은 파일을 import 해 사용

미친 듯이 삽질했던 외부 영역 클릭 시 닫는 기능을 까먹지 않기 위해... 작성하자. 우선 코드부터 보자 드롭다운 메뉴는 showOption이 true일 때 보이게 되는데 초깃값은 false이며 클릭 시 true가 된다. useEffect로 마우스 클릭 시 **(

이벤트 버블링과 캡쳐링 >팀 프로젝트를 하던 중 이벤트 버블링과 캡쳐링에 대해 지식이 필요할 것 같아 공부하였다. 리액트에서 이벤트를 자주 사용했지만 정작 중요한 버블링과 캡쳐링에 대해 자세히 알지 못해 이번 기회에 자세히 알아보려 한다. 이벤트(event) 이벤