본문 바로가기

분류 전체보기346

React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 요즘 모아놓은 스크롤 이벤트를 포스팅하다보니 개념정리도 함께 되고 있다. 예전에 급히 사용했던 퍼즐(코드) 조각들이 하나씩 모여 동작원리까지 공부하며 완성 되어 가는 것 같아 매우 뿌듯하다. 스크롤 이벤트는 워낙 다양한 사용법이 있지만 응용이 가능한 가장 기본적인 코드로 정리해보았다. React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 웹페이지에서 일어나는 모든 사건을 이벤트라고 한다. 이벤트는 특정 동작이 벌어지는 사건이 일어난 것이다. 스크롤 이벤트는 스크롤이 움직이는 순간!! 을 감지한다. 엘레멘트 사이즈 ( Element Size ) 스크롤 이벤트에서 많이 사용되는 수치들이다. 이 수치들을 기본적으로 알고 있어야 스크롤 맨아래까지 내리면 OO.. 2022. 7. 18.
React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 상단이 고정된 헤더가 있다. 스크롤 하다가 페이지 중간에서 하위메뉴를 만나면 헤더 바로 아래로 고정되는 기능을 구현하려고 한다. 구글링을 해보니 자바스크립트로 하위메뉴까지의 스크롤의 높이를 구한 뒤, 고정시키는 로직이 대다수였다. 고민고민하다가 CSS 만으로도 구현할 수 있다는 사실을 알아냈다. 많은 분들에게 도움이 될지는 모르겠지만 그래도 공유해보려고 한다. 결과화면 미리보기 페이지 중간에 하위 메뉴 탭이 있다. 스크롤을 내려보자 스크롤을 내리다가 헤더가 하위탭을 만나자 고정되고, 그 아래의 내용들만 스크롤되기 시작한다. React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 Product.tsx 첫번째 useEffect 를 통해, 첫 렌더시 스크롤을 0으로 잡아주고, 두번째 useEffect .. 2022. 7. 12.
CSS - 이미지 자르기(crop) Updated 09/21/22 crop 은 그림판에서 1초컷이지만, css 로는 로 영역을 한번더 감싸줘야 한다. 자, 여기 귀여운 고양이가 있다. CSS 로 고양이 얼굴만 잘라보도록 하자. 결과화면 미리보기 HTML CSS .bg-crop { position: relative; width: 100px; // 자를 사이즈를 명시해준다. height: 50px; overflow: hidden; .bg-cat { position: absolute; // 포지션을 주고, top: 0; // 보이기 원하는 위치를 지정 left: 0; width: 300px; // 오리지널 사이즈 height: 200px; } } **styled-component 기준입니다. 2022. 7. 7.
CSS - <li 태그> dot 스타일 변경하기 + 들여쓰기 기본적인 리스트를 정렬중인 새발자 기초를 탄탄히 다지기 위해 열심히 포스팅을 정리해보았다. 들을 사용해보았는데 오랜만에 사용해보니 부족한 것들이 눈에 들어왔다. 그럼 에 대해 좀 더 알아보러 가보자 CSS - dot 스타일 변경하기 + 들여쓰기 일단 타이틀과 정렬이 맞지 않고, 하위메뉴들도 정렬이 안되있다. 그리고 dot 크기도 마음에 안든다. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. 아래와 같이 수정을 해보자. 테스트 타이틀 1. 커피류 • 아메리카노 • 카페라떼 • 에스프레소 2. 테스트 입니다. 3. 테스트 입니다. HTML 커피류 아메리카노 카페라떼 에스프레소 테스트 입니다. 테스트 입니다. CSS .list { list-sty.. 2022. 7. 5.
CSS - 배경 이미지 animation 으로 이동시키기 updated 02/21/24 페이지를 만드는 도중 로딩이 뙇뜨면 배경이미지를 스르륵 올려주는 효과가 필요하다. 이럴 때 당황해하지 말고 css animation 속성을 사용해 구현해보자 결과화면 미리보기 CSS - 배경 이미지 animation 으로 이동시키기 일단 이미지태그에 클래스 이름을 활용해서 css 로 animation 을 사용해보자 // 이미지 태그가 있다. animation 속성은 따로 정리할 필요가 있을 것 같아 나중에 따로 포스팅을 정리해야겠다는 생각을 해보았다. ** 참고로 transfrom: translateY(의 값이) - 이면, 위로 + 이면 아래로 움직인다. 방법1 .building-img { position: absolute; // 일단 위치지정은 필수지! top: 500px.. 2022. 7. 3.
JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값) 스크롤 핸들링은 항상 숙제같은 녀석이었다. 몇번을 마주쳤지만 피하고 싶었던 녀석, 그래서 자세한 개념 아묻따하고 그때그때 해결하기 바빳는데, 결국 확실히 알고 넘어가야겠다는 생각이 들어 그동안 야금야금 쌓아왔던 포스팅을 방출하고자 한다. JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값) 긴 게시글이 하나있다고 치고 설명하겠다. scrollTop 아래 참고 이미지에 보이는 것처럼, 원글 맨 처음부터 ~ 현재 화면에 보이는 부분까지의 길이가 scrollTop 이다. 글의 맨 처음 부터 얼마나 내려왔는지 현재 스크롤 위치 를 알수있다. An element's scrollTop value is a measurement of the di.. 2022. 7. 2.
CSS - border 뾰족한 대각선 모서리 채워넣기 (feat.box-shadow) 탭 버튼을 클릭했을 때, 굵게 표시된 테두리 영역을 자세히 보면 edge가 대각선으로 뾰족하게 나와있다. 멀리서보면 잘 티가 안나지만, 확대해보면 여간 신경쓰이는 게 아니다. 이때 대각선으로 뾰족하게 보이는 edge 를 예쁘게 펴봤던 과정을 포스팅으로 정리해보았다. 결과화면 미리보기 CSS 테두리가 있는 박스 안에서 생긴 이슈이기 때문에 box-shadow 를 사용해보았다. box-shadow 는 요소의 테두리에 그림자 효과를 준다. 박스 요소 바깥은 물론 박스 안에도 그림자 효과를 줄 수 있다. box-shadow 의 inset 옵션을 사용을 사용하여 요소 안에 그림자 효과를 넣어 뾰족한 edge 를 채워넣었다. .tab-items .item { width: 100%; height: 77px; } .t.. 2022. 6. 30.
JavaScript 알고리즘(8) Multiple Pointers Pattern - isSubsequence 차근차근 시간날 때마다 알고리즘을 풀고 있다. 이번 하반기에는 좀더 집중해서 알고리즘을 공부할 생각이다.(선선포 후공부라 하자) Multiple Pointers 패턴에서 isSubsequence 문제이다. 먼저 풀면서 느낀점은 우선 멀티 포인터를 쓰는 부분이 익숙하지 않았고, 2중 루프를 쓰지 않는다는 것 그래서 O(N) 으로 성능을 좀 더 개선시키는 방향으로 풀어보았다는 부분이었다. 어려웠지만 풀고나면 항상 성장하는 기분이 들어 뿌듯하다 😁 JavaScript 알고리즘(8) Multiple Pointers Pattern - isSubsequence 쉽게 한방에 설명해보겠다. 함수의 첫번째 인자로 주어진 'sing' 문자열과 두번째 인자로 주어진 'sting' 문자열이 있다. 두번째 문자열 sting 안.. 2022. 6. 29.
React(76) TypeScript - 채팅목록에서 마지막 메시지 보여주기 요즘 새발자는 한창 채팅 기능을 유지보수 하는 중이다. (매우어렵 🤯) 채팅 기능에서 중요한 요소 중 하나는 마지막 메시지이다. 마지막 메시지를 채팅리스트에 출력하거나, 마지막 메시지를 통해 읽기 표시 등의 알림 설정 등을 할 수 있기 때문이다. 오늘은 채팅리스트에서 마지막 메시지를 함께 출력하는 기능을 공부한 내용을 토대로 포스팅해보려고 한다. 그럼 시작해보도록 하자 React(76) 채팅목록에서 마지막 메시지 보여주기 채팅리스트에 마지막 메시지를 가져와 채팅목록에서 같이 보여주자. MessageList.tsx 먼저, api 로 채팅리스트를 get 해서 채팅방 목록을 배열로 받아오고, 각각의 채팅방의 정보를 또 받아와서 마지막 메시지를 추가해줄 것이다. interface MessageProps { ms.. 2022. 6. 27.
반응형

티스토리툴바