본문 바로가기

React 실습

(38)
[ReactNative] 환결 설정 중 오류 처리 관련 Android:오류해결] The emulator process for AVD has terminated Android 스튜디오에서 에뮬레이터를 실행하려는 도중 다음과 같은 오류가 발생했다. 다음과 같은 문제를 일어나는 경우를 찾아 보니 크게 3가지로 추릴 수 있다. 1. 툴 프로그램 미설치 2. 환경 변수 관련 문제 3. 용량 문 1. 해당오류가 발생하는 이유는 다음과 같은 프로그램이 설치 되있지 않아서 이다. (오른쪽 상단 톱니 바퀴 모양 클릭 > System settings 클릭 > Android SDK 클릭 > 아래 나와 있는 툴들을 설치 해주자. - Android Emulator - Android SDK Platform-Tools - Intel x86 Emulator Accelerator (HAX..
[FE 개념]리덕스 vs 모벡스 정리 React x Mobx - 참고할 저장소 코드: https://github.com/goodsosbva/react_redux/tree/main/redux-mobx 1. 리덕스 x 리액트 응용 방법 리덕스의 기본 원리는 다음과 같습니다: state -> dispatch: 적절한 dispatch 명령을 Action 함수에 받아들입니다. Reducer에서 해당 액션을 수용하여 state를 변경합니다 (prevState -> changedState). 생성 흐름은 다음과 같습니다: createStore: 스토어를 생성합니다. Reducer 생성: 상태 변경을 수행하는 리듀서를 생성합니다. 초기 state 설정: 스토어의 초기 상태를 설정합니다. state 생성: 리듀서와 초기 상태를 사용하여 상태를 생성합니다. ..
[React] 자식이 부모에게 - 콜백 이용 - (2) # 블로그 좀 살피다가 자식 => 부모로 보내는 부분을 잘못 설명 한거 같아 추가 설명 하고자 함. # props를 함수로 이용한다고 보기보다 콜백을 이용하여 props를 전달 한다는게 더 맞는 표현 같음. 일반적으로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 할 경우에는 콜백 함수 (Callback Function)을 사용하게 됩니다. 다음은 콜백 함수를 통해 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 예시입니다 // 부모 컴포넌트 import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; const ParentComponent = () => { const [messageFromChild..
[Next.js] SSR, ISR 그리고 Link, Image SSR을 통한 페이지 구현 import React from "react"; import { GetServerSideProps, NextPage } from "next"; import Head from "next/head"; type SSRProps = { message: string; }; const SSR: NextPage = (props) => { const { message } = props; return ( 이 페이지는 서버 사이드 랜더링을 통해 접근 시에 서버에서 그려진 페이지입니다. {message} ); }; export const getServerSideProps: GetServerSideProps = async ( context ) => { const timestamp = new Date..
[Next.js] Next.js 랜더링 방법 - SSG Next.js에서는 다양한 렌더링 방법을 제공합니다. 다음은 Next.js에서 사용할 수 있는 주요한 4가지 렌더링 방법입니다 Static Generation (정적 생성) getStaticProps와 함께 사용됩니다. 빌드 시점에 페이지를 사전 렌더링하여 정적인 HTML 파일을 생성합니다. 최초 접속 시에는 사전 렌더링된 HTML이 제공되고, 이후 클라이언트 측에서는 정적 파일을 재사용합니다. 정적 페이지에 적합하며, 자주 변경되지 않는 컨텐츠에 사용됩니다. Server-side Rendering (서버 사이드 렌더링) getServerSideProps와 함께 사용됩니다. 각 요청마다 서버에서 페이지를 렌더링합니다. 매 요청마다 데이터를 가져와서 페이지를 동적으로 생성합니다. 매번 최신 데이터가 필요하..
[React] jsx 문법 요령 - map을 이용하여 여러개의 태그 출력 {!myOrderList[0]?.useCoupons || myOrderList[0]?.useCoupons.length === 0 ? '-' : ( {myOrderList[0]?.useCoupons?.map((data) => ( {data.title} ))} )} jsx 문법을 쓸때 다음과 같이 구현할 수 있음.
[Githib Action]CI / CD 자동 배포 정리 (질 & 답 형식) 루트 경로에 ci / cd 지정할 파일 생성 /.github/workflows/.yml .yml 파일은 GitHub Actions에서 실행되는 작업의 집합을 정의하는 워크플로우 파일의 확장자입니다. 이 파일은 YAML (YAML Ain't Markup Language) 형식으로 작성되며, GitHub Actions에서 워크플로우를 구성하는 데 사용됩니다. q . development.yml 실행되는 원리가 무엇이지? 깃허브에서 머지된이후 어떤 과정을 걸쳐서 머지되는지 알려줘. a. development.yml은 GitHub Actions 워크플로우 파일의 이름입니다. 워크플로우 파일은 특정 이벤트(예: 푸시, 풀리퀘스트 등)가 발생할 때 GitHub Actions에서 실행되는 작업의 집합을 정의합니다. ..
[Next.js] 4장 - 코드 구성과 데이터 불러오기 (학습 중 메모 정리 - 나중에 할것) USER getaddrinfo ENOTFOUND api.rwnjs.com? ChatGPT "getaddrinfo ENOTFOUND api.rwnjs.com" 에러 메시지는 일반적으로 DNS(Domain Name System)에 의해 도메인 이름 "api.rwnjs.com"을 IP 주소로 변환할 수 없다는 것을 나타냅니다. 이는 네트워크 연결 문제, 올바르지 않은 DNS 서버 구성 또는 도메인 이름 자체의 문제로 인한 것일 수 있습니다. 이 문제를 해결하기 위해 다음과 같은 단계를 시도해 볼 수 있습니다: 인터넷 연결을 확인하고 안정적인 연결을 보장합니다. DNS 서버가 올바르게 구성되어 있는지 확인합니다. User Request URL: http://localhos..

728x90