탱구탱구 개발자 일기

전체 글 → (41)건

  1. [6주차] WIL 회고
    2024.11.02
  2. [5주차] WIL 회고
    2024.10.27
  3. [3주차] WIL 회고
    2024.10.12
  4. [2주차] WIL 회고
    2024.10.05
  5. [1주차] WIL 회고 2
    2024.09.28
  6. 항해 플러스 1주차 - 시작하는 마음
    2024.09.21
  7. Computed property “name” was assigned to but it has no setter
    2020.11.24
  8. [JavaScript] XMLHttpRequest 객체
    2020.09.28
  9. [JavaScript] HTTP 통신의 기본
    2020.09.14
  10. [JavaScript] 메서드 체인
    2020.09.11
  11. [JavaScript] 배열의 반복 메서드
    2020.09.10
  12. [JavaScript] 배열의 접근자 메서드
    2020.09.10
  13. [JavaScript] 자바스크립트 async, await를 통한 비동기 처리 다루기
    2020.09.10
  14. [JavaScript] 자바스크립트 비동기 처리와 AJAX, promise(프로미스)
    2020.09.07
  15. [JavaScript] 자바스크립트 콜백함수(callback function)
    2020.09.03
  16. [JavaScript] 함수 f와 f()의 차이
    2020.09.02
  17. [JavaScript] 자바스크립트 이벤트 리스너 - 추가 정보 전달
    2020.09.01
  18. [JavaScript] 자바스크립트 이벤트 리스너 안의 this
    2020.09.01
  19. [JavaScript] 자바스크립트 이벤트 전파
    2020.08.31
  20. [JavaScript] 자바스크립트 이벤트 객체
    2020.08.31
  21. [JavaScript] 자바스크립트 이벤트 핸들러와 리스너
    2020.08.30
  22. [JavaScript] 자바스크립트 프로토타입 객체
    2020.08.27
  23. [JavaScript] 자바스크립트 화살표 함수(Arrow Function)
    2020.08.26
  24. [JavaScript] 자바스크립트 클로저
    2020.08.24
  25. [JavaScript] 자바스크립트 네임스페이스(Namespace, 이름 공간)
    2020.08.22
  26. [JavaScript] 자바스크립트 즉시 실행 함수
    2020.08.21
  27. [JavaScript] 자바스크립트 var, let, const 2
    2020.08.20
  28. [JavaScript] 자바스크립트 스코프(scope)
    2020.08.20
  29. [JavaScript] 자바스크립트 프로그램의 평가와 실행 과정
    2020.08.19
  30. [JavaScript] 자바스크립트의 this
    2020.08.18

[6주차] WIL 회고

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)동시성 이슈 제어를 위한 DB락, redis, kafka에 대해서 공부할 수 있는 시간이었다.락에 대해 좀 더 많이 공부할 수 시간이었지만 동시성 제어가 쉽게 되지 않아서 어려웠다.2. 시도낙관적 락의 재시도 로직이나 레디스 스핀락, 분산락을 이용해 동시성 제어를 위한 코드를 작성했다.3. 해결낙관적 락의 재시도 로직이나 레디스 스핀락, 분산락을 이용해 동시성 제어를 위한 코드를 작성했다.4. 알게된 것동시성 제어에 대한 보고서를 작성하면서 각 락에 대해 성능도 알았고 레디스 사용을 위해 도커도 공부하고 여러가지를 배울 수 있었다.Keep : 현재 만족하고 계속 유지할 부분이번 주를 마무리 하며 나에게 만족했던 부분은 무엇인가요?실무를 하..
항해 플러스 2024. 11. 2. 17:11

