본문 바로가기

Framework

 (18)
상태 관리하기 State (2) | React 상태 관리하기 Managing State 애플리케이션이 커짐에 따라 state가 어떻게 구성되어 있고 컴포넌트간 데이터가 어떻게 흐르는지에 대해 더욱 의도적인 것이 도움이 됩니다.버그는 일반적으로 많거나 중복된 state에 의해 발생하죠.input에 state를 사용하여 반응하기 Reating to input with stateReact에서는 UI를 코드로 직접 수정할 수 없습니다.버튼 비활성화 disable the button버튼 활성화 enable the button성공 메시지 표시 show the success message등의 명령어를 사용할 수 없죠.대신에, 컴포넌트의 다른 시각적 상태에 보고싶은 UI를 설명합니다.초기 상태 initial state입력 상태 typing state성공 상태 su..
상태 관리하기 State (1) | React 상태 관리하기 Managing State상호작용성 추가 Adding Interactivity화면에 어떤 것들은 유저의 입력에 따라 업데이트됩니다.ex) 앨범에서 이미지를 클릭하면 active 이미지를 바꾸는 것 같은...React에서 시간이 지남에 따라 변경되는 데이터를 state라고 합니다.모든 컴포넌트에 state를 추가할 수 있고, 필요할 때 값을 업데이트할 수 있습니다. ▪️ 이벤트 반응하기 Responding to eventsReact를 사용하여 JSX에 이벤트 핸들러를 추가할 수 있습니다.이벤트 핸들러는 form input과 같은 요소에 클릭, 마우스오버, 포커싱과 같은 유저의 상호작용에 대한 응답으로 발생하는 메소드들입니다.button과 같은 내장된 컴포넌트들은 오직 onclick 같은 브라..
state로 상호작용성 추가하기 - 상태 State | React state로 상호작용성 추가하기 Adding Interactivity with StateReact가 state와 이벤트 핸들러로 어떻게 상호작용성(interactivity)을 추가하는지 알아봅시다.버튼을 하나 추가합니다. Like 이벤트 리스닝 Listening to events버튼이 클릭되었을 때 어떤 동작을 하게 하려면 onclick 이벤트를 사용합니다.Like React에서 이벤트명은 카멜케이스(camelCase)로 작성합니다.onClick 이벤트는 유저의 상호작용에 반응할 수 있는 많은 이벤트 중 하나입니다. 이벤트 처리하기 Handling events이벤트가 발생할 때마다 처리하기 위해 메소드를 정의할 수 있습니다.상태와 훅 State and hooksReact는 hook이라는 메소드 집합을 가..
props로 데이터 표시하기 - 속성 Props | React props로 데이터 표시하기 Displaying Data with Props❗ 이전 글과 이어지니 먼저 읽어주세요! Header 컴포넌트를 재사용하고 싶다면 두 번 선언하면 됩니다.  텍스트를 전달하거나 외부 소스로부터 데이터를 가져와서 표시해야 할 정보를 미리 알지 못하는 경우라면,일반적인 HTML 요소들은 각 요소의 동작에 따라 변하는 데이터들을 전달하는 데 사용할 수 있는 속성들을 가지고 있지요.의 src, 의 href, 등...동일하게, React 컴포넌트에 속성 props으로 데이터를 전달할 수 있습니다.Javascript 메소드와 비슷하게, 컴포넌트 동작 또는 화면이 표시될 때 보여줄 내용을 변경하는 커스텀 파라미터(=속성)를 갖는 컴포넌트를 디자인할 수 있습니다.또한 이 속성들은 부모..
컴포넌트로 UI 만들기 - 컴포넌트 Component | React 컴포넌트로 UI 만들기 - 컴포넌트 Building UI with Component - Components컴포넌트 ComponentsUI는 컴포넌트(component)라는 작은 단위로 분해할 수 있습니다.컴포넌트는 독립성을 유지하고 재사용 가능한 코드를 만들 수 있게 해 줍니다.컴포넌트를 레고 블록이라고 한다면, 각각의 블록들로 더 큰 구조를 구성하기 위해 결합할 수 있습니다.특정 컴포넌트나 블록을 업데이트함으로써 UI의 일부분을 업데이트할 수 있습니다. 이런 모듈화는 코드가 커짐에 따라 더욱 수정이 용이한 코드로 만들어주기 때문에, 애플리케이션의 나머지 부분에 영향 없이 컴포넌트를 추가/수정/삭제할 수 있습니다.React 컴포넌트의 좋은 점은 바로 javascript로 이루어져 있다는 것이죠! 컴포넌트..
React 시작하기 | React React 시작하기새로 만든 프로젝트에서 React를 사용하기 위해서는 unpkg.com 에서 2개의 React 스크립트를 로드해야 합니다.reacthttps://www.unpkg.com/browse/react@18.3.1/React 라이브러리 corereact-domhttps://www.unpkg.com/browse/react-dom@18.3.1/DOM에서 React를 사용할 수 있게 해주는 DOM 관련 메소드 제공 Javascript로 직접 DOM을 수정하지 않을 것이므로 기존에 추가했던 DOM 메소드를 삭제합니다.특정 요소를 타겟팅하고 표시할 React 컴포넌트를 추가하기 위해 ReactDom.createRoot() 를 추가하고,root.render() 메소드로 React 코드를 DOM에 랜더링합니..
UI 랜더링 및 Javascript로 업데이트하기 | React 유저 인터페이스(User Interface, UI)를 랜더링하고 업데이트하는 방법을 알아봅니다.React가 어떻게 동작하는지 이해하기 위해, 먼저 브라우저가 UI를 만들기 위해 코드를 어떻게 해석하는지에 대한 기본적인 이해가 필요합니다.유저가 웹 페이지를 방문하면 서버는 브라우저에게 아래와 같은 HTML 파일을 반환하고,브라우저는 HTML을 읽고 DOM(Document Object Model)을 생성합니다. DOM이란? What is DOM?DOM(Document Object Model)은 HTML 요소들을 객체로 표현한 것입니다.코드와 UI 사이를 연결하고, 부모-자식 관계인 트리 구조를 갖고 있습니다.DOM 메소드와 javascript를 통해 유저의 이벤트를 listen하고 UI 안의 특정 요소를 검..
React에 대해서 - 웹앱의 기본 요소, 리액트란 | React React에 대해 알아봅니다.웹 애플리케이션의 기본 요소 Building blocks of web application유저 인터페이스 User Interface(UI)유저가 애플리케이션을 어떻게 사용하고 상호작용하는지라우팅 Routing유저가 애플리케이션에서 페이지들을 어떻게 탐색하는지데이터 가져오기 Data Fetching데이터가 어디에 있고 어떻게 가져오는지랜더링 Rendering정적 또는 동적 컨텐츠들을 언제, 어디서 랜더링하는지통합 Integrations서드파티 서비스(CMS, auth, payments 등)들이 무엇이고 어떻게 연결하는지구조 Infrastructure코드들을 어디에 배포하고, 저장하고, 실행하는지(serverless, CDN, edge 등)성능 Performance엔드 유저를 위..
App Routing 규칙과 메타데이터 규칙 | Next.js App Router를 사용하는 Next.js 프로젝트의 라우팅 규칙과 메타데이터(metadata) 규칙을 알아봅니다. 💡Pages Router 라우팅 규칙은 아래 참고 Getting Started: Project Structure | Next.jsA list of folders and files conventions in a Next.js projectnextjs.org App Router에서 예약어처럼 미리 정의된 경로명와 메타데이터를 처리하는 파일명이 있습니다.해당 파일 또는 폴더명으로 생성하면 별도의 설정 없이 자동으로 적용됩니다. 라우팅 파일 Routing Fileslayout화면 레이아웃본인 포함 하위 경로에 공통적으로 적용되는 레이아웃 정의page해당 경로에 표시할 페이지 소스loading로..
Next.js 프로젝트 구조(App Router ver.) Project Structure | Next.js App Router를 사용하는 Next.js 프로젝트의 구조를 알아봅니다. 최상위 폴더 Top-level folders최상위 폴더는 애플리케이션 코드와 정적 리소스들을 구성하는데 사용됩니다.┌ app├ publicor┌ src│  ├ app├ publicapp : App Routerpublic : 정적 리소스src : 소스 분리 위한 폴더(선택) 최상위 파일 Top-level files최상위 파일들은 애플리케이션 설정의존성 관리미들웨어 실행모니터링 툴 통합환경변수 설정등에 사용됩니다.next.config.jsNext.js 설정 파일instrumentation.tsmiddleware.tsNext.js 미들웨어.env환경 변수.env.local로컬 환경에서의 환경 변수.env.production운영 환경에서..
Next.js 시작하기 | Next.js Next.js 애플리케이션을 만들어봅니다.💡 이후 내용은 아래 스펙으로 작성되었습니다.- OS : Windows 11- Package Manager : pnpm- Node.js 20.17.0- Next.js 14.2.13- App Router 시스템 필수 사양 — System RequirementsNodejs 18.18 이상https://nodejs.org/en/download/package-manager패키지매니저 pnpm자동 생성 — Automatic Installation새로운 Next.js 애플리케이션을 시작할 때, 모든게 자동 셋팅되므로 create-next-app 사용하는 것을 추천합니다.명령 프롬프트에서 프로젝트가 생성될 디렉토리 위치로 가 아래 스크립트를 실행하세요.npx create-n..
Next.js가 뭐예요? - Next.js 소개 | Next.js Next.js 에 대해 알아봅니다.  Next.js가 뭐예요? What is Next.js?풀스택 웹 애플리케이션을 만들기 위한 React 프레임워크입니다.UI 생성에 리액트 컴포넌트를 사용하며, 추가적인 기능들과 최적화를 위해 Next.js를 사용합니다.Next.js는 번들링, 컴파일링 등의 React를 위해 필요한 설정을 추상화하고 자동으로 만들어줌으로써 설정하는데 쓰는 시간을 줄여주어 애플리케이션을 구축하는데 집중할 수 있게 해줍니다. Next.js의 메인 기능 Main Features라우팅 Routing화면 랜더링 Rendering데이터 가져오기 Data Fetching스타일링 Styling최적화 Optimization타입스크립트 TypeScript Next.js 안에는 뭐가 있나요? What's..

티스토리툴바