썬이의 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..

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

회원가입 기능을 작업하다 보면 거의 필수적으로 들어가는 생년월일 부분을 라이브러리를 사용하지 않고 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 ..

이번 주차에서는 DocumentPicker 를 사용하여 내 폰의 파일들을 Google Firebase에 업로드하고, 업로드한 파일을 가져와서 출력해주는 과제를 수행하였다. 이 과정에서 가장 나를 괴롭혔던 것은, DocumentPicker를 사용하여 가져온 딕셔너리 객체에는 Index값을 넘겨주지 않는 것이었다. (앱개발 종합반을 하면서 만들었던 '나만의 꿀팁'앱에서 사용했던 데이터는 Index값을 리스트에 넣어놔서 파일을 관리하기가 용이했다.) Slack에도 질문해보고, 여러 문서를 찾는 도중 해결 방법은 생각보다 간단했다. // Upload Page const ImageUpload = async () => { let i = 0; await getUserId(); firebase_db.ref(`user/..

지난 주차에 기본적인 MainPage를 구현하고, 각각 어떤 기능이 들어가야 좋을 지에 대해 구상하고, 이번 주차부터 본격적으로 Private Box에 들어갈 요소를 하나하나 그려나가는 중이다. 처음엔 네비게이션으로 MainPage에서 UploadPage를 창 이동해주는 효과로 진행했는데, 뭔가 배경색을 투명하게 해서 MainPage가 그대로 출력되게 하면 어떨까 하는 생각에 튜터님께 질문해서 Overlay 효과도 넣어보고, 이것저것 해본 결과 결국 Modal로 Upload 컴포넌트를 MainPage에서 랜더링해주는 식으로 진행했다. 알고나니 정말 별것도 아니고 앱개발 2-3주차때 배웠던 기능들도 있었는데, 몇주나 지났다고 저거 하나 구현하는데 2일이나 걸렸다.. 그래도 끙끙 앓다가 해결되는 순간이 얼마..

Private Box 이름 그대로 User가 사용하는 개인적인 보관함이다. 해당 앱에서는 이미지/동영상/텍스트 등의 파일을 개인 폴더에 업로드하여사용자가 열람하기에 용이한 서비스를 제공한다. (앱 이름 지으려다 시간을 너무 보내서... 추후에 생각나면 바꿔야 한다) Project Layout (GUI) MainPage 이미지 / 동영상 / 텍스트를 업로드할 버튼 전체보기 / 이미지 / 동영상 / 텍스트 / Favorite를 구분하여 출력할 Card (지난 5주간 만들었던 "나만의 꿀팁" 앱과 동일한 느낌!) Card 안에 들어갈 Favorite / Delete / Open / Share 버튼 (전체적인 느낌은 Black&White 로 심플하고 깔끔하게..) 개발해야 할 기능들 파일 업로드 기능 업로드된 ..