분류 전체보기165 VSCode : prettier 환경 설정하기 개요 VSCode에서 Prettier를 설정하는 방법에 대해 알아보겠습니다. 설정방법 1. 플러그인 설치하기 VSCode에서 `Prettier - Code formatter` 플러그인을 install 합니다. 2. VSCode Setting 변경 `Code > Preperence > Setting` 으로 이동합니다. Default Formatter 를 Prettier로 변경합니다.Format On Save 에 체크합니다. 위와 같이 설정하면 파일을 저장할때마다 Prettier가 적용된 결과로 바뀌는 것을 확인하실 수 있습니다. 마무리 오늘은 간단히 VSCode에서 prettier 설정을 하는 방법에 대해 알아보았습니다. 다음번에도 유용한 내용으로 포스팅하겠습니다. 2024. 12. 15. VSCode vs Webstorm : 개인적으로 둘다 써보고 느낀 장단점 개요 회사에서 WebStorm IDE를 사용해서 쭉 웹개발을 진행해 오다가, VSCode로 개발을 진행해야 되는 상황이 생겼습니다. 사용 이후에는 VSCode가 생각보다 괜찮고 장점도 많아서, 최근에는 계속 VSCode를 통해 개발을 진행하게 되었는데요, 간단하게 몇 가지 VSCode와 WebStorm의 개인적으로 느낀 차이점 간단하게 정리해 보도록 하겠습니다. VSCode 장점 (WebStorm과 비교) 1) 메모리를 적게 차지하고, 파일 검색 속도가 빠르다. Webstorm은 프로젝트를 몇 개만 새창으로 띄워놓아도 금세 메모리가 몇 기가씩 금방 넘쳐버립니다. WebStorm에서 옵션을 통해 메모리를 많이 추가적으로 할당해놓지 않으면 프로젝트 규모가 커질 때 아예 프로그램이 버벅거리는 걸 넘어서 멈춰버.. 2024. 11. 28. NextJS : next14에서 Day.js 사용 시 타임존 차이 (서버컴포넌트 vs 클라이언트 컴포넌트) 개요 next14에서 dayjs를 사용하여 시간에 대한 작업을 진행하고 있었는데요, 실제로 배포를 하였을 때 프로젝트에서 컴포넌트별로 시간값이 다른 문제가 발생하였습니다. 해당 문제가 왜 발생했는지 알아보고 해결법을 공유해보도록 하겠습니다. 문제점 문제의 원인은 서버 컴포넌트와 클라이언트 컴포넌트가 실제로 동작하는 환경이 달라서, 즉 서버와 클라이언트의 시간대가 달라서 발생한 것것이였습니다. 보통 서버컴포넌트는 서버의 시스템의 시간대에 따라서 시간을 처리하지만, 클라리언트 컴포넌트는 브라우저의 시간대에 맞춰 날짜와 시간을 변환하여 처리하게 됩니다. 실제로 로컬로 테스트를 할때는 위와 같은 문제가 발생하지 않았는데, 현재 제가 개발하고 있는 Mac 환경의 시간대도 한국 시간대(UTC+9)로 설정되어 있기.. 2024. 11. 14. CSS : font-synthesis 속성으로 모바일 IOS Safari 글꼴 굵게 표시되는 버그 수정하기 (feat: pretendard 폰트) 문제점 최근 개발 중에 개발 중인 반응형 웹 페이지의 폰트를 pretendard 폰트로 바꾸는 작업을 진행하였습니다. 이때 이상하게 모바일로 들어갔을 때 IOS Safari에서 bold로 처리한 폰트들의 글꼴이 유독 굵게 보였는데요, 원래 IOS에서는 pretendard 폰트가 이렇게 보이는 게 맞는지 몰라 디자이너분께 보여줬는데, 폰트가 조금 이상한 것 같다고 말씀해 주셨습니다. 실제 OS별로 확인을 해봐도 안드로이드 기기에서는 정상적으로 출력이 되고, 유독 IOS Safari에서 이상하게 보이는 것 같아서 원인을 찾아보게 되었습니다. font-synthesis 속성font-synthesis는 CSS 속성 중 하나로, 웹 페이지에서 특정 글꼴이 볼드, 이탤릭, 또는 소문자 대체(small-caps) 스.. 2024. 10. 14. HTML : polyfill.io 사이트 이용시 대체방법 (공급망 공격 issue) 개요 혹시 웹사이트를 개발할 때 polyfill.io 사이트를 CDN으로 사용하고 있나요? 저는 이전에 작업했던 프로젝트에서 에러가 발생하여 살펴보니 2024년 2월 이후부터 CDN으로 사용하고 있던 polyfill.io 사이트가 중지가 되었습니다. Polyfill 이란? polyfill이란, "충전 솜" 이라는 의미를 가지고 있는데요, 웹개발에서 polyfill은 신규 자바스크립트에서 도입된 문법을 구형 브라우저에서 돌아갈 수 있도록 도와주는 역할을 합니다. 즉 Promise 나 Set 객체등과 같이 우리가 당연히 알고 있는 자바스크립트의 요소들이 구형 브라우저에서 지원되지 않을 때 polyfill을 통해 이를 메꿔줄 수 있습니다. polyfill.io CDN 사용의 문제점 웹 애플리케이션에 pol.. 2024. 9. 13. Git : git clone 이후 모든 브랜치를 원격에서 로컬 브랜치로 가져오기 원격 브랜치를 로컬 브랜치로 가져올때 유의점 Git을 clone한 이후 모든 브랜치를 가져왔다고 생각하지만 보통 현재 활성화된 브랜치(default) 만 가져올 때가 많습니다. 보통 `git fetch --all (원격 저장소 변경사항 반영)` 또는 `git pull --all (브랜치를 로컬로 병합)` 명령어를 통해서 브랜치를 가져오게 되는데요, 이때 모두 올바르게 가져왔다고 생각하지만 이는 원격 추적 브랜치 의 변경사항만을 업데이트한것으로 실제 브랜치들은 로컬 브랜치로 가져오지 않습니다. 여기서, 원격에 있는 브랜치들의 상태 (삭제, 생성, 업데이트 갱신)을 로컬에서 추적하고 있는 브랜치를 원격 추적 브랜치 라고 합니다. 만약 이상태에서 원격의 연결이 끊어지게 되면 현재 브랜치가 아닌 다른 브랜치.. 2024. 8. 14. React : react-webcam 을 이용하여 기기에서 지원하는 최대 해상도 비디오 스트림 얻어오기 모바일이나 데스크톱 웹 애플리케이션을 개발할때 현재 디바이스의 카메라 화면을 가져오고 싶을때가 있습니다. React로 개발할때 이를 쉽게 구현해주는 `react-webcam` 이라는 패키지를 활용하면 쉽게 카메라 화면(Stream)을 가져와서 기능 구현에 활용할 수 있습니다. react-webcam 사용법 react-webcamReact webcam component. Latest version: 7.2.0, last published: 8 months ago. Start using react-webcam in your project by running `npm i react-webcam`. There are 297 other projects in the npm registry using react.. 2024. 7. 4. Nginx : X-Forwarded-For(XFF) 헤더를 통해 IP 로그 남기기 Nginx의 기본 로그 포맷 Nginx에서는 기본적으로 IP에 대한 아래와 같이 기본적으로 정의되어 있는 combined 로그 포맷으로 로그를 남겨줍니다. 127.0.0.1 - frank [10/Oct/2000:13:55:36 -0700] "GET /apache_pb.gif HTTP/1.0" 200 2326 "http://www.example.com/start.html" "Mozilla/4.08 [en] (Win98; I ;Nav)" 해당 로그 포맷은 보통 아래와 같은 규칙에 따라 표현됩니다. log_format combined '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_.. 2024. 6. 13. Vite : React 웹서버 서브 디렉토리 배포 설정하기 React를 통해 빌드를 하고 웹서버에 배포하기 위해서는 웹서버 설정이 추가적으로 필요합니다. 예를 들어, react-router와 같은 브라우저 라우터를 사용하게 되면 모든 경로에 대해 Web Root의 index.html로 rewrite 해주는 명령어가 필요합니다. Nginx의 경우 try_files 옵션을 설정하여야 하고, Apache의 경우 RewriteRule 옵션을 통해 설정할 수 있습니다. 위 설정을 해주지 않으면 새로고침시에 404 에러가 발생하는데, 이는 클라이언트에서 라우팅을 처리할때, 서버에 해당 자원이 없다고 인식하기 때문에 이러한 문제가 발생합니다. SPA에서는 모든 요청을 Base가 되는 index.html에서 처리하는데, 다른 경로로 접속하면 해당 경로에 일치하는 파일을 웹서.. 2024. 6. 11. NextJS : LocalStorage 에러 (ReferenceError: localStorage is not defined) 해결방법 오늘을 NextJS에서 LocalStorage 사용시 발생하는 에러에 대한 해결법을 간단히 공유해보도록 하겠습니다. 문제 상황 LocalStorage에서 값을 불러오고 저장하기 위해 아래와 같은 Util 함수를 만들어서 사용하고 있었는데요, next build 시에 아래와 같은 에러가 발생하였습니다. 문제 원인 문제 원인은 클라이언트 사이드가 아닌 서버사이드 렌더링 시에 브라우저의 전역객체를 사용할수 없기 때문에 발생하였습니다. 저는 빌드 타임에 에러가 발생했는데요, 실제로 런타임중이 아니더라도 빌드 타임에 NextJS는 Node 환경에서 코드를 실행하기 때문에 브라우저 전역객체를 사용할 수 없다고 합니다. 해결 방법 해결방법은 위와 같이 window 객체가 참조 되지 않을 경우에는 해당 코드를 실.. 2024. 5. 21. 이전 1 2 3 4 ··· 17 다음
