shiren.dev RSS Feed - mysetting

3:41 5/30

blog.shiren.dev

mobile screenshot relative

3:41

blog.shiren.dev

mobile screenshot

shiren.dev RSS Feed
https://blog.shiren.dev/

code for life, life for music

저작도구: GatsbyJS

최종 피드 수집: 2025-06-03 22:46

전체 (52)

2y

알쓸FE팁 "페이지 가시성 API"

페이지 가시성 API(Page Visibility API)는 이름에서 짐작할 수 있듯 페이지가 현재 유저에게 보이고 있는지 아닌지를 알 수 있게 해주는 API입니다. 정확히 말하면 모니터상에서 보여질 수 있는 상황인지 아닌지겠네요

000

2y

알쓸FE팁 "웹스토리지 이벤트"

세션스토리지(sessionStorage), 로컬스토리지(localStorage)로 구성된 웹 스토리지는 이제 너무 익숙합니다. 다루기 힘들었던 쿠키와는 다르게 클라이언트 저장소로 사용 용도를 명확히 하고 더 나은 사용성으로 이미

000

2y

프론트엔드 개발 환경 체크리스트(2023)

프론트엔드 프로젝트를 시작할 때마다 매번 정해야 하는 것들이 있습니다. 개발 환경과 개발 스택을 정하고 대부분 Git이겠지만 형상관리 도구도 정하고 브랜치를 어떻게 관리할지도 정해야 하고 버저닝은 어떻게 해야 할지 등등 프로젝트를

000

2y

허리 나간 개발자의 재활 노트

아직 젊고 건강하다고 생각했습니다. 결국 허리가 나갔습니다. 디스크라고 불리는 노화의 대표적인 질병 추간판 탈출증입니다. 허리가 종종 아팠습니다. 어렸을 때부터 엉망진창이었던 자세를 생각한다면 그래도 지금까지 잘 버텨준 것 같습니

000

2y

자바스크립트로 만든 유한 상태 기계 XState

FSM(Finite State Machine, 유한 상태 기계)은 UI를 구현할 때 가끔씩 사용했었습니다. 기본적인 개념만 응용해서 과 조건문을 이용해서 구현했었죠. 정해진 상태들이 많이 있고 상태에 따라 다른 동작들이 가능한 상

001

3y

개발자의 와인 추천

저는 와인을 좋아합니다. 정확한 기억은 아니지만 와인을 적극적으로 마시기 시작한 시기는 대략 2010년 정도 부터 였던 것 같습니다. 적어도 10년은 넘게 주기적으로 마셨죠. 한 달에 서너 병은 항상 마셨던 것 같습니다. 10년

001

3y

개발자의 와인 추천

저는 와인을 좋아합니다. 정확한 기억은 아니지만 와인을 적극적으로 마시기 시작한 시기는 대략 2010년 정도 부터 였던 것 같습니다. 적어도 10년은 넘게 주기적으로 마셨죠. 한 달에 서너 병은 항상 마셨던 것 같습니다. 10년

002

3y

리액트 18의 주요 타입 변경점

React(리액트) 18이 얼마 전에 출시했습니다. 개발하시는 프로젝트에 이미 업데이트 했거나 조만간 업데이트 하실 계획일텐데요. 리액트와 Typescript(타입스크립트)를 같이 사용했던 프로젝트라면 반드시 수정해야 할 타입 정

000

3y

페이스북 개발자의 성과 만들기

이제는 메타(Meta)라고 불러야 하는 페이스북에서 일하는 지인이 휴가차 한국에 입국했었어요. 오랜만에 얼굴도 보고 술 한잔했습니다. 오랜만에 만나는 자리다 보니 참 많은 이야기를 나눴었죠. 어느덧 자리가 무르익으니 늘 하던 대로

001

3y

리액트로 만든 게임에 사운드 추가하기

