국비지원10 [StephenGrider 강의] 모던 리액트와 리덕스 - state in 클래스기반 컴포넌트 state는 자바스크립트 객체로, 유저 이벤트를 저장하고 반응하는데 이용된다. 클래스형 컴포넌트는 그 자신의 복사된 state 객체를 가지고 있고, state가 바뀔때마다 컴포넌트는 즉시 리렌더링하고 자식요소들에게도 렌더링하도록 강제한다.(render 함수 실행) state를 사용하기 전에 state 객체를 초기화해야 하므로, 클래스의 constructor 메소드 안의 자바스크립트 객체에 state들의 프로퍼티(아래에서는 term)를 정하여 넣는다. 위의 초록색 점선 박스 부분이 클래스형 컴포넌트에서 state를 정의하거나 초기화하는 방법이다. cf. 함수형 컴포넌트는 state를 가지지 않는다. 모든 자바스크립트 클래스는 constructor라는 함수를 가지고 있고, 클래스가 생성될 때마다/ 새 인스턴.. 2023. 2. 7. [StephenGrider 강의] 모던 리액트와 리덕스 - 개발환경 설정 프로젝트를 실행하기 위한 도구들을 설치해야 하는데, 우선 노드 패키지 매니저(NPM)를 사용하여 프로젝트를 실행한다. npm 설치로 프로젝트의 의존성(프로젝트를 구성하여 작동시는 여러 패키지들)을 관리할 수 있게 된다. npm install 보일러플레이트 패키지를 시작하고 로컬 서버를 실행시킨다. npm start 이 패키지 안에는 자바스크립트 파일을 포함해 여러 파일들이 있는데, 바벨과 웹팩이 이 모든 것들을 합치고, ES5로 변환시켜 브라우저에서 작동되게끔 만든다. 그리고 이 모든 파일들을 볼 수 있는 로컬서버를 이용할 수 있게 해준다. 아래와 같이, 컴파일이 끝난 전체 패키지를 볼 수 있다. 위의 코드에서 보다시피, 이 패키지는 로컬서버 localhost:8080으로 들어갈 수 있다. 프로젝트의 i.. 2023. 2. 3. [KDT] JSON JSON(JavaScript Object Notation) : 자바스크립트 데이터를 표현하는 하나의 포맷 속성-값(attribute-value)의 쌍, 객체 데이터의 형태와 유사 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷 비동기 브라우저/ 서버 통신(AJAX)을 위해, 그리고 넓게는 XML을 대체하는 주요한 데이터 포맷 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법. JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다. - 기본 자료형 수 문자열: 0개 이상의 유니코드 문자들의 연속. 문자열은 큰 따옴표로 구분하며 역슬래시를 통한 이스케이프 문법 지원 불리언: 참, 거짓 배열: 순서가 있는 리스트 객체 널: 빈 .. 2023. 1. 27. [winterlood 강의] React App 만들기 note React.js : Node 기반의 JS UI 라이브러리 Webpack : 여러 개의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리 Create React App : 리액트에 필요한 패키지들과 복잡한 환경설정 등을 미리 설치해놓고 바로 사용할 수 있도록 감싸놓은 패키지(Boiler Plate; 틀, 표준의 의미) '보일러 플레이트' 용어의 기원 >> https://whynameitthat.blogspot.com/2013/10/boiler-plate.html Boiler Plate The origins of interesting names of places, people, products, b.. 2023. 1. 20. [winterlood 강의] 리액트가 필요한 이유 리액트가 필요한 이유 1. 산탄총 수술(Shotgun Surgery) : 여러 파일에 걸쳐 중복 코드들(ex. header, footer 등)이 작성된 프로그램에서 그 중복 코드 내에 수정이 생기면 그 코드를 포함하고 있는 많은 파일에 이를 일일이 수정 적해줘야 하는 문제가 생김. => 각 페이지에 공통적으로 적용될 부분들은 별도의 파일이나 모듈로 제작 ; 컴포넌트(Component)화 방식 리액트는 컴포넌트 기반의 UI 라이브러리 2. 선언형 프로그래밍 : 예전에 주로 사용하던 제이쿼리(jQuery)는 절차를 하나하나 다 나열해야하는 명령형 프로그래밍 방식의 설계이다. 절차 대신 목적을 먼저 말하는 선언형 프로그래밍 방식의 설계의 리액트가 프론트엔드 측면 개발에서는 더욱 효율적이다. 3. 가상 돔(Vi.. 2023. 1. 16. [KDT 강의] 리액트 뜯어보며 이해하기 2 props : 부모 컴포넌트로부터 상속받는 자식 컴포넌트에 데이터를 전달하는 방법 자식 컴포넌트에서 읽기 전용(immutable)으로 사용되며, 변경하고자 할 때는 부모 컴포넌트에서 state를 조작해야 한다. VS state : 해당 컴포넌트 내에서 데이터를 전달하는 방법 변경 가능(mutable)하고 변경이 되면 화면이 re-render 된다. 자식 컴포넌트의 state들을 한 곳에서 모아 유지해야 하거나, 두 개의 자식 컴포넌트들이 서로 통신을 해야해서 가능하게 하려면, 부모 컴포넌트에 공유 state를 정의해야 한다 ! => 부모 컴포넌트는 props를 사용해 자식 컴포넌트에 state를 다시 전달할 수 있고, 이를 통해 자식 컴포넌트들이 서로 혹은 부모 컴포넌트와 동기화하도록 만든다. React.. 2023. 1. 13. [KDT 강의] 리액트 뜯어보며 이해하기 클래스형 컴포넌트를 사용할 때는, 화면에 렌더할 때 React.Component에 있는 render() 메소드를 사용해줘야 한다. 사용하면 좋을 extension tool 컴포넌트를 보다 손쉽게 생성할 수 있게 해준다 ! ex) rfc => 기본적인 함수형 컴포넌트 생성해 줌. (React Functional Component) rcc => 기본적인 클래스형 컴포넌트 생성해 줌. (React Class Component) rccp => React Class Component PropType rce => React Class Export TicTacToe App 만들기 리액트에서는 컴포넌트 간에 데이터가 오고갈 때, Props를 사용한다 ! 특별히 상속하는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달하.. 2023. 1. 6. [KDT 리액트] 리액트란? 1 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있고, 라이브러리는 어떤 특정 기능을 모듈화 해놓은 것으로 프레임워크는 여러 라이브러리들 포함하고 있는 더 큰 범위이다. 리액트는 프레임워크가 아닌 라이브러리라고 보는 이유는, 전적으로 UI를 렌더링하는 데 관여하기 때문이다. cf. 앵귤러(Angular)와 뷰(Vue)는 프레임워크 리액트는 함께 사용될만한 라이브러리들이 잘 마련되어있는, 즉 리액트의 생태계가 잘 갖춰져있다. 예를 들면, 라우팅(페이지 이동)을 위한 라이브러리 react-router-dom이라든지 상태 관리를 위한 라이브러리들 redux, recoil, mobx라든지 빌드를 위한 webpack, npm이라든지.. 2022. 12. 30. [알고리즘 자습] 대표적인 데이터 구조: 해쉬 테이블(Hash Table) 1. 구조 : 키(key)에 데이터(value)를 저장하는 데이터 구조 key를 가지고 해싱 함수를 통해 데이터의 주소를 알아내, 데이터를 순차적으로 검색할 필요없이 바로 받아올 수 있어 접근 속도나 처리 속도가 획기적으로 빨라짐 대표적인 예로 파이썬의 딕셔너리 자료형이 이 해쉬 테이블로 내부구조가 되어 있음 => 파이썬에서는 딕셔너리 타입을 사용하면 되므로 해쉬를 별도로 구현할 필요가 없다. 배열로 미리 Hash Table 2. 용어 해쉬: 임의 값을 고정 길이로 변환하는 것 해쉬 테이블: 키 값의 연산에 의해 직접 접근이 가능한 데이터 구조 해싱 함수: key에 대해 산술 연산을 하여 데이터의 위치를 찾을 수 있는 함수 해쉬 값 또는 해쉬 주소: key를 해싱 함수로 연산해 해쉬 값을 알아내고, 이 .. 2022. 12. 23. 이전 1 2 다음
