[리액트를 다루는 기술] 3. 코드이해하기
·
Book
1. 코드 열어보기 만든 플젝트를 연후 src/App.js 파일을 열어보자 import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 여기서 코드를 하나씩이해해본다 import logo from './logo.svg'; import './App.css'; import 구문이 사용할시 다른 파일들을 불러와 사용할수있다. 이렇게 모듈들을 불러와서 사용할수있는건 브라우저에 없는 기능이였다 브라우저가 아닌 환경인 Node.js에서 사용해온방법이다. (requrire 구문으로 import) 이러한 기능을 브..
[리액트를 다루는 기술] 2. 작업 환경 설정
·
Book
리액트 프로젝트를 만들어보자 1. Node.js와 npm 설치 리액트 프로젝트를 만들때는 Node.js를 반드시 설치해야한다. Node.js는 자바스크립트 런타임이다. 이것으로 웹브라우저 환경이아닌곳에서도 자바스크립트를 사용하여 연산할수있다. 리액트 애플리케이션은 웹브라우저에서 실행되는 코드이지만 ECMASCRIPT 6, 바벨, 웹팩, 서버구현 등등 필요한 여러 도구들이 Node.js를 사용하기 때문에 Node.js 설치를 한다. Node.js 설치시 Node.js 패키지매니저도구인 NPM이 설치된다. 아래 사이트에가서 최신버전 또는 LTS버전의 node.js 를 설치할수있다. LTS버전은 장기적으로 안정적인 지원을 제공하므로 LTS버전을 설치하는것도 추천한다 (매10월쯤 버전업데이트됨) https://..
[리액트를 다루는 기술] 1. 왜 리액트인가?
·
Book
리액트는 오직 view만 신경쓰는 라이브러리다. 리액트 라이버리는 뷰를 어떻게 렌더링하길레 데이터가 변할때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할수있었을까?? 우선 리액트에대한 이해를 해보자 1. 초기 렌더링 render() { ... } 이 함수는 뷰가 어떻게생겼고, 작동하는지에 대한 정보를 지닌 객체를 반환하는 함수이다. 컴포넌트 내부에는 또다른 컴포넌트가 들어갈수있어서 이때 render함수를 실행하면 내부에있는 컴포넌트도 재귀적으로 렌더링한다. 렌더링 : 사용자 화면에 뷰를 보여주는것이다. 즉 렌더링 -> HTML마크업생성 -> DOM요소 안에 주입 이런순으로 주입된다. 2. 조화과정 (reconcilation) 리액트는 데이터가 변화가있을때 새로운 요소로 갈아끼우므로..
[코딩을 지탱하는 기술] 처리 흐름 제어
·
Book
구조화 프로그래밍의 탄생 사람이 프로그램을 보다 편하게 쓰고 읽을 수 있도록 규칙을 만들자는 흐름을 타고 ‘구조화 프로그래밍'이 태어났다. (else나 else if 없는) 어셈블리어 표현 방법 만약 oo 이면 xx를 해 라고 표현하고 싶지만 만약 oo 가 아니면 어디로 점프해 , 그리고 xx 를해 라고 뒤집어서 표현해야하기 때문에 혼란수러울수 있다. (c언어) if else는 왜 있는 걸까? if 문을 배웠을때는 분명 else나 else if 등과 함께 배웠을 것이다. else나 else if 가 없으면 프로그램을 짤수 없을까?? C 언어의 표현 방법부터보자 void not_use_if(int x){ if(x =0) goto NOT_NEGATIVE; printf("마이너스 숫자\\n"); goto EN..
[코딩을 지탱하는 기술] 한 문자가 16비트인 JAVA 문자열 [수정중]
·
Book
우선 java의 String 에대해서 알아보자 JAVA로 개발하다보면 제일많이 쓰이는 클래스가 String 클래스이다. String 이란? String 클래스는 문자열을 다루는 클래스미여 불변하다는 특징이있다. String 객체에 값이 초기에 할당되면 그 값은 변경되지 않는다. String 객체 생성방법 @DisplayName("String 객체 생성방법") @Test void test1(){ String a1 = "a"; String a2 = new String("a"); System.out.println("a1 = a2 : " + (a1 == a2)); } 리터럴로 생성될경우 String 객체는 String constant pool 이란 공간에 저장이된다. new 연산자로 생성될 경우 Heap 영역에..