본문 바로가기

전체 글

(4)
[Next.js 기반 블로그 개발] 프로젝트 기획 + 기술 스택 선정 이유 2025년 상반기에 취업을 준비하며 공채, 원티드, 사람인 등 다양한 방식으로 회사에 지원했습니다. 하지만 결과가 좋지 않았습니다. 면접까지 간 회사도 있었지만 최종합격까지는 가지 못했습니다. 이러한 상황에서 내가 조금 더 발전된 모습을 보여주기 위해 내가 주도적으로 진행하고 많은 기여를 한 프로젝트가 필요하다고 판단했고, 블로그 개발 프로젝트가 이러한 나의 부족한 부분을 채워줄 수 있다고 생각해서 개발을 시작하게 되었습니다. 기술 스택 선정 이유블로그 개발 프로젝트를 계획하며 기술 스택 선정 과정을 가졌습니다. 개인 프로젝트인 만큼 내가 부족한 부분을 채우는 것이 목적이었기 때문에, 그동안 사용해보지 않은 Next.js를 기반으로 개발하기로 마음 먹었습니다. 이후 Next.js와 궁합이 좋은 기술들을 ..
[리드미] 프로젝트 회고 리드미는 프로젝트 종류 후 동료 평가를 통해서 동료가 보는 나의 모습을 확인하여,자신의 장단점을 객관적으로 파악할 수 있는 기회를 제공하는 서비스이다. 프로젝트 종료 후 사용자가 질문지를 생성하고 그 질문지의 링크를 공유하면, 팀원들이 질문에 대한 답변을 작성할 수 있다. 그러면 질문지 생성자는 작성된 답변을 확인하며 자신에 대한 피드백을 확인할 수 있다. 리드미 사용해 보기 ☁️☁️https://mc-readme.vercel.app/ 리드미 | 나의 성장을 위한 객관적인 평가지금 바로 동료 평가에 참여하세요!mc-readme.vercel.app 0. 회고를 시작하며프로젝트 회고를 작성하는 것은 처음인데, 이번 기회를 통해서 프로젝트에서 얻은 것들을 정리해서 내 것으로 만들고 싶다. 전에는 프로젝트가 ..
[React 포트폴리오 페이지 제작기] 2. 풀페이지 스크롤링 기능 구현 (FEAT : useRef & useEffect & useState & useCallback) GitHub Pages 배포 이후 첫 작업은 페이지를 섹션으로 나눠서한 화면에서 스크롤링을 이용하여 섹션 별로 이동하게 하는 기능이다.이를 풀페이지 스크롤링이라고 한다.라이브러리를 사용하는 것과 직접 CSS와 JavaScript를 사용하여 구현하는 방법이 있는데,나의 성장을 위해 진행하는 프로젝트이기 때문에 후자를 선택하였다. ✨ Styled-componentsCSS는 styled-components를 사용하였다. import styled from "styled-components";const Container = styled.div` height: 100vh; //페이지 높이를 전체 화면으로 설정 overflow: hidden; //스크롤 숨김`;const Section = styled.sectio..
[React 포트폴리오 페이지 제작기] 1. github.io로 배포하기 😸 github.ioGitHub에서 제공하는 "GitHub Pages" 웹 호스팅 서비스로, 여기서 제공받는 도메인 주소 형식Public으로 설정된 Repository로 정적 페이지에 한해서 서비스 제공 😸 GitHub Pages 호스팅 및 배포1. github.io Repository 생성 Repository 이름은 사용자이름.github.io로 설정위에서 말했듯 Public으로 설정README 파일 생성 2. React App 생성 Repository clone을 위해 HTTPS 주소 복사 터미널에서 원하는 폴더 위치로 이동 후 git clone 복사한 HTTPS 명령어 입력 → 사용자이름.github.io 폴더 생성사용자이름.github.io 폴더 터미널에서 React 프로젝트 생성np..