최근 프론트엔드 공부를 하면서 아키텍처와 디자인 패턴에 대해 더 자세하게 알아보고자 정리하게 되었습니다.잘못된 내용에 대한 지적과 더 많은 정보들은 언제든 감사하게 받고 있습니다 😊이 세 가지는 효율적이고 유지보수가 용이한 애플리케이션 개발을 위해, 개념과 특징을 알고 적절히 조합하여 적용해야 합니다.방법론은 아키텍처를 구현하는 방식을 제시하고 디자인 패턴은 방법론 내에서 특정 문제를 해결하는 데 사용됩니다. 프론트엔드 아키텍처- 애플리케이션의 전체적인 구조와 구성 요소 간의 관계를 정의하는 설계 방식입니다.- 애플리케이션의 유지보수성, 확장성을 높이는 데 중요한 역할을 합니다.  특징애플리케이션의 전반적인 구조 결정주요 구성 요소와 그들 간의 상호작용 방식을 정의확장성, 유지보수성, 성능 등 비기능적..

🌿 ThemeProvider란?styled-components에서 제공하는 기능으로, 전역적으로 테마를 관리하고 적용할 수 있게 해주는 컴포넌트React의 Context API를 기반으로 만들어져 있어, 하위 컴포넌트들에게 테마 정보를 props 형태로 전달테마 객체 정의src/types/themes.ts 파일 생성export const lightTheme: Theme = { colors: { background: "#ffffff", text: "#000000", primary: "#0070f3", }, fontSize: { small: "12px", medium: "16px", large: "20px", },};ThemeProvider로 래핑테마를 적용할 컴포넌..

지난주에 포트폴리오 작업하던 게 모두 끝났다. 그래서 기존에 하던 사이드프로젝트를 진행하려고 하니 tailwind css부터 적용해야 할 것이 너무 많아서 다시 할까 조금 고민 중인데..일단 할 수 있는 만큼 고쳐서 진행해 보는 것으로.. :)🌿 Eslint 설정설치하기npm i --save-dev eslint eslint-config-next @typescript-eslint/eslint-plugin @typescript-eslint/parser초기화 및 설정 파일 생성(.eslintrc.json)npx eslint --init패키지 설치하기npm i --save-dev eslint eslint-config-next @typescript-eslint/parser @typescript-eslint/e..

🌿 메인 화면특별한 기능은 없지만 생각보다 시간을 많이 소요했던 메인 화면입니다.우선 사이트의 테마 컬러를 확정하는데 많은 시행착오가 있었고 좋아하는 파란색을 포기할 수 없어 포인트 색상으로 결정했습니다. 메뉴는 이력서에 있는 항목을 참고하여 확정하게 되었습니다.첫 진입 시에 보이는 화면이라 효과를 주고 싶었는데 타이핑 효과와 스크롤 유도 정도가 적당해 보여서 적용했습니다. 🌿 It's ME아직 프로필 이미지는 추가하지 않았지만, 원형에 마우스 호버 시 저에 대한 간단한 정보를 보이게 했습니다.그리고 우측에는 GitHub, 블로그, 링크드인을 연결하여 클릭 시 이동되도록 처리했습니다.프로필 하단에는 이력서 PDF를 다운로드할 수 있는 버튼을 추가했습니다. 🌿 Skills다양한 프로젝트들을 진행하며 ..

