분류 전체보기 (33) 썸네일형 리스트형 React 생명주기 함수 '변경' React 생명주기 함수 '변경'과정에 속하는 함수는 shouldComponentUpdate()로 여기서 '변경'이란 props나 state의 변경을 말한다. shouldComponentUpdate() 함수의 실행을 확인해 보기 위해 다음과 같이 코드를 수정해 보자. import React, {Component} from 'react'; class Component1 extends Component{ static getDerivedStateFromProps(props, state){ console.log('2번'+props.value+'실행'); return {sValue:props.value, eValue:'중간 두번째'}; } constructor(props){ super(props); this.st.. React 생명주기 함수 '생성' React에서 생명주기란, component의 생성, 변경, 소멸 과정을 뜻한다. 그중 render(), constructor(), getDerivedStateFormProps(), componentDidMount() 함수들은 '생성'에 속하며 사용방법은 다음과 같다. 1. render() render()는 return 되는 html 형식의 코드를 화면에 그려주는 함수로 다음과 같이 사용할 수 있다. import React, {Component} from 'react'; class Component1 extends Component{ render(){ return( [component1 입니다] ) } } export default Component1; 위와 같이 적용하면 component1을 사용하는 .. React Component 사용하기 1. component란 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말하며 component를 파일 단위로 작성 후 필요한 위치에 import 후 사용할 수 있다. 2. component 만들기 1) component를 만들기 위해 component들을 관리할 component폴더를 src 폴더 안에 먼저 만들어주자. 2) component폴더 안에 Component1.js 파일을 생성해 주고 3) 파일 안에 다음과 같이 코드를 작성해 준다. import React, {Component} from 'react'; class Component1 extends Component{ render(){ return( [component1 입니다] ) } } export d.. React 메인 바꿔보기 1. JSX React를 처음 설치하고 App.js에 들어가 보면 보이는 코드로 JSX(Javascript Syntax eXtension)으로 작성된것을 볼 수 있다. JSX는 React로 프로젝트를 진행할때만 사용되므로 공식적인 Javascript 문법은 아니며, Javascript와 html을 동시에 작성해 편리하며, 브라우저에 실행될 때 바벨을 사용 해 일반 자바스크립트 형태의 코드로 변환된다. 그 외 가장 큰 특징 2개를 더 알아보자면 1) 요소가 하나 이상이면, 반드시 부모 요소가 존재해야한다. Virtual DOM을 사용하는 React 특성 상 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM Tree 구조로 이루어져야한다는 규칙이 존재해 부모요소가 필요하다.. React의 구조 React 설치 후 기본 폴더트리를 간단하게 살펴보자면 다음과 같다. 1. node_modules : React에 필요한 모듈들이 위치하는 폴더 2. public : static 파일들이 저장된 폴더 1) favicon.ico : 브라우저 상단 탭에 나타나는 페이지 아이콘 2) index.html : title, meta 등 페이지에 대한 기본 정보 3) manifest.json : PWA에 필수로 포함되는 파일 4) robots.txt : 웹 크롤러 같은 로봇의 접글을 제어하는 규약 3. src : React를 작업할 폴더 1). css : 컴포넌트들에 대한 css파일 2) App.js : CRA가 기본 제공하는 예제 파일 3) index.js : App.js에 있는 컴포넌트들을 index.html과 .. 순서도와 C언어의 기본 1. 주요 순서도 기호 2. C언어의 변수 변수란 컴퓨터가 명령을 처리하는 도중 발생하는 값을 저장하기 위한 공간으로, 변할 수 있는 값을 의미. 변수는 저장하는 값에 따라 정수형, 실수형, 문자형, 포인터형 등으로 구분 예 1) main() { A = 3; A = 5 + 3; A = A + 5; } 1번째 줄 실행 결과 : A = 3 2번째 줄 실행 결과 : A = 8 3번째 줄 실행 결과 : A = 13 변수명 작성 규칙 - 영문자, 숫자, _를 사용하며 글자 수에 제한이 없음 - 중간에 공백을 포함할 수 없음 - 대, 소문자를 구분 - 첫 자는 영문자나 _로 시작 - 예약어는 사용할 수 없음 - 변수 선언 시에도 문장 끝에 반드시 세미콜론(;)을 붙여야 함 C언어의 예약어 구분 예약어 자료형 cha.. 아키텍처 스타일 기존의 시스템이나 애플리케이션을 개발자가 아닌 다른 사람이 유지보수를 해야 하는 경우 서로 설계 방식이 달라 코드를 분석하는데 많은 어려움이 따름. 이를 해결하기 위해 많은 사람들과 신뢰 있는 기관에서 검증된 보편적인 설계 방법의 양식들을 사용하는데, 이것을 아키텍처 스타일이라고 함. 아키텍처 스타일에 있는 여러 설계 방식들을 아키텍처 모델이라고 부르며, 애플리케이션 개발 모델이라고도 부름 1. IEEE 1471 ANSI / IEEE 1471-2000의 약어로, 소프트웨어 집약적인 시스템에서 아키텍처가 표현해야 하는 요소와 내용들, 이들 간의 관계를 규정하고 있는 국제 표준 - 특징 1) 표준화 : 아키텍처 관련 용어와 개념들을 통일함 2) 중립성 : 모델링 언어와 방법론을 제시하지 않고, 독립적인 메타.. 객체지향 기법의 생명 주기 1. 객체지향 기법의 생명 주기 - 객체지향 기법을 사용하는 소프트웨어 개발 과정의 가장 큰 특징은 각 과정에서 사용하는 객체, 클래스, 메소드, 속성 등이 동일한 개념으로 사용된다는 것 - 개발 전 과정에 걸쳐 동일한 방법론과 표현 기법이 적용된다는 장점을 갖고 있음 - 개발 과정 사이에서 같은 용어와 개념을 사용하여 분석, 설계, 구현 단계 사이의 전환이 쉬우므로 각 과정이 명확하게 순차적으로 이루어지지는 않음 - 객체지향 기법의 생명 주기는 계획 및 분석, 설계, 구현, 테스트 및 검증 과정으로 이루어짐 계획 및 분석 -> 설계 -> 구현 -> 테스트 및 검증 2. 객체지향 분석 객체지향 분석(OOA: Object Oriented Analysis)은 사용자의 요구사항을 분석하여 요구된 문제와 관련된.. React 개발 환경 준비하기 지난번엔 React에 대해 알아보았으니 이번엔 React 설치하는 방법과 개발 환경 준비를 해보자 React는 앞서 이야기 한것처럼 자바스크립트 라이브러리이기 때문에 자바스크립트 패키지 관리 도구를 통해 다운받아야한다. 자바스크립트 패키지 관리 도구에는 크게 3가지가 있는데 npm과 yarn 그리고 pnpm이 대표적이다. 1. 자바스크립트 패키지 관리 도구(Javascript Package Manager) 자바스크립트 패키지 매니저라고도 불리며 개발에 필요한 패키지 설치, 수정, 삭제, 업데이트를 쉽고 편리하게 도와주는 도구다. 대표적으로 npm, yarn이 있고 국내에는 잘 알려져있지 않지만 pnpm도 존재한다. 1) npm npm은 Node.js의 기본 패키지 관리 도구로 가장 많이 사용하고 있으며 .. React React는 페이스북에서 개발된 오픈소스 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위해 사용되며, 단일 페이지 애플리케이션(Single Page Application, SPA)을 구축하는 데 가장 많이 사용되고 있다. 그리고 가상 DOM을 기반으로 한 선언적이고 효율적인 컴포넌트 기반 아키텍처를 갖추고 있으며 이러한 특징으로 Angular, Vue와 함께 프론트엔드 개발 시 많이 채택되어 사용되고 있으며, 그중에서도 React가 가장 많이 사용되고 있다. React의 주요 특징 1. 컴포넌트 기반 아키텍처 : React는 재사용 가능한 UI 컴포넌트를 작성하는 데 중점을 둬 코드의 가독성과 유지보수성을 높여주며 개발 생산성을 향상시킨다. 2. 가상 DOM (Virtual DOM) : .. 이전 1 2 3 4 다음