[5주차] WIL 회고

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)서버 구축에 대한 부분이 끝났다. 아쉬웠던 것은 테스트 코드를 작성해나갈 수록 계속 깨지는 부분이 있어서코드수정이 조금 빈번하게 발생하면서 시간이 오래결렸다.2. 시도테스트 코드가 깨지는 이유에 대해 비즈니스 로직을 다시 분석하여 원인을 찾아나갔다.3. 해결전반적으로 리팩토링을 진행하면서 이슈가 있는 부분들을 수정해나가니 테스트 코드가 깨지지 않고 통합테스트까지 잘 마무리할 수 있었다.4. 알게된 것로직 작성 시 단위테스트 부터 쉽게 넘어가서는 안된다는 부분을 다시 한번 상기했다.Keep : 현재 만족하고 계속 유지할 부분이번 주를 마무리 하며 나에게 만족했던 부분은 무엇인가요?실무를 하고 와서 밤 늦게까지 공부하는 나의 모습이 매우 힘들기..
항해 플러스 2024. 10. 27. 13:45

[3주차] WIL 회고

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)시퀀스 다이어그램의 작성이 매우 오래걸렸다. 처음해보는 것도 그렇지만 노드 별로 흐름 부분이 도메인 설계를 하면서지속적으로 바뀌어서 계속 변경이 발생했던 것 같다.스웨거를 처음 연동해봤는데 어노테이션 같은 것을 많이 몰라서 애를 먹었다.2. 시도일단 생각나는대로 흐름을 그려보았었다.3. 해결유명 기업의 기술 블로그들을 찾아봤고 시퀀스 다이어그램 개념, 설계 글을 많이 찾아보면서 가닥을 잡았던 것 같다.스4. 알게된 것문제를 해결하기 위해 시도하며 새롭게 알게된 것은 무엇인가요?-- 시퀀스 다이어그램이 필수로 가져가야한다는 부분..??Keep : 현재 만족하고 계속 유지할 부분이번 주를 마무리 하며 나에게 만족했던 부분은 무엇인가요?실무를 하..
항해 플러스 2024. 10. 12. 18:21

[2주차] WIL 회고

간단한 자기소개안녕하세요 4년차 백엔드 개발자 오준영입니다. 현재 화상회의 플랫폼 서비스 회사에서 일하고 있습니다.많이 정체되어 있고 TDD 및 대규모 데이터 처리에 좀 더 공부하고 싶어서 지원하게 되었습니다.이번 챕터를 시작하며 꼭 해내고 싶었던 목표클린아키텍쳐 설계 시도. 도메인 객체에서 jpa 엔티티와 pojo 객체를 나눠서 설계하고 싶었다.반드시 작성해야할 테스트 케이스 구분. 지난 주차에 불필요하거나 중복 테스트를 작성하여 제출했는데이번에는 꼭 필요한 테스트 특히 실패 케이스를 잘 나누려고 노력했다.이번 챕터를 마무리하며 가장 기억에 남는 성취어느 정도 클린아키텍쳐에 대한 맛을 보았고 어떻게 계층을 구분해야할 지 조금은 감이 잡힌 것 같다.이번 챕터에서 반드시 이뤘으면 했는데 이루지 못한 것좀 ..
항해 플러스 2024. 10. 5. 16:15

[1주차] WIL 회고

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요?TDD 라이브러리 사용법단위 테스트를 위한 기능 명세, 케이스 작성2. 시도문제를 해결하기 위해 어떤 시도를 하셨나요?TDD 학습, 라이브러리 학습 과정-- 시중에 나온 TDD 기본 책과 노션에 올려주신 기본 자료를 활용구현 기능을 명세화구현 기능을 상세히 적어보고 단위로 쪼개는 연습을 했다.쪼개다보니 불필요하거나 중복된 테스트가 발생해서 나중에 그것을 통합하여 정리했다.3. 해결문제를 어떻게 해결하셨나요?ZEP에서 멘토링을 청강하거나 팀 코어타임 시간에 질의응답 시간을 통해 완성해갔다.4. 알게된 것문제를 해결하기 위해 시도하며 새롭게 알게된 것은 무엇인가요?단위 테스트의 중요성Keep : 현..
항해 플러스 2024. 9. 28. 17:33

항해 플러스 1주차 - 시작하는 마음

