전체 글
-
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..
-
useState 함수형 업데이트Frameworks, Platforms and Libraries/React 2024. 8. 18. 00:42
이전 useState와 useRef를 비교하는 포스팅에서 useState의 값의 변화와 re-render의 과정이 비동기적으로 이루어진다고 했는데 useState의 set에서 함수형 업데이트를 통해 동기적으로 사용하는 방식에 대해 살펴보려 합니다. useState 비동기적 set 함수예시코드를 간단하게 확인해보겠습니다.import { useState } from "react";function HooksTest() { const [count, setCount] = useState(0); const updateCount = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( ..
-
GitHub 2FA(2단계 인증) 설정Infra/Git 2024. 7. 28. 15:15
사내에서 형상관리를 위해 GitHub을 사용 중인데 보안 이슈로 GitHub 2FA을 설정하게 되었습니다. 설정하면서 해당 내용을 간단히 정리하게 되었습니다. 2FA?2FA(2단계 인증)은 기존 비밀번호로 인증하는 방식 외에 다른 방식을 추가로 인증하여 접근하는 방식으로 GitHub에서는 23년 이후로 사용자들에게 2FA 설정을 권고하고 있습니다. GitHub의 경우 모바일 디바이스의 애플리케이션에서 생성하거나 문자 메시지(SMS)로 전송되는 코드를 이용하여 2FA 인증 형식을 사용합니다. 설정 순서GitHub에 로그인후 계정 Settings 메뉴에서 Password and authentication 메뉴로 들어갑니다. 해당 메뉴에서 2FA 항목에서 Enable two-factor authenticati..
-
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..
-
AWS Lambda로 SPA SEO 설정하기Infra/AWS 2024. 6. 23. 17:05
현재 AWS S3와 CloudFront로 구성된 Serverless 인프라로 올라간 SPA에 SEO의 정보가 담긴 데이터를 가져와 적용하는 작업을 맡게 되었습니다. 람다 함수로 어떻게 SPA에 SEO를 적용했는지 팀 내부에 공유를 위해 문서 작성 겸 포스팅하게 되었습니다. AWS Lambda?AWS Lambda는 Serverless computing service로 별도의 서버 구성 및 관리의 필요성 없이 실행 시킬 코드를 람다 함수로 구성하여 필요할 때 함수를 실행시키는 서비스입니다. Lambda를 통해 따로 서버를 띄우지 않고 필요할 때만 함수를 실행시켜 사용한 컴퓨팅 시간만큼만 비용이 차징 되기 때문에 함수가 실행되지 않을 때는 차징 되지 않습니다. 작업 플로우변경할 SEO의 정보를 API를 통해..
-
String to HTML, dangerouslySetInnerHTMLFrameworks, Platforms and Libraries/React 2024. 6. 9. 14:22
데이터로 String화된 HTML을 React에서 적용 시 dangerouslySetInnerHTML를 사용합니다. 네이밍부터 dangerously가 들어가지만 무심코 사용하는 dangerouslySetInnerHTML에 대해 알아보겠습니다. dangerouslySetInnerHTML?dangerouslySetInnerHTML은 React에서 innerHTML을 사용하기 위한 방법으로 String으로 된 HTML을 그대로 사용하는 것을 막고 __html 키로 객체를 전달해 사용합니다.function Component() { const markup = 'some raw html'; return ;}export default Component; 예시에서 확인할 수 있듯이 dangerouslySetIn..
-
filter와 backdrop-filterStyle/CSS 2024. 6. 2. 14:51
최근에 작업을 진행하면서 CSS의 backdrop-filter를 사용할 일이 있었습니다. backdrop-filter를 사용하면서 이슈도 있었고 이번 기회에 CSS의 filter와 backdrop-filter 내용을 정리하게 되었습니다. filter? backdrop-filter?filter와 backdrop-filter는 CSS 속성으로 요소에 그래픽 효과를 적용합니다. filter와 backdrop-filter는 같은 구문을 가지며 많이 사용하는 필터 함수를 살펴보겠습니다./* 흐림 처리 */filter: blur(5px);/* 밝기 조절 */filter: brightness(0.4);/* 색상 대비 조절 */filter: contrast(200%);/* shadow 처리 */filter: drop-..
-
Recoil 도입기Frameworks, Platforms and Libraries/React 2024. 5. 19. 15:27
기존 레거시 프로젝트를 리팩토링하면서 Recoil을 도입하게 되었습니다. 이전에 React 프로젝트에서는 Redux을 사용했기 때문에 팀 내부에도 기술전파가 필요하여 내용을 정리하게 되었습니다. Recoil?Recoil은 Facebook 팀에서 만든 상태 관리 라이브러리로 공식 페이지에서도 확인할 수 있듯이 Recoil을 React를 위한 상태 관리 라이브러리로 표명하고 있습니다. Recoil에서는 atom이라는 상태 단위와 selector라는 파생된 상태를 나타내는 순수 함수를 통해 상태를 나타냅니다. 자세한 내용은 사용 방법에서 알아보겠습니다. Recoil vs ReduxRedux는 Flux 아키텍처를 베이스로 만들어진 상태 관리 라이브러리로 트리 형태의 store 구조를 가집니다. 비동기 처리를 ..