본문 바로가기
728x90
반응형

프로젝트/웹페이지

웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 12일차
프로젝트/웹페이지 2025. 2. 18. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 12일차 디테일 작업을 완료한 후 v0.1.0 테스트 배포까지 완료한 과정을 포스팅해보겠습니다. 🎏 멤버 소개 페이지를 모달로 멤버 소개 페이지를 만들었지만 막상 작성 할 내용이 많지 않아 비효율적이라고 느껴졌습니다.그래서 UX를 수정하기로 생각했고 페이지대신 간단하게 모달로 수정하기로 결심했습니다.혹시 모르니 기존 코드를 없애지는 않고 header에 모달을 추가하는 코드를 작성했습니다.'use client';import { useState } from "react";export default function Header({ memberData }) { const [selectedMember, setSelectedMember] = useState(null); const openModal = (memb..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 11일차
프로젝트/웹페이지 2025. 2. 1. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 11일차 이제는 배포 준비를 위해 디테일 작업에 들어갔습니다.그래서 하나의 큰 기능보다는 작은 기능과 디자인 수정 작업이 주입니다.수정된 부분을 하나씩 뜯어서 포스팅해보도록 하겠습니다! 🚀 헤더와 푸터 헤더는 로고를 변경하고 텍스트를 간결하게 수정했습니다.홈페이지에 들어오면 가장 먼저 헤더의 텍스트가 눈에 보일 수 있도록 크기도 키웠습니다.  로고 부분의 코드입니다.로고에 사용할 이미지는 public 폴더에 추가하여 정적으로 사용하였습니다. 짭알못 JAM 푸터는 배경색을 변경하고 이름의 유래 이스터에그와 인스타, 노션 링크를 연결해두었습니다.  모달 상태 관리 코드입니다.showModal : 모달 표시 여부 저장setShowModal : 상태를 업데이트하는 함수'use clie..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 10일차
프로젝트/웹페이지 2025. 1. 20. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 10일차 오늘은 깃허브 잔디처럼 월별 잔디를 만들어보겠습니다. 근데 알록달록한...  👩‍💻 코드 리팩토링 오늘 작업하기에 앞서 점점 거대해지는 page.js와 main-client.js 코드를 리팩토링했습니다.우선 page.js에서 데이터 요청을 분리하여 가독성과 재사용성을 높였습니다.// 노션 멤버 DB 가져오기const fetchMemberData = async () => { try { const response = await notion.databases.query({ database_id: memberDatabaseId }); return response.results.map((page) => ({ memberId: page.id, memberName:..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 9일차
프로젝트/웹페이지 2025. 1. 19. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 9일차 9일차에는 멤버 탭에 연결 할 멤버 소개 페이지를 만들어 보겠습니다.  ✍️ React Context 사용하기 새로운 멤버 페이지에서도 노션에 있는 데이터 베이스 데이터가 필요했습니다.기존의 노션 데이터 베이스 데이터의 양이 꽤 많아서 여러 번 호출하는건 비효율적이라고 생각했습니다.그래서 한 번의 호출로 받아온 데이터를 전역적으로 사용하는 방법에 대해 알아봤습니다.그게 바로 React Context 였습니다. React Context는 컴포넌트 트리 전체에 데이터를 전역적으로 공유할 수 있도록 도와주는 기능입니다. 이를 통해 부모-자식 관계에 의존하지 않고 데이터를 전달할 수 있어 props drilling(여러 컴포넌트를 통해 데이터를 계속 전달하는 과정)을 줄여줍니다. 작동 원리Context 생성 :..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 8일차
프로젝트/웹페이지 2025. 1. 18. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 8일차 8일차에는 우측 상단에 멤버 탭을 추가해보겠습니다. 👥 멤버 id로 그룹화하기 원래 코드는 활동 기록의 타이틀에서 멤버 이름을 잘라왔습니다. allPages = [ ...allPages, ...response.results.map((page) => { const iconUrl = page.icon?.external?.url || null; const title = page.properties["활동 회차"].title[0]?.text?.content || "Untitled"; const memberName = title.split(" ")[1] || "Unknown";하지만 노션에서 멤버 DB로 관리하고 있기 때문에 멤버 각자 고..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 7일차
프로젝트/웹페이지 2025. 1. 16. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 7일차 7일차에는 기록을 월별로 보는 드롭다운을 추가하겠습니다.  🗓️ 활동 기록을 월별로 나누기 (feat. 서버) 우선 활동 기록을 월별로 나누려면 날짜 정보가 필요합니다.현재 날짜 속성은 관계형으로 가져온 기록 DB의 날짜를 롤업한 속성이었습니다.그래서 기록 DB와 노션 API를 추가로 연결해야 했습니다. ⭐ 노션 API로 관계형과 롤업 데이터를 사용하려면 관계형된 DB도 노션 API와 추가로 연결해야한다.(저는 이걸 몰라서 관계형과 롤업 데이터는 API로 활용 못 하는 줄 알고 삽질 여러번 했음😂)  연결하고 난 후 postman으로 확인해보면 roollup 속성은 이런 형식으로 나타납니다.날짜-rollup-array-date-start를 활용하면 되겠네요.그러면 기존의 API로 데이터를 받아 오는 ..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 6일차
프로젝트/웹페이지 2025. 1. 15. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 6일차 6일차에는 차트를 추가해보도록 하겠습니다.  📊 차트 라이브러리 설치하기 차트를 추가하기 위한 라이브러리를 설치합니다.install chart.js react-chartjs-2 // 필수install chartjs-plugin-datalabels // 선택  https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2React components for Chart.jsreact-chartjs-2.js.org 라이브러리 공홈에 들어가면 다양한 차트 예제들을 확인할 수 있습니다.오늘의 아래 이미지와 나와있는 원형 차트를 사용하겠습니다.  🖼️ 원형 차트 구현하기 원형 차트를 구현하기 전에 필요한 작업이 생겼습니다!현재 page.js에는 노션 API..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 5일차
프로젝트/웹페이지 2025. 1. 13. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 5일차 5일차에는 라이트/다크 모드 설정을 진행해보겠습니다.오늘도 갓대리님 영상을 참고하여 개발했습니다.Next.js 나만의 포트폴리오 사이트 만들기 (개발하는 김에 배포까지) / LottieFiles, Notion Api, TailwindCSS  🔖 next-themes 라이브러리 설치하기 터미널에서 아래 명령어로 next-themes 라이브러리를 설치해줍니다! $ npm install next-themesor$ yarn add next-themes 설치가 잘 되었는지는 package.json에서 확인할 수 있습니다.  🛠️ 코드 수정하기 다크 모드를 지원하기 위해서는 layout.js에서 두 줄의 코드를 추가해야합니다.import { ThemeProvider } from 'next-themes' // 추..
웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 4일차
프로젝트/웹페이지 2025. 1. 8. 웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 4일차 4일차에는 웹페이지가 그럴싸해보이는 레이아웃 설정에 대하여 알아보겠습니다.2일차에도 적어둔 영상을 참고하여 개발하였습니다. Next.js 나만의 포트폴리오 사이트 만들기 (개발하는 김에 배포까지) / LottieFiles, Notion Api, TailwindCSS  💡 Root Layout? 참고한 영상의 푸터와 헤더 설정하는 부분을 보면 layout.js를 만들어 작성해야하는 부분이 있습니다.저는 기존의 폴더에 layout.js가 있어서 그 부분에 푸터와 헤더를 작성 후 페이지를 렌더링하니 에러가 났습니다.  Missing required html tags라는 에러였습니다.Root Layout에는 과 태그가 꼭 있어야 한다는 것이었습니다.영상에서는 두 개의 태그가 없이 렌더링이 가능했는데 왜그런지..
728x90
반응형

티스토리툴바