분류 전체보기

    [자바스크립트 / Vanilla JS] if(조건문) 줄이기

    필자가 지금 현 상황에서 코드리팩토링의 초점을 맞추고 있는 부분은 바로 "if(조건문)" 최소화이다 사실 완전 초보중에 초보일 때는 if문을 많이 써도 그냥 보기 편하니까 가독성이 좋은 코드라고 생각했지만 점점 경험이 쌓이고 성장할 수록 if문이 여러개 있으면 그냥 보기가 싫고 머리가 아프다 if(조건문)을 줄이는 이유는 간단하다 "높은 가독성"과 "유지 보수하기 좋은 코드"를 만들기 위하여 이런 저런 문서들을 찾아봤을 때 if문을 다른 방법으로 줄이든 뭘 하든 사실 성능에는 크게 차이가 없다고 한다. 그냥 가독성과 유지보수 때문에 줄이는거라고 보면 된다. 1. 삼항 연산자 삼항 연산자 사용법은 간단하다. (조건문) ? 참일 경우 표현식 : 거짓일 경우 표현식 // if else문 var num = 10..

    [자바스크립트 / Vanilla JS] ES6 템플릿 리터럴 (Template Literal)

    템플릿 리터럴(Template Literal) 템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식이다. 기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나 ES6에서는 백틱(back-tick)이라는 기호(`)를 사용한다 const str = `Hello ES6`; 위와 같이 백틱을 이용하게 되면 여러 줄에 걸쳐 문자열을 정의할 수도 있고, 자바스크립트의 변수를 문자열 안에 바로 연결할 수 있는 이점이 생긴다. 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다. 문자열 인터폴레이션은 ${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표..

    [자바스크립트 / Vanilla JS] 반복문에 대하여 (for.. for in.. for of.. forEach)

    자바스크립트의 반복문에는 총 8가지의 반복문이 존재한다 1. for : 고전적인 for문 2. for in : 객체의 프로퍼티 키 열거 전용 3. for of : 이터러블 순회 전용 4. forEach(): 배열 순회 전용 메서드 5. while : 고전적인 while문 6. do while : 고전적인 do...while문 7. Object 객체 메서드: 객체 순회 전용 8. Array.prototye 메서드 : 배열 전용 이 번 글에서는 간단하게 for, fon in, for of, forEach문을 다룰 예정이다. 1. forEach 문 코드 리팩토링에서 잠깐 다뤘던 forEach문이다. forEach()는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메..

    [자바스크립트 / Vanilla JS] 변수를 선언해주는 var, let, const에 대하여

    다른 학습 과정을 적다가 가장 기본적인 자바스크립트의 변수에 대하여 확실히 알고 들어가야한다고 생각이 들어서 순서를 상관않고 해당 포스팅을 작성하게 되었다 본론으로 들어가기 앞서 먼저 알아야 할 내용으로는 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거친다는것을 먼저 인지해야한다 변수 선언 변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었고, 이로 인해 var의 사용빈도는 줄어들었다. 선언 단계: 변수명을 등록하여 변수의 존재를 알린다. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. var name console.log(name) // undefined var 키워드를 이용한 변..

    [자바스크립트 / Vanilla JS] Object 와 Map

    Object와 Map의 특징 및 사용 용도 전통적으로 objects 는 문자열을 값에 매핑하는 데 사용되었다. Object는 키를 값으로 설정하고, 값을 검색하고, 키를 삭제하고, 키에 저장된 내용을 검색 할 수 있게 만들어준다. 그러나 Map 객체는 더 나은 맵이 되도록 하는 몇 가지 장점을 가지고 있다. Object의 key는 String 또는 Symbol이어야 하고, Map의 키는 모든 값을 가질 수 있다. Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다. Map은 삽입된 순서대로 순번이 매겨진다 -> iterable하다. ==> for of와 forEach, for in 사용 가능 Object는 데이터들의 순서가 없기 때문에 순서를 정렬하기 위한 과정이 필요하다...

    첫 글

    필자는 4년제 IT 관련 학과를 졸업 후 6개월간의 백엔드 과정 교육 과정을 마치고 부산에 위치한 IT 회사에서 인턴 3개월 과정을 거쳐 현재는 약 3개월 차, 거의 태아 수준의 개발자이다. 백엔드만 주구장창 공부하다가 지금은 어쩌다 보니 프론트엔드 개발을 하고 있는데 내가 갑자기 왜 프론트엔드를 하고 있는지 모르겠지만 의외로 백엔드 개발보다 적성에 맞아 즐겁게 개발하며 적응해나가고 있다. 이 블로그는 내가 즐겁게 개발하고 학습하며 적응 과정을 거치면서 아래 항목에 대해 다룰 예정이다. 1. 나의 성장 과정 2. 심해에서 헤엄치고 있는 내 실력에 맞춘 Vanilla JS 학습 내용들 3. 현시대 프론트엔드 프레임워크 트렌드에 맞춘 React.js 학습 내용들 -> 아직 Vanilla JS 조차도 제대로 ..