최근 주말마다 아이를 위해 리액트로 간단한 게임을 만들고 있습니다. 무한의 계단이란 게임을 너무 집중해서 하길래 게임에서 아이한테 위해가 될 수 있는 중독적인 요소는 빼고 핵심 재미(?)만 갖고 있는 게임을 만들어볼 심산이었죠.

000

3y

null 떠나고 만난 undefined

얼마 전 진행했던 코드리뷰에서 의 사용에 대한 문제로 이야기가 나왔어요. 개인적으로는 너무도 오랫동안 당연하게 과 를 나름 명확하게 구분했었고, 각 사용처에 맞게 사용하고 있었기에 사실 이 부분에 관해서는 더 알아볼 생각도 없었습

000

3y

WeakRefs와 Finalizers 위주로 정리해본 ES2021

몇 달 전에 ECMAScript 2021 최종 스펙이 공개되었어요. 바로 쓸만한 것도 있고 언어를 조금 더 깊게 활용할 수 있는 기능들도 생겼습니다. 매해 이렇게 달라지고 개선되는 것을 보면서 좋기도 하지만 점점 이것도 무뎌지는진

002

3y

자주 발생하는 자바스크립트 에러

자바스크립트를 이용해 개발하다 보면 개발자의 실수로 생긴 코드 상의 문제로 뻘건 에러 메시지를 자주 만나게 됩니다. 개발 중에 버그가 발견된다면 다행이지만 실 서비스에서 에러 메시지가 출력된다면 개발자로써 손발이 오그라들고 식은

002

4y

개발을 잘 하는 습관

저는 반복적으로 하는 작업이 있다면 가장 나에게 맞는 최적화된 루틴을 만들고 그 작업을 할 때마다 생각 없이 그대로 하는 편이에요. 정해진 루틴은 고집스럽게 유지하진 않고요. 경험에 따라 혹은 관련 지식이 늘어남에 따라 루틴을 조

204

4y

욕 안 먹는 개발자되기

직장인이라면 자연스럽게 업무를 대하는 태도가 캐릭터 처럼 만들어져요. 개발자도 마찬가지고요. 신입이라고 태도가 항상 나쁜 것도 아니고 경력이라고 항상 태도가 좋은 것도 아니에요. 코딩 스킬처럼 개선될 수도 있고요. 연차가 적을수록

2025

4y

코딩 플레이그라운드 만들며 맛보는 요즘 FE 개발 환경 Part 2

파트 1에서는 기본 자바스크립트 개발 환경을 러나와 함께 구축해봤어요. 기본 환경만으로 충분하신 분들도 계시겠지만 보통은 그렇지 않을 겁니다.
이제 두 가지 개발 환경을 추가할 건데요. 타입 스크립트와 리액트 개발 환경이에요. 우

000

4y

코딩 플레이그라운드 만들며 맛보는 요즘 FE 개발 환경 Part 1

개발을 하다 보면 특정 환경에서 빠르게 코드를 작성하고 그 결과를 확인해보고 싶을 때가 있어요. 라이브러리나 프레임웍 혹은 언어를 공부할 때나 아이디어를 빠르게 실험하거나 프로토타입 해보고 싶을 때 그렇지요. 바닐라 자바스크립트로

001

4y

browserslist 쾌속 가이드

언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각

001

4y

누구나 원하는 개발자되기

5~6년 차 즈음부터 개발자 채용에 조금씩 관여하기 시작했고 현 회사에서는 면접관으로 활동한지 5년이 넘은 것 같다. 면접은 1차 면접에 해당하는 기술 면접이었고 팀의 채용 프로세스를 개선하거나 사전과제, 라이브 코딩 문제 출제에

000

4y

독서 습관을 만드는 구체적인 방법

독서를 습관으로 만들기 위해 그간 많은 노력을 했었다. 습관적으로 SNS를 열면서 “이럴 시간에 책을 읽었으면…” 하고 자주 생각했지만 SNS 아이콘을 터치하는 유혹을 뿌리치기 힘들었다. 여러 가지 시도를 했고 “하루 25분 실

000