Chapter 02: 화살표 함수 (Arrow Function)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. # 2.1 화살표 함수 // 일반 함수 const greeting = function(name) { return "hello " + name; } // 화살표 함수 const greeting = (name) => { return `hello ${name}`; } // 화살표 함수 (매개 변수가 하나 일 경우, 괄호 생략) const greeting = name => { return `hello ${name}`; } // 화살표 함수 (매개 변수가 없을 경우, 괄호 필수) const greeting = () => { return `hello`; } 참고 : 템플릿 리터럴 Template Literals 백틱을 사용하여 string + 변수의 형태를..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 8.
• textsms

Global Object

전역 객체 Global Object (전역 객체) 자바스크립트는 최상위에 1개의 전역객체(Global Object)를 가집니다. 브라우저 환경 : window Node.js 환경 : global 그 외 호스트 환경 : globalThis (표준화) 브라우저 에서의 window 객체 어느 전역 객체나 함수는 window 객체의 프로퍼티로서 접근될 수 있습니다. 자바스크립트에서는 코딩할 때 전역객체를 생략할 수 있습니다. 전역 객체엔 Array와 같은 내장 객체, window.innerHeight(뷰포트의 높이를 반환함)같은 브라우저 환경 전용 변수 등이 저장되어 있습니다. 전역 변수 접근 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 됩니다. 단,..

• format_list_bulleted Tech/JavaScript
• · 2021. 8. 6.
• textsms

rest와 spread

rest와 spread (나머지 매개변수와 전개 문법) rest와 spread는 서로 떼어놓을 수 없는 개념이다. 두 문법 모두 ...을 사용하는 문법으로 눈으로 볼 때는 매우 유사해보이지만 실제 그 역할은 정반대의 개념이다. 두 개념을 비교하여 함께 알아보자. rest (나머지 매개변수) 매개변수의 마지막 위치에 사용하며 인수 목록의 나머지를 배열로 모아주는 역할을 한다. 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용한다. 객체, 배열, 그리고 함수의 파라미터에서 사용 가능하다. 객체 사용 예시 rest는 객체와 배열에서 사용할 때 이렇게 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때는 관용적으로 rest라는 키워드를 사용하지만 꼭 rest일 필요는 없다. const purpl..

• format_list_bulleted Tech/JavaScript
• · 2021. 7. 22.
• textsms

파티셔닝(Partitioning)과 샤딩(Sharding)

셔틀버스 기능 개발 중 팀장님께 파티셔닝과 샤딩에 대한 설명을 듣게 되었다. 잊지 않기 위해 간단한 개념을 적어두기로 한다. 둘을 간단히 비교하자면 파티셔닝은 수직 분할, 샤딩은 수평 분할의 개념을 생각하면 된다. 파티셔닝 큰 테이블이나 인덱스를 관리하기 쉬운 크기로 분리하는 방법이다. 파티셔닝 방법 Horizontal Partitioning 데이터 개수를 기준으로 나누어 Partitioning 하는 방법이다. Sharding이 Horizontal Partitioning과 관련되는데, 같은 테이블 스키마를 가진 데이터를 데이터베이스 여러 개에 분산하여 저장하는 방법을 일컫는 용어이기 때문이다. 때문에 Sharding을 Horizontal Partition`이라고 볼 수도 있다. 샤딩 DBMS 한 개로 처..

• format_list_bulleted Tech/프론트엔드
• · 2021. 4. 22.
• textsms

Prompt 기능으로 Callback과 Promise 비교하기

요즘 매일 아침 팀원들과 함께 분량을 정해 약 30분간 기획 강의를 듣는다. 듣고나면 팀장님이 사다리 타기로 한 명을 지정해 문제를 주시는데 오늘은 동료에게 강의 내용 대신 Javascript 문제를 내주셔서 함께 풀어보았다. Q. 다음 버튼 A를 누르면 Prompt 창이 뜨고, 입력 받은 값이 하단의 태그에 들어간다. B 버튼을 눌러 뜨는 모달 창이 동일한 동작을 하도록 코드를 작성하시오. 값변경(prompt사용) 값변경(bootstrap modal사용) 안녕하세요. Test 값입니다. Modal title 취소 확인 var myPrompt = function () { // 정답 작성 } $(function () { $("#aa").click(function () { var a = prompt("값을 ..

• format_list_bulleted Tech/JavaScript
• · 2021. 4. 22.
• textsms

CDN으로 IE에서 ES6 문법 사용하기

사내 프로젝트 진행 중 특정 기능을 Vue.js로 개발해보기로 했는데 (너무 신남! 😊) IE 크로스 브라우징 체크를 너무 뒤늦게 해버렸다. Arrow Function 등의 ES6 문법이 IE에서 지원되지 않는다는 걸 알고 있었는데, 왜 생각을 못했지? 개발 막바지가 되어서야 다급히 Babel, Polyfill을 구글링해 아래와 같이 CDN을 연결해 해결했다. 구글링하며 초반에 적용한 몇몇 CDN들이 제대로 동작하지 않았던 것을 보니 버전을 타는 것 같기도 하다. UI 개발 하면서 중간중간 크로스 브라우징하는 습관이 잘 되어있는 편인데, 처음으로 실제 프로젝트에서 JS Framework로 개발을 하다보니 동작을 구현하는 데에만 너무 신경이 쏠려있었던 것 같다. 앞으로 이런 부분도 꼼꼼히 체크해야지.

• format_list_bulleted Tech/JavaScript
• · 2021. 4. 22.
• textsms

Vue js의 v-for 반복문에서 중첩된 JSON 객체 가져오는 법

JSON 구조 버스 목록 데이터와 그 하위 필드에 정류소에 대한 데이터가 중첩되어 있는 형태 var busObj = [{ district: "4", districtName: "서대문구", busNo: "1234", routes: [ {name: "정류장명 1", time: "09:00"}, {name: "정류장명 2", time: "09:10"} {name: "정류장명 3", time: "09:20"} ] }, { district: "9", districtName: "마포구", busNo: "5678", routes: [ {name: "정류장명 1", time: "10:00"}, {name: "정류장명 2", time: "10:10"} {name: "정류장명 3", time: "10:20"} ] }] V..

• format_list_bulleted Tech/프론트엔드
• · 2021. 4. 19.
• textsms

이스케이프 코드 (escape code)

코드 설명 \n 문자열 안에서 줄을 바꿀 때 \t 문자열 사이에 탭 간격을 줄 때 \ 문자 \를 그대로 표현 ' 작은 따옴표를 그대로 표현 " 큰 따옴표를 그대로 표현 \r 캐리지 리턴(줄 바꿈 문자, 현재 커서를 가장 앞으로 이동) \f 폼 피드(줄 바꿈 문자, 현재 커서를 다음 줄로 이동) \a 벨 소리 (출력할 때 PC 스피커에서 '삑' 소리 출력 \b 백 스페이스 \000 널 문자

• format_list_bulleted Tech/프론트엔드
• · 2021. 4. 15.
• textsms