profile
휴식을 좋아하는 개발자
post-thumbnail

hover시 previous(이전) 요소에 스타일 부여하기

Element를 hover할 경우 다음(Next) Element도 hover한 효과를 구현하는 것은 css를 이용하여 쉽게 할 수 있다. 하지만 이전(previous) Element들에게도 hover 효과를 넣는 것은 다른 문제다...

2022년 8월 17일
·
0개의 댓글
·
post-thumbnail

Next.js(SSR)에서 nth-child 경고

nth-child 대신에 nth-of-type을 사용하기

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

스크롤 방향에 따라 헤더 ON/OFF

항상 기능을 구현하다 보면 React에서 동작하던 기능이, pre-rendering을 수행하는 Next.js에서는 에러를 발생시킬 수 있다.

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

크롬 익스텐션 너두 할 수 있어!

Chrome Extension을 바닐라JS로 설계해보자.

2022년 7월 27일
·
0개의 댓글
·
post-thumbnail

공통 컴포넌트에 상황에 맞는 스타일을 적용하는 방법 (feat. Emotion style)

자세가 동일한 마네킹이 다른 옷만 입고 있다. 이런 경우에는 마네킹을 찍어내는 공장을 만들고 옷만 다르게 입히자.

2022년 7월 14일
·
0개의 댓글
·
post-thumbnail

무한 스크롤 구현하는 방법과 고려할 사항

무한 스크롤 구현과 최적화를 위해 display none을 사용하면 브라우저의 렌더링 동작 방식에서 어떤 문제점이 있는지 알아보자.

2022년 6월 24일
·
2개의 댓글
·
post-thumbnail

React 에서 D3 사용하기 (막대 차트, 반응형)

React 환경에서 D3를 사용해보고, 반응형으로 차트의 크기를 설정해보자.

2022년 5월 5일
·
0개의 댓글
·
post-thumbnail

CRA 명령어 없이 프로젝트 셋팅(React18, TypeScript, Webpack, Babel)

CRA없이 React18환경으로 프로젝트를 셋팅해보자. tsconfig와 webpack을 활용하여 절대 경로도 설정해줄 것이다.

2022년 4월 29일
·
0개의 댓글
·
post-thumbnail

font-face 활용하기

font-face를 이용하면 하나의 font-fmaily 이름으로 한글과 영문에 다른 폰트를 적용할 수 있다..?! 심지어 폰트 굵기마다 다른 폰트도 가능하다.

2022년 3월 28일
·
0개의 댓글
·
post-thumbnail

react-responsive

조건부 렌더링으로 기기에 대한 처리를 해보자. 그리고 Next 환경에서 발생하는 문제점에 대해 알아보고 해결해보자.

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

Tailwind + Emotion = twin.macro?

Tailwind와 Emotion의 장점만 가져와보자.

2022년 3월 19일
·
2개의 댓글
·
post-thumbnail

Mandarin-market - 3

각종 버그 해결 및 채팅 목록 UI 구현

2022년 1월 19일
·
0개의 댓글
·
post-thumbnail

SPACE_DEV_CLUB - 8

다크모드에 대해..(ContextAPI)

2022년 1월 19일
·
0개의 댓글
·
post-thumbnail

Carousel 심화

무한 캐러샐과 다양한 기능

2022년 1월 18일
·
0개의 댓글
·
post-thumbnail

SPACE_DEV_CLUB - 5

이전 글에서 작성한것 처럼 상세 페이지의 윗 부분을 구현했다. 이제 이와 같이 프로필 부분과 이전 및 다음 페이지, 댓글 폼을 구현해야 한다.

2022년 1월 8일
·
2개의 댓글
·
post-thumbnail

Speed-Code-Fighter - 4

UI 완성 및 여러 문제 해결

2022년 1월 2일
·
0개의 댓글
·
post-thumbnail

Speed-Code-Fighter - 3

프로젝트 진행 사항 및 느낀 점

2021년 12월 29일
·
0개의 댓글
·
post-thumbnail

Speed-Code-Fighter - 2

Branch 문제 해결. 현재 기능과 구현할 기능.

2021년 12월 27일
·
0개의 댓글
·
post-thumbnail

Speed-Code-Fighter - 1

Speed-Code-Fighter : 타자연습하는 프로젝트를 설계하기로 했다.

2021년 12월 21일
·
0개의 댓글
·
post-thumbnail

jQuery

jQuery는 빠르고, 작고, feature-rich한 자바스크립트 라이브러리이다.

2021년 12월 9일
·
0개의 댓글
·