썬이의 IT세상

현재 시간에서 1시간을 뺀 시간의 날짜를 구하려고 할 때,now.getHours() - 1 로 하게되면 00시일때는 -1시가 되거나 에러가 날 것이다.또 세팅한 값에 따라 이상한 값으로 리턴되는 경우도 종종 있다. 이럴 경우 getHours와 setHours를 사용하여 간단하게 해결할 수 있는데, 현재 시간에서 특정 시간을 뺀 시간의 월/일/시 데이터를 리턴하는 함수 예제로 살펴보자.  const 특정시간을_빼보자 = () => { const now = new Date(); now.setHours(now.getHours() - 1); const hours = now.getHours().toString().padStart(2, '0'); const month = (now.getMont..

react-query의 onError를 사용하거나, Axios로 API를 호출할 때 에러 콜백의 타입은 AxiosError로 선언하게 되는데서버에서 에러코드에 따라 title, msg 등 response를 내려주는 경우에 onError : (error : AxiosError) => { onAddModal(error.reponse.data.msg) //  위와 같이 response를 가져오려고 하면 타입 에러가 생긴다 (컴파일단에서는 당연히 문제가 없지만, 우리는 빨간줄을 혐오하니까) 이럴 때는 간단하게, AxiosError를 상속받는 타입을 선언해주면 된다. interface IErrorDataProps extends AxiosError { data: { message?: string; st..

보통 서버에서 데이터를 받아와서 화면에 뿌려줄 때, 정해진 디자인 형식대로 오지 않아 프론트단에서 수정해야 하는 경우가 생긴다. 예를 들어, temp_dt : 'yyyy-mm-dd' 이런 식으로 들어오는 Date 데이터가 있다고 가정해보자. 서버에서는 yyyy-mm-dd 로 날려주는데 기획 상에서는 yyyy.mm.dd 형식을 원한다면 이 때마다 백엔드 팀에 형식을 고쳐달라고 말하기 애매할 때 (당연히 프론트에서 수정해야죠!) 이를 수정하기 위해 data.temp_dt.replace('-','.') 으로 코딩한다면 결과값은 아래와 같을 것이다. result : 'yyyy.mm-dd' ㅎㅎ.. 문자열 전체를 검증하고 모든 값을 바꾸려고 할때는 replace보다 split과 join을 같이 사용하면 간단히 해..

어떠한 객체 temp_obj에, 특정 key의 value값을 검색해서 boolean값을 반환하고 싶을 때, Javascript의 some() 함수로 쉽게 데이터를 검색할 수 있다. // Test Data const temp_obj = { a : { state : 'ready' }, b : { state : 'ready' }, c : { state : 'complete' } } 위와 같은 형식의 객체가 있을 때, temp_obj 안에 각각 들어있는 객체 중 complete가 한개라도 있다면 True를, 아니면 False를 반환하는 함수는 아래와 같다. // 데이터를 검증하는 함수 function checkApprovalStatus(data: TDataProps): boolean { // 해당 key들의 상..

JavaScript 또는 TypeScript로 회원가입 기능을 작성할 때, 반드시 들어가야 하는 부분 중 하나가 ID(혹은 Email) 을 입력하는 부분에 유효성 검사를 해주는 것이다. 이는 주로 정규식과 .test(id) 함수를 사용해서 검증하곤 하는데, 이번 포스팅에서는 ID에 (@ 이하 부분) 영문과 숫자, 그리고 일부 특수문자만 허용하게 하는 정규식을 다뤄보고자 한다. 조건 1. ID에는 영문과 숫자, 일부 특수문자만 허용한다. 2. ID에는 영문만 또는 숫자만 입력 가능하나 '특수문자만' 입력할 수 없다. 위 조건에 해당하는 정규식과 함수는 아래와 같다. export function isValidId(id: string): boolean { const validCharacters = /^[a-z..

임의의 두 지점이 있다고 가정해보자. 각각의 두 지점은 고유의 위도/경도 값을 갖게 되는데 이 좌표값을 이용해 두 지점 사이의 거리를 km, m 단위로 변환하여 구해보는 예제를 다뤄보겠다. 거리를 구하는 로직을 간단히 설명하자면, 두 지점의 좌표값을 각각 라디안으로 변환한 후 삼각함수를 이용해 두 지점의 차를 구한다. 두 지점의 좌표값을 라디안으로 변환하기 위해 DEGREES_PER_RADIAN 상수를 먼저 선언해준다. // 라디안 단위를 도 단위로 변환하는 상수 const DEGREES_PER_RADIAN = 180 / Math.PI; 지구의 반경(6371km) 또한 선언해준다. // 지구 반경 (단위: km) const EARTH_RADIUS_KM = 6371; // 두 지점 사이의 거리를 계산하는 ..

회원가입 기능을 작업하다 보면 거의 필수적으로 들어가는 생년월일 부분을 라이브러리를 사용하지 않고 Input으로 관리할 때, YYYYMMDD 혹은 YYYY-MM-DD 형식이 맞는지를 프론트에서 확인해주는 로직이 필요하다. 예를 들어 생년월일 파라미터에 1996-02-313 와 같이 들어갔는데 API를 호출하게 되면, 해당 회원정보에서 생년월일을 불러오는 부분에서 에러가 날 가능성이 아주 높다. 또 1111-22-33 과 같이 YYYY-MM-DD 형식은 지켰으나 실제 존재하지 않는 날짜의 경우도 있다. 실제적인 예로 어떤 외국인 회원분께서 22051996 과 같이 DD/MM/YYYY 의 형식으로 입력하셔서 해당 회원정보에 관련된 에러가 났던 경우가 있었다. 이에 정규식을 통해 자리수를 먼저 검증하고, 올바..

만들고있는 서비스에서 서비스 이용약관을 소스에 때려박아보니 쓸데없이 가독성이 떨어지는 경향이 있어 //#region - //#endregion 을 사용하여 간단히 보려고 했다. 이후 추가작업도 마무리 한 뒤에 잘됐나 보려고 서비스 이용약관 탭을 누르는 순간 Text Strings must be rendered within a component 에러가 떠서 1시간을 허비하게 만들었다. 처음엔 뭐가 잘못된지 몰라서 경우의 수도 다 따져보고 했는데, 결국엔 가독성 좋자고 적어놨던 region 때문이었다 ㅠㅠ 지우고 다시 디버깅하니 문제 해결! C# 개발할 때 소스코드 이쁘게 정리하려고 했던 버릇때문에 시간만 날려먹었다 다음엔 그냥 코드를 최대한 줄여서 쓰는 습관을 들여야지.. 원인은 region 기능을 JSX..

템플릿 리터럴(Template literals) 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 더 살펴보자면 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다. 템플릿을 좀 더 쉽게 편집하고 작성하기 위해 추가된 기능이나, 자체적으로 지원하기 전에도 라이브러리로 존재했던 기능이다. 템플릿 리터럴은 따옴표('' or "") 대신 백틱(``) 으로 감싸준다. Usage `text / 텍스트 입니다.` `줄바꿈 1 줄바꿈 2` /* 출력 : `줄바꿈 1 줄바꿈 2` */ const temp = 'test' console.log(`${temp} test`) // 출력 : test ..