전체 글
-
재귀와 스택front-end 2022. 3. 7. 17:10
재귀(recursion)는 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴이다. 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화시킬 수 있을 때도 재귀를 사용할 수 있다. 특정 자료구조를 다뤄야 할 때도 재귀가 사용된다. 두 가지 사고방식 x를 n 제곱해 주는 함수 pow(x, n)를 만들어보자. 아래와 같은 결과를 만족해야한다. pow(2, 2) = 4 pow(2, 3) = 8 pow(2, 4) = 16 1. 반복적인 사고를 통한 방법: for 루프 function pow(x, n) { let result = 1; // 반복문을 돌면서 x를 n번 곱함 for (let i = 0; i < n; i++) { result *= x; } re..
-
코딩 스타일front-end 2022. 3. 4. 15:51
개발자는 가능한 간결하고 읽기 쉽게 코드를 작성해야한다. 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해 해결하는 것이야말로 진정한 프로그래밍 기술이다. 좋은 코드 스타일은 이런 기술을 연마하는데 큰 도움을 준다. 문법 중괄호 대부분의 자바스크립트 프로젝트에서 여는 중괄호는 '이집션(Egyptian)' 스타일을 따라 새로운 줄이 아닌 상응하는 키워드와 같은 줄에 작성한다. 여기에 더해서 여는 중괄호 앞엔 공백이 하나 있어야한다. if (condition) { // 코드 1 // 코드 2 // ...코드 n... } if (condition) doSomething() 과 같은 단 한줄자리 구문은 중요하게 다뤄야 할 에지 케이스이다. 이런 예외상황에도 중괄호를 써야할까? 어떻게 코드를 작성해야 가독성..
-
프로퍼티 getter와 setterfront-end 2022. 3. 2. 14:45
객체의 프로퍼티는 두 종류로 나뉜다. 첫 번째 종류는 데이터 프로퍼티(data property)이며, 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 두 번째 종류는 접근자 프로퍼티(accessor property)라 불리는 새로운 종류의 프로퍼티이다. 접근자 프로퍼티의 본질은 함수인데, 이 함수의 값을 획득(get)하고 설정(set)하는 역할을 담당한다. 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다. getter와 setter 접근자 프로퍼티는 'getter(획득자)'와 'setter(설정자)' 메서드로 표현된다. 객체 리터랄 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있다. let obj = { get propName() { // getter, ..
-
동적으로 모듈 가져오기front-end/Vue.js 2022. 2. 28. 17:10
이전까지 다뤘던 export/import문은 '정적인'방식이다. 문법이 단순하고 제약사항이 있다. 첫 번째 제약은 import문에 동적 매개변수를 사용할 수 없다는 것이다. 모듈 경로엔 원시 문자열만 들어갈 수 있기 때문에 함수 호출 결괏값을 경로로 쓰는 것이 불가능했다. import ... from getModuleName(); // 모듈 경로는 문자열만 허용되기 때문에 에러 발생 두 번째 제약은 런타임이나 조건부로 모듈을 불러올 수 없다는 점이다. if(...) { import ...; // 모듈을 조건부로 불러올 수 없으므로 에러 발생 } { import ...; // import 문은 블록 안에 올 수 없으므로 에러 발생 } 이런 제약사항이 만들어진 이유는 import/export는 코드 구조의 ..
-
모듈 내보내고 가져오기front-end 2022. 2. 28. 15:54
export와 import 지시자는 다양한 방식으로 활용된다. 전에 export와 import의 기본적인 사용법을 알아보았는데, 이번 좀 더 다양한 사용법을 알아보자. 선언부 앞에 export 붙이기 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. // 배열 내보내기 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 클래스 내보내기 export class User { constructor(name) { this.name = name; } } 🚨 클래스나 함..
-
모듈(module) 이란?front-end 2022. 2. 25. 18:30
프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높히고, 유지보수를 쉽게 하기 위해 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 온다. 이 때 분리된 파일을 각각 '모듈(module)' 이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있다. 모듈이란? 모듈은 단지 하나의 파일에 불과하다. 스크립트 하나는 모듈 하나이다. 다음과 같은 특징을 가진다. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선..
-
라우팅을 막는 법 '네비게이션 가드' (beforeEnter)front-end/Vue.js 2022. 2. 23. 10:17
프로젝트의 로그인 기능을 구현하다가 알게 된 사실이다. 라우터에 접근 제한을 걸 수 있었다(!!!) 어찌 보면 필수적인데 왜 생각을 안하고 있었을까... 만약 내가 로그인이 되어있지 않다면 유저 정보창을 볼 수 없고, 로그인이 되어있다면 다시 로그인 창으로 들어갈 수 없는 게 맞을 것이다. 즉, 내가 로그인되어있는 상태인지를 판단하는 특정 flag변수를 가지고 라우터를 제한하면 되는 것이다. 그 제한을 거는 위치는 라우터에서 componenet을 받아오기 전으로 해준다. 지금 작성된 코드에서는 아직 서버를 달지 않고 store에 있는 데이터를 기반으로 로그인을 판가름하고 있다. import Vue from "vue"; import VueRouter from "vue-router"; import store..
-
function props에 대해서front-end/Vue.js 2022. 2. 23. 10:16
Vue에서는 기본적으로 상위 컴포넌트에서 하위 컴포넌트를 업데이트하기 위해 props로 데이터를 보내고 하위 컴포넌트에서는 event emit을 사용해 상위 컴포넌트에서 핸들러를 통해 메서드를 호출하게 된다. {{ count }} 누르면 증가 상위 컴포넌트에서 하위 컴포넌트로 count 데이터를 props로 보내고, 하위 컴포넌트에서는 $emit을 통해 상위 컴포넌트의 count 데이터의 값을 변경하는 간단한 앱이다. 일반적으로 props에는 정적 / 동적 데이터를 전달하게 되는데 위와 같은 상황에서는 count와 더불어 count를 컨트롤 할 수 있는 메서드를 함께 props로 내리면 편하지 않을까? 함수를 props로 보내는 것은 '가능'하다. {{ count }} 누르면 증가 위의 코드는 event..