kumm

리액트 개발 환경 구성하기 1. Node.js 설치 https://nodejs.org/ko/ 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 창을 열어버전..

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('렌더링'); },[]); 두번째 인자는 배열을 받는다...

1. 논리 연산자를 잘 사용하여 코드량을 줄이자 /* BEFORE 두개의 함수를 사용하다보니 코드양이 길어진다 */ const handleClickOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; /* AFTER 논리 연산자를 사용하여 하나의 함수로 처리하였고 코드양도 줄어들었다 */ const toggle = () => { setOpen(!open); }; !과 같은 논리연산자와 삼항연사자를 통해 if문을 대체하거나 여러개로 쪼개져있는 함수들을 하나로 처리할수 있는 경우가 많다. 2. 하나의 state로 관리할 것 개별적으로 컴포넌트들을 렌더링한다고 컴포넌트마다 state를 지정해주면 코드가 한없이 복잡해 질 ..

결혼을 하고 처음으로 임신에 대해 이야기를 나누어봤다. 내가 알고있었던 임신은 "생각보다 아이가 잘 생기지 않는다" "엽산 먹어야한다" 정도?였다. 막상 대화를 나눠보니 우리둘다 임신에 대해서 몰라도 너무 모르는 상태였고.. 주변 인생 선배들께 건네들은 정보 뿐이었다. 이젠 본적격으로 우리가 정보를 찾고 우리만의 임신 준비를 해야 할 것 이다. 임신준비에 있어서 가장 중요한 것은 부부가 함께 준비해야하는 것이다. 함께 준비할때 건강한 아이가 태어날 가능성도 올라가고 함께 준비하기 때문에 몸과 마음이 더욱 행복하게 준비 할 수 있는 것같다. 앞으로 3개월동안 열심히 준비해서 우리의 첫 임신을 잘 성공시켜볼 생각이다. 그렇게 하기위해선 4가지를 앞으로 잘 지켜야 할 것같다. 1. 엽산 챙겨먹기 엽산은 세포와..

오늘의 계획은 점심을 먹고 하루종일 홈캉스를 즐기는 것이었다. 집에서 여유를 즐기고 있던중 창밖을 보니 너무나도 새파란 하늘을 보니 슬금슬금 몸이 시원한 바람을 맞고 싶어하는게 느껴졌다. 이대로 있을 수 없지 바로 옷껴입고 출발해보자! 보통 우리부부는 산책으로 은구비공원이나 유림공원을 가곤했지만 오늘따라 새로운 곳을 가고 싶었다. 그러던중 우리눈에 들어온 덜레기근린공원! 가잣! 덜레기 근린공원은 대전의 다른 공원과는 다르게 광장같은 것이 없고 산책로로 시작되었다. (나중에 알게되었지만 반대편에 광장도 있는 것 같긴하다 ㅎㅎ) 덜레기공원은 오름직한 동산으로 이루어진 산책코스였다. 4시쯤 걷기 시작한것 같고 해가 예쁘게 떨어지고 있었다 덜레기공원은 평소에 높은 산을 오르기 부담스러워하는 사람들에게 제격인 장..

1. 다양한 형태의 보안문제(Security Cross-Cutting Issues) 대규모 데이터 리포지토리의 성장과 데이터 분석의 출현은 악의적인 행위자, 정부 및 기업의 침입과 결합하여 문제의 판도라 상자를 엽니다. 이러한 환경에서 보안과 개인 정보의 균형을 어떻게 맞출 수 있을까? 2. 오픈 지식 재산 운동(Open Intellectual Property Movement) 오픈 소스 소프트웨어(open source software)와 오픈 액세스 퍼블리싱(open-access publishing)에 이르기까지 오픈 IP로의 움직임이 우리 앞에 와 있습니다. 앞으로 개인 및 기업에서 생산된 지식을 다른 사람들에게 퍼뜨리는 움직임이 많아질 것으로 보입니다. 3. 지속 가능성 (Sustainability..

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..

1. 중복 선언된type은 type alias로 간략하게 사용하자 //before const [images, setImages] = useState(); const [files, setFiles] = useState(); //after type DetailedHtmlType = React.DetailedHTMLProps; const [images, setImages] = useState(); const [files, setFiles] = useState(); type을 선언할때 복잡한 타입을 여러번 선언하게되면 타입 변경시 수정 포인트가 많아지게된다. 선언하는 곳이 몇개 안될때는 그냥 사용해도 좋지만 1얼마나 재사용하게될지 모르니 되도록이면 alias를 사용하여 수정 포인트를 한군데로 몰아주는게 코드관리..

한해의 끝에서 새해 복 많이 받아~ 여기저기서 들리는 따뜻한 인사 하늘에서 내리는 새하얀 눈 맞으며 난 우두커니 서있다 앞으로 보이는 새하얀 눈길 내 앞날도 저렇게 밝았으면 한발자국을 떼려는 순간 아차 뒤를 돌아본다 나를 여기까지 오게한 나의 검은 발자국 올 한해.. 저 발자국이 날 여기까지 데려다 줬구나 앞날을 새하얗게 만드는 눈들에 어느새 발자국이 흐릿해졌다 지금의 나를 만든 발자국과 그 발자국을 잊게하는 눈 걸음을 떼는 입가에 미소가 어느새 피어있다