kumm

[리액트] 개발환경 구성하기

키밸류 — Mon, 3 Jan 2022 11:04:51 +0900

리액트 개발 환경 구성하기

1. Node.js 설치

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

노드는 자바스크립트(javascript) 어플리케이션을 실행할수 있는 환경을 제공해주는 서버이다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도 소프트웨어 없이 동작하는 것이 가능하다.

node를 설치하면 npm(node package mager)를 사용할수 있다.

npm이란?

node에 포함되어있는 기본 패키지이며 개발에 필요한 패키지들은 설치, 제거, 버전관리를 해줄수 있다.

노드 설치가 끝났다면 cmd 창을 열어버전을 확인해보자. 버전이 잘 뜬다면 설치가 잘 된 것이다.

2. VS CODE 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

마이크로 소프트에서 개발한 소스코드 편집기이다. 디버깅, git, 하이라이트 등등 기본 기능으로도 강력하지만 다양한 확장프로그램들이 있어 활용하면 활용할수록 편리한 편집기다. 무엇보다도 프로그램이 가벼워 react 프로젝트를 진행할때 아주 좋다.

vs code 실행화면

vscode의 유용한 확장프로그램(extention) 추천

왼쪽 탭중 아래에서 두번째 확장프로그램 탭으로 들어가면 다른 사용자들이 만들어 놓은 다양한 확장프로그램들을 볼 수 있다. 개발에 필요한 왠만한 확장프로그램은 다 있으니 찾아보고 설치하면 좀더 생산성 높은 프로그래밍을 할 수 있다.

3. Github Desktop

https://desktop.github.com/

GitHub Desktop

Simple collaboration from your desktop

desktop.github.com

Git 소스관리를 보통 CLI환경인 터미널에서 명령어를 통해 진행하게되는데, 이 프로그램은 GUI로 사용할 수 있도록 도와준다. 기본적으로 Github 계정이 있어야하고 Github을 사용할줄 알아야한다.

형상관리도 되고 언제 어디서나 인터넷만 연결되어있으면 소스코드를 받아 코딩을 할 수 있기 때문에 Github은 개발자 필수 프로그램이라고 생각한다.

[리액트] 알고쓰자 React Hook

키밸류 — Sun, 2 Jan 2022 17:32:38 +0900

1. useState

함수형 컴포넌트에서 상태(state)를 관리해야 하는 일이 있을때 사용한다.
배열을 리턴하는데 첫번째 원소는 value, 두번 째 원소는 setter를 반환한다. hook에 파라메터로 넣는 것은 초기 값이다.

import React, { useState } from 'react';

const [value, setValue] = useState(0); //초기값 0

2. useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있다.

import React, { useEffect } from 'react';

useEffect(()=>{
	//컴포넌트 렌더링시에 수행하고 싶은 작업
	console.log('렌더링');
},[]);

두번째 인자는 배열을 받는다. 이는 특정 값이 업데이트 될때만 useEffect를 실행하도록 할 수있다.

import React, { useEffect } from 'react';

useEffect(()=>{
	console.log('이름이 바뀌었어요!');
},[name]); //name의 값이 변할때마다 useEffect에 정의한 함수가 실행된다.

3. useContext

context 객체(React.createContext 에서 반환된 값)을 받아 context의 현재 값을 반환한다.

원래는 자식 컴포넌트와 props를 공유하려면 createContext로 Context를 만들고 Provider를 통해서 전달해야한다. 그러나 2중 3중으로 전달해야할 경우가 생기면 코드가 길어지고 난잡해진다.
useContext를 사용하면 이런 복잡한 구조를 해결해 줄 수 있다.

/*TestContextProvider*/
import {createContext, useState} from 'react'

//conetext 생성
export const TestContext = createContext({
 test: '',
 testHandler: (name:string) =>{}
});

//Context Provider 정의
export function TestContextProvider({ children }: { children: React.ReactNode }) {
  const [value, setValue] = useState('');
   
  return (
    <TestContext.Provider value={{test:test, testHandler:setValue}}>
        {children}
    </TestContext.Provider>
  );
}

