🤔 들어가며React Native 앱에서 네비게이션을 구현할 때, 페이지 간 데이터 전달 방식을 어떻게 선택하시나요? URL 파라미터를 사용할지, 전역 상태 관리를 사용할지는 많은 개발자들이 고민하는 부분입니다.최근 프로젝트에서 콘텐츠 상세 페이지의 라우팅 방식을 URL 파라미터에서 스토어 기반으로 전면 리팩토링했습니다. 이 과정에서 배운 각 방식의 장단점과 언제 어떤 방식을 선택해야 하는지에 대한 경험을 공유하고자 합니다.📋 기존 방식: URL 파라미터 기반 라우팅구현 방식기존에는 전형적인 URL 파라미터 방식을 사용했습니다:// 기존 파일 구조src/app/content/detail/[id].tsx// 네비게이션const handleItemPress = (itemId: string) => { r..

🤔 이 글을 쓰게 된 이유AI 채팅 서비스를 개발하면서 ChatGPT처럼 텍스트가 한 글자씩 타이핑되는 효과를 구현해야 했습니다."그냥 setInterval로 글자 하나씩 추가하면 되겠지?"라고 생각했었는데요... 언뜻 간단해 보이는 기능이었지만, 실제로는 React의 렌더링 사이클과 비동기 타이머가 만나면서 예상치 못한 문제들이 속출했습니다.가장 당황스러웠던 것은 API 응답은 정상적으로 받아오고, 상태 업데이트도 올바르게 작동하는데 화면에는 아무것도 표시되지 않는 현상이었습니다. 개발자 도구에서는 모든 것이 정상인데 UI만 멈춰있는 상황... 정말 멘붕.이 과정에서 겪었던 삽질과 깨달음을 공유합니다. 같은 고민을 하고 계신 분들께 도움이 되었으면 합니다.🚫 처음 작성한 문제투성이 코드첫 번째 시도..

IT 쪽 공부를 시작하면서 좋아하게 된 유튜버, 인스타그래머가 여럿 있는데,그 중에 특히나 정감이 많이 가는 유튜버 '코딩알려주는누나' (..언니🥰)의 강의에서 알게된 지식을 정리하고자 한다.💛실무에서 자주 사용하는 Javascript 문법💛실무에서 이미 몇 번이고 본 코드긴 한데, 막상 내가 쓸려고 보면 생각이 안나서 이렇게 기록 ㅎ1.  Object Shorthand Assignment (객체 축약 할당?)💔 기존const name = 'noona';const age = 28;let person = { name: name, age: age} ❤️ 실무에서는?let person = { name, age}객체 내 변수와 할당할 변수의 이름이 동일할 경우, `name: name..

문제 발생 원인youtube에 있는 react강의를 따라하다가 에러가 발생했다. 더보기상세한 에러 문구React Hook "useEffect" is called in function "index" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". (react-hooks/ rules-of-hooks)알고보니, `React` 의 컴포넌트는 대문자로 시작해야 `useEffect`, `useState` 같은 hook을 사용할 때 오류가..

.env를 사용하는 이유1. github 같은 오픈 리포지토리에 소스코드를 업로드할 경우, 오픈되면 안되는 정보들을 변수화하여 노출 없이 관리하기 위함ex) `API Key`, `DB 정보`2. 자주 사용되는 값을 전역 환경변수로 지정해두고, 유지보수를 용이하게 하기 위함ex) Backend `API Uri` 혹은 `Port` 등 .env 파일 생성하기어떤 프로젝트 파일이든, 처음 생성하면 `.env` 파일이 없는 경우가 많다.그 경우 직접 만들어주면 된다!⭐️.env 파일의 위치⭐️`.env` 파일은 꼭 정해진 위치 -프로젝트 최상위 Root- 에 생성되어야 한다!헷갈리면 `package.json`과 동일 선에 있다고 생각하믄 됨. ⭐️.env 파일 gitignore 처리⭐️열심히 `.env` 파일 만..

함께 업무 중인 '프론트 선배님'이 오늘 공부해보라고 알려준 Keyword `FSD` 요즘 디자인 패턴은 fsd가 대세입니다- 합정 칼퇴러- 🤔 FSD? 그게 뭐지?프론트엔드 실무를 그래도 2년 정도 찐하게 했다고 생각했는데, 이런 아키텍처 방법론까지는 파고들 생각을 못했다.프로젝트 구조를 더 안정적으로 만들 수 있도록 이제라도 해보자!👉🏻 이 글에서 참고한 문서 : https://feature-sliced.design/kr/docs/get-started/overview   1️⃣ FSD 방법론이란?[Feature-Sliced Design]- 개요 : 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론- 방식 : 코드 구성에 관한 규칙, 관례, 도구(린터, 폴더생성기 등)를 모아놓음- 목적 : 계..

Vite(비트)를 사용해서 Svelte 프로젝트를 생성하고, 생성된 프로젝트의 기본 구조에 대해 알아봅니다. 💡 Vite 를 사용해서 Svelte 프로젝트 만들기1. Vite CLI 설치npm install -g create-vite-g : global (전역 설치) 2. Vite 로 Svelte 프로젝트 생성설치한 Vite CLI를 활용해서 Svelte 프로젝트를 생성해봅시다.2-1. 터미널을 켜서, 프로젝트를 생성할 폴더로 이동참고)현재 위치 내 모든 폴더 보기 : `ls`폴더 이동하기 : `cd 이동할폴더명`폴더 생성하기 : `mkdir 생성할폴더명` 2-2. Vite CLI를 실행해서 Svelte 프로젝트 만들기npm create vite@latestcreate-vite 명령어가 실행되면서, C..

1. PropsProps (Properties) : 속성 - 컴포넌트에 원하는 값을 넘겨줄 때 사용하는 변수1-1. Props 예시 1기존 하드코딩 방식변경 성공적 ✨1-2. Props 예시 2기존 하드코딩 방식1-3. Props 예시 심화Nav 태그 값을 유연하게 변경할 수 있도록 바꿔보자!기존 하드코딩 방식 막간을 이용한 오류 일기 😉자동으로 태그를 생성하는 방식을 사용할 때는, React가 추적하기 위해 중복되지 않는 unique key 값을 넣어주라는 의미2. Event2-1. Event 예시 1Header 클릭 시 Alert 을 띄워보자!event.preventDefault(); : 적용된 태그의 기본 동작 방지 (a 태그일 경우, 페이지 Re-load 방지)  2-2. Event 예시 심화N..