본문 바로가기

Programing/TIL85

2024-07-08 Next.js 마이페이지 구현하기 (1) 프로젝트 구조 설정project-root/│├── lib/│ └── supabaseClient.ts│├── public/│ ├── favicon.ico│ └── ...│├── src/│ ├── app/│ │ ├── (provider)/│ │ │ ├── (root)/│ │ │ │ ├── layout.tsx│ │ │ │ ├── page.tsx│ │ │ │ └── ...│ │ │ ├── components/│ │ │ │ ├── PostList.tsx│ │ │ │ ├── PostGallery.tsx│ │ │ │ ├── ProfileModal.tsx│ │ │ │ └── ... Programing/TIL 2024. 7. 9.
2023-07-03 Next.js + TanStack Query 포켓몬 도감 만들기 시연프로젝트 셋업터미널 열기npx create-next-app@latestcd 프로젝트폴더명 으로 디렉토리 이동필요 패키지 설치yarn add axios @tanstack/react-query 의존성 설치yarn폴더 구조 만들기📦 pokenon_project ├─ .eslintrc.json├─ .gitignore├─ README.md├─ next.config.mjs├─ package-lock.json├─ package.json├─ pokemon_project ✅│  │  └─ types│  │     └─ package.json 🔹│  └─ src│     └─ app│        ├─ globals.css│        └─ page.tsx├─ postcss.config.mjs├─ public│ .. Programing/TIL 2024. 7. 4.
2024-06-26 TypeScript로 국가 선택 앱 만들기 (2) CountryList.tsx 컴포넌트 구현기본 레이아웃 구성// src/components/CountryList.tsximport styled from 'styled-components';import CountryCard from './CountryCard';const CardSection = styled.div` display: flex; flex-wrap: wrap; gap: 20px;`;const CountryList = () => { return ( 내가 고른 카드 국가 목록 .. Programing/TIL 2024. 6. 26.
2024-06-25 TypeScript로 국가 선택 앱 만들기 (1) 과제를 처음부터 끝까지 자세히 기록해보고자 한다. 따라서 글이 길어질 수 있고 여러 편으로 나눠서 작성할 수 있다. 과제 요구사항 확인하기사용 기술 스택패키지 매니저 : vite라이브러리 : react언어 : typescript필수 구현 사항제공된 API를 호출하여 응답값을 useState를 통한 상태 관리적절한 타입이 꼭 명시되어 있어야 함useState로 상태 관리 되고 있는 값들을 화면에 렌더링사용자와 인터렉션(선택/해제)가 가능하여야 함이 모든 과정에서 사용하는 함수에는 타입이 적절하게 명시되어 있어야 함.과제 구현 순서프로젝트 셋업 (vtie + react + typescript)API 호출 설정API URL : https://restcountries.com/v3.1/all요청 : GETAPI .. Programing/TIL 2024. 6. 26.
2024-06-24 마지막 스택을 남겨 둔 시점에서의 회고 어느덧 마지막 기술 스택 학습만을 남겨 두고 있다. 타입스크립트와 Next.js만 남겨 두고 있다.타입스크립트는 아직 대규모 프로젝트를 하지 않아서인지 필요성을 느낄 일이 없었지만,자바스크립트의 유연성 보다는 타입스크립트의 엄격함이 더 매력적으로 느껴지기도 한다. 작은 규모이지만 협업을 하면서 변수명이나 변수의 타입, 함수의 반환값 등에서 충분히 conflict가 날 수 있는 상황이 올 수 있음을 느꼈다. 그리고 next.js의 필요성은 이전부터 느끼고 있었다.회원 별 인가 조건에 따라 조건부 렌더링을 한다거나, 조건부 라우팅을 제공해야 할 때 CSR만으로는 한계가 느껴졌다.또한 민감한 API를 노출시키지 않는 방법 또한 CSR만으로는 부족하다는 것을 느끼게 되었다. 따라서 다음 과정은 매우 기대가 되고.. Programing/TIL 2024. 6. 24.

티스토리툴바