/*App*/
import TestContextProvider from './TestContext'

const App =()=>{
 return (
	//TestContextProvider 로 App을 감싸줌
	<TestContextProvider>
         <div className='App'></div>
    </TestContextProvider>
  )
}

TestContextProvider로 App을 감싸줌으로써 App내부에 있는 자식 요소에서 useState를 통해 언제든지 Test Context를 가져올 준비가 됨.

import {useContext} from 'react';
import {TestContext} from './TestContext'

const childComponent = () =>{
 const {test, testHandler} = useContext(TestContext);//아주 쉽게 Context정보를 가져올 수 있다.

 return <div></div>
}

export default childCompnenet;

4. useReducer

reducer는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션(action)값을 전달받아 새로운 상태를 반환하는 함수이다.

function reducer(state, action){
	return {...}
}

const initialState = ;

function reducer(state, action){
	//action type에 따라 다른 작업 수행
	switch(action.type){
		case "Login":
			return {
				jwt: action.jwt,
				user: action.user
			}
		case "LOGOUT":
			return {
				jwt: undefined,
				user: undefined
			}
		default:
			throw new Error("Unhandled action");
	}
}

const Auth = () =>{
		const [state, dispatch] = useReducer(reducer, initialState);
}

첫번째 파라미터는 리듀서 함수, 그리고 두번째 파리미터는 해당 리듀서의 기본 값이다.

useReducer는 state값과 dispatch 함수를 리턴하는데 state는 현재 핸들링하는 상태 값이고 dispatch는 액션을 발생시키는 함수이다 즉 dispatch(action) 으로 리듀서 함수를 실행 시킬 수 있다.

useReducer를 사용했을때의 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 꺼낼 수 있다는 점이다.

그래서 Context와 함께 사용하면 어플리케이션 어디에서든지 state값을 업데이트 할 수 있다.

[코드 걸음마] 비교 연산자, 하나의 state로 관리할것

키밸류 — Sun, 2 Jan 2022 17:21:51 +0900

1. 논리 연산자를 잘 사용하여 코드량을 줄이자

/*
BEFORE
두개의 함수를 사용하다보니 코드양이 길어진다
*/
const handleClickOpen = () => {
    setOpen(true);
  };

const handleClose = () => {
    setOpen(false);
};

/*
AFTER
논리 연산자를 사용하여 하나의 함수로 처리하였고 코드양도 줄어들었다
*/
const toggle = () => {
    setOpen(!open);
};

!과 같은 논리연산자와 삼항연사자를 통해 if문을 대체하거나 여러개로 쪼개져있는 함수들을 하나로 처리할수 있는 경우가 많다.

2. 하나의 state로 관리할 것

개별적으로 컴포넌트들을 렌더링한다고 컴포넌트마다 state를 지정해주면 코드가 한없이 복잡해 질 것이다.

하나의 역할로 묶을 수 있다면 하나의 state로 관리해보자

/*
BEFORE
각각의 state를 선언하여 관리하면 코드양이 많이지고 관리포인트가 많아져 복잡히다.
*/

const [name, setName] = useState<string>();
const [age, setAge] = useState<number>();
const [height, setHeight] = useState<string>();

/*
AFTER
타입을 선언해주고 하나의 state로 관리해주면 코드도 간결해지고 가독성도 올라가 좋다
*/

interface User{
 name: string
 age : number
 height: string
}

const [profile, setProfile] = useState<User>();

설레는 첫걸음, 임신준비

키밸류 — Sat, 1 Jan 2022 21:33:27 +0900

결혼을 하고 처음으로 임신에 대해 이야기를 나누어봤다.
내가 알고있었던 임신은 "생각보다 아이가 잘 생기지 않는다" "엽산 먹어야한다" 정도?였다.
막상 대화를 나눠보니 우리둘다 임신에 대해서 몰라도 너무 모르는 상태였고.. 주변 인생 선배들께 건네들은 정보 뿐이었다.

이젠 본적격으로 우리가 정보를 찾고 우리만의 임신 준비를 해야 할 것 이다.

