분류 전체보기 85

[JavaScript] 함수 (일반 함수와 화살표 함수 / 함수 표현식과 선언식)

1. 함수 선언식과 표현식의 차이 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. 함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다. 그래서 선언식을 사용하게 되면 호출보다 선언이 아래에 있어도 호스팅에 의해 작동이 된다. 하지만 이러한 상황은 자바스크립트에서는 권장하는 상황이 아니므로 표현식을 권장하고 있다. 1) 함수 선언식 function 함수명() { 구현 로직 } // 예시 function example() { return 'Exapmle'; } example(); // 'Exapmle' 2) 함수 표현식 var 함수명 = function () { 구현 로직 }; /..

[JavaScript] if문의 변환 (if else / switch / 객체 + 함수) feat.코드 리팩토링

들어가며 if문이 여러 줄이 써지는 상황에서 가독성을 고려할 때 어떤 식으로 리팩토링을 해야할지 고민이 있었고 그에 따라 다음과 같은 세가지의 버전을 만들게 되었다. 뭐가 더 좋다라기보다 팀의 컨벤션이 있을 수 있다고 생각된다. if ... else switch 객체 + 함수 아래 예제와 같은 경우는 타입에 따른 유저의 로그활동 기록을 보여주는 페이지였고 기존 코드에서 enum을 제외하고 기존 코드보다 이해를 돕기위해 조금 더 단순한 형태로 바꾸어서 작성해 보았다. 1. if문 형태 초기에는 타입이 2가지 뿐이었기에 if문으로 작성을 해두었지만 로그 기록 관련 타입이 늘어남에 따라 아래 처럼 코드가 늘어나게 되었다. 이러한 경우에서 논리 연산에 따른 여러가지 조건이 있을 경우 if else를 쓰자는 의견..

[JavaScript] 데이터 타입 & 연산자

나만의 포인트 undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크리트 엔진이 변수를 초기화 할 때 사용하는 값 그러므로, undefined를 값으로 할당하는 건 바람직하지 않으며 null을 활용하기를 권장 null 값의 타입은 obejct로 인지한다. 이것은 버그이지만 이미 너무 많이 쓰고 있기에 수정 시 기존 코드들에 영향을 줄 수 있어 수정을 하지 못하고 있는 상황 null 병합 연산자 ?? 은 ||와 유사한 기능을 하지만 null과 undefined 만을 구분할 수 있다. *전체 타입에 대한 상세 살명은 다 기재하지 않고 눈여겨 볼 내용이 있는 타입들 위주로 기재함 데이터 타입 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 원시 타입 숫자 타입 숫자, 정수와 실수 구..

[Javascript] 전역변수와 지역변수

전역변수? 지역변수? 전역 변수와 지역변수는 선언되는 위치에 따라 결정된다. 지역변수는 중괄호({}) 안 즉, 함수 내부에서 선언되며 선언된 지역에서만 유효한 변수다. 전역변수는 특정 지역(중괄호) 밖에서 즉, 외부에서 선언 되며 이 변수는 지역과 관계없이 어느 곳에든 유효하다. 다음은 전역변수와 지역변수의 코드 예시이다. 오히려 글보다는 코드로 볼 때 이해가 빠른거 같다. var x = "global"; //전역변수 function foo() { console.log(x); var x = "local" //지역변수 } foo(); console.log(x); //global 전역변수와 지역변수는 상황에 따라 선택을 해야하지만 전역변수는 반드시 사용해야 할 이유가 있을 때 쓰는것이 좋다. 그 이유는 다음..

[JavaScript] 변수란(var, let cons)? 변수 표기법은(카멜,스네이크,파스칼,케밥 케이스)?

변수란(variable)? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 즉 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로 값의 위치를 가리키는 상징적인이름 변수 선언? var, let, const는 변수를 선언할 때 쓰이는데 그 중에서도 let과 const는 ES6에서 추가 됐다. 자바스크립트에서 변수 선언은 선언 → 초기화 → 할당단계를 거쳐 수행된다. 1단계: 선언 단계(Declaration phase) → 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다. 2단계: 초기화 단계(Initialization phase) → 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. 3단계:..

[꿀 Tip] vscode terminal에서 특정 위치 폴더 새창 열기

리액트나 뷰를 활용해서 create를 하게 되면 상위폴더에서 만들게 되어 해당 폴더로 창을 열고 싶을때가 있는데 매번 새로열기를 해서.. 열었다. 그런데 누군가 터미널에서 타닥 타닥! 하니까 새창으로 열리는 것을 보고 검색한 결과..! 아주 심플했다. 터미널에서 아래와 같이 치면 현재 내가 있는 경로의 폴더가 새창으로 열린다. code . 근데 혹시 아래와 같은 메시지가 뜬다면? command not found: code #1. vscode에서 명령 팔레트를 실행 #2. Shell Command 입력 #3. 명령 설치 클릭 그럼 해결! 이제 우리모두 터미널 타이핑으로 개발너낌을 물씐 내보자

개발 공부/etc 2022.08.05

[Vue3] TailWind CSS + Vue 설치

1. TailWind CSS란? 리액트를 할 때는 mui, bootstrap 등의 css 라이브러리를 써봤지만 vue를 시작하면서 Tailwind CSS를 사용하게 되었다. 우선 css를 작성하지 않고 구성하게 해준다는게 기본 설명이지만 style에 작성하는 대신 html 태그의 class로 이미 지정되어 축약된 키워드를 삽입하는 형식이다. 아무래도 자주 쓰는 표현들은 인지하며 익숙해 져야할거 같다. 자세한 설명은 홈페이지에 잘 나와있다. https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. ta..

개발 공부/Vue 2022.08.04

[Vue] Vue.js 3.0 시작하기 NPM/CLI

Vue 최신 버전 설치 npm install vue@next Vue CLI 설치 npm install -g @vue/cli 이 때 오류가 나서 설치가 안되면 맨 앞에 sudo를 넣어서 진행 sudo npm install -g @vue/cli Vue 설치 확인 vue -V 터미널에 아래처럼 버전이 뜨면 설치가 완료 된 것! @vue/cli 5.0.8 Vue 프로젝트 생성 vue create 프로젝트이름 프로젝트를 생성하게 되면 버전 선택 메시지가 뜬다. Vue 3 선택

개발 공부/Vue 2022.07.25

220623 [알고리즘] codility _ OddOccurrencesInArray (배열의 홀수 발생) / JavaScript

1. 문제 (영문) A non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that is left unpaired. For example, in array A such that: A[0] = 9 A[1] = 3 A[2] = 9 A[3] = 3 A[4] = 9 A[5] = 7 A[6] = 9 the elements at indexes 0 and 2 have value 9, the el..

220622 [알고리즘] codility _ BinaryGap (2진수) / JavaScript

1. 문제 (영문) A binary gap within a positive integer N is any maximal sequence of consecutive zeros that is surrounded by ones at both ends in the binary representation of N. For example, number 9 has binary representation 1001 and contains a binary gap of length 2. The number 529 has binary representation 1000010001 and contains two binary gaps: one of length 4 and one of length 3. The number 20 h..