728x90 반응형 분류 전체보기362 react-hook-form TS와 똑똑하게 사용하기 2023.08.16 - [source-code/React] - React Hook Form 기반 유효성 버튼 구현 React Hook Form 기반 유효성 버튼 구현 약 1년이 조금 넘는 기간 동안, 샵 관리 프로그램을 개발했다. 대부분의 데이터가 사용자의 입력을 통해 생성되는 관리 프로그램의 특성상... form과 관련된 로직을 정말로 많이 다뤘다. 온갖 요구 23life.tistory.com 여전히 react-hook-form의 도움을 받고 있다. 현 서비스의 PC 버전은 nextJS + Typescript를 사용하고 있다. 앱에 있는 기능이 모두 구현돼야 하므로... 역시나 수많은 form 관련 로직을 다룬다. → react-hook-form도 TS로 작성하는 중! // Input.tsx impor.. 2023. 8. 21. index signature 관련 타입 에러 const convertToIndexGroup = ( data: T[] = [], ): {[key: number]: T[]} => { let indexKey = 0 return data.reduce((prev, cur, currentIndex) => { ... return Object.assign(prev, { [indexKey]: prev[indexKey] ? [...prev[indexKey], cur] : [cur], }) }, {}) } T[ ] 타입의 data 파라미터를 {[key:number] : T[ ]} 형태로 변환하는 함수. reduce함수를 사용해, 배열의 각 요소를 기준에 맞게(요구 사항으로는 4개씩 끊어서) key-array형태의 object로 변환했다. 여기서 위와 같이 작성하면.... 2023. 8. 21. JsToTs : axios JavaScript를 TypeScript로 변환하기🦾 2023.01.14 - [BTY/TypeScript] - JsToTs : 비동기 처리 - Promise JsToTs : 비동기 처리 - Promise JavaScript를 TypeScript로 변환하기🦾 비동기 처리 유저 정보를 받아오는 비동기 처리 함수를 생각해보자. 기존 JS 코드는 다음과 같다. const getUserProfile = async ({ id }) => { let config = { method: "get", url: `${U 233life.tistory.com 유저 정보를 조회하는 비동기 요청을 TS로 변환했었다. interface UserInfo { id: number; name: string; } const getUserPro.. 2023. 8. 21. JsToTs : 비동기 처리 - Promise JavaScript를 TypeScript로 변환하기🦾 비동기 처리 유저 정보를 받아오는 비동기 처리 함수를 생각해보자. 기존 JS 코드는 다음과 같다. const getUserProfile = async ({ id }) => { let config = { method: "get", url: `${URL}/auth/profile/${id}`, }; try { const _res = await axios.get(`${URL}/auth/profile/${id}`); return _res.data; } catch (e) { throw e; } }; 항상 기억하자 → TS는 JS의 변수, 매개 변수, 리턴값에 타입을 지정한 것! 우선 가장 먼저 눈에 띄는(그리고 선명한 빨간 밑줄이 그여있는) 매개변수의 타입을 지.. 2023. 8. 21. JS invalid date error 에러 JavaScript는 기본적으로 Date 객체를 제공한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. developer.mozilla.org Date 객체의 메서드들을 통해 특정 시간을 더하거나 빼는 등의 작업을 아주 손쉽게 할 수 있다. 그런데 오늘 release 환경에서 이런 일이 있었다. server에서 생성된 신청지 데이터 속 날짜 를 Da.. 2023. 8. 21. Tagged Template Literal styled-components의 `` ? const StyleComponents = styled.div` color : ${(props) => props.color}; styled-components를 사용하다보면... 숨쉬듯이 작성하는 코드들이다. 그런데 여기서, StyleComponents에 props로 전달한 값들을 어떻게 사용할 수 있는 걸까? Tagged Template Literal 우선 Template Literal이란? → 내장된 표현식을 허용하는 문자열 리터럴! $와 중괄호( $ {expression} )를 통해 표현식을 넣을 수도 있다. var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a .. 2023. 8. 21. localeCompare을 통한 문자열 정렬 JS에서 정렬 기능을 사용할 땐 Array.sort() 메서드를 주로 사용한다. arr.sort([compareFunction) 이 때 compareFunction이 제공될 경우, 배열 요소는 해당 함수의 return 값에 따라 정렬된다. → return값이 0보다 큰지, 같은지, 작은지에 따라 정렬 index가 달라짐! 따라서 숫자가 담긴 Array의 경우 numbers.sort(function(a, b) { return a - b; }); 와 같은 형태로 간편하게 오름차순 정렬을 구현할 수 있겠다. 이 때 문제는... 현 서비스에서는 숫자가 아닌, 문자 정렬을 해야하는 경우가 대부분이라는 것! (고객 이름 순 정렬, 견종 이름 순 정렬 등등...) 문자열의 경우 // mdn 예제 items.sort(.. 2023. 8. 21. 유튜브 댓글 감정 분석을 통한 주식 시장 파악 (1) 계기 이런 뉴스 기사를 봤다. https://biz.chosun.com/stock/stock_general/2023/08/16/7ZSOG4LH4RFBPIPTPL4Y4UYTZU/?utm_source=naver&utm_medium=original&utm_campaign=biz [인터뷰] “종목 추천 많으면 ‘꼭지’…투자기회, 역사에 답 있어” 인터뷰 종목 추천 많으면 꼭지투자기회, 역사에 답 있어 정광우 86번가 대표 투자의 역사는 반복돼 일본의 30년 시행착오가 한국엔 훌륭한 참고서 연준 입에 쏠린 눈하반기 금리인상 중단이 관전 biz.chosun.com “데이터 외적인 부분에서 본다면 주변인들의 반응에서 읽는다. 주식에 대한 이야기가 주변에서 많이 나오고 일반인들도 종목을 추천할 정도면 대체로 가격이 꼭.. 2023. 8. 20. Singleton Pattern을 통한 axios 쿠키 허용 배경 Cookie를 통해 로그인을 구현하던 와중, 모든 api 요청에 공통된 옵션을 줘야 하는 상황이 생겼다. 정확히 말하자면... axios를 통해 브라우저의 HTTP 요청을 처리하고 있는데, 이때 쿠키를 사용할 경우 withCredentials 옵션을 true로 줘야 한다. → 일반적으로 브라우저는 CORS 정책에 따라 다른 도메인으로부터 온 요청에서는 쿠키와 같은 인증 정보를 보낼 수 없다. (동일 출처 간의 요청에 대해서만 인증 정보를 자동으로 전송) → withCredentials 옵션을 통해 브라우저가 해당 도메인 쿠키를 함께 보내도록 허용하는 것! 예를 들어 리뷰 생성 시 로그인한 사용자의 쿠키를 함께 보내기 위해서는 import axios, { AxiosResponse } from "axi.. 2023. 8. 20. 이전 1 ··· 15 16 17 18 19 20 21 ··· 41 다음 728x90 반응형