임신준비에 있어서 가장 중요한 것은 부부가 함께 준비해야하는 것이다. 함께 준비할때 건강한 아이가 태어날 가능성도 올라가고 함께 준비하기 때문에 몸과 마음이 더욱 행복하게 준비 할 수 있는 것같다.

앞으로 3개월동안 열심히 준비해서 우리의 첫 임신을 잘 성공시켜볼 생각이다.
그렇게 하기위해선 4가지를 앞으로 잘 지켜야 할 것같다.

1. 엽산 챙겨먹기

엽산은 세포와 혈액 생성에 특히 중요한 역할을 하며, 임신초기 태아의 신경과 정신 발달에 필수적인 영양소다. 그렇기 때문에 엽산이 결핍되었을때 태아 건강의 위험도를 높일 수 있어 엽산은 꼭 섭취해줘야한다.
엽산의 복용시기는 계획한 임신 시점부터 최소 3개월 전부터 섭취해야한다고 한다. 그렇기 때문에 지금부터 시작하면 3개월 이후에 첫 임신 시도를 해볼 수 있지 않을까 싶다.
엽산은 아내뿐만이 아니라 남편도 잘 챙겨먹어야하는데 그 이유는 건강한 정자 생산에 도움이 되기 때문이다 ㅎㅎ 자기 자신감을 너무 믿다가 큰코다치는일 없기를!

<엽산이 많은 음식>
아스파라거스, 시금치, 양배추, 브로콜리
바나나, 딸기 등

임신중에는 음식만으로 엽산을 충분히 공급하기 어렵기 때문에 영양제를 챙겨먹는 것이 좋다.

2. 스트레스 안받기

이게 뭔소린가 싶겠지만... 스트레스가 정말 중요하다고한다. 특히나 산모에겐 정신적인 스트레스가 태아에게도 직접적으로 영양을 미치기 때문에 각별히 조심해야할 것이다.
남편이 됨어서 임신과 출산의 고통을 나눌수 없다면 아내의 스트레스를 줄여주고 정신적인 안식처가 되기를 노력해보자.
내 아내는 말 한마디 한마디에 마음이 녹았다 얼었다 하는 성격이라 좋은말 따뜻한말을 침이 마르도록 해볼 생각이다. 사실 바라만봐도 좋기때문에 표현을 조금더 해보려고 노력해보자

당신은 너무 예뻐
모든게 잘될꺼야
내가 옆에 있잖아 걱정하지마

3. 기초체온 높이기

기초체온을 높이는건 어떤말이냐?
요즘 30대 성인들중에 운동부족으로 혈액순환이 잘 안되어 손발이 찬경우가 많다. 나 또한 대학생때 까지만해도 손발이 너무 차가워서 누군가의 손을 따뜻하게 잡아준다는걸 상상도 못해봤다. 하지만 적당한 운동과 규칙적인 생활로인해 지금은 아무리 추운 한겨울에도 내 아내의 차가운 손을 따뜻하게 데워줄수 있는 손을 가지게 되었다.
기초체온을 높여주게되면 몸안의 신진대사가 활발해지고 면역력이 올라가 산모와 태아 건강에 아주아주아주 좋은 영향을 줄수 있다. 물론 임신 성공확률도 올라간다.
적당한 운동을 통해 기초체온을 높여줄 수 도 있지만 운동하는게 많이 힘들다면 반신욕/족욕도 좋은 방법이다.
우리 아내의 마음의 체온은 이쁜말로 따뜻하게 해줄것이고 몸의 체온은 함께 운동해가면 같이 올려볼 계획이다.

팔굽혀펴기가 힘들면 엎드려있기! 턱걸이가 힘들면 매달려있기! 달리는게 힘들면 걷기!
운동하자!

4. 임신전 검사 받기

