작심삼일

함수 사용 이유 프로그래밍을 하다보면 중복되는 기능들을 묶어서 사용하고 싶다. 그런 경우 함수를 사용하면 쉽게 구현할 수 있다. 아래의 소스코드를 보면, 면적을 구하기 위해서 width와 height를 계속 곱하는 부분이 반복된다. 소스 코드 //함수가 필요한 이유 let width1 = 10; let height1 = 20; let area1 = width1 * height1; console.log(area1); let width2 = 13; let height2 = 21; let area2 = width2 * height2; console.log(area2); 결과 200 273 반복되는 부분들을 계속 타이핑할 순 없으니, 함수를 이용하도록 하자. 1. 함수 선언식 위에서 면적을 구하는 부분들을 함수..

조건문 중에 if문과 switch 문 예제를 따라 해 보자. 다른 언어와 차이가 없으므로 입문자가 아니면 쉽게 따라 할 수 있다. 1. if문 소스 코드 //if 조건문 let a = 3; if (a >= 5) { console.log("5이상"); } else if (a >= 3) { console.log("3이상"); } else { console.log("3미만"); } 결과 3이상 많이 사용하는 조건문 중에 if 문이다. if문이 많이 중첩되고 복잡해진다면, 유지 보수하는 인원들이 고생을 하게 된다. 너무 복잡해지는 조건은 피하는 것이 좋고 모든 사람이 쉽게 알아보도록 작성하는 게 중요한 것 같다. 2. switch문 소스 코드 //switch 조건문 let country = "ko"; switc..

자바 스크립트의 연산자를 알아보자. 자바스크립트 연산자 종류 1. 대입 연산자 2. 산술 연산자 3. 복합 연산자 4. 증감 연산자 (전위, 후위) 5. 논리 연산자 6. 비교 연산자 7. typeof 연산자 8. null 병합 연산자 1. 대입 연산자 소스 코드 // 대입 연산자 let a = 1; 설명이 필요 없다. 변수를 선언하고 값을 대입하는 것이 대입 연산자이다. 2. 산술 연산자 소스 코드 // 산술 연산자 let b = 1; let c = 2; console.log(b + c); console.log(b * c); console.log(b - c); console.log(b / c); console.log(b % c); 결과 3 2 -1 0.5 1 기본적인 산술 연산자는 위의 예제와 같다. ..

Primitive Data Type에 대해서 알아보고 자바스크립트 엔진에서 자동 캐스팅 되는 것을 확인해 보자. Primitive Data Type 종류 1. Number 타입 2. String 타입 3. Boolean 타입 4. Undefined 타입 5. Null 타입 1. number 타입 소스 코드 // Number let age = 31; let tall = 186.7; let inf = Infinity; let minusInf = -Infinity; let nan = NaN; console.log(age, typeof age); console.log(tall, typeof tall); console.log(inf, typeof inf); console.log(minusInf, typeof mi..

자바스크립트의 변수를 선언하기 위해서는 let, var를 사용하고, 상수를 선언하기 위해서 const를 사용한다. 기본이지만 차이를 알고 사용하도록 하자. 1. let 변수 소스 코드 // 1. let 변수 알아보기 let age = 28; console.log("나이 : " + age); // 1-1. 그냥 변수로 덮어쓰는 것은 가능함 age = 27; console.log("나이 : " + age); 결과 나이 : 28 나이 : 27 let 변수는 변수이기 때문에 덮어쓰는 것이 가능하다. 하지만, 아래와 같이 재 선언하는 것은 불가능하다. 소스 코드 // 1-2. let을 한번더 선언하는 것은 불가능함 let age = 31; console.log("나이 : " + age); 결과 SyntaxErro..

1. 현상 맥os에서도 React를 사용하기 위해서 터미널에 'npm install -g create-react-app' 를 입력했더니, 아래와 같은 에러가 발생했습니다. 에러 npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! syscall access npm ERR! path /usr/local/lib/node_modules..

html 요소들을 배치하기 위한 flex 레이아웃 사용방법을 알아보도록 하자 먼저, 기본이 되는 소스코드부터 따라 하도록 하자. 1. 기본 코드 이 기본 코드를 기반으로 flex 속성마다 어떻게 변하는지 확인하도록 하자. 소스 코드 .parent { background-color: orange; border: solid 1px black; } .child { width: 100px; height: 100px; margin: 8px; background-color: white; border: solid 1px black; } 자식 자식 자식 결과 2. flex-direction flex-direction을 부모에 선언하면 자식들의 정렬 방향을 설정할 수 있다. 1) row, 2) column 예제를 알아보..

VSCode에서 Open in browser 크롬이 default 로 사용하기 위한 세팅 방법을 설명해보겠습니다. 맥 os환경이 아닌 윈도우 환경에서도 같은 방법으로 진행하면됩니다. 1. 먼저 VSCode에서 Open in browser를 설치 하지 않았다면, 'open in browser' 을 설치해준다. 2. 톱니바퀴에서 Extension Settings 클릭 3. Open-in-browser : Default 에서 아래 텍스트 박스에다가 'chrome'이라고 입력합니다. 4. 오픈하고 싶은 html 파일을 우클릭 후 'Open In Default Browser'를 클릭한다. 5. 열고싶은 크롬이 Default가 된 것을 확인할 수 있다.

useEffect useEffect( 실행함수 , [모니터링 대상] ) 바로 실행함수를 실행하고, 모니터링할 대상의 변수가 변했을 경우 실행함수를 재실행합니다. 아래 예제를 살펴봅시다. 1. useEffect( 실행함수, [] ) 모니터링 대상을 비웠을 경우 한번만 실행합니다. 소스 코드 import React from 'react'; // useEffect(실행함수, [모니터링대상없음]) : 컴포넌트 한번만 실행됨 function Component1(){ const [base, Func] = React.useState(0); React.useEffect(() => { Func(base+1); console.log('컴포넌트 한번 반복'); }, []); return ( {base} ) } 결과 2. u..

React 에서 컴포넌트에서 데이터를 관리할때 사용 하는 개념으로 State와 Props 가 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달 할때, Props를 사용합니다. 컴포넌트에서의 변화에 대한 UI 업데이트 진행하려면, State를 사용합니다. 아래의 예제를 따라하면 이해하기 수월합니다. 1. Props 이전 포스팅에서 상속관계에 대해서 배웠습니다. (이전 포스팅 바로가기 : [React] 컴포넌트 상속(부모, 자식) 구현 방법) parent.js에서 자식 컴포넌트를 호출 할 때, name과 age를 입력해 봅니다. child.js에는 props로 태그에 표시되도록 작성해줍니다. parent.js import ChildCom from './child'; function ParentCom..