Front End (5) 썸네일형 리스트형 [ReactJS] React를 활용한 카운트 다운(3,2,1) 구현 ReactJS를 활용한 Count Down(3 2 1) 로직 구현 개요 프로젝트 진행 중, React Hook을 이해하여 프로젝트에 필요한 카운트 다운(3,2,1) 로직의 구현을 복습해본다. 목차 useState를 활용한 변수 선언 useEffect를 활용한 로직 구현 html 화면 전환 동작 화면 소개 1. useState를 활용한 변수 선언 useState를 활용한 변수 선언 const [time, setTime] = useState(5); 카운트 다운이 진행되어 숫자가 줄어들 때마다, 페이지를 리렌더링 시켜 숫자를 노출시켜주기 위해, React Hook인 useState를 활용하여 변수를 선언한다. 2. useEffect를 활용한 로직 구현 setTimeout 및 time값 갱신 함수를 활용한 로직.. [ReactJS] React Hook(리액트 훅) 이란? React Hook(리액트 훅) 이란? 개요 리액트에서 중요한 React Hook(리액트 훅)의 개념 정리를 통해 프로젝트에서 효율적으로 사용할 수 있도록 하고, 대표적인 훅들에 대해 알아본다. 목차 React Hook의 등장배경 React Hook 이란? 대표적인 React Hook 소개 1. React Hook의 등장배경 React Component 종류 리액트 컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나뉜다. 리액트 초기에는 일반적으로 함수형 컴포넌트(Functional Component)를 사용하였으나, 값의 상태를 관리(state) 혹은 Lice Cycle Method(생명 주기=컴포넌트가 생성되고 사라지는 과정이 존재.. [ReactJS] useRef vs useState vs 전역변수 [ReactJS] useState vs useRef vs 전역변수 개요 프로젝트를 진행하는 도중 useRef와 전역변수의 차이에 대한 궁금증이 생겨 이를 알아보고, 부가적으로 useRef와 useState의 차이에 대하여 알아본다. 목차 useRef vs useState useRef vs 전역 변수 소개 1. useRef vs useState useRef란? useRef는 .current property로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환해주는 Hook 함수이다. 이 때 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지되며, 정의하자면 useRef란, .current property에 변경 가능한 값을 담고 있어 특정 DOM을 가리킬 때 사용 할 수 있는 Hook 함수라고 할 수 있.. [ReactJS] ReactJS란 무엇일까? [ReactJS] React란 무엇일까? 개요 프로젝트를 진행하면서 사용한 React에 관해 이해한 개념을 주요한 특징과 함께 정리한다. 목차 React란? React 특징 가상 돔(Virtual Dom) Data Flow JSX 컴포넌트(Component) 기반 구조 선언형 프로그래밍 Props and State React의 미래 소개 1. React란? React의 정의 리액트는 싱클 페이지 애플리케이션(SPA) 혹은 모바일 애플리케이션 개발을 쉽게 만들어주는 Javascript 기반의 Library이다. 즉, 사용자 인터페이스를 개발하기 위해 필요한 것들을 사용하기 쉽게 구현해놓은 집합체이다. React의 차별성 기존 html,css,js로도 웹 페이지를 구성 할 수 있다. 하지만, ReactJS를.. [ReactJS] npm 명령어 입력시 초기 루트 Url 설정 [ReactJS] npm 명령어 입력시 초기 Root Url 설정 개요 npm으로 서버를 구동시킬 때, 초기 Url을 어떻게 변경하여 접근하도록 할지 알아본다. 목차 소개 배경 변경 방법 변경 결과 위와 같은 방법을 적용한 서비스 소개 1. 소개 배경 서버 구동시 Root Url 변경 배경 npm을 통해 서버를 구동하면, 기본 설정은 root directory('/')로 이동하게 된다. 하지만 실제 배포되어 Client에게 보여지는 서비스 이외에도 다뤄야 하는 resource들이 존재하고 이를 Url을 통해 접속하며 관리 할 수 있기 때문에, 이를 위해 서버 구동 혹은 사이트 접속시 Client에게 제공되는 Url은 앞에 /app이 들어가도록 하기 위해 서비스 접속시 사이트의 Url의 앞에 /app이 항.. 이전 1 다음
