- 애플리케이션의 전체적인 구조와 구성 요소 간의 관계를 정의하는 설계 방식입니다.- 애플리케이션의 유지보수성, 확장성을 높이는 데 중요한 역할을 합니다.  아키텍처에서 초기 설계를 신경 쓰지 않으면, 시간이 지날수록 새로운 기능을 추가하기 어려워집니다. 핵심 원칙관심사의 분리 : UI, 비즈니스 로직, 상태 관리 등을 명확히 분리합니다.모듈성 : 애플리케이션을 독립적이고 재사용 가능한 모듈로 구성합니다.확장성 : 새로운 기능을 쉽게 추가할 수 있는 구조를 만듭니다.성능 최적화 : 초기 로딩 시간, 렌더링 성능 등을 고려한 설계를 합니다.테스트 용이성 : 단위 테스트, 통합 테스트 등을 쉽게 할 수 있는 구조를 만듭니다.상태 관리 : 애플리케이션의 상태를 효과적으로 관리할 수 있는 전략을 수립합니다.모놀..

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

Git 계정을 새로 옮겼더니.. 잔디밭도 반으로 갈라져 버렸다.다크 모드에서는 뭔가 칙칙해서 예뻐보이지 않았는데 다른 계정에 라이트 모드로 보니 알록달록 호박색이 잔뜩 화려해진 잔디밭이 신기해 오직 기록용으로 남겨보는 내 잔디밭

🌿 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다양한 프로젝트들을 진행하며 ..

예전에 사용하던 GitHub 계정에 있는 Repository를 현재 사용하는 계정으로 옮겨왔다. Organizations에 초대되어서 작업한 Repository들은 따로 가져오기가 안되는 것 같아서 내 계정에 생성된 것만 가져왔다.(혹시 가져올 방법이 있는지 이후에 찾아봐야지..)git remote set-url origin [변경할 git url]git filter-branch --commit-filter ' if [ "$GIT_AUTHOR_EMAIL" = "OLD 깃 계정" ]; then GIT_AUTHOR_EMAIL="현재 깃 계정"; git commit-tree "$@"; else git commit-tree "$@"; fi' HEAD 현재 계..

언제나 시작은 갑작스럽게..문득, 당장 누군가에게 보여줄 만한 프로젝트가 없다는 생각이 들어 포트폴리오 사이트 개발을 시작하게 되었습니다. 어떤 내용을 담을까?우선 포트폴리오에 어떤 내용을 담아야 할지를 고민하며 구글링을 통해 몇 개의 포트폴리오 사이트와 작성해 둔 이력서, 자기소개서를 참고해 목록을 작성했습니다. 그리고 각 메뉴별로 상세 내용과 넣고자 하는 기능들을 간단히 정리했습니다. 디자인을 그려보자대략적인 메뉴 구성이 정해졌으니 틀을 잡고자 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..