본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클160

[rollup.js] rollup -c 실행 시, Cannot use import statement outside a module 목차 · rollup -c 실행 시, 오류가 발생하다. · 해결 방법 · 왜, 이 오류가 발생했을까? rollup -c 실행 시, 오류가 발생하다. rollup -c 실행 시에 Cannot use import statement outside a module 오류가 발생했다. 그 이유는 rollup.config.js에 import 방식을 사용하면서 발생을 했는데, package.json에 type을 module로 지정을 해주지 않으면 commonJS로 인식이 되어진다. 이때, rollup.config.js에서 ESM 방식의 import 방식을 사용해서 발생을 하고 있었다. 해결 방법으로는 간단하게 type을 module로 명시를 해줘 ESM 방식으로 호환이 되게 하는 것인데, 이렇게 해결을 하게 되면 라이.. 2023. 11. 30.
PWA랑 Git Action을 첨가한 멋쟁이사자처럼 피드 개발기 목차 · 홈페이지에 피드를 넣어보면 어떨까? · 그렇다면 주기적으로 데이터를 가져와야하는데, 어떻게 가져올 수 있을까? · 멋쟁이사자처럼 대학 공식 홈페이지가 되다 · 앞으로는 어떻게 할까? 홈페이지에 피드를 넣어보면 어떨까? 우리 학교의 멋쟁이사자처럼 대학 페이지를 만들고, 계속해서 신규기능과 리팩토링을 진행하고 있다. 점차 멋쟁이사자처럼 출신의 팀원들이 많아지면서, 개발자라면 한번씩 만들어본다는 기술 블로그를 모아보면 좋은 그림이 되지 않을까 싶었다. 그래서 기술 블로그를 원활하게 작성을 하는 친구들의 블로그 주소를 받아, RSS를 통해 블로그 포스팅 내용을 멋쟁이사자처럼 홈페이지에서 보여주고자 하였다. RSS란? RSS(Rich Site Summary)는 뉴스나 블로그 사이트에서 주로 사용하는 콘텐.. 2023. 11. 27.
CJS, AMD, UMD, ESM 목차 · 들어가며 · CJS란? · AMD란? · UMD란? · ESM란? 들어가며 처음 자바스크립트는 모듈을 가져오거나, 내보내는 방법이 없어 하나의 파일에 모든 기능들이 들어가야했다. CJS, AMD, UMD, ESM이 등장 후에는 모듈로 개발하고, 배포할 수 있게 되었으며 이번 포스트에서는 모듈화 개발을 할 수 있게 해준 CJS, AMD, UMD, ESM이 무엇인지에 대해 알아보려고 한다. 모듈(module)이란? 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로 다음과 같은 것들을 위해 사용한다. 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다. 네임스페이스화 : 자바스크립트에서 전역변수는 .. 2023. 11. 27.
자바스크립트 패키지 매니저, PNPM 란? 목차 · PNPM이란? · PNPM을 사용하는 이유, 그리고 특징 · 중첩된 패키지는 단 한번만 설치한다, 저장 공간의 효율성을 제공해준다. · 타 패키지 매니저에 비해 좋은 성능(속도)를 가지고 있다. · PNPM 설치 방법 · PNPM 사용기 PNPM이란? PNPM이란 2017년에 npm과 yarn의 비효율을 개선한 빠르고 효율적인 자바스크립트 패키징 매니저이다. 여기서 비효율이란, npm으로 여러 프로젝트를 관리하다보면 각 프로젝트마다 모두 같은 의존성을 사용하는 경우가 있다. 이때, 모두 같은 의존성을 사용하기 때문에 이는 중복을 의미한다. 이를 테면 react 프로젝트 100개가 로컬에 있을 수 있다. 이때, npm이나 yarn으로는 100개의 프로젝트 모두 node_modules 디렉토리에 각.. 2023. 11. 21.
웹앱을 위한 PWA 구현하기 - 1 목차 · PWA의 이점 · 웹앱 매니페스트(Manifest)란? · 웹앱 매니페스트(Manifest)의 설정 · 서비스 워커(Service Worker)란? · 레퍼런스 PWA의 이점 빠른 페이지 로딩 속도 Service Worker의 Cache API를 사용하여 데이터를 캐싱시킬 수 있다. 이를 통해 두 번째 방문부터 캐싱된 데이터를 통해 즉각적인 페이지 로딩을 시킬 수 있다. 이는 정적 데이터와 동적 데이터에 대한 캐싱 정책을 어떻게 정하느냐에 따라 페이지 로딩 결과가 달라지게 된다. 오프라인 지원 (네트워크에 독립적) Service Worker에 캐싱된 데이터를 가져오게 되면 네트워크가 오프라인 상태라도 서비스를 사용할 수 있게 된다. 따라서 PWA로 웹 앱을 구성하게 되면 오프라인 상태라도 브라우.. 2023. 11. 14.
Recoil에 한번 빠져보려고 하는데, Redux를 첨가한.. 목차 · 상태 관리 라이브러리 포스팅을 들어가며 · Redux에 대해서 알아보자 · Redux는 세가지 원칙을 가지고 있다. · Redux는 왜 이런 공식을 통해 상태 관리를 진행할까? · Redux는 어떻게 상태를 관리할까? · Recoil에 대해서 알아보자 · Recoil의 Atom이란? · Recoil의 Selector란? · Recoil의 전역 상태 관련 Hooks · Recoil의 특징 · 레퍼런스 상태 관리 라이브러리 포스팅을 들어가며 Recoil의 경우 다양한 기업에서 편안한 사용성으로 인해 Recoil을 많이 사용하고 있으며, Redux 처럼 다양한 구성(action, reducer 등)과 같은 환경 세팅을 할 필요가 없으며 특히 비동기 요청이 매우 심플했다. 또한, 간단한 인터페이스를 .. 2023. 11. 14.
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.

티스토리툴바