clyde-yoon 님의 블로그

1. 관리자 권한으로 윈도우 PowerShell 실행 2. chocalatey 설치Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))(그대로 복붙)Chocalatey란? 더보기Chocolatey는 Windows용 패키지 관리자입니다. Ubuntu에서의 apt나 macOS에서의 Home..

서론최근 간단한 사이드 프로젝트를 하나를 일단락 하였다.현재 데스크톱, 태블릿, 모바일 모두 브라우저 사이즈마다 반응형을 고려해서 개발했다. 따라 기기마다의 편리성을 높였고, 범용성과 사용성을 더 고려하기위해 pwa를 도입했다.pwa를 사용시, 모든 플랫폼에서 일관된 경험을 제공할 수 있고 성능적인 향상도 고려할 수 있었기 때문이다. 전제React (ver-18.2)Next.js (ver-14.2) - approuternext-pwa (ver-5.6) Progressive Web App(PWA)란?Progressive Web App(PWA)은 웹 기술(HTML, CSS, JavaScript)로 구축되었지만 네이티브 앱과 같은 사용자 경험을 제공하는 웹 애플리케이션이다. 이름에서 알 수 있듯이 "progr..

서론왜 radix-ui인가? 백, 디자인, 프론트와 함께 진행하는 프로젝트의 시작과 동시에, 빠른 시일 내에 개발을 진행해야했다.현재 마우스로 그린 완전 초기의 와이어프레임만 존재하는 지금 프론트는 무엇을 해야하는가에 대한 고민의 시작이였다. 디자인도 없고, ERD를 짜고있는 시점임에도 불구하고 기간 내 완성을 위함에 따라,  사용이 예상되는 컴포넌트들의 작업이 빠르게 필요했다. 그렇지만, 상상력을 동원해서 '아 이 컴포넌트는 왠지 이런모양이겠지, 아마 이건 이렇게 동작될거야' 라는 협업에 위배되는 사항보다, 디자인을 염두하고 기능을 먼저 개발할 수 있는 방법이 필요했고 채택된것이 Radix-ui이다.  Radix-ui란? Radix UI는 대표적인 Headless UI 라이브러리로, 접근성과 키보드 네..

팀원 초대방식은 크게 2가지.  1️⃣ 팀을 먼저 만들고, 사람을 추가한 후 프로젝트에 초대✅ 추천 대상: 여러 프로젝트를 하나의 팀에서 관리하려는 경우📌 방법:팀 만들기사이드바에서 "팀" 클릭 → "팀 만들기"팀원 초대이메일을 입력해서 팀원을 추가프로젝트 생성 후 팀을 추가프로젝트 생성 시 해당 팀을 연결해서 자동으로 팀원이 추가됨2️⃣ 프로젝트를 먼저 만든 후, 사람을 초대✅ 추천 대상: 특정 프로젝트에만 초대하고 싶은 경우📌 방법:프로젝트 만들기"프로젝트 만들기" 클릭 후 회사 관리형 or 팀 관리형 선택프로젝트 설정에서 사람 초대프로젝트 설정 → "사용자 및 권한"에서 개별적으로 초대역할(관리자, 개발자 등) 설정 가능  필자는 팀을 만들고 진행한다.    팀원 초대하기. 팀원을 초대했으면 다..

서론이글은 리엑트, 넥스트, 타입스크립트, 테일윈드를 사용하는 프론트 협업 초기 기본셋팅에 대해 다룹니다. 조직생성 및 프로젝트 생성eslint 및  prettier 설정허스키 설정깃헙 pr템플릿 설정깃헙 default 브랜치 설정package.json더보기{  "private": true,  "scripts": {    "dev": "next dev",    "build": "next build",    "start": "next start",    "lint": "next lint",    "lint:fix": "eslint --fix \"**/*.{js,jsx,ts,tsx}\"",    "format": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",    "prep..

서론 이 기록은 소셜로그인을 구현하며 가진 고민들과 구현방식들에 대해 다룬다. 전제 - Next.js   1. 현재 진행하고있는 프로젝트는 소셜로그인만을 구현한다. 2. 인증플로우는 백엔드에서 프로세스 전체를 제어한다.3. 인증이 완료될 시, Home으로 리프레시토큰과 함께 리다이렉트 된다.4. 3번까지의 과정을 베이스로 코드를 구현한다. OptionsHttpOnly: ✓ (브라우저 JS에서 접근 불가)Secure: ✓ (HTTPS만 사용)SameSite: Lax (크로스사이트 요청 제한)Priority: Medium (브라우저의 쿠키 우선순위) Flowuser>FE :로그인 버튼 클릭   >BE : /auth/kakao   >Kakao로그인페이지   >사용자 인증>BE: 인증처리>자체 토큰 생성   >..

Link Issue: https://github.com/spring-bud/mate-fe/issues/12PullReq : https://github.com/spring-bud/mate-fe/pull/13 기술적 구현2025.01.18 - [React/React-query] - 서버컴포넌트에서 리엑트쿼리(prefetch)  1. 리엑트쿼리 prefetch로 서버컴포넌트에서 데이터 페칭 후 캐싱2. customImage로 user이미지 렌더링과정에서 오류생길시, 대안이미지 렌더링3. SEO를 고려한 시멘틱태그  고민&의사결정 과정프로젝트를 설계하면서 가장 중점을 둔 것은 컴포넌트의 관심사 분리와 폴더 구조의 체계화였다. 폴더구조를 서버컴포넌트와 클라이언트 컴포넌트로 나누고, 데이터 페칭 및 관련 API호출..

전제axios 사용react-query 사용서버컴포넌트 사용 "dependencies": { "@tanstack/react-query": "^5.64.1", "@tanstack/react-query-devtools": "^5.64.1", "next": "15.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", },app├── products │ └── [id] -- 아이템 상세보기 페이지│ ├── sections -- UI 하위 컴포넌트 │ │ ├── MainContent.tsx│ │ ├── Profile.tsx│ │ └── Reviews.tsx│ ├── ui│..