티스토리

오늘도 디벨롭✨

검색하기

블로그 홈

오늘도 디벨롭✨

dev-thinking.tistory.com/m

함께 성장하기

구독자: 1

방명록 방문하기

주요 글 목록

[Recharts] Nextjs에서 Recharts 맛보기 📊 이번에 새롭게 시작하는 프로젝트에 차트 라이브러리가 필요했다. 차트 라이브러리를 선택하기에 앞서 고려해야 했던 점은 디자인팀 시안을 최대한 반영할 수 있도록 어느 정도 커스텀이 가능해야 했고, nextjs를 고려하여 svg로 제공이 돼야 했다. 팀원들과 여러 차트 라이브러리를 찾아보고, 논의한 끝에 Recharts를 사용하기로 결정했다. 🤔 Recharts란?공식문서 https://recharts.org/en-US 리액트 컴포넌트를 기반으로 데이터를 차트로 시각화해 주는 라이브러리이다. ⚙️ 설치하기npm install recharts 📂 연습하기어떤 식으로 데이터를 전달해서 쓰는지 간단하게 확인하고 싶어서 유튜브 강의인 [ Build Charts in React With Recharts in.. 공감수 0 댓글수 0 2024. 5. 15.
[Storybook] Storybook 설치(React) 💬 팀 프로젝트 들어가기 전에 Storybook 찍먹 스터디를 진행해 보기로 했는데, 미리 예습을 해두고 가면 좋을 것 같아서 적어보는 기록 첫 번째 🙌 📑 Storybook이란?UI 컴포넌트와 페이지를 독립적으로 구축할 수 있도록 도와주는 개발 도구이다. Storybook을 활용하여 UI에 대한 문서화를 하거나 테스트 혹은 디자인 시스템으로 활용이 가능하다. ⚙️ Storybook 설치하기Storybook은 기존 프로젝트에 설치하거나 새로운 프로젝트를 생성할 때 추가할 수 있다. 1. 리액트 프로젝트를 생성한다.2. 가장 최신 버전의 storybook을 설치한다. npx storybook@latest init위 명령어는 필요한 의존성 패키지 설치 및 기본 스토리북 설정을 자동으로 추가해 준다.설치.. 공감수 0 댓글수 0 2024. 5. 8.
[월간회고/2024년 04월] 하루의 조각들이 쌓여서 언젠가는 빛을 보겠지 세상에 벌써 4월이 훌쩍 지나가버리다니.. 이제는 시간이 너무 빠르게 흘러가서 정신을 못 차리겠다.😵‍💫 👀 기업연계 프로젝트십에 참여하다. 백엔드 및 다른 직군과 협업하는 경험도 있으면 좋겠다 생각하던 차에 3월 말쯤 프로젝트십 모집 공고를 지인을 통해 알게 되었다. 지원을 하면서도 합격에 대한 기대를 전혀 안 하고 있던 터라 오후에 온 메일을 복잡 미묘한 마음으로 열어봤던 것 같다. 새로운 경험에 대한 설렘과 내가 잘할 수 있을까..라는 걱정이 한 번에 밀려왔기 때문. 결과적으로는 이 또한 좋은 기회라는 생각이 들었다. 하고싶은 프로젝트 지원은 1~3 지망을 적어내면 됐었는데, 출석과 학습 기록 등을 합산한 결과가 괜찮았는지 1지망 프로젝트가 선발되었다. 나 포함 12명이 근 두 달간 프로덕트.. 공감수 0 댓글수 0 2024. 5. 1.
[GitHub] github template 등록하기(Issue, PR) ✏️ 프로젝트 초기 설정 할 때마다 Issue랑 PR 템플릿 등록하는 것도 매번 찾아봐야 해서 이것도 포스팅을 해놔야겠다는 생각이 들었다. 등록 방법을 외우는 것이 가장 좋지만 오랜만에 사용하면 또 잊어버리기에.. 이것 또한 미래의 나를 위한 포스팅✨ Issue 템플릿과 PR 템플릿 모두 main 브랜치에 등록해주는 것이 중요! 1. 이슈(Issue) 템플릿1-1. Set up templates1) Issue 템플릿을 지정하고자 하는 레포지토리의 setting 탭으로 들어간다.2) 좌측 사이드바의 General 메뉴의 페이지에서 Features에 있는 Issues 옵션으로 이동 > Set up templates 버튼을 클릭한다.1-2. Custom templateIssue 템플릿 양식은 총 3개가 주어지.. 공감수 0 댓글수 0 2024. 4. 30.
[GitHub] GitHub Labels 커스텀 한 번에 등록하기(설정 환경 : mac) 🤔 프로젝트 진행 시 빠지지 않는 Issue/PR의 Labels..! 종류도 많아서 매번 하나씩 등록하는 건 너무 번거롭다는 생각이 들었다. 분명히 편하게 등록할 수 있는 방법이 있을 거라는 생각이 들어 찾아보니 역시나 존재하는구나~.~ 방법을 알아보자!✅ (24.04.30 추가) 윈도우 환경에서도 문제없이 동작하는 것을 확인하였습니다. 1. 결과물 미리보기아래 사진처럼 7개의 라벨을 등록해 보자. 2. Labels 작업하기label 데이터는 json 파일로 관리한다. label.json이라는 파일을 만들어줄 건데, 이때 파일의 위치는 중요하지 않지만 추후 업로드 편의를 위해 desktop 위치에 파일을 저장했다. label을 한 번에 저장하기 위해 작성해줘야 하는 양식은 아래와 같다.json 양식[.. 공감수 0 댓글수 0 2024. 4. 19.
[Next.js와 친해지기] 2. 서버 컴포넌트와 클라이언트 컴포넌트 💬 잊지 말자 서버 컴포넌트!!! 많은 경우의 수를 만나봐야 서버와 클라이언트의 구분이 명확해질 것 같다는 생각이 들었다. 📑 Next.js의 컴포넌트 API Next.js의 기본 컴포넌트는 서버 컴포넌트이다. 클라이언트 컴포넌트를 사용하려면 컴포넌트 최상단에 'use client' 선언이 필요하다. 단, 클라이언트 컴포넌트는 '서버 + 클라이언트'의 하이브리드 컴포넌트로 이해해야 한다. 클라이언트 컴포넌트를 사용해야 하는데 'use client' 선언이 없다면 에러가 표시된다. 📑 Next.js의 컴포넌트 구분 서버 컴포넌트 API 특징 : 보안, 캐싱, 성능 SEO 등의 이점 cookies / headers / redirect ... 클라이언트 컴포넌트 API 특징 : 유저와의 상호작용, 브라우저 A.. 공감수 0 댓글수 0 2024. 4. 18.
[Next.js와 친해지기] 1. 설치 및 초기 설정 👀 2주간 Next.js 강의가 진행된다. Next.js를 써본 적이 없어서 배운 부분까지는 어떻게든 프로젝트 때 원활하게 사용하자!(물론 Next를 안쓸 수도 있겠지만)라는 목표를 잡고 수업에 임했다. 오늘은 그 첫 번째로 설치 및 초기 설정에 대해 기록한다. 1. 설치 1-1) 설치 명령어 가장 기본적인 설치 명령어는 프로젝트 이름을 같이 입력해서 열어둔 폴더 안에 새로운 폴더를 생성하여 설치한다. npx create-next-app@latest [프로젝트명] 만약 열어둔 폴더 안에 바로 설치하고 싶다면 . 키워드를 사용하자. npx create-next-app@latest . 1-2) 프로젝트 설정 ✔ Would you like to use TypeScript? … Yes # 타입스크립트 사용 여부.. 공감수 0 댓글수 0 2024. 4. 17.
[스터디준비02/티코드(React)] Color Picker - EyeDropper API 💬 포토샵에서도 크롬에서도 유용하게 사용하는 Color Picker는 어떻게 구현할 수 있을지 급 궁금해져서 이번 스터디 주제로 결정! 라이브러리를 사용하지 않고 어떻게 하면 Color Picker 기능을 구현할 수 있는지 알아보자. 📑 Color Picker를 구현할 수 있는 방법1) color" /> 스포이드 모드와 직접 팔레트에서 컬러를 선택할 수 있는 기능을 제공한다.기본값은 #000000으로 RGB Hex값을 반환한다.event.target.value로 값을 받아올 수 있다.컬러 선택 후에 esc 혹은 color picker의 외부 영역을 클릭해야 color picker 팝업이 닫힌다.Opera Mini와 IE를 제외한 모든 브라우저에서 사용이 가능하다. 2) Ey.. 공감수 0 댓글수 0 2024. 4. 15.
[CSS] CSS 변수 규칙 💬 패캠 실시간 강의(실무 CSS 레이아웃)를 듣고 새롭게 알게 된 내용을 기록합니다.🙌 📑 CSS를 공부할 때는.. 속성들의 기본 값을 알아두는 것이 중요하다. 예로 flex에서 flex-shrink는 1이 기본값이다. 그래서 따로 기본 값을 정해주지 않으면 화면이 줄어들 때 요소도 같이 줄어든다. 이처럼 속성의 기본 값을 알아두면 내 의도와는 다르게 동작하는 CSS에 대해 좀 더 빠르게 파악할 수 있다. 📑 CSS 변수 JavaScript에서 데이터를 변수에 담아 재사용하는 것처럼 css도 속성 값들을 변수에 담아 전역적으로 사용할 수 있다. :root는 html을 의미하는데, 선택자 우선순위에 따라 적용되는 순서가 다르기 때문에 :root를 더 많이 사용하는 것 같다. (가상 클래스 우선순위가 태그.. 공감수 0 댓글수 0 2024. 4. 13.
240412: 뿌리를 바꾸어야 열매가 바뀌는 법이다. 뿌리를 바꾸어야 열매가 바뀌는 법이다. 근본을 변화시키지 않고서는 결과를 바꿀 수 없다. 우리가 태도나 행동만 바꾸려고 한다면 이는 마치 나뭇잎만 잘라내는 것과 같다. - 성공하는 사람들의 7가지 습관 : 습관4. 승-승을 생각하라 - 공감수 0 댓글수 0 2024. 4. 12.
[Git/GitHub] git stash 💬 git stash에 대해 알고는 있었는데, 작업하고 있던 브랜치 내의 모든 파일을 보관해야 한다는 사실은 처음 알게 되어 잊어버리기 전에 기록으로 남겨본다. 🤔 git stash는 언제 쓰는데요?열심히 test1 브랜치에서 작업을 하고 있었는데 급하게 test0 브랜치 작업 내역에 대한 수정 요청이 들어왔다. 브랜치를 이동하여 해당 요청을 처리하기 전에 작업하고 있던 내역을 올려야 하는데, 아직 커밋으로 만들기에는 애매한 상황이다. 이때 사용할 수 있는 방법이 stash이다. 📑 사용법⚠️ 주의할 점stash는 프로젝트 단위로 관리되기 때문에 모든 브랜치에서 통합적으로 사용이 가능하다. stash 내역이 많아지면 구분이 어렵기 때문에 파일 보관 시 메시지에 작업 내역을 자세히 적어주는 게 좋.. 공감수 0 댓글수 0 2024. 4. 11.
[스터디기록05/티코드(React)] Chart.js 라이브러리의 리액트 ver. - react-chartjs-2 라이브러리 💬 오늘은 언젠가 한 번쯤은 사용할 차트 라이브러리에 대해 실습했다. 사용법만 제대로 익혀두면 사용하기 좋은 라이브러리라는 생각이 들었다. 실습하면서 차트의 항목 이름을 보여주고 싶어 삽질을 좀 했는데, 이 과정에 대한 기록을 남겨본다. 📑 Chart.js 라이브러리란?데이터를 시각화할 때 차트를 사용할 일이 많은데, 차트 라이브러리를 사용하여 이를 쉽게 구현할 수 있다. 오늘 우리는 많은 차트 라이브러리 중에서도 유명한 Chart.js의 리액트 버전인 react-chartjs-2 라이브러리를 사용해보고자 하였다. https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2React components for Chart.j.. 공감수 0 댓글수 0 2024. 4. 10.
240409: 습관은 환경에서 자라난다. 습관은 환경에서 자라난다. 같은 것을 계속하거나 같은 생각을 하고, 같은 말을 반복하는 것으로부터 습관은 생겨난다. - 나폴레온 힐 성공의 법칙 : 자기암시의 강력한 원리, 습관 - 공감수 0 댓글수 0 2024. 4. 9.
240408 : 인생의 바퀴는 항상 돌고 돈다는 걸 기억하자. 인생의 바퀴는 항상 돌고 돈다는 걸 기억하자. 자신에 대한 믿음을 지키고 성실하고 정직하게 최선을 다한다면 밤이 지나면 낮이 오듯이 반드시 불행한 시절이 가면 행운이 따르리라는 것을 기억함으로써 불행을 극복할 수 있다. - 나폴레온 힐 성공의 법칙 : 실패에서 배우는 태도 - 공감수 0 댓글수 0 2024. 4. 8.
[JS] 페이징 - 더보기 버튼 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 더 보기 버튼은 기존 페이지에 새로운 페이지를 '추가'하는 방식이다. 실습을 위해 사용한 API는 데이터 요청 시 한 번에 10개씩 반환해 준다. 이때 API에서 page라는 key값을 제공해 주기 때문에 이를 활용하여 더 보기 버튼 기능 구현이 가능하다. 더 보기 버튼 클릭 시 서버에 키워드를 요청하는 통신 로직을 가지고 있는 searchMovies 함수에 동적으로 원하는 page의 value값을 전달해줘야 한다. this.el.addEventListener("click", async () => { // 버튼 클릭시 API 통신하는 store 함수 활용 await searchMovies(mov.. 공감수 0 댓글수 0 2024. 4. 8.
[JS/class] 클래스로 컴포넌트 구현하기 2 - 자식 컴포넌트에 데이터 전달하기 프런트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 ✍️ 이전 포스팅 https://dev-thinking.tistory.com/39 [JS/class] 클래스로 컴포넌트 구현하기 1 - 컴포넌트 생성 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, dev-thinking.tistory.com 1. 자식 컴포넌트 생성 현재 요소 태그로 렌더링 되고 있는 ${fruit.name} 부분을 컴포넌트화 시켜보자. 1-1. FruitItem 컴포넌트 추가 import { Component } from "../core.. 공감수 0 댓글수 0 2024. 4. 4.
[JS/class] 클래스로 컴포넌트 구현하기 1 - 컴포넌트 생성 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, 결국은.. SPA로 만드는 것이 답이었다는 것을..🥲 일단 강좌 보면서 어떤 식으로 구성이 되는지 파악하고, 다시 내 프로젝트에 적용시켜 보기로 하였다. 1. class 구조 class User { constructor(매개변수1, 매개변수2..) { // 함수 역할 // 로직 } 메서드명() { return 로직; } } 2. 컴포넌트 생성(SPA 방식) 1. index.html의 안에 모든 내용이 그려진다. 2. id가 root인 div 요소 안에 생성자 함수로 사용할 수 있는 클래스 개념 추가 3. 공통으로 사용.. 공감수 0 댓글수 0 2024. 4. 3.
[월간회고/2024년 03월] 생각 줄이기 매일 취업 공고를 보다. 신입을 뽑는 취업 공고가 많이 없지만 그래도 취업 공고를 통해 인사이트를 많이 얻을 수 있을거란 생각에 매일 취업 공고를 하나씩 수집했다. 모든 회사가 나에겐 레벨 5로 느껴질 만큼 준비할 게 여전히 산더미 같이 느껴졌지만, 정말 다양한 도메인이 있다는 것을 알게 되서 즐거웠다. 여러 공고를 취합해보면 분명히 내게 부족한게 무엇인지 내가 적용할 수 있는 건 무엇인지 점점 더 빠르게 캐치할 수 있게 될 터. 공고를 볼 때 이런 점들을 항상 생각하고 고민하면서 봐야겠다고 다짐한 한 달이었다. 또비인후과 실화냐 2월에 지속되던 어지럼증을 참지 못하고 다녀왔던 이비인후과를 3월 초에 또 가게 되었다. 이번에는 귀 뒤에 볼록하게 혹같은게 튀어나와서 였는데 심지어 아프기까지했다. 의사.. 공감수 0 댓글수 0 2024. 3. 31.
[스터디준비01/티코드(React)] Accordion(아코디언) UI - Single/Multiple configuration ✅ 오늘의 작업 내역 1. single, multiple 버전 예제 준비하기(100%) 2. README 작성하기(100%) 🔍 먼저 짚고 넘어가는 오늘의 깨달음 동일한 UI인데 실행되는 로직만 다른 경우, prop 조건에 따라 컴포넌트 하나로 해결이 가능하다는 사실을 잊지 말자. 폼도 그렇고, 오늘 준비한 아코디언도 그렇고.. 컴포넌트를 재사용할 수 있는지 항상 먼저 생각해 보기! (single 버전과 multiple 버전을 각각 만들었다가 이거 정말 비효율적이다! 를 느끼고 난 자의 회고록..) 0. 아코디언 UI를 준비한 이유 요새는 모바일로 웹이나 앱 사용을 많이 하는데, FAQ만 보더라도 아코디언 UI로 이루어져 있는 곳들이 많다. 작은 화면 속에서 빠르게 내용을 확인할 수 있는 게 편리해서 잘.. 공감수 0 댓글수 0 2024. 3. 30.
[개발일지03/🏔️오름마켓 React] 정렬 버튼 active 상태 유지하기 - useLocation, useSearchParams ✅ 오늘의 작업 내역 1. 정렬 메뉴 버튼 active 상태 변경(100%) 👾 (이슈 처리) 새로고침 후에 바로 로고를 클릭하여 "/" 경로로 이동하는 경우 변경된 active 상태가 반영되지 않는 이슈 👾 (이슈 처리) 모바일 뷰에서 sortPath가 없는 경우 셀렉트 박스 label값이 null이 되는 이슈 💡 구현 결과 1. 정렬 메뉴 버튼 active 상태 변경 기존 정렬 메뉴 버튼의 active 상태는 NavigationBar 컴포넌트 내의 상태값을 통해 관리되고 있었다. 이를 쿼리 스트링 값에 따라 actvie 값이 적용될 수 있도록 변경이 필요했다. 처음에는 active 상태를 관리할 상태값을 useSortFilter 커스텀 훅에 넣어야 하나 고민했다가 해당 커스텀 훅이 처리하는 기능의 경.. 공감수 0 댓글수 0 2024. 3. 29.
[개발일지06/🌉포폴사이트 JS] detail 페이지 스타일링 - 프로젝트 정보 섹션, 탭 메뉴 ✅ 오늘의 작업 내역 1. detail css 작업(70%) 1-1. 프로젝트 정보 섹션 1-2. 탭 메뉴 스타일 작업은 tailwind를 사용합니다.🎨 오늘 작업할 시안💡 구현 결과 1. 프로젝트 정보 섹션1-1. 프로젝트 정보 섹션 구조 portfolio detail 개인 포트폴리오 사이트 포트폴리오 설명 배포 사이트 깃허브 스택 스택 👀 스타일을 작업하며 고려한 점데스크탑 폰트 사이즈반응형 작업 시 프로젝트 제목/내용과 버튼의 배치모바일뷰 이하로 화면이 작아졌을 .. 공감수 0 댓글수 0 2024. 3. 28.
[개발일지05/🌉포폴사이트 JS] 프로젝트 상세보기 버튼에 detail.html 페이지 연결 ✅ 오늘의 작업 내역 1. 상세 보기 버튼에 detail.html 연결 2. detail.html 마크업 진행(10%) 1. 상세보기 버튼에 detail.html 연결 태그에 직접적으로 url을 연결해 줬다가 동적으로 portfolio 요소를 생성하고 있으니 페이지 이동도 자바스크립트로 처리해 주는 게 맞다는 생각이 들었다. 문제는 동적으로 요소가 추가되는 경우 추가되지 않은 요소는 DOM에 존재하지 않아 이벤트 핸들러를 바인딩할 수 없는 이슈 1)를 마주하게 되었다. 👾 이슈 1) Uncaught (in promise) project.is:170 TypeError: Cannot read properties of null (reading 'addEventListener') button에 id를 주고, .. 공감수 0 댓글수 0 2024. 3. 27.
[티스토리/TIP] 포스팅 서식 설정하여 사용하기 포스팅을 작성할 때 통일감을 주고 싶어서 템플릿처럼 구성을 동일하게 만들어 작성하고 있었는데, 매번 작성할 때마다 일일이 지정해 주는 게 부담되던 찰나 티스토리 서식 버튼을 발견하게 되었다. 세상에나. 당장 만들어보자. 🧐 서식 설정 하기 1) 블로그 관리 - 콘텐츠 - 서식 관리 탭에 접속합니다. 2) 서식 관리 페이지의 서식 쓰기 버튼을 클릭해 주세요! 3) 원하는 템플릿 형식으로 서식을 구성하고, 우측 하단의 완료 버튼을 눌러 서식을 저장합니다. ✅ 사용 방법 글쓰기 버튼을 누르고 에디터 상단에 미트볼 메뉴를 클릭하면 서식 버튼을 확인할 수 있습니다. 서식 버튼을 클릭하면, 방금 저장한 서식 리스트를 확인할 수 있고, 원하는 서식을 클릭하면 적용 완료~! ⚠️ 참고로 제목까지 템플릿처럼 적용이 되지.. 공감수 2 댓글수 0 2024. 3. 27.
[스터디기록04/티코드(React)] 사용자를 위한 사이트 가이드 투어/온보딩 투어 - intro.js-react 라이브러리 🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👀 오늘은 스터디 진행 이래 처음으로 라이브러리를 사용하여 구현 연습을 진행했다. 공식 문서를 통해 처음 접하는 라이브러리의 사용법을 파악하고 적용하는 연습도 필요하다는 생각에 적절한 라이브러리가 있는 경우 이를 체험해보고자 하였다. 📚 (사이트) 가이드 투어/온보딩 투어란? 가이드 투어/온보딩 투어는 웹 사이트, 웹 애플리케이션 또는 소프트웨어 플랫폼의 신규 사용자에게 제공되는 체계적인 소개/안내를 뜻한다. 이를 통해 신규 사용자가 플랫폼의 기능 및 UI/UX에 익숙해지도록 도와준다. 오늘 알아볼 기.. 공감수 0 댓글수 0 2024. 3. 26.
[개발일지04/🌉포폴사이트 JS] JSON 데이터 생성하기(objGen) ✍️ 동적으로 페이지를 처리해야 하는 상황이 생기면서 효율적인 방법을 찾아보다가 데이터를 JSON으로 만들어 fetch 해야겠다는 결정을 내렸다. 일일이 작성하기엔 데이터 형식이 손에 익지도 않고 어려웠는데 objGen 사이트에서 원하는 데이터 형식에 맞춰 쉽게 JSON 데이터를 생성할 수 있다는 것을 알게 되었다. 🧐 JSON(JavaScript Object Notation)이란? Javascript 객체 문법으로 key:value로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷. 웹 어플리케이션에서는 일반적으로 데이터를 전송할 때 사용한다. - MDN 🔗 사이트 주소 https://www.objgen.com/json/local/design ObjGen - Live Code Generation.. 공감수 0 댓글수 0 2024. 3. 24.
[개발일지02/🏔️오름마켓 React] useSearchParams로 필터 Query String 구현하기 🙌 리팩토링을 통해 프론트엔드에서 처리되던 정렬 및 필터 기능을 API와 연결하는 작업을 진행했다. 렌더링 된 버튼의 값과 실제 API 요청을 위해 전달해 줘야 했던 Query String의 값이 달라 두 값을 처리해 줘야 했는데, 이 과정에서 많이 헤맸던 기억을 잊지 않고자 블로그에도 짧게 기록을 남겨본다. 📑 요구 사항 간단하게 어떤 기능을 구현해야 했는지 정리해 보자. 1) UI/UX 2) 기능 초기 렌더링시 정렬 '최신순' 버튼만 기본값으로 선택되어 있으며, 정렬 버튼은 단일 선택만 가능하다. 필터 버튼은 각 조건별로 단일 선택만 가능하지만, 세 옵션은 중복 조합이 가능하다. 정렬과 필터 버튼이 눌리면 API GET 요청을 통해 데이터를 받아온다. 3) API 정렬과 필터의 카테고리는 DB코드로 .. 공감수 0 댓글수 0 2024. 3. 22.
[개발일지03/🌉포폴사이트 JS] 이벤트 위임으로 addEventListener 사용 빈도 줄이기 햄버거 메뉴 토글 버튼 구현 기초 👉 https://dev-thinking.tistory.com/21 🙌 햄버거 메뉴 버튼 구현 시 메뉴 팝업이 열리면 햄버거 메뉴 아이콘이 X로 변경되어야 했다. 이때 svg 이미지를 사용했기에 우선은 각각의 버튼에 addEventListener를 달아줬는데, 중복 코드가 많아져서 좀 더 개선할 방법이 없나 고민하다가 이벤트 위임으로 해결할 수 있다는 것을 알게 되었다. 🧐 기존 코드 살펴보기 * 지금부터는 설명의 편의를 위해 addEventListener를 이벤트 리스너로 명명한다. 기존 코드는 아래와 같이 햄버거 메뉴 버튼을 클릭했을 때와 닫기(X) 버튼을 클릭했을 때 각각 이벤트 리스너를 실행하고 있었다. 하지만 로직이 다른 것도 아니고 이미지만 변경되는 상황에서 .. 공감수 0 댓글수 0 2024. 3. 20.
[개발일지02/🌉포폴사이트 JS] 햄버거 버튼을 사용하여 요소를 토글할 때 Tailwind에서는 어떤 클래스를 사용하면 좋을까? 👀 모바일 해상도가 되면 햄버거 버튼에 nav가 숨겨지게 된다. 이때 자바스크립트를 활용하여 버튼 클릭 시 요소를 보여주거나 숨겨줘야 하는데, CSS라면 active 클래스를 활용할 수 있지만 tailwind로는 어떻게 처리해야하는지 궁금해졌다. 햄버거 버튼을 자바스크립트 이벤트로 처리해주는 것은 일반 CSS와 동일하다. 먼저, 햄버거 버튼에 ID를 할당해주고, 해당 요소를 가져와 클릭 이벤트를 통해 토글 기능을 추가해준다. 🤔 어떤 요소를 조작하고 싶은가? 현재 모바일 해상도가 되면 햄버거 버튼으로 헤더의 아이콘이 변경되게 만들어져있는데, 우리가 조작해야하는 요소는 햄버거 버튼과 버튼을 눌렀을 때 보여질 nav 요소이다. About 📑 Tailwind에서 사용할 수 있는 클래스 Tailwind에서는.. 공감수 0 댓글수 0 2024. 3. 18.
[스터디기록03/티코드(React)] wheel event 알아보기 🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 이번 포스팅은 구현 과정보다 준비하면서 알게 된 wheel event에 대해 기록하고자 한다. 리액트에서 FullPage Scroll를 구현하기 위해서는 마우스 휠의 방향을 통해 페이지의 이동 방향을 알아낼 수 있는 wheel event값, 스크롤이 발생하는 DOM 요소의 스크롤 위치를 알아내는 useRef.current값, 뷰포트의 세로길이가 필요하다. 이 값들을 사용하여 위치를 계산한 후 scrollTo API를 활용하여 이동할 위치를 지정해준다. 📑 wheel event란? 사용자가 휠 버튼(일반적.. 공감수 0 댓글수 1 2024. 3. 16.
[개발일지01/🌉포폴사이트 JS] 메뉴 리스트 <li> 태그 전체에 링크 걸기 🌱 구현 연습도 하고싶고, 내 포트폴리오 사이트도 만들어보고 싶은 마음에 시작한 프로젝트! 웹 버전과는 달리 모바일 버전에서는 네비게이션 메뉴가 세로로 정렬되어야 했기에 헤더를 웹 버전에서 모바일 버전으로 변경하는 CSS 작업 중에 있었다. 내 예상대로라면 각 메뉴 항목의 전체 영역 클릭이 가능해야 했다. 그러나 예상과는 달리 메뉴 텍스트를 벗어난 영역은 클릭 영역에 포함되지 않았다. (이미 알고있던 내용이지만 고새 잊어버렸던..) 이는 UX 관점에서 좋지 못한 경험을 제공한다는 생각이 들었다. 그렇기에 li 태그 전체가 클릭 되도록 개선할 필요가 있었다. 📑 태그는 block 요소, 태그는 inline 요소 먼저 알고가야 하는 것은 li 태그와 a 태그의 속성이 다르다는 것이다. li 태그는 block.. 공감수 0 댓글수 0 2024. 3. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.