1. 올바른 초기값 설정const [count, setCount] = useState();const [list, setList] = useState(); 위의 초기값설정은 아래처럼 변경되어야 올바른 초기값 설정입니다.const [ count, setCount ] = useState(0);const [ list, setList ] = useState([]);왜 이렇게 값을 설정해야하는지 한번 알아보겠습니다. 초기값 ?가장 먼저 렌더링될대 순간적으로 보여질 수 있는 값이기도 하다. 당연히 초기에 렌더링 되는 값 초기값 지키지 않을 경우 ? 렌더링 이슈, 무한루프, 타입 불일치로 의도치 않은 동작 발생 -> 런타임 에러 초기값을 넣지 않으면 ? : undefined 상태를 CRUD => 상태를 지울때도 초..
클린코드란 1. 클린코드는 무적이 아니다 클린코드가 무조건 최고는 아니다 무조건 클린코드 === 좋은코드는 아니다 클린코드를 지켰다며 TDD를 통과했다며 기뻐하지만 React 앱이 동작하지 않음 성급한 기술 도입으로 과도한 추상화 팀원들에게 피해를 줌 2. 클린코드보다 중요한 것은 상당히 많다. 작성한 코드의 확장성 React 앱의 완성도 앱의 완성도가 떨어지는 경우 사소한 동작에도 잦은 버그가 발생 함께 개발하는 팀원들과의 코드를 두고 할 수 있는 소통 Vite란? 공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공 번들링 시, Rollup 기반의 다양한 빌드..
화면구성 메인화면 대쉬보드(Carousel) 등록된상품 최근본상품 하단(Footer) 카테고리 로그인화면 회원가입 화면 비밀번호 찾기화면 마이페이지화면 회원정보수정화면 내 게시물 조회 좋아요 대여해주는상품 쪽지함 쪽지상세화면 쪽지함에서 거래하기 화면 상품등록 상품상세화면 상품상세 댓글, 대댓글 상품에 대한 쪽지보내기 검색화면 카테고리 클릭 화면 프로필조회 신고화면 관리자페이지
진행하고 있는 프로젝트에서 react-query를 도입하려고 합니다. 그 이유와 어떻게 적용했는지 살펴보고 최종적으로 사용했을 때와 사용하지 않았을 때의 성능까지 비교해보겠습니다. 먼저 리액트쿼리에 대해 간단하게 알아보겠습니다. react-query? React-Query는 데이터를 불러오고 캐싱하며, 서버 데이터와의 동기화 및 업데이트 하는 작업을 개발자가 쉽고 간단하게 할 수 있도록 도와주는 라이브러리 입니다. 즉 '비동기 로직을 쉽게 다룰 수 있게 해준다'라고 이해하면 될 것 같습니다. 데이터 캐싱기능을 잘 사용하기 위해서는 리패치가 일어나는 조건과 옵션 2가지에 대한 이해가 필요합니다. stale : 사전적의미로 "신선하지 않은" 리액트 쿼리는 기본적으로 캐싱된 데이터를 stale한 상태로 여깁니..
Carousel 도입이유 현재 프로젝트를 진행하면서 페이지가 너무 정적인 경향이 크다고 생각했습니다. 그래서 동적인요소를 추가하고자 했고 그 중에서도 대쉬보드에 Carousel을 도입하여 메인페이지에 동적인 느낌을 주려고 했습니다. 현재 사이트 모습 현재 메인페이지의 모습입니다. 화면 중앙에 위치한 대시보드에 Carousel을 도입해 자동으로 대쉬보드가 전환되고 또한 사용자가 화살표를 클릭하면 원하는 대쉬보드를 보여줄 수 있게 구현하고 싶습니다. Carousel(캐러셀)이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX구성요소입니다. 버튼을 눌러 옆으로 사진이 넘어가며 모션이 마치 회전목마와 비슷하다고 하여 붙여진 이름입니다. 캐러셀은 용도에 따라 자동재생되게 하거나, 사용자가 수동으로 넘..
keyof 유저 인터페이스의 키 값중 하나를 불러올 때 유용하게 사용할 수 있는 keyof키워드입니다. keyof를 사용하면 유니온 타입을 사용한 것과 동일한 결과를 변수에 넣을 수 있습니다. User의 키에 없는 값을 넣으면 에러가 납니다. partial parital은 프로퍼티를 모두 Optional(선택적인)값으로 바꿔줍니다. 인터페이스에 선언한 값들 중 일부값만 넣으면 아래처럼 에러가 발생합니다. 아래와 같이 partial을 사용하면 일부만 사용해서 선언할 수 있게 됩니다. 즉 위의 인터터페이스가 아래의 인터페이스를 선언한 것처럼 사용할 수 있게 됩니다. partial이라도 선언하지 않는 키값을 넣을 수는 없습니다. Required required는 반대로 모든 값들을 필수 값으로 만들어줍니다. ..
제네릭의 사전적 정의 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주활용되는 특징입니다. 특히, 한가지 타입보다 여러가지타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭을 사용하는 이유 아래의 코드는 인자를 하나 넘겨 받아 반환해주는 함수입니다. 함수의 인자와 반환값은 모두 string으로 되어있지만 만약 여러가지 타입을 허용하고 싶으면 any를 사용할 수 있습니다. function logText(text: string): string { return text; } 이렇게 any로 한다고해서 함수의 문제가 있는것은 아니지만 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지는 알 수 없습니다. (any라는 타입은 검사하지 않기때문) function logTe..
자바스크립트 ES6+ 형태의 클래스와 동일하게 클래스를 만들어보겠습니다. 그랬더니 color에 오류가 발생합니다.(js에서는 정상적으로 작동합니다) 실제 js에서의 결과 타입스크립트에서 클래스를 작성할 때 맴버 변수는 미리선언해주어야합니다. 추가로 변수의 타입도 설정해줘야합니다. 멤버 변수를 선언하지 않고 사용 할 수 있는 방법이 있습니다. 바로 접근제한자나 readonly를 사용하는 것입니다. 접근제한자 js ES6에서는 접근제한자를 제공하지 않습니다. 타입스크립트에서는 사용할 수 있습니다. public , private , protected public public은 자식 클래스나 클래스 인스턴스에서 접근할 수 있습니다. 아무것도 작성하지 않으면 기본적으로 public이 됩니다. 부모클래스의 Car의..
리터럴타입 js에서는 const는 변하지 않는 값을 선언할 때, let은 변할 수 있는 값을 선언할 때 사용합니다. 겉보기에는 js와 별차이가 없어보이는데 마우스를 변수에 올려 확인해보면 userName1은 const이기 때문에 변하지 않습니다. 그렇기 때문에 userName1의 타입은 우리가 넣어준 "Bob"이 들어가고 userName2는 let이기 때문에 변할 수 있습니다. 그래서 string이 됩니다. 여기서 userName2에 다른 타입의 값을 넣고 싶다면 그 값의 타입을 명시해주어야 합니다. 그리고 여기서 userName1처럼 변하지 않는 값을 가진 변수의 타입을 문자열 리터럴 타입이라고 부릅니다. 앞에 배운것중 enum키워드가 있는데, 문자열리터럴 타입과 type키워드를 이용하면 이와 비슷한 ..
함수 웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의 할 수 있습니다. 함수의 파라미터(매개변수) 타입 함수의 반환 타입 함수의 구조 타입 더하기 기능을 하는 함수를 만들면 아래와 같습니다. return 값이 없으면 void라고 적어줍니다. 선택적 파라미터(Optional Parameter) 인터페이스에서 했던 것처럼 ?를 이용해서 선택적으로 매개변수를 받을 수 있습니다.(매개변수의 타입은 지켜줘야합니다) 참고로 자바스크립트처럼 기본값(Default Value)를 넣어서 똑같이 구현할 수도 있습니다. 선택적 파라미터를 사용하면서 주의해야할점은 해당 매개변수는 필수 매개변수의 뒤쪽으로 와야합니다. 만약 선택적 매개변수가 앞으로 온다면 매개변수를 1개만 받았을 ..
인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다 객체의 스펙(속성과 속성의 타입), 함수의 파라미터, 함수의 스펙(파라미터, 반환타입 등), 배열과 객체를 접근하는 방식, 클래스 아래처럼 js에서는 객체를 정의하여 해당값에 접근할 수 있었는데 타입스크립트에서는 해당 객체의 데이터의 타입을 정의해줘야합니다. 즉 객체를 정의하고 싶을때는 인터페이스를 사용합니다. 생성방법 인터페이스는 먼저 앞에 Interface 타입이라는 것을 명시하고 일반적인 객체를 만들듯 만들어줍니다. 대신 인터페이스 안에 있는 프로퍼티(속성)에는 값이 아닌 타입이 들어갑니다. 그리고 객체를 만들 때 그 객체의 타입을 방금 만든 인..
number/string/array 기존 JS에서 사용했던 변수들을 TypeScript로 만들어 보겠습니다. 오른쪽이 js이고 왼쪽이 ts입니다. ts에서는 기존의 js에서 선언했던 변수에 타입만 명시해주면 됩니다. 만약 string만 들어가게 만들었는데 number타입을 넣으려고 한다면 어떻게 될까요? 오류가발생합니다. TypeScript를 사용하면 이렇게 특정변수 또는 상수의 타입을 지정할 수 있고 사전에 지정한 타입이 아닌 값이 설정 될 때 바로 에러를 발생시킵니다. tuple tuple은 배열과 비슷한 모양입니다. 인덱스별로 서로 다른 타입의 데이터를 넣을 수 있습니다. 타입의 순서를 미리 결정해 놓기 때문에, 올바르지 않는 데이터를 넣으면 오류가 발생합니다. void/never void : 함수..
문자열 자바스크립트 -> 문자열은 변경 x 한번생성되면 내용을 변경할 수 없다. 특수문자 출력 -> ``백틱안에 , \ -> \\2번작성해야 나온다. 자바스크립트 입력 자료형은 문자 , 숫자로 사용할려면 Number로 변환해줘야함. 소문자 ,대문자 변환 소문자 -> 대문자, 대문자 -> 소문자 문자열.charCodeAt(index) : 문자 ->아스키코드(숫자)로변환 String.fromCharCode(아스키코드숫자) : 아스키코드 -> 문자로변환 ex) str = aBcDeFg console.log(str.charCodeAt(0)-32) : 97(a)-32 =65(A) console.log(String.fromCharCode(65) : 65 = A 변환 1) 문자.toUpperCase() : 소문자 -..
상황 사용자가 상품을 클릭하면 최근에 클릭한 상품의 순서대로 최근 본 상품이라는 단어 아래에 해당 상품들을 출력하고 싶었습니다. 해결방법 현재 ItemMain이라는 컴포넌트에서 위의 정보들을 보여주고 있습니다. 여기서 상품들을 api를 통해 호출하고 state배열에 저장한다음 return문 안에서 상품들을 map을 이용해 보여주고 있습니다. 그래서 이미 호출한 state배열을 활용하고자 했습니다. 최근본상품의 컴포넌트를 호출할때 props로 상품들(state배열)을 전달하고 해당 컴포넌트의 useEffect문 안에서 findIndex함수를 통해 상품의 정보를 배열에 저장해주고 출력해주었습니다. 간단하게 순서대로 설명해보면 1. 메인페이지를 접속할때 localStorage에 wathced 배열 생성. 2...
현재 서버에서 주는 UTC시간의 형식입니다. 아래의 시간을 KST로 변환해보겠습니다. 위의 UTC시간은 a라는 곳에 담겨져있고 a를 콘솔로 출력했었습니다. 먼저 a데이터를 new Date()로 감싸서 const kor = new Date(a); 아래의 형태로 만들어줍니다. 다음으로 console로 아래처럼 입력하고 확인해보면 console.log(kor.toLocaleString()); console.log(kor.getTimezoneOffset()); 아래의 데이터가 나오고 -540 즉 UTC시간은 한국보다 9시간 빠른것을 알 수 있습니다! 그래서 여기 hour에 9시간만 더해주면 되지 않을까? 라는 생각을 했습니다. kor.setHours() 함수를 이용해 시간을 +9시간 해줍니다. getHours(..
