react

제목 : 점진적인 리액트 프로젝트 도입 과정과 문제 해결 과정이 글을 작성하는 이유는?빠른 프로젝트 생성과 웹 페이지 생성에 초점이 맞춰진 현대 프로그래밍 트렌드는 AI 로 인해더욱 중요해진 요소로 꼽히고 있다.현재 프로그래밍 세상에서, 오히려 해당 분야에 대한 깊은 공부는 공감받지 못하는 사회라는 것을 느낀다.오히려, 빠른 개발을 요하는 실제 프로덕션 세상에서, 깊은 이해를 위한 시간 소비는 사치라고 생각할 지 모른다.아니, 그것이 당연할 지도 모른다.그러나, 나는 역발상으로, 리액트라는 단어가 가지는 수많은 의미를 탐색해 왔다.리액트는 무엇인지, 어떤 것으로 이루어져 있는지, 어떤 방법론을 사용하는지 등등..심지어는 JavaScript 의 es6 이상 버전이 어떻게 es5 로 폴리필 되는지 확인할 정..

제목 : React 런타임 코드 해부 노트 : Fiber와 Scheduler를 따라간 21일부제 : setState 를 이해하기 위한 3500줄 추적기이 글을 작성하는 이유 :리액트의 상태 관리는 매우 복잡하게 연계되어 있다.옛날에 리액트를 배울 때, 함수 컴포넌트, 클래스 컴포넌트의 상태 변경 방법을 공부했다.아마 리액트를 써 보기만 해도 알 텐데, useState 와, setState 이다.useState 를 이용하여, 컴포넌트에서 사용한 내부 상태를 생성한다.setState 란, 클래스형 컴포넌트를 사용 할 시, 상태를 변경하기 위한 함수이다.useState Hook 의 상태 설정 메서드는setNum, setNumber, setString, setData 등등 원하는 대로 지정할 수 있다.브라우저에..

제목 : HTML 파일에서 React 사용하는 법이 글을 작성하는 이유npm, node 패키지로 npx 명령어를 실행하여 손쉽게 React 시작 템플릿을 가져올 수 있다.즉, 일종의 프로젝트 초기화 명령어인데, 리액트로 프로젝트를 시작한다면, 이를 통해 손쉽게 구축이 가능하다.그러나, React 는 컴퓨터 프로그램의 역사를 따져봤을 때, 긴 역사를 가지고 있지는 않다.즉, 아직 tomcat 서버를 이용하거나, httpd 와 같은 오래된 웹 서버로(물론, tomcat 은 웹과 WAS 의 역할을 동시에 수행한다.)바닐라 JavaScript 와 HTML, CSS 파일로 스타일링을 진행하며,동적 DOM 구축을 위해 JQuery 를 사용하고 있다.이미 내부적으로 데이터셋을 명시하고, 이를 어떻게 보여 줄 지복잡한..