아내와 내몸에 어떤 질병이 있는지? 부족한 항제가 있어 임신중에 어떤 질병에 걸릴 위험이 없는지? 지금의 몸상태로 임신을 시도해도 좋은지 검사를 받아봐야한다. 나는 현재 만성 비염을 앓고 있지만 이건 임신과 크게 상관없으니 건너뛰고 아내 같은경우는 오랬동은 빈혈을 앓고 있어 이 부분이 임신에 어떤 영향을 끼칠지 궁금하기도 하다.
평소 생활하는덴 지장없긴 하지만 피검사를 해보면 항상 빈혈수치로 나오기 때문에 임신에 영향을 줄수 있을까 싶다.
검사 후에 아무런 지장도 없다고 의사선생님이 말씀해주시면 좋을 것같다. 아내 손 잡고 보건소 갈 날도 머지 않은 듯 싶다.

어떤 결과가 나와도 우리는 이겨낼 수 있다~!
우리몸에 한걸음 더 가까워지는 시간

대전 유성구 명소, 나만의 작은 보물 덜레기근린공원

키밸류 — Sat, 1 Jan 2022 17:50:02 +0900

오늘의 계획은 점심을 먹고 하루종일 홈캉스를 즐기는 것이었다. 집에서 여유를 즐기고 있던중 창밖을 보니 너무나도 새파란 하늘을 보니 슬금슬금 몸이 시원한 바람을 맞고 싶어하는게 느껴졌다.

이대로 있을 수 없지 바로 옷껴입고 출발해보자!

보통 우리부부는 산책으로 은구비공원이나 유림공원을 가곤했지만 오늘따라 새로운 곳을 가고 싶었다.

그러던중 우리눈에 들어온 덜레기근린공원! 가잣!

덜레기 근린공원 초입

덜레기 근린공원은 대전의 다른 공원과는 다르게 광장같은 것이 없고 산책로로 시작되었다.
(나중에 알게되었지만 반대편에 광장도 있는 것 같긴하다 ㅎㅎ)

사진만봐도 시원하다

덜레기공원은 오름직한 동산으로 이루어진 산책코스였다.
4시쯤 걷기 시작한것 같고 해가 예쁘게 떨어지고 있었다

덜레기공원은 평소에 높은 산을 오르기 부담스러워하는 사람들에게 제격인 장소인 것 같다.
다른 유명한 공원들과 다르게 사람도 없어
새가 지저귀는 소리와 눈과 낙엽을 밟는소리에 집중 할 수 있었다.

노을이 비추는 덜레기 공원의 산책로는 참 한겨울에도 따뜻함을 주는 장소였다.
겨울의 노을은 짧지만 한없이 아름답다.

점심먹고 살짝 나른해질쯤 출발했던 산책은
우리에게 너무 값진 선물은 주었다.

쓰~~~읍 하! 얼마만에 느껴보는 깊은 숨인가

공원의 정상?쯤 왔을때 문득 하늘을 보았더니
몸과 마음 그리고 눈까지 시원해지는 덜레기공원이었다.

그날의 한적함과 평화로움.. 좋다

어느새 커피가 다 식기도 전에 우린 차로 돌아올 수 있었다.
짧지만 강렬했던 덜레기 공원 나만의 보물을 찾은 기분이었다

로드뷰길찾기지도 크게 보기

세상을 변화시킬 2022년 트렌드(1~10) by IEEE

키밸류 — Sat, 1 Jan 2022 14:48:53 +0900

1. 다양한 형태의 보안문제(Security Cross-Cutting Issues)

대규모 데이터 리포지토리의 성장과 데이터 분석의 출현은 악의적인 행위자, 정부 및 기업의 침입과 결합하여 문제의 판도라 상자를 엽니다. 이러한 환경에서 보안과 개인 정보의 균형을 어떻게 맞출 수 있을까?

2. 오픈 지식 재산 운동(Open Intellectual Property Movement)

오픈 소스 소프트웨어(open source software)와 오픈 액세스 퍼블리싱(open-access publishing)에 이르기까지 오픈 IP로의 움직임이 우리 앞에 와 있습니다. 앞으로 개인 및 기업에서 생산된 지식을 다른 사람들에게 퍼뜨리는 움직임이 많아질 것으로 보입니다.

3. 지속 가능성 (Sustainability)

