개발하는 이유성

해당 포스팅은 React Webpack 환경에서 최적화하는 방법에 대해 다룹니다. Tree Shaking, 난독화, production 빌드에 대한 이야기가 나옵니다. 💡 요약 필요한 파일만 import하기 "sideEffect" 옵션 사용하기 "production" 모드로 build하기 CSS 최적화하기 devtool:false 트리 쉐이킹이란? 웹 최적화를 위해 사용하지 않는 코드(Dead code)를 제거하는 방법입니다. webpack과 같은 모듈 번들러에서 해당 기능을 제공합니다. 이 과정을 통해 파일을 최소 크기로 번들링하여 웹 어플리케이션 최적화할 수 있습다. 영어의 뜻을 그대로 해석하자면 나무 흔들기. 죽은 나뭇잎을 떨어뜨리기 위해 나무를 흔드는 것처럼 자바스크립트에서 죽은 코드를 제거하는 ..

해당 포스팅은 자바스크립트에서 많이 쓰는 linter인 Eslint에 대해 다룹니다. Eslint가 무엇인가요? Eslint는 Linter의 한 종류 중 하나다. lint는 소스코드에 문제가 있는지 탐색하는 작업을 의미하고 linter는 이 작업을 도와주는 도구를 의미한다. 개발자가 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있도록 도와주는 것이다. 자바스크립트를 사용하는 가이드라인을 제시하고 문법적 오류가 나면 알려주는 역할을 한다. 올바른 코딩 습관을 가지기 위해 필수적으로 사용할 것을 권장한다. 1. Eslint VSCode extention 설치 이미 Creat React App으로 리액트를 설치했다면 기본 eslint가 설정되어 있다. 하지만 이 상태로는 Vs Code에서 바로 에러 확인이 불..

해당 포스팅은 react에서 datalist 태그를 사용해서 이메일 자동 완성 기능을 구현하는 방법에 대해 다룹니다. SPOTV NOW 회원가입 페이지에 본 이메일 자동완성 기능이 인상 깊어서 진행중인 프로젝트에 적용해봤다. 구현 방법 자주 사용하는 이메일 리스트를 미리 정의한다. input value와 Email List 두 개를 useState로 등록한다. input에 onChange 이벤트를 등록한다. input value가 자주 쓰는 이메일 값과 합쳐져서 Email List 를 만든다. Email List를 순회하여태그의 value로 넣어준다. 선택한값을 input 값에 넣어준다. 란 무엇일까 email: 이메일 자동 왼성 로직을 구현하기 위해서는 라는 조금 생소한 태그를 사용한다. 을 담는 태그..

해당 포스팅은 React에서 axios interceptors를 typescript로 설정하는 방법에 대해 다룹니다. interceptors란? then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. https://axios-http.com/kr/docs/interceptors 사용자가 수신하는 모든 요청 또는 응답에 자동으로 추가되는 기본 설정입니다. 수신되는 응답의 상태코드를 확인하거나 인증 토큰을 넣을 때 유용합니다. 인터셉터에는 두가지 유형이 있습니다. request interceptor : 요청이 전송되기 전에 코드 일부를 작성하거나 실행할 수 있습니다. response interceptor: 응답이 발신 측에 도달하기 전에 코드 일부를 쓰거나 실행할 수 있습니다. 1. ax..

해당 포스팅은 로그인 회원가입시 유효성 검사하는 방법에 대해 다룹니다. 💡 요약 React에서 유효성 검사하는 방법은 3가지가 있다. input 태그 고유 속성 사용, 라이브러리 없이 직접 script작성, 라이브러리 사용. 간단한 유효성 검사는 직접 작성해도 된다. 유효성 검사할 내용이 복잡해진다면 라이브러리를 사용하자. 라이브러리는 react hook form을 권장한다. 유효성 검사란 유효성 검사는 입력받은 데이터 값이 맞는지(유효한지) 확인하는 것을 의미합니다. 예를들면 비밀번호에 “8자리 이상 두 종류 이상의 문자 구성”라는 유효성 조건이 있다면 “1111”이라는 비밀번호를 입력할 경우 통과되지 않습니다. React에서 유효성 검사를 구현하는 방법은 크게 3가지가 있습니다. 첫 번째는 html요..