제가 타입스크립트를 사용하면서 코딩을 하다보면 꼭 그냥 지나치는법이 없는 타입에러들이 있습니다. 고것은 바로 event, dom, useRef의 타입에러입니다. 이번 포스팅은 자주 사용되지는 않지만 꼭 발생했던 useRef 타입에러에 대해 공부해보고 에러없이 사용할 수 있도록 해보자. useRef가 무엇인지 모르시면 useRef 훅은 따로 공부하시는게 좋을 것 같습니다. 간단하게만 설명하자면 hook 중에 하나로, 지정한 초깃값을 객체의 .current 프로퍼티에 저장하는 것. DOM객체의 값을 직접 접근하거나, 변경할 때 사용한다. 주로 인풋 포커싱, 불필요한 리랜더링을 방지하기 위해 사용한다. 그럼 본론으로 넘어가서 useRef 타입에러 해결에 대해서 알아보자. useRef 에러 예시 코드 // Si..
이번 포스팅은 지난 회원가입 폼에 커스텀 훅을 넣어본 것과 같이 투두리스트에도 커스텀 훅을 적용해보기로 했다. 커스텀 훅에 대한 이야기와 왜 이러한 작업과 포스팅을 하는지는 지난 커스텀 훅 포스팅을 읽으면 될 것 같다. 회원가입 폼에 커스텀 훅 넣어보기 이번 포스팅은 어느 회사에서 과제테스트든 실무에서든 회원가입폼을 검색없이 멋지게 만들어보라고 했을 때 '내가 과연 어디까지 리팩토링 해가며 멋지게 만들어볼 수 있을까?' 하는 생각이 jhbljs92.tistory.com 그럼 어떻게 작성하고 리팩토링을 진행했는지 적어보겠습니다. 이번 투두리스트도 마찬가지로 css에 대한 연습이 아니였기 때문에 매우매우 안이쁜점은 감안해주세여. 1. 분리없는 기본적인 코드 import { useEffect, useState..
이번 포스팅은 어느 회사에서 과제테스트든 실무에서든 회원가입폼을 검색없이 멋지게 만들어보라고 했을 때 '내가 과연 어디까지 리팩토링 해가며 멋지게 만들어볼 수 있을까?' 하는 생각이 들어, 마침 비즈니스 로직 분리 (커스텀 훅 패턴)에 대해서 공부도 할 겸 미래의 입사테스트도 공부할 겸 겸사겸사 커스텀 훅을 활용한 회원가입폼과 투두리스트를 만들어서 포스팅을 해볼 생각이다. 이런걸 왜하냐 생각할 수도있지만 기본코드부터 시작해서 커스텀 훅 패턴을 검색없이 손에 익히기 위해서는 간단한것부터 적용해보는 것도 좋을 것 같다고 생각했다. 제 코드가 완벽하게 만들어진 것이 아닐테니 보완부분은 댓글로 알려주셔도 감사합니다 :) 커스텀 훅? 리액트 공식문서 상에서 커스텀 훅의 핵심 키워드는 반복되는 로직이다. 리액트 공..
저번 좋은 성능과 가독성을 위한 if-else문에 대해 포스팅 하던 중 일급 객체에 대해서 설명을 한 부분이 있는데, 모든 일급 객체에는 다른 함수의 리턴값으로 사용할 수 있어야한다는 부분이 있었다. 자바스크립트에서는 커링을 통해 함수의 리턴값을 호출할 수 있었는데, 그럼 커링이 뭐길래 그게 가능한건지 알아보기로 하였다. 좋은 성능과 가독성을 위한 if-else 문 (2) 더 좋은 성능과 가독성을 위한 if-else문을 작성할 수 있는 방법 4가지 중에 남은 2가지를 마저 작성해보자. 두가지의 방법을 먼저 작성했던 첫번째 포스팅 다음으로 남은 두가지의 방법을 알아보 jhbljs92.tistory.com 커링이라는 단어는 사실 어디서 많이 주워듣긴 했었다. 하지만 정확한 정의와 왜 사용하는지를 정확하게 알..
더 좋은 성능과 가독성을 위한 if-else문을 작성할 수 있는 방법 4가지 중에 남은 2가지를 마저 작성해보자. 두가지의 방법을 먼저 작성했던 첫번째 포스팅 다음으로 남은 두가지의 방법을 알아보고 포스팅을 해보려한다. 좋은 성능과 가독성을 위한 if-else 문 (1) 본론으로 들어가기 앞서서 제어문에 대해서 알아보자. 제어문 (control flow statements) 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 한다. 제어문에는 조건문, 반복 jhbljs92.tistory.com 1, 2번의 방법은 위에 올려놓은 이전의 포스팅에 올려놓았기 때문에 이번 글은 3번부터 시작하겠습니다잉 먼저, 오늘의 두가지 방법을 알기 위해서는 자바스크립트의 일급 객체에 대해서 간단하게라도..
본론으로 들어가기 앞서서 제어문에 대해서 알아보자. 제어문 (control flow statements) 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 제어문이라고 한다. 제어문에는 조건문, 반복문 등이 포함된다. 우리는 코드를 작성할 때 제어문을 상당히 많이 사용한다. 그 중에서 다양한 조건을 설정할 수 있도록 if-else 문을 중첩하여 사용할 일이 아주 많다. 자주 사용하는 만큼 제대로 알고, 좋은 성능과 가독성을 챙기면 더욱 좋겠다 생각하여 if-else문을 더욱 좋은 성능과 가독성을 얻을 수 있는 코드작성 방법을 포스팅해본다. 총 4가지의 방법을 알아보려하는데 2개의 포스팅으로 나누어서 작성하려고 한다. 이유는 내 머리에 다 안들어오기 때문임. 조건문의 성능과 가독성을 위한 포스팅..
여러가지 웹사이트(커머스, OTT 등)를 둘러보다 보면 Slider 형태의 기능을 쉽게 볼 수 있다. 그냥 너무나 쉽게 찾아볼 수 있습니다. 우리는 보통 슬라이드라고 불러왔지만, 사실 정식용어는 캐러셀(Carousel)이라고 한대요. 뜻은 회전목마라고 하는데.. 뭐 그렇대요. 대충 뭔느낌인지 아실거라고 생각해요. 이러한 기능을 직접구현하는 방법도 있지만, 라이브러리를 통해 쉽게 구현할 수도 있습니다. 직접 구현하기 위해서는 캐러셀의 모든 컨텐츠를 하나의 container에 담고 overflow를 hidden속성을 주어서 container밖의 컨텐츠를 가려줍니다. 그러고 좌, 우 버튼을 만들어서 클릭시 컨텐츠의 margin-left에 음수,양수값을 더해주어 이동시켜줄 거리만큼 당겨주면 옮겨지는거처럼 보이겠..
나는 지금까지 나름 타입스크립트를 열심히 쓰고있었다 생각했었는데, 진짜 열심히만 쓰고 잘 쓰고있지는 않았나보다. 타입스크립트의 유틸리티 타입을 이제서야 알았으니.. 나는 타입스크립트를 사용해오면서 분~명히 이렇게 정의하는게 맞는건가 뭔가 미심쩍었지만, 그냥 에러만 안뜨면 된다 라고 생각하고 타입정의를 상당히 바보같이 하고 있었다. 하지만 이번에야말로 지저분한 타입정의 코드를 고쳐잡기 위해 유틸리티 타입을 알아보고 사용해보려고한다. 유틸리티 타입은 타입스크립트를 사용할 때 공통 타입 변환을 용이하게 하기 위해서 제공되는 타입이라고 타입스크립트 핸드북에서 설명하고 있다. 찾아보니 너무나 다양한 유틸리티 타입이 있었다. 근데 3개만 자주 사용한다고해서 3개만 포스팅할거임. 다른 유틸리티 타입은 차차 알아가보도..
