Languages
-
Safari(iOS) Date Invalid Date IssueLanguages/JavaScript 2024. 9. 1. 16:06
서버에서 내려주는 날짜 데이터를 이용하거나 포맷팅을 진행할 때 다른 환경과 달리 iOS에서만 Invalid Date가 뜨는 이슈를 작업 중 경험하곤 합니다. 날짜 포맷팅 라이브러리인 dayjs나 moment를 사용하더라도 해당 이슈를 발견할 수 있습니다. 해당 이슈를 알아보고 처리하는 과정을 살펴보겠습니다. Invalid Date IssueInvalid Date가 뜨는 이슈 확인을 위해 Chrome와 Safari 두 환경에서 비교를 진행하겠습니다. 날짜 포맷팅 라이브러리인 dayjs도 같이 확인 해보겠습니다. 해당 예제는 아래와 같습니다.// Chromeconst stringDate1 = '2024/08/30 00:00:00';const stringDate2 = '2024-08-30 00:00:00';c..
-
Google Spreadsheet to JSONLanguages/JavaScript 2024. 7. 7. 15:12
다국어 처리 작업을 진행하면서 Google Spreadsheet로 정리된 다국어 내용을 프로젝트 내부에서 JSON 형태로 쓰기 위해 변환 작업이 필요했습니다. 해당 작업을 진행하면서 내용을 정리하게 되었습니다. 작업 내용작업을 진행하기 앞서 Google Spreadsheet를 작성합니다. 작성된 다국어를 key-value 형태의 JSON으로 만들기 위해 key row와 사용할 다국어 언어 row를 만들어 작성합니다. 1. 필요 라이브러리 설치작업에 사용할 dotenv, google-spreadsheet, google-auth-library를 설치합니다. dotenv는. env 파일에서 환경 변수를 들고 오기 위해 사용되고 google-spreadsheet, google-auth-library는 작성된 G..
-
TypeScript Enums vs as constLanguages/TypeScript 2024. 4. 21. 14:40
TypeScript를 사용하면서 상수를 지정할 때 enum과 as const의 방식이 있습니다. 팀 단위로 개발을 진행하면서 상수 지정에 대한 컨벤션은 따로 없었고 팀원들의 스타일에 따라 각각 사용 중이었습니다. 상수 지정 방식을 통일하고 해당 내용을 정리할 겸 enum과 as const의 차이를 알아보겠습니다. Enums enum 예시로 enum을 사용하여 상수를 지정합니다. // 숫자 열거형 enum Direction { // 따로 할당된 값이 없을 경우 0부터 차례로 할당 됨. Up, Down, Left, Right, } // 문자열 열거형 enum DirectionString { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT', } 숫자 열거형..
-
Event Bubbling vs Capturing, event.stopPropagation vs event.preventDefaultLanguages/JavaScript 2024. 4. 14. 14:04
우연히 회사 동료분들과 이야기하면서 event capturing 이슈를 듣게 되었는데 순간 capturing이 위에서 아래로 전달인가? 방향이 헷갈려 제대로 다시 봐야겠다 싶어 정리하게 되었습니다. 이번 기회에 이벤트를 어떻게 전달하고 이러한 전달을 막기 위해 어떻게 처리하는지 알아보겠습니다. Event Bubbling vs Capturing Event Capturing은 특정 element에서 event 발생 시 하위 element로 이벤트가 전달됩니다. | | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | E..
-
함수형 프로그래밍 개론Languages/JavaScript 2024. 2. 4. 20:06
처음 실무에서 개발을 할 때 사수로부터 중요성을 그리고 지금까지도 팀원들과 이야기를 계속하는 함수형 프로그래밍은 개발을 하는 데 있어 베이스가 되고 늘 중요성을 이야기합니다. 프로그래밍 패러다임 중 하나이며 선언형 프로그래밍 중 하나인 함수형 프로그래밍에 대해 설명하고자 합니다. 프로그래밍 패러다임(programming paradigm) 프로그래밍 패러다임은 개발자에게 프로그래밍의 관점을 갖게 해 주고 결정하는 역할을 합니다. 최근에는 명령형 프로그래밍과 선언형 프로그래밍으로 구분하여 이야기합니다. 명령형 프로그래밍 ⇒ 어떻게 할 것인가? (How) 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하며 절차적 프로그래밍(Procedural Programming, PP)과 객체 지향 프로그..
-
Observer APILanguages/JavaScript 2023. 12. 29. 16:17
개발을 진행하다 보면 특정 요소의 크기나 속성 등의 변화를 추적해야 하는 case가 많이 생깁니다. 그럴 때마다 외부 라이브러리를 찾는 것보다 Observer API를 통해 직접 간단하게 구현하는 것이 더 깔끔하게 프로젝트를 구성할 수 있습니다. 자주 사용하는 Observer API 위주로 설명을 진행하겠습니다. 요소의 크기 감지 ResizeObserver ResizeObserver는 특정 요소의 크기 변화를 관찰하여 변화가 일어날 경우 지정된 callback 함수를 실행합니다. ※ window resize event의 경우 브라우저의 크기 변화를 관찰 사용방법 // ResizeObserver 요소 지정 const targetElement = document.querySelector('.className..
-
FileReader multiple files 처리하기Languages/JavaScript 2023. 12. 3. 13:55
최근 다수의 이미지 파일을 업로드하여 바로 사용자가 볼 수 있도록 하는 Form을 만들게 되었습니다. FileReader를 이용한 file reading 방식으로 개발을 진행하였고 이번 기회에 해당 내용을 포스팅하게 되었습니다. FileReader single file case 다수의 파일을 읽는 케이스를 설명하기 전에 FileReader를 이용한 단일 파일의 케이스 먼저 설명하겠습니다. 업로드된 이미지 파일의 읽기 위해 FileReader의 메서드인 readAsDataURL()을 사용합니다. 이미지의 경우 인코딩하지 않을 경우 깨지기 때문에 readAsDataURL()를 통해 base64로 인코딩 된 데이터로 반환받아 사용합니다. FileReader의 콜백처리를 위해 Promise를 사용합니다. Sin..
-
GraphQL Code GeneratorLanguages/GraphQL 2023. 8. 15. 16:46
이전 GraphQL 포스팅에서 언급되었던 Code Generator에 대해 소개하려고 합니다. Code Generator은 BE에서 설계된 데이터 모델링을 GraphQL 스키마를 기반으로 TypeScript로 가져오기 위해 사용합니다. Code Generator의 이점 1. 설계된 데이터 모델링을 찾아보는데 편합니다. 어떤 필드를 가지는지, 그리고 그 타입이 무엇인지 등 확인할 수 있습니다. graphiql을 사용하는 것보다 generator로 스키마를 직접 확인하는 게 편합니다. 2. 차후에 GQL을 통해 가져온 데이터들을 타입 체킹 하는 데 사용합니다. Code Generator 셋업 1. Installing Codegen npm install graphql @graphql-codegen/cli @g..