TwentyTwentyOne

🚀 Flutter Web + NestJS 풀스택 포트폴리오 프로젝트 개요 및 기술 스택 선택포트폴리오 사이트는 개발자의 경험과 기술력을 보여주는 중요한 도구입니다.이번 프로젝트에서는 Flutter Web을 활용해 부드럽고 인터랙티브한 프론트엔드를 구축하고,NestJS + PostgreSQL + Prisma 조합으로 확장성과 유지보수성이 뛰어난 백엔드를 설계합니다.이 글에서는 프로젝트의 개요와 전체적인 기술 스택을 선택한 이유를 정리합니다.✅ 1. 프로젝트 목표 및 컨셉🔹 프로젝트 목표Flutter Web의 UI/UX 장점을 살린 반응형 포트폴리오 사이트 제작NestJS 기반 API 서버를 구축하여 데이터 관리PostgreSQL + Prisma ORM을 사용한 데이터베이스 설계CI/CD 자동화 및 클라..

🚀 포트폴리오 프로젝트 시작하기: 환경 설정 및 초기 구성개발을 시작하기 전, 프로젝트의 환경을 설정하는 과정은 매우 중요합니다.포트폴리오 프로젝트를 Next.js(프론트엔드)와 NestJS(백엔드)로 구성하기 위해 초기 설정 및 기본 구조를 구축해 보겠습니다.✅ 1. 프로젝트 개요🔹 프로젝트 목표개인 포트폴리오 웹사이트를 제작하여 경험과 프로젝트를 효과적으로 소개Next.js와 NestJS를 활용하여 풀스택 환경 구성PostgreSQL과 Prisma ORM을 사용하여 데이터 관리CI/CD를 적용하여 배포 및 유지보수 효율성 극대화✅ 2. 개발 환경 구성🔹 프론트엔드 환경 설정 (Next.js)Next.js 프로젝트 생성npx create-next-app@latest portfolio cd port..

JAMstack 기반 포트폴리오 사이트 개발 컨셉1. 프로젝트 개요JAMstack 아키텍처를 활용하여 빠르고 보안성이 높은 개발자 포트폴리오 사이트를 구축한다.이 사이트는 개인 브랜드를 강화하고, 기술력을 효과적으로 전달하며, SEO 최적화와 유지보수의 용이성을 확보하는 것이 핵심 목표다.2. 컨셉① 퍼포먼스 최적화정적 사이트(SSG) 방식을 활용하여 페이지 로딩 속도를 극대화Next.js ISR(Incremental Static Regeneration) 또는 Gatsby 정적 생성으로 성능 향상서버리스 API(OpenFaaS, Fission, Knative)를 이용하여 동적인 데이터 처리② 보안성과 확장성정적 페이지 + API 분리로 보안 강화 (No 직접적인 DB 연결)CMS 연동(Contentful..

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 마지막 글로, 이번 시리즈를 마무리하는 글입니다.이번 시리즈를 통해 웹 개발의 기초부터 실무까지의 흐름을 정리하면서, 웹 개발자가 되기 위한 기본적인 로드맵을 구축해 보았습니다. 1. 우리가 다뤄온 내용 정리이 시리즈에서는 웹 개발 입문자가 실무까지 나아갈 수 있도록 다음과 같은 주요 내용을 다뤘습니다.주제 핵심 내용1. 웹 개발이란?웹 개발의 기본 개념, 프론트엔드 & 백엔드 소개2. HTML/CSS 기초웹사이트의 구조 및 스타일링, 반응형 웹 디자인3. 자바스크립트 기초기본 문법 및 DOM 조작, 이벤트 핸들링4. 자바스크립트 프레임워크React, Vue, Angular 비교 및 선택 가이드5. 백엔드 기초Node.js, Express, 데이터베이스 ..

Github page로 포트폴리오 웹페이지 만들기 Project들을 만들어 가면서 업데이트를 하겠지만, About페이지를 완성하면서 포트폴리오 웹페지 만들기의 기본적인 글은 마무리 되어가는 느낌입니다.About 페이지에서 남은 부분은 skill에 해당하는 그래프 부분입니다.총 6개의 스킬에 대한 숙력도를 나타내는 원그래프를 그려 나타내는 것입니다.이 부분을 구현하기 위해서 SVG를 통해 Arc와 Text Component를 사용합니다.이렇게 만들어진 Arc + Text component를 skillset이라는 Component로 만들고, meta.js에 정의한 skillset object를 map으로 돌려 완성합니다.추가적인 animation이나 스타일은 styled-component를 이용합니다.svg..

[Project][SVG] Arc 를 그려보자! SVG 로 Arc를 그리기 위해서는 path를 사용해야합니다. path의 d 속성에는 여러개의 명령어가 있는데, 그중 M 과 A 를 이용해 그려보는 react 용 Arc Component를 만들어 봅니다. https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths A 명령어 원호를 그릴수 있는 명령어인 A는 A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y 로 이루어져있습니다. rx 는 x축 반지름 ry 는 y축 반지름 입니다. 큰-호-플래그 는 180도를 기준으로 중심각을 결정합니다. M 명령어 M 명령어는 Move To 호를 그릴 시작 좌표를 지정해줍니다. Arc Components Ar..

Github page로 포트폴리오 웹페이지 만들기About 페이지 만들기를 잠시 보류하고, Work페이지를 만드는 것을 먼저 해보도록 하겠습니다.Work 페이지는 현재 만들어지고 있는 프로젝트 또는, 만들어 진 프로젝트들을 알파벳 순서로 보여 주고, 각각 링크를 달아 이동하겠끔 하는 것이 목표입니다.되도록이면 프로젝들을 데모 형식으로 테스트 해볼수있는 페이지를 만들어 두는 것을 목표로 합니다.이러한 목적을 가지고, 구현을 하기 위해 생각한 방법은 A to Z 알파벳 디렉토리를 만들고 그안에 프로젝트 디렉토리들을 넣어 index.js로 export 하는 방법을 생각했습니다.이렇게 export 된 컴포넌트들을 필요한 곳에서는 @project 만 import 시켜서 loop로 돌리는 방식을 사용해볼까 합니다...

Github page로 포트폴리오 웹페이지 만들기이제는 포트폴리오 사이트에 포함된 2개의 페이지중 About 페이지를 만들어 보겠습니다.만들기 전에 제가 구상한 Layout 과 화면은 아래와 같이 나타내려고 합니다.WebMobile 제 사진과 함께 +이름 +슬로건 +스킬풀 총 4부분으로 이루어져 있고, 모바일에서는 세로로 보이게끔 하는 아주 심플한 레이아웃을 생각해 보았습니다. 1. 배치 - 태그 삽입먼저 구상한 레이아웃에 맞게끔 각각의 아이템들을 배치 시켜 줍니다. src → pages → about → index.js 파일을 수정해 줍니다.// src/pages/about/index.js // modules import React from "react"; // components import Layo..