분류 전체보기180

• 

  [Javascript] 자바스크립트 함수와 클래스의 this binding 서론 오늘은 자바스크립트에서의 함수와 클래스의 this binding의 차이점에 대해서 알아보도록 하겠습니다. 차이점을 알기 위해선, this가 동작하는 방식에 관해 이해해야 합니다. 본론 함수에서의 this 함수에서의 this는 실행환경(런타임)과 함수가 선언된 방식에 따라서 다릅니다. 먼저 런타임이 node.js에서 확인해보도록 하겠습니다. 함수 선언식과 함수 표현식으로 선언된 함수 안에서의 this는 global 객체를 가리킵니다. 반면, 화살표 함수로 선언된 this는 module.exports를 가리킵니다. 그 까닭은 후자에선 상위 스코프의 this를 가리키는데, 전역 스코프에서의 this가 가리키는 것이 module.exports 이기 때문입니다. function printThis() { co.. Language/JS(Node.js) 2022. 3. 29.

• 

  [자바스크립트] map 함수에서 비동기 콜백 처리하기 학습목표 Promise.all을 활용하여, 비동기 콜백함수의 응답을 처리할 수 있다. 본론 흔히 배열을 순회해, 원하는 형태의 값으로 변환할 때 우리는 Array.prototype.map 함수를 사용합니다. 문제는 map 함수를 순회하는 과정에서 네트워크 요청을 거쳐야 한다면 일반 콜백함수가 아니라, 비동기 콜백을 처리해야 할 것입니다. 이 때, 비동기 콜백 함수가 실행된 결괏값을 리턴 받으려면 어떻게 해야 할까요? Promise 대신 말이죠. 정답은 Promise.all을 사용해주면 됩니다. Promise.all(iterable) Promise.all 메서드는 파라미터로 순회 가능한 객체를 전달 받을 수 있습니다. 이 경우에는 map 함수의 리턴 값이 되는 객체가 되겠죠. 리턴 값은 요청이 성공적일 때.. Language/JS(Node.js) 2022. 3. 28.

• 

  [예외처리] Python 에러 종류와 예외처리 서론 학습목표 파이썬에서의 예외처리 방법에 대해서 학습한다. 파이썬에는 어떤 종류의 에러 객체들이 알고 활용할 수 있다. 본론 오늘은 간단하게 Python에서의 예외처리와 자주 발생되는 에러의 종류에 대해서 정리해보도록 합니다. 대표적인 에러 종류 8가지 IndentationError SyntaxError IndexError ValueError NameError TypeError AttributeError KeyError IndentationError 이 에러는 정확하게 들여쓰지 않으면 발생됩니다. 파이썬에서는 들여쓰기로 스코프를 판단하는데, 아래와 같이 올바르게 들여쓰기를 처리하지 않으면 에러가 발생됩니다. # 잘못된 들여쓰기의 예 def introduce_name(name): print(name) >.. Language/Python 2022. 3. 27.

• 

  [Algorithm] 코딩테스트를 위한 Python 기본 문법 정리 서론오늘은 코딩테스트 문제 풀이를 위해서 빼놓을 수 없는 기본 문법에 대해 알아보도록 하겠습니다.본론입출력입력함수 : input()input 함수를 통해 입력 값을 받아올 수 있습니다.a = input()>>> "안녕하세요 반갑습니다"print(a) // 안녕하세요 반갑습니다공백을 기준으로 나누기 : split()input()의 리턴값은 문자열입니다. 따라서 이번엔 문자열 내장함수인 split을 통해, 주어진 문자열을 공백을 기준으로 나눌 수 있습니다. 반환값은 리스트 형태입니다.b = input().split()>>>> "3 5 6 7"print(b) // ['3', '5', '6', '7']문자열을 정수형으로 바꾸기 : map (변환 함수, iterable)이번엔 map 함수를 통해, 문자열 리스트를.. Language/Python 2022. 2. 23.

• 

  [Typescript] 자주 쓰이는 Utility Types 정리하기 본론 오늘은 타입스크립트에서 자주 활용되는 Utility Types에 관하여 간단하게 정리하는 시간을 갖겠습니다. Partial Partial은 모든 타입을 옵셔널하게 불러옵니다. Pick Pick은 특정 타입의 일부분을 불러와 사용합니다. 타입의 key 값을 통해 가능합니다. interface Todo { title: string; description: string; completed: boolean; } type TodoPreview = Pick; const todo: TodoPreview = { title: "Clean room", completed: false, }; Required 모든 타입을 필수 타입으로 지정합니다. 기존 속성타입이.. Language/Typescript 2022. 2. 16.

• 

  [Python] 기본 문법 정리하기 (자바스크립트와의 차이점) 서론대상독자기존 자바스크립트 기본 문법에 대해서 알지만, 새롭게 파이썬을 학습하려는 개발자학습목표자바스크립트와의 문법적 차이를 알며, 실제 파이썬으로 코딩할 수 있다.본론변수선언먼저 자바스크립트와는 다르게, 파이썬에는 var, const, let 과 같은 변수선언문이 없습니다. 따라서 변수에 값을 할당 할 때, 변수 이름만 적고 값을 할당해주면 됩니다. 아래와 같이 말이죠. 또 기본적으로 let과 var처럼 값을 재할당 할 수 있습니다.name = 'joonfluence'print(name) // joonfluencename = 'heyJoon' // heyJoon기본 자료형자바스크립트 자료형과의 차이자바스크립트에는 7가지 자료형이 있습니다. 6가지 기본 자료형(Primitive Type)에 속하는 nu.. Language/Python 2022. 2. 13.

• 

  [Javascript] 이벤트란 무엇인가? 해당 글은 향후 수정될 수 있습니다. 참고 바랍니다 (1/23) 본론 이벤트 객체 앞서 DOM 구조를 살펴보았습니다. DOM의 가장 상위 객체는 Object이고 그 하위 객체는 Event입니다. 그래서 해당 요소를 상속함으로써 활용할 수 있는 요소들을 살펴보겠습니다. 아래와 같이 말이죠. 대표적으로 type 정보가 있고, target 프로퍼티가 있습니다. 전자는 이벤트 타입에 대한 정보를, 후자는 이벤트를 발생시킨 DOM 요소를 반환하죠. 참고한 사이트 https://velog.io/@niyu/40%EC%9E%A5-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Language/JS(Node.js) 2022. 1. 23.

• 

  [Javascript] DOM(Document Object Model)이란? 서론 오늘은 브라우저를 이해하는 가장 중요한 개념 중 하나인 DOM에 대해서 알아보겠습니다. 또한 Event Programming에 대해서도 간략하게 설명 드리겠습니다. 그럼 바로 본론으로 가겠습니다. 본론 정의 1) DOM은 HTML 문서의 계층적 구조와 정보를 표현한다. 2) DOM은 자료구조이다. 트리 자료구조이다. 그래서 DOM tree라고도 부르는데, 이는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다. 3) DOM은 API이다. DOM은 프로퍼티와 메소드를 갖는 객체를 제공하며, 프로그래머는 이를 활용하여 자신에 접근하고 수정할 수 있다. 그래서 DOM API(Application Programming I.. Language/JS(Node.js) 2022. 1. 23.

• 

  [ES11] Nullish Coalescing Operator // 1번 { const name = "Lee"; const userName = name || "Guest"; } // 2번 { const name = "Lee"; const userName = name ?? "Guest"; } 1번의 문제점은 name = ""과 같이 공백으로만 사용자가 입력해도 "Guest"를 반환한다는 점입니다. 2번은 1번의 단점을 보완할 수 있는데요, name이 전혀 입력되지 않으면 name에 "Guest"가 할당되기 때문입니다. Language/JS(Node.js) 2022. 1. 19.

• 

  2021년 회고록, "프로그래머로서의 첫걸음을 뗀 해" 뒤늦게 작성하는 2021년 회고록 개인적으로 바빴던 일이 조금씩 정리되면서 여유가 생기기 시작했습니다. 그래서 늦게나마, 작년 한 해에 관한 회고록을 작성해보려고 합니다. 2021년은 제게는 2020년에 비해 많은 일들이 있었던 시기입니다. 작년처럼 키워드 별로 올 한해를 정리해보려고 합니다. 두 번의 이사 저는 올해 두 번의 이사를 했습니다. 한 번은 서울에서 안산으로, 또 한 번은 본가가 이사하며 화성으로 이사했습니다. 첫번째 이사는 경제적인 이유와 취업에 집중하기 위함이었고 두번째 이사는 본가에서 이사를 했기에 하게 된 이사였습니다. 첫번째 선택에 대해서는 만족합니다. 서울에서 지낼 때보다 본가로 내려와서 취업을 준비하는게 도움이 많이 되었거든요. 심리적으로 더 안정되었던고 결과적으로 공부에 집중할.. 생각정리/회고 2022. 1. 16.

• 

  [Javascript] Script defer & async 해당 글은 추후에 수정 보완될 수 있습니다. (1/15) script async 와 defer의 차이점 head 태그 안에 삽입할 경우 body 태그 맨 아래에 삽입할 경우 head + async : HTML parsing과 동시에 발생한다. head + defer 💡 결론은 head + defer 방식이 가장 안전하고 효율적!! defer도 async처럼 비동기적으로 파싱되는 것은 맞으나, HTML 파싱이 끝난 후 스크립트가 실행된다. 참고 사이트 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+) Language/JS(Node.js) 2022. 1. 15.

• 

  [Javascript] 스코프란? 해당 글은 추후에 수정 보완될 수 있습니다. (1/15) 서론 먼저 알아야 할 점 var와 let, const의 스코프는 다르게 작동한다. 스코프는 변수 그리고 함수와 깊은 연관이 있다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있다. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y); // ReferenceError: x is not defined 본론 스코프 블록 스코프, 전역 스코프, 지역 스코프 .. Language/JS(Node.js) 2022. 1. 15.