전자 자동차, LED 조명, 새로운 유형의 배터리 및 칩, 재생 가능 사용 증가가 에너지 사용 증가와 컴퓨팅 활용의 폭발적인 증가를 막을 수 있을까?

4. 대규모 온라인 교육과정(Massively Online Open Courses)

MOOC는 전통적인 대학으로 등교하는 학생들은 줄여나갈수 있습니다. 교수진과 학생의 역할을 바꿔 고등 교육 환경을 변화시킬 잠재력이 있습니다. 메타버스의 하나의 축으로 자리잡을만한 분야인것 같습니다. 대규모 온라인 교육의 영향력은 얼마나 클까요?

5. 양자 컴퓨팅(Quantum Computing)

물리학 법칙에 의해서만 제약을 받는 양자 컴퓨팅은 잠재적으로 무어의 법칙을 다음 10년으로 확장할 것입니다. 상용 양자 컴퓨팅이 다가옴에 따라 새로운 혁신이 가속화되는 속도로 이루어지고 있습니다.

6. 소자 및 나노기술(Device and Nanotechnology)

MEMS 장치, 나노 입자 및 응용 분야에서의 사용이 있음이 분명합니다. 나노기술은 자외선 차단제, 타이어, 삼킬 수 있는 의료 기기를 제조하는 데 이미 유용했습니다.

7. 3D직접회로(3D Integrated Circuits)

인쇄 회로 기판에서 3D-IC로의 전환은 이미 모바일 영역에서 진행 중이며 결국 IT 제품의 전체 스펙트럼으로 확산될 것입니다.

8. 범용 메모리(Universal Memory)

DRAM에 대한 범용 메모리 교체는 아키텍처와 소프트웨어의 구조적 변화를 일으킬 것입니다.

9. 멀티코어(Multicore)

2022년까지 멀티코어는 웨어러블 시스템과 스마트폰에서 카메라, 게임, 자동차, 클라우드 서버, 엑사급 슈퍼컴퓨터에 이르기까지 모든 곳에 사용될 것입니다.

10. 포토닉스(Photonics)

실리콘 포토닉스는 고급 시스템 패브릭에서 대역폭, 대기 시간 및 에너지 문제를 해결하는 기본 기술이 될 것입니다.

IEEE에서 발표한 2022년 가장큰 혁신이 될것이라 발표한 23가지 기술중 10가지를 알아보았는데요. 아직도 컴퓨터세계에서는 해결해야할 일들이 많다는것을 알게되었고, 앞으로 성장할 요소가 무궁무진하는것을 느끼게 되었네요.

이런 트렌드 분석자료는 우리가 앞으로 어떤방향으로 공부할지 방향을 제시해주는 것 같습니다.

참고: https://www.computer.org/publications/tech-news/trends/2022-report

[typescript] 데이터 타입

키밸류 — Sat, 1 Jan 2022 13:08:55 +0900

typescript의 간단한 소개

불리언(Booelan)

boolean값은 참/거짓(true/false) 값 입니다.

let flag:boolean = false;

숫자(Number)

javascript처럼 typescript의 모둔 숫자는 부동 소수이다. typescript는 16진수, 10진수 9진수 2진수도 지원합니다.

let hex: number = 0xffff; //16진수
let decial: number = 6; //10진수
let octal: number = 0o7652 //8진수
let binary: number =0b1101 //2진수

문자열(String)