언제나 시작은 갑작스럽게..문득, 당장 누군가에게 보여줄 만한 프로젝트가 없다는 생각이 들어 포트폴리오 사이트 개발을 시작하게 되었습니다. 어떤 내용을 담을까?우선 포트폴리오에 어떤 내용을 담아야 할지를 고민하며 구글링을 통해 몇 개의 포트폴리오 사이트와 작성해 둔 이력서, 자기소개서를 참고해 목록을 작성했습니다. 그리고 각 메뉴별로 상세 내용과 넣고자 하는 기능들을 간단히 정리했습니다. 디자인을 그려보자대략적인 메뉴 구성이 정해졌으니 틀을 잡고자 Figma를 열었지만, 익숙하지 않아 작은 것 하나를 그리는 데도 너무 많은 시간이 소요되어 아이패드로 대략적인 모양을 그리고 개발을 시작했습니다.(포트폴리오 개발을 어느 정도 끝낸 후에 Figma 유튜브 강의를 보며 공부를 해야겠다는 다짐을 다시 한번 하게 ..

🌿 Supabase 프로젝트 생성🌿 TableEditor에서 테이블 생성ColumnTypeDetault ValueNOT NULLDescriptioniduuid oPKcreated_attimestampnow()o emailvarchar o중복체크sns_typevarchar xNaver / Kakao / Google / Applenicknamevarchar o profile_imgvarchar x updated_attimestamp x sns_keyvarchar x  id와 created_at은 기본적으로 생성되는 컬럼입니다. 회원 가입 시 필요한 항목들을 추가했다. id의 경우 기존에 int8로 설정되어 있던 것을 uuid로 변경했다. 밑에서 다시 언급될 내용이지만, Supabase에서 제공하는 회원 ..

🌿 초기설정 - VSCode, Git, nvm, TypeScriptVSCode설치해야 할 플러그인Prettier 포맷터 플러그인TailwindCSS 플러그인Github Copilot (선택)TypeScript 설치npm i -g typescript🌿 Next.js 프로젝트 생성Create Next Appnpx create-next-app@latest inflearn-supabase-note 🌿 UI 구현(with Tailwind CSS)Tailwind CSS 써보니까 너무 편하다.. 다만 뭐가 있는지 알아야 유용하긴 한데, className 알고 잘 쓰면 너무 편할 것 같다.🌿 첫 Supabase 프로젝트 생성Supabase | The Open Source Firebase AlternativeC..

🌿 Supabase Database📎 Supabase Database DocsTable Editor데이터베이스에 있는 데이터를 살펴볼 수 있음insert, update, delete 기능 제공SQL Editor별도의 에디터 없이 브라우저 상에서 쿼리 실행 가능Assistant에게 질문할 수 있는 ai 기능 제공Database모든 DB 관련 설정Tables : 테이블 생성, 삭제, 컬럼 추가. Row Level Security(RLS) 기능 설정 가능Functions : DB 함수 정의Triggers, Enumerated, …Indexes : DB 인덱스 설정(최적화)Roles 관리Backups : 특정 시간마다 백업 / 정확한 어느 시점으로 돌릴 수 있는(비쌈)Migrations : 스키마가 어떤 상..

요즘 supabase가 자주 보여서 궁금증에 인프런 강의를 들어보았다.FirebaseBaaS: 서버 없이도 빠르게 앱을 출시할 수 있도록 나온 백엔드 플랫폼가입인증, 클라우드 호스팅, 실시간 데이터베이스, 파일 업로드 클라우드 저장소 등 제공앱기능 향상, 앱 성장을 위한 다양한 기능 제공장점다양한 서비스와 폭넓은 연동지원적용이 쉽고 문서화가 잘 되어있다.커뮤니티가 매우 성숙한 프로덕트앱, 웹에서 단순하게 사용할 수 있는 NoSQL 기반단점오픈소스가 아니다. (Vendor Lock-In)복잡한 쿼리 불가(NoSQL 기반)유저가 많아졌을 때 비용이 많이 든다.앱 개발에는 월등히 좋으나 웹 개발에 최적은 XSupabase오픈소스핵심 기능 4가지Database : PostgreSQL 기반 실시간 데이터베이스 제..

강의 들으면서 복습겸 적은거라 나중에 따로 정리를 다시 하던가 해야겠다.프로젝트 생성npx create-react-app [프로젝트명]프로젝트 실행npm start // http://localhost:3000HMR(Hot Module Replacement) : 코드 수정 시 화면에 바로 반영Component함수형 컴포넌트JSX(JavaScript XML) 스타일은 객체 형태로 전달해야 적용이 된다. 카멜케이스로 작성 중괄호({ }) 내부에서 변수 사용 가능재사용에 용이import Hello from "./component/Hello";function App() { const name = "Tom"; const naver = { name: "네이버", url: "https://naver..