SOSOLOG

📝 소소하게 끄적이는 개발로그

Monorepo 환경 구축하기(w. lerna + rollup + typescript)

들어가기 전에 이 글은 Lerna를 사용한 Monorepo에서 package 환경 구축 방법을 소개하는 글입니다. 들어가기에 앞서 Monorepo의 장점에 대해 간단히 소개하면, 프로젝트마다 반복되는 설정을 공유할 수 있고 모듈화된 패키지를 서로 참조할 수 있습니다. Monorepo로 구성되어 있는 대표적인 프로젝트인 babel패키지 중 babel-ext…

ServiceWorker 이모저모 이야기

ServiceWorker는 웹 서비스에서도 백그라운드 동기화, 푸시 알림 등이 가능하도록 지원해주는 도구입니다. 이 글에서는 서비스워커에 대한 소개와 간단하게 CRA기반에서 어떻게 cache설정을 적용하는지 살펴봅니다. 서비스워커란? 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며 웹페이지 또는 사용자의 인터랙션이 …

Tailwindcss를 소개합니다.(with. twin.macro + emotion)

TailwindCSS는 utility-first CSS 프레임워크입니다. 이 글에서는 utility-first CSS에 대한 개념과 TailwindCSS를 어떻게 사용할 수 있는지 소개합니다. 평소 TailwindCSS에 관심이 있으셨거나 도입을 고려하고 계시다면 한번쯤 읽어보시면 좋을 것 같습니다. utility-first CSS utility-firs…

성장에 은탄환은 없다

첫 회사에 입사하기 전부터 ‘같이 성장할 수 있는 회사’를 찾고 싶었고, 내 목표는 개발자로서 ‘멈추지 않고 성장하는 것’이다. 작년에 이 주제로 많이 고민했었고 그 내용을 발표에서 공유하기도 했었다. 지금 다시 생각해본 성장에 ‘은탄환’은 없고 매번 많은 고민을 통해 이뤄진다고 생각한다. 그 내용을 짧게 정리해 보려 한다. 정의 ‘성장’이라는 단어는 …

Cookie Recipes

작년에 발표된 Chrome SameSite 정책과 웹 사이트의 인증 기능을 구현하는 과정에서 ‘쿠키’에 대해 한 번쯤 들어 보셨을 것입니다. 이 포스팅에서는 쿠키가 무엇이고, 어떤 종류가 있는지, 쿠키의 특성과 연관된 브라우저 정책들을 살펴봅니다. 쿠키 쿠키란 웹사이트의 정보를 브라우저 쪽에 저장하는 작은 파일입니다. DB는 클라이언트의 요청에 의해 데이…

알아두면 쓸모 있는 Navigator지식

프런트엔드 개발에서 객체에 대한 사용을 빼놓을 수 없습니다. 이 포스팅에서는 navigator객체의 여러 가지 속성들에 대해 살펴봅니다. 객체는 대표적인 User Agent뿐만 아니라 사용자의 상태에 관한 여러가지 정보를 담고 있습니다. navigator의 속성들은 읽기 전용으로 접근할 수 있습니다. react-adaptive-hooks ChromeL…

Saga Pattern과 redux-saga

redux 비동기 처리를 위해 redux-saga를 사용해보신 적이 있으신가요? “The mental model is that a saga is like a separate thread in your application that’s solely responsible for side effects. redux-saga is a redux middlewar…

되돌아보는 index.html - Part 2

Part 1에서는 link tag와 script tag에 대해 알아보았습니다. 이번 편에서는 OpenGraph(이하 og), favicon, charset, lang에 대해 알아봅니다. OpenGraph Protocol OpenGraph Protocol(이하 og)이란, Facebook에서 정의한 HTML문서의 메타 데이터 정보를 적는 방식에 대한 규약…

되돌아보는 index.html - Part 1

React, Vue, Angular 같은 Library 혹은 Framework로 개발할 경우 빌드 결과물인 index.html은 자동으로 생성되기 때문에 직접 볼 필요가 없을 수도 있습니다. 하지만, 최종 html의 구성 요소를 잘 파악하고 있다면 성능 개선이나 디버깅하는 상황에서 용이하게 활용할 수 있습니다. Parts 1편: link, script t…

2020년 내가 생각한 좋은코드

작년 발표에서 ‘지식이 많다고 해서 반드시 좋은 코드를 쓸 수 있는 것은 아니다.‘라고 했다. 물론 아는 것이 많아지면 좋은 코드를 작성할 확률이 높아질 수는 있다. 하지만, ‘좋은 코드’라는 단어는 지식 말고도 고려해야 할 점이 많은 단어이다. 이 글은 내가 생각해본 좋은 코드에 대해 소개하는 글이다. ‘좋다’라는 문장에서 알 수 있듯, 주관적 생각일 …