◆ 파일 기반 라우팅각 페이지는 `page.js`라는 파일에 정의되고, 이 파일은 NextJS에게 페이지를 렌더링해야 한다는 것을 알려줍니다.이것은 NextJS의 강력한 기능 중 하나이며, 파일 시스템을 사용하여 애플리케이션의 구조를 자연스럽게 관리할 수 있습니다. ◆ 파일 시스템을 통한 경로 추가새로운 경로를 추가하기 위해 `app` 폴더 내에 새 폴더를 만들고 하위에 `page.js` 파일을 생성하면 됩니다.예를 들어 `/app/about/page.js` 파일을 생성하면 `/about` 페이지가 추가됩니다. ◆ 페이지 간 이동Server-side(Backend) : 서버 컴포넌트 함수를 실행하는 과정에서 최종적으로 렌더링될 HTML 코드를 생성합니다.Client-side(Frontend) : 렌더링될..

◆ NextJS란?: React 프레임워크의 확장판이며, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등을 쉽게 구현할 수 있도록 도와주는 도구입니다. ◆ NextJS의 필요성: NextJS는풀스택 리액트 프레임워크이기 때문에 리액트로 풀스택 애플리케이션을 구축하는 과정을 단순화합니다.풀스택 애플리케이션을 구축하는데 필요한 라우팅, 폼 제출, 데이터 처리, 인증 등의 기능을 제공합니다. ◆ NextJS 주요기능 및 장점풀스택 애플리케이션 구축프론트엔드와 백엔드에서 실행되는 코드를 모두 작성할 수 있어 풀스택 애플리케이션을 쉽게 구축할 수 있습니다.파일 시스템 기반의 경로 설정 (File-based Routing)파일 시스템을 사용하여 페이지의 경로를 설정할 수 있어 코드 기반..

이번 주부터 유데미 'Typescript: 기초부터 실전형 프로젝트까지 with React + NodeJS' 강의 스터디를 진행하게 되었습니다. 스터디는 총 4주간 진행되며, 각 주차마다 강의 섹션별로 학습 내용을 나누어 계획을 세웠습니다. 매주 공부한 내용을 포스팅으로 정리하면서 복습할 예정입니다.◆ TypeScript란? TypeScript는 자바스크립트의 수퍼셋(Superset)으로, 자바스크립트의 모든 기능을 포함하면서, 타입 시스템과 클래스, 인터페이스 등 고급 기능이 추가된 프로그래밍 언어입니다. 하지만 타입스크립트 코드는 브라우저에서 바로 실행되지 않습니다. 브라우저가 타입스크립트를 이해할 수 없으므로, 먼저 자바스크립트 코드로 컴파일한 후에 실행해야 합니다. 타입스크립트는 컴파일러 역할을 ..

유데미 러닝크루 1기 및 스터디 리더를 맡아 진행하게 되었습니다. 이번 스터디에서 진행할 강의는 'Next.js 15 & React - 완벽 가이드' 입니다. 강의는 외국인 강사님이 진행하시지만, 한글 자막이 제공되기 때문에 수강하는데 어려움은 없을 것 같습니다. [한글자막] Next.js 15 & React - 완벽 가이드   이 스터디는 총 10주 동안 진행되며, 매주 계획된 Section을 학습한 후, 포스팅을 통해 공부한 내용을 정리하고,Q&A 시간을 가져 어려운 점이나 궁금한 점을 함께 공유할 예정입니다. 각 주차마다 Next.js 15 버전과 React를 활용해 애플리케이션을 구현하는 방법을 단계별로 배울 수 있습니다.단순히 이론만 배우는 것이 아니라 실제 프로젝트를 통해 배운 내용을 실습으로..

지난주에 포트폴리오 작업하던 게 모두 끝났다. 그래서 기존에 하던 사이드프로젝트를 진행하려고 하니 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 : 스키마가 어떤 상..