제목 : React, 기반 뿌리부터 살펴보자 - (부제 : 다양한 방법론의 조합)이 글을 작성하는 이유드디어, JavaScript 의 Syntax Sugar 의 형태,JS 의 private 의 또 다른 의미, (실질적으로는 보안을 위해 # 으로 21 년 도입됨)Webpack 의 동작 원리, package.json, package-lock.json, tsconfig.json이 파일의 존재 이유에 대해서 파헤쳤다.또한, HTML5 정식 스펙상에 존재하는 "모든 카테고리의 태그" 를 다루었다. (실제 예제 및 렌더링 예시까지)특히, JS 로 제작된 대부분의 최신 프레임워크는 아직 정식 스펙에 도입되지 않은 문법을 채택하여이를 tsconfig.json 의 옵션에서 적용하고 있다는 것이 놀라웠다.async 와 P..

제목 : 웹 서버는 무엇이고, local, production 차이는 무엇일까?웹 서버에 대한 내용을 다루는 이유우리는 어플리케이션을 배포 할 때, 항상 Server 를 사용한다.이는 보통 알려진 프론트엔드, 백엔드, 할 것 없이, 모든 영역에서 사용한다.개발을 위해 테스팅을 할 때도, 배포를 할 때도, 마이크로서비스 또한 서버를 사용한다.나의 의문점은 웹 페이지를 서빙 해 주는 웹 서버 자체에 있었다.개발 도구의 편의성이 너무 높아, 내가 어떤 웹 서버를 사용하느냐는 신경 쓸 틈도 없이,웹 페이지의 결과를 브라우저에서 너무 잘 보여주고 있었다.웹 페이지를 load 하기 위해 가장 먼저 제공하는 파일은 보통 index.html 이므로,그냥 나의 컴퓨터 자체가 index.html 에서 원하는JavaScri..

4장 - 이벤트 핸들링 리액트의 이벤트 시스템 - React Typescript Versionsrc/ 안에 들어가는 모든 .ts 파일은 맨 위에 import React from 'react'가 들어갑니다!코드 내부의 (...)안에 들어간다고 생각하시면 됩니다.일단, 기본적인 틀은 Say.tsx 로부터 시작합니다!먼저, 작성했던 Say.tsx 파일부터 보겠습니다.Say.tsx// (...)import { useState } from 'react'const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('Hello!'); const onClickLeave = () ..

함수 컴포넌트에서 useState 사용하기사실상 제일 많이 사용하게 됩니다.Hook 이라는 요소에 속합니다.useState 사용하기Say.tsx// (...)import {useState} from 'react'const Say = () : JSX.Element => { const [message, setMessage] = useState(''); const onClickEnter = () : void => setMessage('Hello'); const onClickLeave = () : void => setMessage('Good Bye!'); return ( 입장 퇴장 )}export default Say..

state - Typescript컴포넌트 내부에서 바꿀 수 있는 값props는 상위 컴포넌트에 의지, state는 내부에서 직접 변경이 가능합니다.솔직히 클래스형 컴포넌트는 굉장히 까다롭습니다.나중엔 대부분 함수형 컴포넌트만 쓰게 됩니다.그래도 코드 참고 할 때, 읽을 줄 알아야 해서 이해는 필수입니다!! 클래스형 컴포넌트의 statesrc/ 디렉토리에 여전히 작성하시면 됩니다.Counter.tsx// (...)import { Component } from 'react';interface StateFace{ number : number;}class Counter extends Component { constructor(props : {}){ super(props); /..

기초적인 Typescript 문법을 알아야 합니다1. 변수 선언 방법const typeString : string = "Hello World"const : 변하지 않는 고정 값이라는 의미입니다.typeString : 제가 임의로 정한 변수 이름입니다.string : Typescript에서는 모든 변수에 타입이 지정이 되어야 합니다.2. 함수의 반환값 선언 방법const App : () : JSX.Element => { return ( Hello World );};App : React 프로젝트를 작성 시, "컴포넌트" 를 모아서 처리하는 역할로 계속 쓰이게 됩니다.JSX.Element : "React.FC" 로 선언하는 방식이 있지만, JSX.El..

1장에 대한 요약1. React 서론컴퓨터의 성능이 매우 발전함에 따라 동적인 페이지 에 대한 필요도가 높아졌습니다.이에 FaceBook이 최대한 성능을 아끼고 동적인 웹을 보여줄 수 있는 "React" 라는 시스템을 개발했습니다.성능을 아끼는 방법은, 수많은 Component 에서 몇 개의 정보가 변경되었을 때, 모든 Component를 변경하는 것이 아니라, 변경 된 Component 만 변경하는 방식입니다.이 방식은 Virtual DOM을 사용하여 성능을 아낍니다.Virtual DOM : 변경된 Component를 가상의 환경에서 만든 후, 실제로 변경 된 DOM을 비교하여 반영하는 방식2. 작업 환경 설정 - 저는 "Mac"입니다.Node.js / npm, yarn 설치하기코드 에디터 - ..