타입스크립트를 배우게된 이유 자바스크립트로 코드를 짜면서 런타임 에러를 너무나 자주 만나게 됐다. 있어서는 안되는 입력되는 데이터 형식의 오류를 막을 수 있다. JS는 동적타입언어고 TS는 JS에 타입이 정해진 superset으로 정적타입언어로 컴파일시 타입에러를 잡을 수 있다. 타입스크립트를 사용해야하는 이유 위에서 말했던 바와...

테스트 피라미드 3단계의 가장 밑바탕이되는 unit test를 먼저 시작한다. Jest 자바스크립트에서 주로 사용되는 테스트 라이브러리이다. create-react-app으로 react 프로젝트를 생성시 함께 설치되는 라이브러리이기 때문에 React 환경의 테스트를 앞서서 vailla javascript를 Jest로 테스트한다....

많은 프로젝트에서 TDD를 도입하고 있고, JD에도 TDD 주도 개발을 경험해본 인재를 찾기에 테스트 주도 개발이란 무엇인지 궁금해졌다. 궁금한건 못참기 때문에 역시나 궁금증을 풀기위해 테스트에 발을 담가보았다. 그리고 이번 기회에 아직 테스트를 실전 프로젝트에서 사용해보지 못해 부족한 부분도 많겠지만 드디어 테스트에 대한 개념정리와 테스트를 해야하...

React Virtual DOM React는 Component에 관련된 state, props이 변경되는 경우 랜더가 호출된다. state, prop이 변경되면 메모리상에 존재하는 Virtual DOM tree에 이전의 prop과 state로 구현된 tree와 새로 구현된 tree를 비교해서 변경된 부분만 DOM에 업데이트한다. 문제는 변경...

useState callback const createOrUpdate = (card) => { const updated = { ...cards }; updated[card.id] = card; setCards(updated); }; 기존의 코드는 이렇게 작성되어 있었다. 문제는 원하는 대로 실행되지 않았다는 것이다. 코드...

useRef 함수형 컴포넌트에서 ref를 사용할 때는 useRef hook을 사용한다.(클래스형 컴포넌트에서는 React.createRef를 사용한다.) useRef()를 사용하여 Ref 객체를 만들고, 선택하고 싶은 DOM 에 ref 값으로 설정한다. Ref 객체의 .current 프로퍼티는 선택한 DOM 의 값을 뜻한다. useRef...

대부분의 사람들은 당신이 어떤 이야기를 하는지 관심갖지 않는다. 아무리 중요한 내용이라도 대부분의 사람들은 긴 기사를 읽지 않는다. 기사의 끝부분에 요점을 적어놨다면 아마 그 요점은 읽히지 않았을 것이다. 과거에는 조간신문과 백과사전, 9시 뉴스 등으로 정보를 얻었을지 몰라도 최근엔 모든 정보를 공짜로 손쉽게 접근할 수 있다...

css 잡다한 팁 클래스 명에 통일성 주기 제목, 내용과 관련된 요소는 @@-title, @@-content 와같이 통일된 클래스 명을 사용한다. 재사용성을 생각하고 css를 짜야함. 그래야 클래스 명만 봐도 어디에 쓰이는지 알기 쉽다. height: auto; 웹화면 content 작성할 때 요소들의 높이만큼 부모요소의 크기 ...

selector html 요소를 직접 지칭 p { ...; } blockquote { ...; } class selector : 같은 css를 선언하고 싶은 요소들의 class 이름을 동일하게 부여하는 것이 좋다. .box { ...; } .box.red { ...; /*class명이 box와 red인 요...

box shadow 요소의 그림자를 만들어주는 속성 neomorphism이 유행했다? 한다 하더라… 아이폰 감성인듯 h-offset, v-offset, (blur), (spread), color 를 작성해야한다. transition과 같이 사용해서 요소에 hover하면 효과를 나타내기도 한다. .cancel-button { bac...