PLAY WORLD

웹서버 vs 웹 어플리케이션 서버- 웹서버 : 요청마다 항상 똑같은 파일 전달- 웹 어플리케이션 서버 : 요청에 대해 동적으로 변하는 파일 전달 (DB 값에 따른 렌더링) CSR vs SSR- CSR : WebServer를 통해 정적인 파일을 가저오고, 클라이언트(브라우저)에서 백엔드와 직접 통신하여 데이터를 받아옴- SSR : Web Application Server에서 백엔드와 통신 후, 클라이언트에 완성된 파일을 Next.js Pre-rendering?Next.js는 모든 페이지를 프리 렌더링한다.즉, CSR의 자바스크립트가 모든 작업 수행대신 Next.js가 각 페이지에 대한 html 생성성능, SEO 개선 가능

📌 navigate를 써야 할 때조건부 이동이 필요할 때 → 이미 같은 화면이면 새로 추가하지 않고 params만 업데이트.중복 화면을 피하고 싶을 때 → 예: Profile 화면은 하나만 유지하고 싶을 때.탭/드로어 네비게이터에서 화면 전환할 때 → push는 stack 전용이라 탭/드로어에서는 navigate가 기본.📌 push를 써야 할 때무조건 새로운 화면 인스턴스를 추가하고 싶을 때 → 같은 화면이라도 새로 쌓아서 독립적인 상태를 유지.같은 화면을 여러 번 열어야 할 때 → 예: Article 화면을 여러 개 열어서 각각 다른 글을 보여주고 싶을 때.stack navigator에서만 사용 가능 → 탭/드로어에서는 동작하지 않음.✨ 간단 비교상황navigatepush같은 화면 중복 방지✅❌무조..

Static API 도입 배경기존 Dynamic API는 TypeScript와 딥링킹 설정을 수동으로 관리해야 해서 번거롭고 오류가 발생하기 쉬움.Static API는 더 단순한 방식으로 네비게이션 구조를 정의할 수 있어 코드베이스를 간결하게 유지 가능.Static API 기본 구조createStackNavigator에서 screens 속성으로 화면을 정의.createStaticNavigation을 호출해 네비게이션 컴포넌트를 생성.NavigationContainer와 유사하게 동작하며 대부분의 props를 지원.Dynamic API (기존 방식)import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackN..

1. Static API새로운 Static API는 네비게이터 설정을 단순화하고, TypeScript 및 딥링킹을 더 쉽게 지원합니다. 기존 Dynamic API와 원칙은 같지만, 화면을 함수로 정의하는 대신 객체 기반 설정을 사용합니다.tsx// React Navigation 7 Static API 예시import { NativeStack } from '@react-navigation/native-stack';const RootStack = NativeStack({ screens: { Home: { screen: HomeScreen, path: 'home' }, Profile: { screen: ProfileScreen, path: 'profile/:id' }, }, initialRou..

📌 1. 코드 예시React Navigation 6tsx// React Navigation 6 딥링킹 예시import { NavigationContainer } from '@react-navigation/native';const linking = { prefixes: ['myapp://'], config: { screens: { Home: 'home', Profile: 'profile/:id', }, },};export default function App() { return ( {/* 네비게이터 정의 */} );}React Navigation 7tsx// React Navigation 7 딥링킹 예시 (Static API)import { N..

React 개발에서 ref와 useEffect는 가장 빈번하게 사용되는 핵심 도구입니다. 하지만 이 두 훅은 자주 사용되는 만큼, 그 내부 동작 원리나 적절한 사용 시점에 대한 오해도 많습니다. 단순히 "DOM에 접근할 땐 ref, API 호출할 땐 useEffect"라는 표면적인 이해를 넘어, 언제, 왜, 그리고 어떻게 사용해야 하는지를 깊이 있게 아는 것이 견고한 애플리케이션을 만드는 전문가의 역량입니다.이 블로그 게시물은 전문 개발자를 위해 두 훅의 근본적인 차이점부터 시작하여, 시너지를 활용한 고급 패턴과 현장에서 흔히 저지르는 실수까지 체계적으로 분석합니다. 이 글을 통해 ref와 useEffect에 대한 명확한 멘탈 모델을 정립하고, 실무에 즉시 적용 가능한 깊이 있는 인사이트를 얻는 것을 목..

웹의 탄생과 발전1. 웹의 시작팀 버너스리가 정보를 효율적으로 공유하기 위해 웹을 만들었습니다.최초의 웹브라우저는 월드와이드웹(이후 넥서스로 변경)이었습니다.2. 웹의 진화웹은 1.0 → 2.0 → 3.0/4.0 형태로 발전해왔습니다. 버전 설명 웹 1.0정보를 제공받기만 하는 단방향 웹웹 2.0사용자의 참여와 공유가 가능한 쌍방향 웹웹 3.0시맨틱 웹과 인공지능을 활용한 지능형 웹웹 4.0고도화된 인공지능과 VR/AR 기술이 통합된 몰입형 웹* 시맨틱 웹: 컴퓨터가 웹의 데이터를 이해하고 처리할 수 있도록 의미를 부여하는 기술3. 웹의 기본 구조웹브라우저는 웹서버와 통신하며 요청/응답을 주고받고, 파일을 해석하여 사용자에게 GUI를 제공합니다.3.1 기본 구조웹의 기본구조Client/Server 구조..

참고 : https://tailwindcss.com/docs/installation/using-viteTailwind CSS 설치Tailwind CSS 설치 npm install tailwindcss @tailwindcss/vite 공식 문서에서는 postcss/autoprefixer 없이도 최신 플러그인만으로 충분합니다vite 플러그인 설정 vite.config.ts 파일을 열어서 플러그인에 Tailwind를 추가합니다 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plu..

로딩이 너무 느려요..웹사이트 작업 중 특정 페이지의 로딩 속도가 너무 느리다는 것을 느꼈습니다.처음엔 기분 탓인가 싶었지만, 사용자에게도 분명히 좋지 않은 경험이라는 생각이 들어 객관적으로 로딩 속도를 측정할 수 있는 도구가 필요했습니다.그때 알게 된 것이 바로 Lighthouse입니다.로딩 시간을 개선하는 이유?빠른 로딩 속도는 곧 사용자 만족도빠른 웹사이트는 사용자 경험을 향상시키고, 페이지 체류 시간, 조회 수 및 전환율을 높입니다.Google 연구 데이터페이지 로딩 시간이 1초 → 3초 증가하면 이탈률은 32% 증가모바일에서 3초 이상 로딩 시 53%가 이탈로딩 속도가 1초 느려지면, 전환율은 4.42% 감소출처: Think with GoogleSEO 영향Google은 페이지 로딩 속도와 모바일..

🗒️ 용어 정리URI : Uniform Resource Identifier, 통합 자원 식별자 (playpray4me.tistory.com, https://playpray4me.tistory.com)URL : Uniform Resource Locator, 통합 자원 위치 (https://playpray4me.tistory.com)엔터티 : 엔터티는 사람, 장소, 물건, 사건, 개념등의 명사에 해당한다. 엔터티는 업무상 관리가 필요한 관심사에 해당한다. 엔터티는 저장이 되기 위한 어떤 것(thing)이다.✍️ REST API 디자인 가이드다음 2가지를 API 엔드포인트유의하여 작성해야 합니다.첫 번째, URI는 정보의 리소스를 표현해야 한다.두 번째, 리소스에 대한 행위는 HTTP Method(GET, ..