지금까지의 회고TDD 방법론을 가지고 약 3주간 사전스터디를 진행했다.테스트 주도 개발 시작하기라는 책을 최대한 끝내는 것을 목표로 삼았다.책을 거의 완독한 시점에서 느낀 점은 기존의 TLD로 하던 방식 혹은 실제 코드, 데이터를 가지고 테스트 했을 때보다 작은 단위부터 테스트 코드를 작성할 경우 문제들을 좀 더 빠르고 쉽게 찾아낼 수 있겠다라는 것이다. 항해 플러스 참여 계기4년차로 접어드는 시점에서 개발 스킬이 정체되어 있다는 느낌을 받아서, 그 역량을 끌어올리고 싶었다. 또한 개발 네트워킹을 넓히고자 하는 목적도 크다.향후 5년 뒤 커리어 방향성대용량 트래픽을 받을 수 있는 서비스를 다루는 개발자가 되고 싶다. 현재 업무 특성 상 프론트엔드를 같이 겸하고 있는데 좀 더 백엔드 쪽에서 성장할 수 있는..
항해 플러스 2024. 9. 21. 15:27

Computed property “name” was assigned to but it has no setter

computed 속성에서는 기본적으로 getter 함수를 통해 종속성을 추적하여 (기본 사양) 그러나 필요에 따라서는 setter 함수를 통해 파라미터를 정의해주면 해당 파라미터에 변경된 값이 인자로 넘어와서 그 값으로 set을 할 수 있다. 그러나 이 경우 컴포넌트나 dom 객체에서 v-model 디렉티브를 통해 computed 속성의 종속성 주체가 바인딩 되어있다면 setter가 필요없더라도 기본적인 setter 함수는 선언해줘야한다.
이슈관리/Vue.js 2020. 11. 24. 18:48

[JavaScript] XMLHttpRequest 객체