javascript와 같이 작은 따움표( ' )나 큰 따움표( " ) 로 문자열 데이터를 감싸 표현할 수 있습니다.

let text:string = 'hello typescript';
let text2:string = "good bye typescript";

또한 템플릿 문자열을 사용하면 여러줄을 한번에 작성할 수 있고 변수나 표현식을 내부에 넣어 사용 할 수있습니다.

let name: string = 'keyvalue';
let age: number = 30;

let sentence: string = `My name is ${name}. and I am ${age} years old`;

배열(Array)

배열을 다루는 타입이고 사용방법은 타입 뒤에 [] 을 쓰는것이고 두번째는 Array<T> 제네릭 타입을 사용하는 것 입니다.

let list: number[] =[1,2,3];
let list2: Array<number> =[1,2,3];

튜플(Tuple)

요소의 타입과 개수가 고정된 배열을 표현할 수 있습니다.

let tuple:[string,number]; //트플타입

tuple = ["hello", 10]; // O 성공
tuple = [10, "hello"]; // X 잘못된 방법

인덱스를 통해서도 값에 접근할수 있습니다.

x[0]; //hello
x[1]; //10
x[2]; //error 정해진 인덱스 외의 요소에 접근할 수 없습니다.

열거(Enum)

enum SEASON {SPRING, SUMMER, AUTUMN, WINTER}
let season: SEASON = SEASON.SPRING;

enum 은 0부터 시작하여 1씩 증가시키며 멤버들의 값을 할당해줍니다.

다음과 같이 시작 값을 정해줄 수 있고, 각각의 값을 지정해 줄 수 도 있습니다.

enum SEASON {SPRING=2, SUMMER, AUTUMN, WINTER}
let season: SEASON = SEASON.SPRING;

//-------------------------------------------

enum SEASON {SPRING=1, SUMMER=3, AUTUMN=5, WINTER=9}
let season: SEASON = SEASON.SPRING;

Any

애플리케이션 동작시 우리가 알수 없는 타입을 표현해야 하는 경우도 있습니다. 이런경우는 타입을 검사하지 않고 진행시키기위해 any타입을 사용합니다.

let notSure: any = 4;
notSure.ifItExists(); // 성공, ifItExists 는 런타임엔 존재할 것입니다.
notSure.toFixed(); // 성공, toFixed는 존재합니다. (하지만 컴파일러는 검사하지 않음)

let prettySure: Object = 4;
prettySure.toFixed(); // 오류: 프로퍼티 'toFixed'는 'Object'에 존재하지 않습니다.

any는 되도록 사용을 지양하는 편이며 any의 사용이 많아질수록 typescript를 사용하는 이유가 점점 줄어들겠죠.

[코드 걸음마] 중복선언 type, List Component 렌더링 함수

키밸류 — Sat, 1 Jan 2022 12:36:08 +0900

1. 중복 선언된type은 type alias로 간략하게 사용하자

//before
const [images, setImages] =
    useState<React.DetailedHTMLProps<ImageElementType, HTMLImageElement>[]>();
const [files, setFiles] =
    useState<React.DetailedHTMLProps<ImageElementType, HTMLImageElement>[]>();

//after
type DetailedHtmlType = React.DetailedHTMLProps<ImageElementType,HTMLImageElement>;

const [images, setImages] = useState<DetailedHtmlType[]>();
const [files, setFiles] = useState<DetailedHtmlType[]>();

type을 선언할때 복잡한 타입을 여러번 선언하게되면 타입 변경시 수정 포인트가 많아지게된다.

선언하는 곳이 몇개 안될때는 그냥 사용해도 좋지만 1얼마나 재사용하게될지 모르니 되도록이면 alias를 사용하여 수정 포인트를 한군데로 몰아주는게 코드관리에 도움이 된다.

2. List 컴포넌트를 렌더링할때 List 컴포넌트 자체를 만드는 함수를 작성하지말고 Item 단위로 구성한 후 List 함수를 통해 렌더링 하자

//before

const getImageComponents = (data: Components.Schemas.Article) => {
    if (data && data.files) {
      setFiles(
        data?.files.map((file, key) => {
          return (
            <ListItem key={key}>
              <Grid container>
                <Grid item xs={9} textAlign="left" display="flex">
                  <ListItemIcon sx={{ paddingTop: "10px" }}>
                    <CropOriginalIcon />
                  </ListItemIcon>
                  <ListItemText primary={file.name} secondary={file.mime} />
                </Grid>
                <Grid item xs={3} textAlign="right">
                  <IconButton
                    aria-label="delete"
                    onClick={() => {
                      deleteFileProcess(file.id);
                    }}
                  >
                    <DeleteOutlineIcon fontSize="inherit" />
                  </IconButton>
                </Grid>
              </Grid>
            </ListItem>
          );
        })
      );
    }
  };

//단일 파일, 컴포넌트로 구성 -- ArticleFile.tsx
const ArticleFile = (file: FileType) => {
  return (
    <ListItem key={file.id}>
      <Grid container>
        <Grid item xs={9} textAlign="left" display="flex">
          <ListItemIcon sx={{ paddingTop: "10px" }}>
            <CropOriginalIcon />
          </ListItemIcon>
          <ListItemText primary={file.name} secondary={file.mime} />
        </Grid>
        <Grid item xs={3} textAlign="right">
          <IconButton
            aria-label="delete"           
          >
            <DeleteOutlineIcon fontSize="inherit" />
          </IconButton>
        </Grid>
      </Grid>
    </ListItem>
  );
};

export default ArticleFile;

//원하는 곳에서 재사용가능
article?.files.map((file, key) => {
  return <ArticleFile {...file} />;
})

하나의 파일안에서 모든걸 구현하면 좋겠지만

컴포넌트화 할수 있는 것은 컴포넌트화 하여 추후에 재사용 할수 있게 하면 원래 코드량도 줄고 다른 상황에서도 코드를 재사용 할 수 있다.

한해의 끝에서

키밸류 — Sat, 1 Jan 2022 00:47:05 +0900

한해의 끝에서

새해 복 많이 받아~
여기저기서 들리는 따뜻한 인사

하늘에서 내리는 새하얀 눈 맞으며
난 우두커니 서있다

앞으로 보이는 새하얀 눈길
내 앞날도 저렇게 밝았으면

한발자국을 떼려는 순간
아차 뒤를 돌아본다

나를 여기까지 오게한 나의 검은 발자국
올 한해..

저 발자국이 날 여기까지 데려다 줬구나

앞날을 새하얗게 만드는 눈들에
어느새 발자국이 흐릿해졌다

지금의 나를 만든 발자국과
그 발자국을 잊게하는 눈

걸음을 떼는 입가에 미소가 어느새 피어있다

kumm

[리액트] 개발환경 구성하기

리액트 개발 환경 구성하기

1. Node.js 설치

npm이란?

2. VS CODE 설치

vscode의 유용한 확장프로그램(extention) 추천

추천1. ESlint

추천2. Prettier

3. Github Desktop

[리액트] 알고쓰자 React Hook

1. useState

2. useEffect

3. useContext

4. useReducer

[코드 걸음마] 비교 연산자, 하나의 state로 관리할것

1. 논리 연산자를 잘 사용하여 코드량을 줄이자

2. 하나의 state로 관리할 것

설레는 첫걸음, 임신준비

1. 엽산 챙겨먹기

2. 스트레스 안받기

3. 기초체온 높이기

4. 임신전 검사 받기

대전 유성구 명소, 나만의 작은 보물 덜레기근린공원

세상을 변화시킬 2022년 트렌드(1~10) by IEEE

1. 다양한 형태의 보안문제(Security Cross-Cutting Issues)

2. 오픈 지식 재산 운동(Open Intellectual Property Movement)

3. 지속 가능성 (Sustainability)

4. 대규모 온라인 교육과정(Massively Online Open Courses)

5. 양자 컴퓨팅(Quantum Computing)

6. 소자 및 나노기술(Device and Nanotechnology)

7. 3D직접회로(3D Integrated Circuits)

8. 범용 메모리(Universal Memory)

9. 멀티코어(Multicore)

10. 포토닉스(Photonics)

[typescript] 데이터 타입

불리언(Booelan)

숫자(Number)

문자열(String)

배열(Array)

튜플(Tuple)

열거(Enum)

Any

[코드 걸음마] 중복선언 type, List Component 렌더링 함수

1. 중복 선언된type은 type alias로 간략하게 사용하자

2. List 컴포넌트를 렌더링할때 List 컴포넌트 자체를 만드는 함수를 작성하지말고 Item 단위로 구성한 후 List 함수를 통해 렌더링 하자

한해의 끝에서

한해의 끝에서