React는 메모리에 Virtual DOM(가상돔)을 생성하고 이를 활용하여 이벤트가 발생할 때 마다 실제 DOM과 상태를 비교하여 변경이 필요한 최소한의 변경 사항만 실제 DOM에 반영하여 렌더링되기 때문에 렌더링 효율성이 좋다. 이러한 특징으로 유저와 상호작용하는 동적인 웹페이지 개발 시 자주 채택된다.
2. Data Flow
Data Flow(데이터 방향)는 한 방향으로 흐르는 단방향이다. 데이터흐름이 양방향인 경우 어플리케이션의 규모가 커질 수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경우가 발생한다. 이와 달리 단방향으로 개발된 어플리케이션은 데이터를 추적하기 수월하고 변화에 대한 예측이 가능하여 디버깅이 쉬운 장점이 있다.
3. JSX를 활용한 컴포넌트 개발
React를 사용할 때 필수적인 요소는 아니지만 보편적으로 필수적 요소처럼 사용되고 있다. 개인적인 견해로 JSX를 활용하였을 때 가장 큰 장점으로는 "개발의 생산성의 증대"라고 생각한다. JS코드내에서 즉시 UI구현 작업이 가능하고 가독성 또한 좋아지기 때문이다.
4. Props & State
Props는부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 의미하며 readonly 타입의 데이터이다. props는 변경이 불가능한 불변데이터이고 props를 전달해 준 최상위 부모 컴포넌트에서만 props를 변경할 수 있다.
State는컴포넌트 내부에서 선언하여 값을 변경할 수 있어 동적인 데이터를 다룰 때 주로 사용된다. 사용자와 상호작용을 통해 데이터를 동적으로 변경할 때 사용되며 각각의 state는 독립적인 데이터이다.
5. Hooks
React가 함수형 컴포넌트를 표준으로 제공하면서 생긴 개념으로, React state와 Life cycle을 연동할 수 있게 해주는 함수를 뜻한다. 대표적으로 useState, useEffect, useCallback, useMemo 등이 있다.
마치며...
지금 껏 개발에 대한 포스팅을 해오며 돌이켜 생각해보면 react훅을 제외하면 나의 주력인 react에 관한 포스팅이 단 하나도 없다는 것이 조금 놀라웠다. 기술에 대한 이론적 역량을 보완하기 위해 react의 개념을 복기하며 포스팅하였고 알고 있더라도 포스팅을 하고 안하고의 차이는 꽤 크니 앞으로 꾸준히 노력하며 포스팅해야겠다.
// 기본적으로 활용하는 방식
let arr = ["Ze", "Riong"];
let [firstName, surname] = arr;
console.log(firstName); // Ze
console.log(surname); // Riong
// 필요하지 않은 데이터는 , 를 사용해서 건너뛰기가 가능하다.
let array = ["A", "B", "C", "D", "E"];
let [a, , c, ,e] = array;
console.log(a) // "A"
console.log(c) // "C"
console.log(e) // "E"
// 할당 연산자 우측에 배열 뿐 아니라 모든 이터러블(반복 가능한 객체)이 올 수 있다.
let [a, b, c] = "all";
let [on, tw, th] = new Set([1, 2, 3]);
console.log(a, b, c) // a l l
console.log(on, tw, th) // 1 2 3
이렇게 구조 분해 할당에 대해 이해했다면 대충 감이 올 수도 있다.
아래 예제 코드를 통해 어떻게 변수 값을 교환할 수 있는지 알아보자.
구조 분해 할당을 활용한 변수 값 교환
변수는 이터러블 구조가 아닌데 어떻게 구조 분해 할당을 활용할까?
답은 간단하다. 변수를 배열에 넣어 이터러블하게 만들고 재할당하는 방식이다.
백문이 불여일견!
let str = "string";
let num = 230;
console.log(str) // "string";
console.log(num) // 230;
// 배열 내부에 변수를 넣어 이터러블 구조를 만들고 swap
[str, num] = [num, str];
console.log(str) // 230;
console.log(num) // "string";
마치며...
운이 좋게 서류합격을 하고 기술 면접을 보았는데 두 변수의 값을 서로 할당해주기 위한 방법을 서술해보라는 질문이 있었다. 나는 올드한 방식으로 새로운 변수를 선언하고 값을 할당하는 방식으로 설명하였고 면접이 끝나고 찾아보니 구조분해할당을 활용하는 트렌드한 방법이 존재했었다... 분명 당시의 질문 의도는 이러한 방식을 활용한 변수 값 교환에 대해서 설명하길 바랐을 것이다. 앞으로도 좀 더 다양한 방식에 대한 자료를 찾고 이해하기 위해 노력해야겠다.
코드를 축소하여 최적화하고 사용하지 않는 코드를 제거하여 빌드하는 방식으로 성능을 최적화할 수 있다.
CSS가 아닌 SASS 혹은 stylus, Typescript 사용 시 컴파일 과정에서 필요 플러그인을 추가하고 번들러를 실행해준다.
종속성 문제의 해결
Webpack의 단점
일부 패키지들을 loader를 통해 매번 추가해주어야 하며 추가하고자 하는 자원의 타입에 따라 추가해 주어야 하는 loader가 다를 수 있기 때문에 러닝커브가 다소 있는 편이다.
Install
# 웹팩, 개발자 서버 인스톨
npm i -D webpack webpack-dev-server
# 필요한 플러그인 및 로더 설치 (css, sass, static copy plugin, env 등)
npm i -D html-webpack-plugin dotenv-webpack css-loader copy-webpack-plugin cross-env source-map-loader sass-loader clean-webpack-plugin
웹팩(개발자 서버 포함)과 필요한 로더와 플러그인을 설치한다.
webpack.config.js 분리
html / css / vanillaJS 구성으로 웹팩 적용하였으며 config 작성할 때 common, dev, prod로
나누어 빌드환경에 맞춰 별도로 관리해주었다.
webpack.common.js
공통으로 적용 될 config를 작성한다.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const DotEnv = require('dotenv-webpack');
module.exports = {
entry: {
main: path.resolve(__dirname, '../src/script.js'),
},
output: {
path: path.resolve(__dirname, '../public'),
filename: '[name].min.js'
},
// target: ['web', 'es5'], // es5 환경 작업 시 사용
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader'],
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(glb|gltf)$/,
use: ['file-loader']
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
filename: 'index.html',
minify: true,
}),
// origin 그대로 복사할 파일을 지정
new CopyWebpackPlugin({
// 빌드 시 public 폴더에 자동 생성(patterns 경로에 해당 파일이 없으면 에러발생)
patterns: [
{ from: path.resolve(__dirname, '../static') },
{ from: path.resolve(__dirname, '../src/style.css') },
]
}),
// dotenv-webpack패키지를 통한 환경변수(env) 사용
new DotEnv({ path: '.env' }),
]
};
다수의 Mesh, Light, Group, Object3D, Camera로 이루어진 트리 구조이다.
배경색, 안개, 다수의 오브젝트, 빛, 질감 등을 표현하는 화면이다.
Scene은 최상위 노드이기 때문에 객체의 위치와 방향이 부모(Scene)기준이다.
Camera
Camera는 다른 구성 객체와는 달리 Scene 그래프에 포함되지 않으며
Scene객체를 촬영하여 어떻게 보여줄 것인가를 결정하는 역할을 한다.
Light
여러 종류의 광원을 말하며 이는 즉 조명을 뜻한다.
AmbientLight, SpotLight, DirectionalLight 등 다양한 광원을 활용하여
Scene에 존재하는 다양한 3D요소들을 3D 공간 공간에서 볼 수 있다.
Geometry
3D요소의 모양을 정의할 수 있으며 내장객체 또는 파일을 통해 형상을 만들 수 있다.
Material
질감을 뜻하며 표면의 색상, 투명도, 질감을 나타낼 수 있다.
Mesh(Object3D)
Mesh는 특정 Material의 속성을 가진 Geometry를 그리는 객체이다.
Mesh는 3D공간 상의 위치와 특정 기준 축 회전 등을 결정할 수 있으며
Material과 Geometry는 재사용이 가능하여 여러 Mesh가 특정
Material, Geometry를 동시 참조 가능한 특징이 있다.
마치며...
오늘은 Three.js의 기본 구성과 개념에 대한 포스팅만을 진행했지만 현재 Three.js를 사용한 프로젝트가 완성에 가까워졌고 완성된이후에Three.js에 대한 추가 포스팅을 진행할 예정이다. 언제나 개발을 통해 기능을 구현하는 것도 중요하지만 가장 중요한 것은 사용한 기술에 대한 개념, 원리를 명확히 이해하고 있는 것이라 생각하고 있고 나에게는 하나의 원칙이기도 하다. 앞으로도근거 있는기술의 사용과 검증 가능한 코드를 지속하기 위해 더 나은 노력할 것이다.
getServerSideProps를 사용할땐 반드시 해당페이지의 메인 컴포넌트 파일(index.tsx)에서만 사용가능하다.
마치며...
처음에 ssr기능이 그저 next.js프레임워크를 사용하기만하면 되는 줄 알았는데 전혀 아니였다. 항상 새로운 프레임워크를 사용할땐 공식페이지에서 Document를 꼭 정독하고 프레임워크가 지향하는 개발의 자연스러운 방향과 기능들에 대해 인지하고 적재적소에 사용할 수 있도록 준비해두는 것이 개발자로서 더 올바른 자세라는 것을 깨달았다.
className내에서 백틱과 중괄호를 사용하여 `${isShow ? 'visible' : 'invisible'}` 와 같은 조건문을 넣거나 함수를 포함시켜 사용할 수도 있으며 tailwindCSS에 지정된 className이 없는 경우에는 w-[16vh] 와 같이 대괄호를 사용하여 사용자지정 CSS를 적용시킬 수도 있다.
마치며...
나는 tailwindCSS의 존재를 알게 된 이후로 사실상 style적용은 모두 tailwindCSS로 하고 있다. 처음엔 낯설게 느껴졌지만 프로젝트를 진행하면서 지속적으로 사용하고 사용성에 대해 저울질을 해본 결과 tailwindCSS의 압승이었다. 앞으로도 채택할 수 있다면 tailwindCSS를 채용하여 프로젝트를 진행할 예정이다.
Javascript를 기반으로 하는 오픈소스이며 Type을 추가하여 올바른 입출력값의 Type을
미리 가이드할 수 있고 해당 Type이 아닌경우 ide가 에러를 일으키기 때문에
문제를 원천적으로 방지할 수 있다.
Typescript에 대한 견해
분명 대부분의 개발자들이 코딩을 입문한지 얼마 안됐을때 나와 비슷한 생각을 했을 것이다. "그냥 코드간결하고 실행 잘되고, 가독성 좋으면 그만이지 코드 난잡해지게 굳이...?"하지만 이 생각은 단 하나의 Toy프로젝트를 만들고 달라지게 되었다.
가장큰 이유는 뜻밖의 에러, 의도치 않은 결과가 실행되는 경우가 적지 않기 때문이었다.
이러한 경우 나는 코드의 Type 문제가 90%였고 내가 혼자서 만드는 Toy프로젝트만 해도 이런데
만약 현업을 하게된다면...? 이건 엄청난 기여를 하겠구나 하고 생각하게 되었다.
특히나 코드의 양이 방대해진다면 나라면 고민할 것도 없이 채택해야겠다! 라고 생각했다.
타입스크립트를 사용하지 않는 가정하에현업을 하여 방대한 코드를 여럿이서 공유하며
개발을 한다고 가정해보면 내가 직접 의도하여 만든 함수나 변수가 아니기 때문에
하나하나 추론을 해 나아가며 return되는 값의 Type이나 함수에 매개변수로는
어떤 Type이 들어가야하는지 등을 알아내기 위한 시간비용은 무시할 수 없다.
이런 문제는 Typescript의 사용만으로 크게 개선될 수 있고 엄청난 시간을 절약할 수 있게 된다.
나에게 이것 만으로도 Typescript를 사용해야하는 이유로 충분해졌다.
Typescript Install
1. npm install
npm install -g typescript
기본적인 타입스크립트의 인스톨 방식
2. tsconfig.json
//tsconfig.json 파일을 만들고 아래 코드입력
{
"compilerOptions" : {
"target": "es5",
"module": "commonjs",
}
}
Typescript를 사용하기 위해서는 반드시 tsconfig.json파일이 존재해야한다.
3. ts -> js 변환
//터미널에 입력 (basic javascript의 경우만)
tsc -w
4. React Typescript 생성
//react와 마찬가지로 node 버전이 14, 혹은 그 이상인 경우만 가능.
npx create-react-app@latest my-app --template typescript
5. Next Typescript 생성
npx create-next-app --ts
//이 후 "What is your project named?" 메시지가 뜨면 프로젝트 이름을 입력하면 된다.
사용예시
let name :string = "문자만"
//string, boolean, number, null, undefined, bigint, [], {} 등 있다
let name :string[] = ["kim", "park"]
//name변수엔 array에 string인 값만 할당 할 수 있다.
let NAME :{ name : string } = { name : 'kim' }
//NAME변수에 할당된 key(name)속성에 값은 string만 올 수 있다.
let 이름 :{ name? : string } = { name : 'kim' }
//이름변수에 name이란 속성이 올지말지 확실하지 않을땐 물음표를 사용해서
//있을수도 있고 없을 수도 있는 옵션인 타입으로 지정해줄 수 있다.
let name :string | number = 'kim';
let name :string[] | number = [ 'kim', 123 ]
//이런식으로 or기호를 넣어주면 타입 중 하나만 들어가도
//에러가 뜨지 않는다.
//Union type 이라고도 한다.
type myType = string | number;
let name :myType = 123;
//이렇게 타입변수를 만들어줘서 사용도 가능하다.
function FUC (x :number) :number {
return x * 2
}
FUC( "123" );
//이런 경우 매개변수타입은 number이고 리턴값도 number여야 하기때문에
//에러가 뜬다. 반드시 number Type으로 적어줘야 제대로 작동한다.
type Member = [number, boolean];
let john:Member = [ 123, false ];
//array타입을 만들때 예시이다.
//tuple타입이라고 한다.
type Member = { name : string };
let john :Member = { name : 'kim' };
//이렇게 name이라는 key엔 스트링이 들어가야한다.
//만약 name속성 외에도 age, address 등등 여러 속성이 필요할 경우
//아래와 같이 대표적으로 지정이 가능하다.
type Member = { [key :string] : string };
let john :Member = { name : 'kim', age : '123', address };
class User {
name :string;
constructor(name :string){
this.name = name;
}
}
class 타입지정도 할수 있다.
마치며...
사용예시의 경우 간단하고 대표적인 예만 명시해 두었지만 실제로 프로젝트를 진행하면서 더욱 다양하고 많은 Typescript를 사용하고 있다. 다행이 document에서 서술이 잘 되어있고 여러 사람들이 사용하는 만큼 타 기술블로그에서도 이해하기 쉽게 서술하고 있어 러닝커브가 크지 않았던 것 같다. 앞으로도 잊지말고 typescript 해야겠다.
