hound

개발관련 문제들을 집요하게 추적하고 해결하는 중입니다.

FrontEnd

SWR, intersectionObserver로 무한스크롤 구현

기존엔 해당 페이지의 목록값만 보여주면 되는 형태였기 때문에, params.page의 값에 따라 변경된 데이터를 보여주도록했습니다. 그러다가 더보기와 무한스크롤 UI로 개선이 필요했는데 Redux로 전체값을 관리하고 다음 페이지를 로딩할 때마다 배열에 값을 추가하는 방식은 비효율적...

[Profile] team convention

원활한 협업, 소통 그리고 유지보수를 위해 team convention 중요시 생각합니다. 따라서 회의를 통해 convention을 만들고 문서화합니다. code convention의 경우 Linter, Formatter, Husky를 통해 걸러냅니다.

[Profile] 업무 공유, 소통

스크럼, 코드리뷰를 통해 팀원간 업무 공유를 중요시 생각합니다. 전반적인 작업 상황과 코드의 흐름을 파악할 수 있어 개발 및 유지 보수에 좋고 업무 지연을 방지, 팀원과 일을 나눠 일정에 맞게 개발할 수 있기 때문입니다. 따라서 다음과 같은 방식으로 스크럼과 코드리...

[Profile] 집요한 문제 추적

작성하는 순간 레거시 코드가 된다고 생각하기에 문제를 찾고 해결합니다. 더 나은 코드를 짜기 위해서, 그리고 같은 실수를 반복하지 않기 위해서 기록하고 복기합니다.

[css] box Shadow

box-shadow는 선택한 요소에 그림자 효과를 만들어 주는 css 속성입니다. 기본값은 none으로 그림자 효과가 없는 상태입니다.

[css] selector

css에서 특정 요소의 디자인과 레이아웃을 바꾸고 싶을 때 해당요소를 선택하기 위해 selector를 사용합니다.

[java]@media

반응형 웹사이트 만들기위해 화면 크기마다 css달리 적용해줍니다.

Transform과 translate()

특정 요소를 다양한 방식으로 변형할 때 사용합니다. 특히 transition함수 3d 기능과 함께 사용할 시 효과가 배가 되는데 이를 @keyframes을 통해 섞어 사용하면 애니메이션효과를 줄 수 있습니다.

웹페이지 구성

웹페이지 구조는 보통 다음과 같이 나눌 수 있는데요. 이를 시멘틱(의미적) 구조라고 합니다.

Awesome font 무료 아이콘

아이콘을 직접 만들기 힘들 때 무료로 제공된 디자인을 사용하면 편리하죠. 😎