전체 글221 아코디언, 탭박스 UI 구현 아코디언 UI 아코디언은 드랍다운 UI와 비슷한데 다른 박스를 열면 원래 열려있던 박스가 자동으로 닫히는 UI이다. 생긴게 악기 아코디언과 비슷해서 이러한 명칭을 붙였다고 한다. 구현은 하나의 상태로 만들어 관리를 하기위해 boolean 배열로 만들었다. 기존에는 false에서 해당 박스를 누르면 true로 바뀌도록 할 것이다. 위에서 dropDownContents는 아코디언에 넣을 contents 배열이다. ** 처음에 드롭다운 UI로 만들었다가 아코디언으로 바꾸었는데 이름은 그대로 dropDown이 붙어있다.. 이벤트 핸들러는 다음과 같다. index를 props로 받고, index와 같은 idx를 가진 상태는 true로 변경시키고(혹은 전부 false로), 나머지는 false로 변경시킨다. 해당 이.. 2023. 10. 2. 헤더 스크롤 이벤트 및 스로틀링 헤더 버튼 클릭시 해당 요소로 이동 포트폴리오에서 헤더를 만들었는데, 헤더의 특정 버튼을 누르면 해당 요소로 자연스럽게 스크롤을 이동하는 효과를 주고 싶었다. 처음 생각한 방법은 해당 컴포넌트에 ref를 지정해서 해당 컴포넌트의 y축을 계산하고, 계산된 y축 좌표로 스크롤을 이동시키는 것이었다. 여기서 문제가 된것이 컴포넌트에 ref를 지정하려고 했는데, 1. 컴포넌트 자체에 ref를 지정할수 없다. 2. props로 하위 컴포넌트로 ref를 넘길 수 없다. 라는 문제를 만나게 되었다... 두번째 문제를 구글링 해 보니 forwardRef를 사용하면 컴포넌트의 두번째 인자로 ref를 넘길 수 있다고 한다. 그래서 열심히 forwardRef를 사용하여 ref를 넘기고, 스크롤 이벤트를 구현하려고 구글링을 .. 2023. 9. 27. 포트폴리오 만들기 - 라이트/다크 모드 적용 다들 포트폴리오 웹사이트 하나정도는 가지고 있는거 같아서(?) 나도 만들어 보기로 했다. 사실 이 블로그를 쓰는 시점에서 대략 완료를 한 상태이다. 포트폴리오를 만들면서 새로 접한 개념이나 처음 구현해본 기능들의 기록을 남겨두려고 한다. 라이트모드/ 다크모드 찾아보니 다크모드 구현을 할 때 보통은 Context API의 ThemeProvider를 사용한다고 한다. 몇 가지 블로그를 둘러보다가 조금 더 간단하게 다크모드를 구현하는 블로그를 발견하여 이 방식대로 다크모드를 구현해보기로 했다. https://kyounghwan01.github.io/blog/etc/CSS/dark-mode/ react로 다크 모드(dark mode) 만드는 법, styled-components, css, scss, theme .. 2023. 9. 24. 프로젝트 - 무한 스크롤 구현 무한 스크롤 구현 모바일 버전을 베이스로 프로젝트를 만들고 있기 때문에 페이지네이션을 무한 스크롤로 구현하기로 했다. React Query의 useInfiniteQuery 함수를 사용하여 구현하기 위해 자료를 찾아보는데 아래 블로그에 잘 정리되어 있는 것 같아서 이걸 기반으로 구현해보기로 했다. https://s0ojin.tistory.com/58 [React] react-query useInfiniteQuery로 무한스크롤 구현하기 무한스크롤(Infinite Scroll)? 게시판 글 리스트처럼 많은 데이터를 배열로 받아오는 경우, 그 데이터가 너무 방대해지면 api 요청으로 데이터를 받아오는 시간이 오래걸릴 수 밖에 없게됩니다. 우리 s0ojin.tistory.com 기본적인 개념은 Intersect.. 2023. 8. 20. Next.js 프로젝트 - 프로젝트 세팅 Next.js 프로젝트 생성 일단 Next.js 프로젝트를 만들면서 시작한다. npx create-next-app@latest 아직 많은 회사들이 12버전을 사용하기도 하고, 13버전 Reference도 많이 없어서 12버전형태인 pages router로 프로젝트를 만들기로 했다. 설정은 따로 건들이지 않고, 필요없는 파일 삭제 후 프로젝트를 초기화했다. MUI 및 emotion사용 준비 CSS 라이브러리를 처음 써보는 것이어서 따로 세팅이 필요한지 찾아봤는데, 그냥 일반 모듈처럼 import 해와서 사용하면 돼서 편했다. 공식문서에 api 정리가 잘 되어 있어서 필요한 컴포넌트의 api문서를 확인하면서 사용하면 될 것 같다. 커스터마이징이 필요하면 sx 속성으로 style을 위와 같이 적용하면 된다. .. 2023. 7. 28. Next.js project - 서울시 문화행사 정보 이전에 React로 만들다가 말았던 프로젝트를 Next.js로 다시 만들어보기로 했다. https://riverpigeon.tistory.com/142 React로 웹페이지 만들기 - 서울시 문화행사(1) 지금 까지 배운 여러가지 내용을 바탕으로 웹페이지를 만들어 보기로 했다. React를 사용해서 다른 곳에서 정보를 받아서 웹페이지를 만들어 보려고 오픈 API를 뒤적이다가 적당한 소재를 찾았다. riverpigeon.tistory.com 만들던 과정에서 부트캠프 과제로 todolist를 만들다가 이것저것 기능을 추가하다보니 길어졌고, todolist 만들기를 끝내니 바로 그룹 프로젝트를 시작해버려서 중간에 그만둔채로 4달동안 방치되어있었다... 다시 처음부터 만들려는 이유 다시 프로젝트를 뜯어보니 약간.. 2023. 7. 22. 이전 1 2 3 4 5 ··· 37 다음
