var, let, const 란?

- var, let, const 는 변수 선언시 사용되는 키워드


  • Var

var은 변수 데이터의 오염이 많이 발생할 수있는 녀석이다. 

1
2
3
4
var a = 1;
if(a == 2){
var a = "홍길동";
}//원치않은 변수 오염이 발생할수있음.
cs


하지만 함수 스코프내에서 선언했을때는 안전하게쓸수있다.


1
2
3
4
(function () {
    var name = "Minsu";
    console.log(name);
})(); //선언과 동시에 실행하는 함수
cs

즉시실행함수로 var을 지역변수로 사용할때 쓸수는 있지만, 좀 복잡한 표현으로 보인다.

이러한 문제를 해결?하기위해 등장한 것이 let이다.


  • let

let은 var에서 처럼 중복선언을 막아주고, 중괄호 스코프로 완벽히 분리하여 사용할 수 있다.

일반적으로 생각하는 지역변수 처럼 말이다.


한편, var로 선언되기 전 변수를 사용할 때 분명한 에러지만 자바해석기가 알아서 자동적으로 

호스팅이라는 방법으로 선언을 해주면서 오류가 없도록 해준다.

선언없는 변수를 사용할때도 자바해석기가 알아서 처리를 하면서 선언을 임의의 위치에 해준다. 이는 예기치 못한 오류가 발생할 가능성이있다.


하지만 let은 선언전에 사용한다고 하면 오류를 내면서 선언을 먼저하라고 알려준다.


1
2
3
console.log(userName);  // let 키워드로 선언한 변수는 호이스팅이 동작하지 않는다.
let userName = "홍길동";
console.log(userName);
cs


  • const

const는 상수화, 즉 어떤대상이라도 재할당을 금지하기위해서 이 키워드를 쓴다.

객체, 배열, 함수와 같은.. 

const는 선언과동시에 리터럴값을 넣어주어야한다.




var, let 키워드를 정리하자면..


var 키워드로 변수선언은 이제 그만!

let키워드는 변수의 재선언을 막아준다.

let키워드는 호스팅이 되지 않으므로 변수 사용전 반드시 먼저 선언해야한다.

let키워드는 블록영역에 고립된 변수를 선언할 수 있어서 외부로부터 오염을 방지한다.

const도 되도록이면 자주사용하자. 데이터 변경이 많이일어날 일이 적다고한다.

키워드 없는 변수는 가급적 사용하지말자. 예기치 않은 오류가 발생할수있다.

반응형

vue.js란 ? 

- 웹페이지 화면을 개발하기 위한 프런트엔드 프레임워크


vue 특징

- MVVM패턴 : 프런트와 백엔드 역할을 분리해서 개발하는 패턴, 추후 유지보수가 편해진다.

                   예전에는 HTML,CSS, 데이터베이스의 데이터를 가져오는 JAVA 코드가 한파일에 섞이면서 가독성이 현저히 떨어졌다.


- 컴포넌트기반 프레임워크 : 레고쌓듯이 잘조합해서 쓰면 원하는 모형, 화면을 구성할 수있다.


- 빠른 화면 렌더링의 가상 돔 렌더림 방식 : 요즘 대세, 가상돔을 활용하면 화면전체를 다시그리는 일이 없다.


vue 준비물 4가지

- editor : atom 추천 무료 , 'language-vue' 아톰패키지 설치 (vscode 쓰는분들은 vscode용 따로 또 있어요 자동으로 추천해줌) 


- chrome


- 뷰 개발자 도구 : 크롬확장플러그인


- node.js : 추후 vue 프로젝트 구성할때 손쉽게 할 수있음(?)



화면 개발을 하기위한 필수 단위

인스턴스 & 컴포넌트


1. 인스턴스 : 화면 개발하기위해 필수적으로 생성해야하는 기본 단위, hello world를 화면에 뿌려줄수있던건 이녀석이 있었기때문이다. 즉 빠질수 없는 필수조건


2. 컴포넌트 : 레고 블록과 같은것 처럼 하나씩 잘 쌓아서 화면을 구성할수 있음.


레고기본판 안에 레고블록있듯이 인스턴스안에 컴포넌트있다.  


뷰 컴포넌트 통신

 컴포넌트 끼리는 통신을 어떻게 할까?


1. 상하위 컴포넌트 관계의 통신

- 단일 방향으로 위에서 아래로 데이터를 전달하는 기본적인 구조.

- 상위에서 하위로는 props라는 특별한 속성으로 전달한다.


ex) <child-component v-bind : propsdata = "상위 컴포넌트의 속성"> 


2.  하위에서 상위 컴포넌트로는 이벤트로 전달하기

하위 컴포넌트에 이벤트가 발생하면 이 이벤트 명으로 상위 컴포넌트의 메서드를 실행시키는 방식

ex) this.$emit('이벤트명')

     v-on : 이벤트명 = "상위 컴포넌트의 메서드명"


3. 같은 레벨간의 컴포넌트 통신

- 이벤트 버스

1.이벤트 버스를 위한 추가 인스턴스를 생성

2.그리고 이 이벤트 버스 참조로 이벤트와 데이터를 보낸다.

3.받는 쪽은 $on으로 이벤트와 데이터를 받는다.


반응형

문제링크)

http://codeup.kr/problem.php?id=3733


해결방법)


어떤 임의의 자연수 n 을 입력받고 홀수 or 짝수 일때의 각각의 규칙에 따라 재귀함수를 호출한다.

이때 재귀함수 호출 횟수가 몇번인지가 문제에서 말한 우박수의 길이가 되고 이것을 구하면 된다.


규칙은 다음과 같다.

1. 어떤 자연수 n이 입력되면,

2. n이 홀수이면 3n+1을 하고,

3. n이 짝수이면 n/2를 한다.

4. 이 n이 1이 될때까지 2~3과정을 반복한다.

예를 들어 5는 5 → 16 → 8 → 4 → 2 → 1 이 된다.

여기서 생각해야할 부분이 있는데, 입력이 자연수 a, b 구간으로  1<= a <= b <= 10,000,000 의 아주 큰 범위를 갖는다.

그래서 이 문제가 large 버전으로 이름이 붙여진 것 같다.

이 큰 값의 범위 입력을 풀기 위해서 대표적인 방법으로 메모이제이션을 써서 시간복잡도를 줄여야 겠다는 생각을 했다.

그리고 코딩하면서 알게 된것이 배열을 천만으로 선언할 수 있다는 것을 알 수 있었다. 너무 비효율적이라 생각되는데 무튼 문제만 푼다면야...하고 일단 넘어가자.


메모이제이션을 할때 천만으로만 하기 때문에 n이 홀수여서 천만의 값을 넘어간다면 이는 따로 조건을 추가해서 메모이제이션을 안하고 다음 재귀함수를 그냥 호출 하는 방식으로 구해보았다.



반응형

'PS > 코드업' 카테고리의 다른 글

3704번 계단 오르기 2  (0) 2019.03.31
1920번 2진수 변환 (재귀함수)  (0) 2019.03.16
2606. 소수점 이하 출력  (0) 2018.12.17
재귀함수 1부터 n까지 합 구하기  (0) 2018.11.18
코드업-캔디팡 문제  (0) 2018.09.23

+ Recent posts