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

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

문제 발생 원인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` 파일 만..

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..

✨ React 에서의 Component1. 컴포넌트란?소프트웨어 디자인 수준에서 나눌 수 있는 가장 작은 단위로, 재사용이 가능한 각각의 독립된 모듈을 뜻 함.프론트엔드에 적용하자면, `웹·앱을 구성하는 가장 작은 단위` 2. 컴포넌트화를 해야 하는 이유는 뭘까?컴포넌트 방식(파일을 여러개로 쪼개서 관리하는)을 사용하는 목적은 바로1. 유지 보수의 용이성2. 성능 개선이 두 가지의 목적이 가장 크다.하나의 스크립트만으로 코드를 작성이 불가능한 것은 아니다.그러나, 프로젝트의 기능이 다양한 경우, 한 기능을 수정하기 위해 코드를 다 뒤져야 하는 상황이 발생한다.컴포넌트화가 되어있다면, 수정할 기능이 있는 컴포넌트 파일로 바로 찾아가서 수정하면 된다!즉, 컴포넌트화 하게 된다면!메인 어플리케이션과 완전히 분..

1. React 프로젝트 내 구동 방식프로젝트 구조페이지 구조1-1. index.jsApp이라는 컴포넌트를 가지고 있다!App은 어디에 있는걸까?▼▼ 1-2. App.jsApp.js 안에서 이렇게 Function 이름을 App으로 명시하고, html 코드를 반환하고 있다.그렇다면 App을 감싸고 있는 이 root는 어디에 있는걸까?▼▼1-3. index.html즉, 전체적으로 보자면, index.js 파일이 전체 프로젝트 구조를 관리하며, 전체 DOM 구조를 렌더링하는 역할을 한다index.html 코드 안에 App.js return html 코드가 있는 구조로 렌더링함index.html은 가장 겉 단에서 기본적인 html 구조를 담당함App.js는 개발자가 구현하는 페이지들을 return 한다.- 참고..

Vite (비트) 란 간략하게 말하자면, '진짜 빠른 번들링 툴'실무 초반엔 Vue-CLI를 활용한 빌드를 진행했었다. (Vite의 필요성을 크게 느끼지 못했기 때문)그런데 프로젝트 규모가 커지면서, 빌드하는데 시간이 오래걸리기 시작했다.프론트엔드 개발은 코드를 계속 갱신하면서 테스트를 진행하기 때문에, 핫로딩/빌딩이 빠르게 이뤄져야 개발효율성이 높아진다. 그래서 Vue-CLI에서 Vite로 전환을 하게 되었고, 빠른 빌드 속도로 업무 효율성이 크게 증가했다.Vite는 비록, Vue.js의 창시자인 Evan You가 Vue3과 함께 개발한 번들링 툴이긴 하지만, Vue에만 국한되진 않는다.그래서 React 프로젝트에도 요즘 많이 사용된다고 들었다.💎 Vite 템플릿으로 프로젝트 생성하는 방법1. cre..