개요 앞의 포스팅에서 HTTP 통신에 대해 알아보면서 JavaScript에서는 Ajax는 XMLHttpRequest 객체를 이용하여 웹서버와 비동기적으로 통신하고 DOM을 제어하여 동적인 웹 페이지를 만든다고 설명하였다. 이 때 Ajax는 Asynchronous JavaScript and XML의 약자로 직역하면 비동기 자바스크립트와 XML이다. XML는 마크업 언어인데 초창기 Ajax에서 사용하는 데이터 형식이었다. 내가 처음에 코딩을 배울 때만 해도 공공 데이터 포털이나 네이버, 카카오 개발자 센터같이 API를 제공하는 곳에서 문서를 살펴보면 XML과 JSON 형태를 둘 다 제공하였다. 그러나 거의 요즘은 JSON 형태로만 제공한다. 예제 window.onload = function () { // 1..
웹 프로그래밍/자바스크립트 2020. 9. 28. 19:11

[JavaScript] HTTP 통신의 기본

클라이언트/서버 모델 클라이언트가 서버에 요청 메시지를 보내면 서버가 응답 메시지를 반환한다. 메시지 반환 후 서버는 초기 상태로 돌아가며 클라이언트의 상태를 저장하지 않는다. 이러한 방식으로 통신이 이뤄지는 것을 클라이언트/서버 모델이라고 부른다. 기본적으로 서버의 데이터베이스, 기타 다른 서비스 등 서버의 자원/서비스를 이용하기 위한 시스템이다. 클라이언트와 서버는 데이터를 주고받을 때 서로의 약속된 규칙이 필요하다. 만약 이러한 규칙이 없다고 생각해보자. 혈액형에 비유할 수 있다. 흔히 어릴 때 과학 시간에 혈액형 별 적혈구 모양이 다른 사진을 본 적이 있을 것이다. 왜 A형, B형끼리는 수혈이 안되는지. 그것과 똑같다고 생각하면 이해하기 쉽다. 서로 각자의 방식으로 정해진 것 없이 막 보낼 테니 ..
웹 프로그래밍/자바스크립트 2020. 9. 14. 20:03

[JavaScript] 메서드 체인

메서드 체인 자바스크립트에서 메서드가 객체를 반환하면 반환한 객체의 메서드를 호출할 수 있는 기법이다. 그러면 객체의 메서드를 마침표 연산자를 통해 계속 연결해서 실행시킬 수 있다. 다음 예제에 있는 obj 객체는 budget 프로퍼티와 두 개의 메서드를 가지고 있다. 하나는 돈을 받는 메서드이고 다른 하나는 인수로 받은 금액을 저축하는 메서드이다. 두 메서드 모두 this를 반환하는 데 이 때 this는 obj 객체를 의미한다. 따라서 객체를 반환하기 때문에 해당 객체의 메서드를 chain을 통해 호출할 수 있다. 예제 let obj = { budget: 1000, receiveMoney: function () { this.budget += 1000; return this; }, savingMoney:..
웹 프로그래밍/자바스크립트 2020. 9. 11. 12:37

[JavaScript] 배열의 반복 메서드

반복 메서드 배열의 모든 요소를 순회하며 특정한 작업을 수행하거나 특정 조건을 만족하는 요소를 가져올 때 사용한다. 반복 메서드 대부분은 첫 번째 인수로 함수의 참조를 받는 고차 함수이다. ※고차 함수 고차 함수는 하나 이상의 함수를 인수로 취하거나 함수를 결과로 반환하는 함수를 말한다. 고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 고차 함수 예시 let f = function(v) { return v + 5; }; let f2 = function(f, v) { return f(f(v)); }; console.log(f2(f, 5)); // 15 특징 반복 메서드의 인수로 전달한 함수는 배열의 요소마다 호출된다.(희소 배열이면 없는 요소에 대해선 호출 안함) 첫 ..
웹 프로그래밍/자바스크립트 2020. 9. 10. 20:10

[JavaScript] 배열의 접근자 메서드

접근자 메서드 기존 배열을 수정하지 않고 다른 모습으로 가공한 새로운 문자열 or 배열로 반환한다. 종류 join concat slice indexOf & lastIndexOf toString & toLocaleString join 메서드 배열의 모든 요소 값을 문자열로 변경하고 인수로 받은 문자로 연결해서 문자열을 반환한다. 요소 값이 undefined, null일 경우 그 요소 값을 빈 문자로 간주 인수로 받은 문자를 지정하지 않으면 default는 쉼표(,)다. let a = ["A", "B", "C"]; a.join(); a.join("/"); 결과 "A,B,C" // default "A/B/C" // a.join("/"); "string" // typeof a.join("/"); concat 메..
웹 프로그래밍/자바스크립트 2020. 9. 10. 12:14

[JavaScript] 자바스크립트 async, await를 통한 비동기 처리 다루기

앞서 자바스크립트 비동기 처리방법으로 Promise에 대해 설명했었다. Promise는 비동기 처리 이후 then 메서드를 사용해 새로운 Promise 객체를 반환하여 다음에 이어갈 작업들에 대해 동기적으로 프로그래밍을 하였다. 예제 function buySomething(budget) { return new Promise((resolve, reject) => { setTimeout(() => { let payment = parseInt(prompt("얼마를 지불하시겠습니까?")); let balance = budget - payment; if (balance > 0) { console.log(`${payment}원을 지불하였습니다.`); resolve(balance); } else { reject(`잔..
웹 프로그래밍/자바스크립트 2020. 9. 10. 07:57

[JavaScript] 자바스크립트 비동기 처리와 AJAX, promise(프로미스)

동기와 비동기 처리 동기와 비동기 처리 동기 처리(Synchronous Processing) : 하나의 작업이 끝난 뒤 다음 작업을 진행하는 순차적인 처리 방식 비동기 처리(Asynchronous Processing) : 하나의 작업의 종료까지 기다리지 않고 다음 작업을 진행하는 비순차적인 처리방식 자바스크립트 비동기 처리 자바스크립트에서 비동기 처리를 빼놓으면 시체라고 할 정도로 개발할 때 정말 많이 쓰이는 기술이다. 자바스크립트는 싱글 스레드 기반의 언어이기 때문에 작업을 처리하는 공간(호출 스택)이 하나이다. 따라서 비동기적으로 실행되는 setTimeout, addEventListener 메서드나 XMLHttpRequest 객체에서의 코드는 작성한 순서대로 실행되지 않는다. 예제 setTimeout..
웹 프로그래밍/자바스크립트 2020. 9. 7. 23:21

[JavaScript] 자바스크립트 콜백함수(callback function)

콜백 함수(CallBack function)? 다른 함수에 파라미터로 넘겨지는 함수를 말한다. 이렇게 넘겨진 함수는 특정 시점에 호출되는데 보통 함수를 호출하고 새롭게 다른 작업이 실행되어야 하거나 호출한 함수가 끝나고 다음 함수가 실행되어야 할 때 사용한다. 기본 형태 function f1(callback) { callback(); } function callback() { console.log("callback"); } f1(callback); 함수 f1은 callback이라는 파라미터를 받아서 그 callback 함수를 실행하도록 정의되어있다. 그리고 함수 f1을 호출할 때 그 파라미터 같이 넘긴 상태로 호출한다. 내부 구조를 보면 f1이 호출될 때 callback이라는 이름을 가진 특정 콜백 함수..
웹 프로그래밍/자바스크립트 2020. 9. 3. 20:03

[JavaScript] 함수 f와 f()의 차이

흐.. ㅠㅠ 자바스크립트 프로그램 코드에서 f와 f()의 차이로 인해 어제 오늘 엄청 헤맸다. 예제 function f1() { console.log("A"); } // Question f1; vs f1(); ?? 위와 같이 함수 f1에 대해 정의 하였다. 이 때 f1;과 f1();을 실행했을 때 콘솔에 찍히는 결과는 무엇일까?? 결과 f1; // => ƒ f1() { console.log("A");} f1(); // => A undefiend 위와 같은 결과가 나오는 이유를 영어문장으로 표현하면 아래와 같다. Keep in mind that in JavaScript a function is an object, passed around like any other variable. So this is a ..
이슈관리/JavaScript 2020. 9. 2. 23:39

[JavaScript] 자바스크립트 이벤트 리스너 - 추가 정보 전달

addEventListener 메서드의 두 번째 인수를 이벤트 리스너라고 부른다. 이 이벤트 리스너는 함수이고 함수의 인수로 이벤트 객체를 받는다는 것을 계속해서 설명해왔다. 이벤트 리스너에 대해 기본적인 부분을 알고 싶다면 이 글을 참고하자. 이벤트 객체를 받는 코드는 다음과 같다. window.onload = function () { let button = document.getElementById("btn3"); button.addEventListener("mouseover", function (e) { e.currentTarget.style.backgroundColor = "blue"; }, false); }; 이처럼 이벤트 객체 e를 통해 우리는 이벤트를 호출한 DOM 요소의 버튼 색상을 파란색..
웹 프로그래밍/자바스크립트 2020. 9. 1. 18:28

[JavaScript] 자바스크립트 이벤트 리스너 안의 this

우리를 괴롭히는 this가 또 나왔다. 이벤트 리스너의 경우에도 자바스크립트의 다른 this와 다르다. 이벤트 리스너 안의 this 바인딩 컴포넌트는 함수를 호출할 때 그 함수가 속한 객체의 참조이다. 이는 이벤트가 발생한 DOM 요소 객체를 말한다. 아래 예제를 통해 확인해보자. 버튼 예제에서 버튼을 누르게 되면 클릭 이벤트에 정의된 리스너가 실행된다. 그리고 콜백 함수로 각각 hello 함수와 Student에 정의한 introduce 메서드가 호출된다. 자바스크립트의 기본적인 this 규칙에 따라 hello 함수 내부의 this는 window를 가리키고 indroduce 메서드는 해당 메서드가 속한 객체인 s1객체를 가리킬 것으로 예상할 수 있다. 그러나 결과는 아래와 같다. 이벤트 리스너 안의 th..
웹 프로그래밍/자바스크립트 2020. 9. 1. 14:41

[JavaScript] 자바스크립트 이벤트 전파

자바스크립트는 다른 언어와 다른 특징이 있는데 그 중 하나가 바로 이벤트 전파이다. 전파라는 이름에서 알 수 있듯이 이벤트가 발생하면 그 발생한 요소에 그치지 않고 어딘가로 그 이벤트가 흘러서 그 요소에도 이벤트가 발생한다는 것이다. 이벤트 전파 Window 객체나 XMLHttpRequest 객체와 같이 원래부터 존재하고 단독으로 존재하는 객체에서 이벤트가 발생하면 웹 브라우저는 해당 객체에 등록된 이벤트 처리기(핸들러, 리스너)를 호출한다. 그러나 HTML 요소에서 이벤트가 발생할 경우 그 요소 및 해당 요소의 조상 요소까지 이벤트가 전파된다. 보통 HTML 코드를 짤 때 계층형 구조를 따르고 있기 때문에 결과적으로는 버튼A 하나만 눌렀는데 버튼B에 걸린 이벤트까지 호출할 수 있다는 것이다. 그렇다면 ..
웹 프로그래밍/자바스크립트 2020. 8. 31. 16:35

[JavaScript] 자바스크립트 이벤트 객체

앞의 포스팅에서 이벤트가 발생했을 때 실행하는 함수에는 이벤트 핸들러와 이벤트 리스너가 있다고 설명했다. 이들도 함수이기 때문에 인수를 받을 수 있는데 그 인수를 이벤트 객체라고 한다. 이벤트 객체 이벤트 객체란 해당 이벤트의 다양한 정보를 저장한 프로퍼티와 이벤트의 흐름을 제어하는 메서드가 담긴 객체이다. button.addEventListener("mouseover", function (e) { e.currentTarget.style.backgroundColor = "blue"; }, false); 위의 코드에서 이벤트 리스너 부분을 보면 인수 e를 받고 있다. 바로 이 e를 이벤트 객체라 부른다. 함수의 인수이기 때문에 인수명은 자유롭지만 관례적으로 e 또는 event라고 명시한다. 내가 사용하는 ..
웹 프로그래밍/자바스크립트 2020. 8. 31. 10:33

[JavaScript] 자바스크립트 이벤트 핸들러와 리스너

이벤트 우리가 이용하는 웹사이트에는 수많은 기능을 제공한다. 특정 메뉴 버튼을 클릭할 때 정보가 노출된다던가 반대로 정보를 입력하면 서버에 저장 기능 등 말이다. 이러한 기능들이 없다면 웹페이지는 그냥 글자만 있는 전자문서와 동일하다. 주로 우리들은 이 웹페이지에 있는 기능을 이용하기 위해서 마우스나 키보드를 조작하여 기능을 실행한다. 바로 이러한 행위들을 이벤트라고 부른다. 이벤트 처리기 이벤트 처리기란 말그대로 이벤트 청취자, 즉 위와 같은 이벤트가 발생하는 것을 감지하는 역할을 한다. 따라서 이벤트가 발생했을 때 이벤트를 받은 다음 처리기 안에 있는 코드를 실행한다. 대개 특정 기능을 하는 함수가 실행 대상이다. 이벤트 처리기는 이벤트 핸들러와 이벤트 리스너가 있다. 핸들러 : 하나의 요소에 하나의..
웹 프로그래밍/자바스크립트 2020. 8. 30. 00:48

[JavaScript] 자바스크립트 프로토타입 객체

프로토타입 객체 자바스크립트에서 거의 모든 객체는 Object라는 객체의 인스턴스이다. 일반적으로 객체는 Object.prototype에서 프로퍼티와 메서드를 상속받는다. 즉, 대부분의 객체는 prototype을 원형으로 만들어진 것이다. 따라서 자바스크립트를 프로토타입 기반의 언어라고 부른다. 자바스크립트 함수도 객체이므로 기본적으로 prototype을 통해 만들어진다고 할 수 있다. 이러한 내용을 머릿속에 생각하고 함수를 만든다고 하자. 먼저, 함수를 선언하게 되면 함수 객체와 함께 해당 함수 이름의 prototype 객체가 별도로 생성된다. 아래 그림처럼 말이다. F1함수 객체 내부에는 prototype 이름을 가진 프로퍼티가 존재하는데 이 프로퍼티 값은 F1 프로토타입 객체를 참조한다. 반대로 F..
웹 프로그래밍/자바스크립트 2020. 8. 27. 02:20

[JavaScript] 자바스크립트 화살표 함수(Arrow Function)

ECMAScript 6부터 함수 리터럴을 화살표 함수(Arrow Function)라는 표현식으로 단축 표현이 가능해졌다. 그러나 함수 리터럴과 차이점이 있으니 이 점을 주의해야 한다. [화살표 함수] 화살표 함수의 기본적인 표현식은 다음과 같다. // 화살표 함수 표현식 // 화살표 함수는 함수 리터럴(익명함수)의 단축 표현 // 함수 리터럴 let a = function(x) { return x * x; } // 화살표 함수 let a = (x) => { return x * x }; // 인수가 하나일 때 인수 묶는 소괄호 생략 let a = x => { return x * x; } // 인수 여러개 let b = (x, y, z) => { return x + y + z; } // 인수가 없다면 소괄호..
웹 프로그래밍/자바스크립트 2020. 8. 26. 13:57

[JavaScript] 자바스크립트 클로저

자바스크립트 함수에서 클로저는 처음에 이해하기 힘든 개념 중 하나이다. 클로저의 정의 함수와 그 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합이라고 MDN web 문서에 설명하고 있다.. 무슨 말일까?? 먼저 클로저를 이해하기 위해서는 알아야 할 중요한 개념들이 있다. 바로 식별자 결정(identifier resolution), 자유, 속박 변수, 열린, 닫힌 함수, 스코프(scope)이다. 하나씩 천천히 살펴본 후 마지막에 클로저에 대해 이해하도록 하자. 식별자 결정 자바스크립트에서 식별자를 결정하는 것은 매우 중요하다. 식별자를 결정해야 해당 변수의 유효 범위를 알 수 있기 때문이다. 식별자 결정이란 변수 a가 어디에서 선언된 변수인지를 결정하는 작업을 의미한다. 만약 전역 환경, 전역 환경에서 선..
웹 프로그래밍/자바스크립트 2020. 8. 24. 19:58

[JavaScript] 자바스크립트 네임스페이스(Namespace, 이름 공간)

[전역 유효 범위 오염] 전역 유효 범위를 오염시킨다는 말은 전역 변수와 전역 함수를 전역 객체에 선언하는 행위를 말한다. 전역 유효 범위가 오염되면 변수 이름과 함수 이름이 겹치는 상황이 발생한다. 다음과 같은 상황에서 많이 발생한다. 라이브러리 파일을 여러 개 읽어 들여 사용할 때 규모가 큰 프로그램을 만들 때 여러 사람이 한 프로그램을 만들 때 전역 유효 범위 안에서 이름이 같은 변수, 함수를 선언하면 자바스크립트 엔진은 호이스팅을 할 때 동일한 이름 중 하나만 생성한다. 따라서 해당 변수나 함수를 사용하는 다른 프로그램에서 오작동이 발생할 수 있다. 심지어 오류가 발생하지 않기 때문에 디버깅이 쉽지 않다. 예를 들어 한 페이지에서 a라는 모듈과 b라는 자바스크립트 모듈을 동시에 불러올 때 해당 모..
웹 프로그래밍/자바스크립트 2020. 8. 22. 19:08

[JavaScript] 자바스크립트 즉시 실행 함수

[즉시 실행 함수] 익명 함수를 실행할 때는 아래와 같이 변수에 할당하여 그룹 연산자 ()로 실행한다. // 기본적인 익명함수 실행 let f = function () { return 10; } f(); 익명 함수를 정의하는 동시에 실행하는 구문. 결과는 차이가 없다. // 즉시 실행 함수 방법 1 (function () { return 10; })(); // 즉시 실행 함수 방법 2 (function() { return 10; }()); // 즉시 실행 함수는 함수 선언문을 그룹 연산자 ()로 묶은 것이다 ( function (){ return 10; }() ); 그룹 연산자가 안에 있는 함수 선언문을 평가해 함숫값(함수 객체의 참조 값)으로 바꾼다. 그룹 연산자 대신 아래와 같이 사용해도 된다. 그러..
웹 프로그래밍/자바스크립트 2020. 8. 21. 20:24

[JavaScript] 자바스크립트 var, let, const

이전 포스팅에서 자바스크립트 스코프에 대해 설명하면서 기본적으로 자바스크립트는 함수 레벨 스코프 규칙을 따르고 변수 선언 키워드가 var밖에 존재하지 않았다고 말했다. ECMAScript 6부터 자바스크립트도 let과 const라는 새로운 변수 선언 키워드가 추가되었고 이들은 블록 레벨 스코프 규칙을 따른다. 각각의 스코프 규칙이 무엇인지도 이전 포스팅에서 확인할 수 있다. [변수 선언 키워드] 자바스크립트 변수 선언 키워드는 다음과 같은 특징을 가진다. - var let const 스코프 규칙 함수 레벨 블록 레벨 블록 레벨 재선언 O X X 재할당 O O X [var] var 키워드는 ECMAScript 6 이전까지 유일한 변수 선언 키워드로 함수 레벨 스코프를 따르는 특징을 가지고 있다. 이 키워드..
웹 프로그래밍/자바스크립트 2020. 8. 20. 17:46

[JavaScript] 자바스크립트 스코프(scope)

프로그래밍 언어에서 스코프(scope, 유효 범위)는 가장 기본적인 개념이다. 특히 자바스크립트에서는 스코프에 대해 이해하지 못한다면 개발 도중 예기치 못한 오류들이 남발하는 상황에 맞닥뜨릴 수 있다. 아래 코드의 실행 결과에 대해 예측해보자. [스코프 예제 코드] // 자바스크립트 스코프(scope) // 전역 변수 선언 var a = 10; // 함수선언문으로 scope 선언 function scope() { var a = 20; console.log('a:', a); // 1. a.value = ? if (true) { console.log('a:', a); // 2. a.value = ? var a = 50; console.log('a:', a); // 3. a.value = ? } var f1 ..
웹 프로그래밍/자바스크립트 2020. 8. 20. 13:42

[JavaScript] 자바스크립트 프로그램의 평가와 실행 과정

자바스크립트 코드의 실행 과정을 알기 위해선 자바스크립트 내부 구조를 공부할 필요가 있다. [실행 가능한 코드] 자바스크립트 엔진은 실행 가능한 코드(Executable Code)를 만나면 그 코드를 평가해서 실행 문맥(Executable Context)으로 만든다. 전역 코드 : 전역 객체인 window 아래 정의된 함수 함수 코드 : 사용자 정의 함수 등 eval 코드 : eval 함수 위 실행 가능한 코드에 따라서 실행 문맥을 초기화하는 환경과 과정이 다르다. 특히 eval 코드는 렉시컬 환경(Lexical Environment)이 아닌 별도의 동적 환경에서 실행된다. 여기서 eval 함수에 대해 짚고 넘어가도록 하겠다. 사실 eval 함수는 모던 자바스크립트에선 잘 쓰이지 않는다. eval 함수는..
웹 프로그래밍/자바스크립트 2020. 8. 19. 23:43

[JavaScript] 자바스크립트의 this

자바스크립트를 다루면서 this에 대해서 난감했던 경험이 많다. 백엔드 Java에서 this를 사용할 때는 생성자를 만들 때나 사용했고 보통 IDE를 사용해 코드 작성의 도움을 받거나 요즘은 Spring 프레임워크나 Lombok 플러그인에서 제공하는 어노테이션을 붙여서 아예 생성자 코드를 구경하기도 어렵다. 근데 프론트엔드의 경우 개발하다 보니 this 요녀석으로 코드가 흘러가는 것을 보고 우울했던 적이 많다. this로 불러오고 this.xxx로 된 코드를 대입하는 등.. 결론부터 말하자면 개발할 때 잘 모르겠으면 그때 그때마다 this를 console.log()로 찍어보는 게 맘 편하다. 그래도 아래와 같이 요약했다. 생성자 함수나 함수 리터럴의 메서드에서 선언된 this : 해당 함수를 호출한 객체..
웹 프로그래밍/자바스크립트 2020. 8. 18. 19:49
◀ 1 2 ▶
loading

티스토리툴바