본문 바로가기

전체 아티클136

PWA의 핵심, 서비스 워커가 뭘까? 목차 · 서비스 워커가 뭘까? · 서비스 워커와 웹 워커의 공통점 · 서비스 워커와 웹 워커의 차이점 서비스 워커가 뭘까? 서비스 워커는 웹 워커의 일종이다. 서비스 워커와 웹 워커는 매우 유사한 인터페이스를 갖고 있으나, 각각의 의도와 기능은 매우 다르며 공통점과 차이점은 다음과 같다. 웹 워커란? 싱글 스레드 기반으로 작동하는 자바스크립트는 싱글 스레드의 단점을 보완하기 위해 코드들이 비동기로 실행된다. 그러나 API 비동기 실행이 너무 많이 쌓이게 되면 모든 작업의 실행 속도가 느려질 수 있다. 이 문제를 해결하기 위해 나온 것이 바로 워커이다. 웹 워커 API가 멀티 스레딩을 지원하게 되어 워커를 이용하면 워커에서 작성된 스크립트는 메인 스레드에서 분기되어 독립된 스레드로 실행되기 때문에 메모리 .. 2023. 11. 12.
지연 시간 없이 웹 폰트 서빙하기 (feat. 사용자에게 버벅이는 순간 없애기) 목차 · 어라, 왜 버벅이지? · 부드러운 폰트 서빙을 위한 여러가지 방법들 1) 꼭 필요한 Glyph 만을 포함하는 폰트 파일 사용 2) Critical Request Depth 줄이기 · 레퍼런스 어라, 왜 버벅이지? 멋쟁이사자처럼 메인 코어 페이지를 제작하던 도중, 배포된 페이지를 방문하던 도중 폰트가 버벅이는 현상을 발견했다. 웹 폰트를 사용하다보니 사용하는 폰트들의 로드 시간이 소요되었고, 사용자가 보는 도중 로드를 마치는 원인 때문에 사용자에게 버벅이는 현상이 제공되었다. 현재 멋쟁이사자처럼 코어 페이지에서는 Pretendard 폰트를 사용하고 있기 때문에, 관련 깃허브에서 용량에 관련된 부분이나 다양한 웹 서핑을 통해 웹 폰트를 부드럽게 서빙하는 방법을 찾을 수 있었다. font-displa.. 2023. 11. 11.
아이폰 사파리에서 Box Shadow가 적용되지 않는 크로스 브라우징 현상 목차 · 크로스 브라우징 현상 발생 · 어떻게 해결할 수 있을까? · 레퍼런스 크로스 브라우징 현상 발생 box-shadow css를 적용하고, 분명 브라우저에서는 잘 동작했지만 출근 길에 개발한 페이지에서 box-shadow css가 적용이 되지 않은 것처럼 보이는 현상을 발견하였다. 예전 리크루팅 서비스를 제작했을 때도 비슷한 현상을 겪었던 기억이 나는데 따로 정리를 해두지는 않아서 이번 기회에 해당 문제에 대해 포스팅을 진행해 기억에 오래오래 남기려고 한다. 위와 같이 이메일 알림 페이지를 만들었는데, 모바일 사파리에서만 해당 현상이 발생하고 있었다. 이에 따라 일부 브라우저에 맞게 CSS 처리를 해줘야하는데 이 부분에 대해서는 국내 블로그에서 따로 다루는 곳은 없었고, 스택 오버 플로우까지 들어가.. 2023. 11. 10.
NextJS에서 Proxy 설정하기 목차 · React에서의 Proxy 설정 · NextJS에서의 Proxy 설정 React에서의 Proxy 설정 CRA 형태의 React 프로젝트에서는 Package.json 파일에 아래와 같이 코드 한줄을 삽입해주면 서버와의 통신이 가능했다. "proxy" : "http://localhost:8080" 설정한 주소는 통신하고자 하는 백엔드 서버의 주소로, 위의 예제에 따라 사용자가 통신하고자 하는 주소로 유동적으로 변경해 사용이 가능하다. 나 같은 경우 스프링부트 서버를 로컬 환경에서 같이 실행시켜주고 있었기 때문에 위와 같은 예제를 작성하였다. 하지만 NextJS 프로젝트에서는 Packge.json을 수정해줘도 서버와의 통신이 실패했고, 404 에러가 계속해서 발생하고 있었다. Package.json을.. 2023. 11. 10.
디프만 14기에 합격을 했는데요, 느낀 점이 정말 많아요 목차 · 디프만에 왜 지원을 했을까? · 서류 준비부터 면접, 그리고 최종합격까지 디프만에 왜 지원을 했을까? 사실 스스로에게 많이 질문을 했던 내용이다. 현재 `밀리콘`이라는 프로젝트 팀을 이끌며 팀원들과 함께 다양한 프로젝트를 만들어가고 있고 얼마 전에는 `위드 페스티벌`을 통해 학교 학생들에게 보다 편리하게 정보를 제공할 수 있었다. 회사도 잘 다니며 현재로서는 부족한 점 없이 하루 하루 열심히 살아가고 있던 와중, 얼마 전 5년 가까이 프론트엔드 리드 개발자로 근무하셨던 부장님의 말씀이 떠올랐다. "스스로 고여가는 느낌이 들었고, 나에게 새로운 느낌을 주고 싶었어요" 당시 안정적인 회사 생활을 추구하던 입사 2개월 차에게 안정적인 것들을 포기하고, 새롭게 도전한다는 부장님의 말씀은 정말 새로운 충.. 2023. 11. 1.
프론트엔드의 뜨거운 감자, 리액트 쿼리 목차 · 리액트 쿼리에 들어가면서 · 리액트 쿼리의 캐싱 처리 · StaleTime과 CacheTime · useQuery와 useMutation · 코어 프로젝트에 실제 적용해보기 · 레퍼런스 리액트 쿼리에 들어가면서 요즘 프론트엔드 개발을 진행하면서 리액트 쿼리에 대해서 많은 이야기들을 들었다. 회사 프로젝트 및 개인 프로젝트에서 많이 사용되는 라이브러리인데 눈팅만 슥 하자니 배워보고싶은 마음에 무작정 프로젝트에 적용을 하면서 배움의 기회를 얻게 되었다. 리액트 쿼리는 간단하게 말하자면 데이터 페칭, 캐싱, 서버 데이터와의 동기화를 지원해주는 라이브러리이다. 리액트 훅과 같이 쉽게 사용이 가능하며 비동기 로직을 보다 간편하게 작성하는데 도움을 준다. 그 밖에 서버 값을 클라이언트에서 사용할 때 자동으.. 2023. 10. 30.
디프만 준비해보기 (두둥-탁) 보호되어 있는 글 입니다. 2023. 10. 19.
배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 공유하고 싶다면? 목차 · 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요 · Ngrok 란? · Ngrok 설치해보기 · Ngrok 실행해보기 배포를 하기에는 시간이 너무 많이 들고, 로컬 서버를 먼저 공유해보고 싶어요 사이드 프로젝트를 진행하고 있을 때였다. 퍼블리셔가 따로 없었기 때문에 퍼블리싱 업무도 도맡아 디자이너와 함께 상의해 Zepling과 Figam 툴을 사용하여 협업을 진행하였다. 매 회의때마다 `제 이번 프론트엔드 개발은 이렇게 진행을 했구요, 이렇게 UI를 구현해보았어요` 라고 말을 해도 팀원들은 끄덕끄덕, PPT로 간신히 캡쳐한 시각적인 자료가 없었기 때문에 배포를 하기 전까지는 디자이너가 자유롭게 서비스에 들어와 구현된 화면을 같이 공유해 볼 수 없다는 것이 정말 불편했.. 2023. 10. 16.
아이패드의 분기처리, 그러니까 브라우저에서 아이패드인걸 어떻게 구분해요? 목차 · 왜 이 글을 쓰게 되었을까요? · 아이폰과 아이패드 구분 방법 · 레퍼런스 왜 이 글을 쓰게 되었을까요? 회사 업무를 진행하면서 다양한 환경에서 에디터가 사용되어야하기 때문에, 크로스 브라우징 환경을 워낙 많이 다루게 되었다. 심지어 IE까지 지원을 하기 때문에 크로스 브라우징 환경에서의 적응은 더더욱 중요해졌다. 이슈 중 에디터의 내용이 사파리의 모바일 환경에서 이미지 하이라이트가 되었을 때 하이라이트가 에디터 밖으로 노출되는 현상이 일어났고, 이에 따른 예외처리가 필요했다. 아이폰의 경우는 모바일에 따른 UserAgent 값이 출력이 잘 되지만 아이패드의 경우는 데스크톱으로 값이 출력되는 것을 확인했다. 그렇다고, 데스크톱에 관련 CSS를 적용한다고 하면 해당 이슈를 수정한다고 해도 다른 브.. 2023. 9. 2.

티스토리툴바