본문 바로가기
반응형

Coding

 (39)
[JavaScript] This의 특징과 5가지 패턴 this의 개념을 이해했다고 생각했다가도 다른 사람이 쓴 코드를 읽을 때는 this가 무엇을 가리키고 있는지 헷갈리곤 한다. 자바스크립트에서 this 키워드는 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자로, 함수가 실행되는 동안 이용할 수 있다. this는 5가지 패턴을 가지고 있는데 엄격 모드(strict mode)와 비 엄격 모드에서도 일부 차이가 있었다. 공부를 하면서 코드의 문맥을 잘 읽기 위해서 this의 패턴을 잘 알아둘 필요를 느꼈다. 익숙해지고 있지만 글로 정리하면서 한번 더 개념을 잡고자 한다. this의 특징 this의 값은 함수를 호출한 방법이 결정한다. 실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다. 함수를 어떻게 호출했는지와 무관하게 t..
Basic CSS: Units, box-sizing, position, float, display 지난 이틀간 웹페이지 클론코딩을 했습니다. 이번 과제는 페이지의 기능적인 부분은 전혀 다루지 않고 화면을 구성해 내는 작업이었습니다. Pre코스에서 가볍게 CSS를 다뤄본 경험은 있지만 화면에 요소들이 많아지니 쉽지 않더군요. 현재 버전의 airbnb사이트의 코드들을 참고하며 작업하면서 중요했던 CSS들을 정리해봅니다. Summary of CSS Units 폰트, 마진 등을 설정할때 친숙한 px이나 %외에도 em, rem, px등이 함께 섞여 나오는데요, 각각의 유닛 개념을 알아야 활용할 수 있겠죠. 아래 설명에서 뷰포트는 웹페이지가 사용자에게 보여지는 영역입니다. CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다. - 절대단위 : in, cm, mm, pt, pc가 있으며 출력장..
[JavaScript] __proto__, constructor, prototype의 관계, 그리고 Class 자바스크립트가 가지고 있는 __proto__, constructor, prototype라는 용어부터 혼란스러운 이 세 가지의 개념과 관계에 대해 정리해 봅니다. Prototype이란? 자바스크립트의 모든 객체는 부모 객체를 가지고 있으며 연결되어 있는데 이 때 부모 객체를 프로토타입 객체(또는 prototype)라고 합니다. 이로 인해 객체지향 프로그래밍의 상속 개념과 같이 부모 객체의 프로퍼티와 메서드를 사용할 수 있습니다. Prototype을 사용하는 이유는, 생성자 함수로 생성된 모든 객체가 프로퍼티, 메서드를 공유할 수 있습니다. 상속을 구현할 수 있습니다. __proto__란? (prototype을 이용한 Class 흉내내기) 객체를 생성하면 동시에 객체에는[[prototype]]라는 것이 생성..
[Javascript] 명령어 return의 쓰임 return은 어떤 반환 값을 얻을 때 쓰는 명령어로만 알고 있었다. 그러다 스프린트를 진행하면서 반환 값이 없는 return을 사용하는 케이스들을 접하고 return의 역할에 대해 정리해본다. return의 용도 MDN의 설명에 따르면 'return 명령문은 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환합니다.'라고 되어있다. 함수 중단 주어진 값을 함수 호출 지점으로 반환 함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환하는데, 이때 값을 명시하지 않으면 undefined를 반환한다. 아래와 같은 명령문은 모두 함수 실행을 중단한다. return; return true; return false; return ..
[Javascript] 논리연산자를 이용한 변수 초기화 코드를 리팩토링 하면서 다른 분들의 논리연산자를 활용한 짧은 코드들을 접하게 됐습니다. 그리고 논리연산자를 잘 활용하면 간결한 코드를 작성할 수 있다는 걸 배웠어요. 기본적인 논리연산자의 종류 논리 AND(&&) expr1 && expr2 : expr1의 값이 true이면 expr2를 반환하고, false이면 expr1을 반환합니다. 논리 OR(||) expr1 || expr2 : expr1의 값이 true이면 expr1를 반환하고, false이면 expr2을 반환합니다. 논리 NOT(!) !expr : 단일 피연산자의 값이 true이면 false를 반환합니다. 그렇지 않으면 true를 반환합니다. false로 변환할 수 있는 표현 5가지 null NaN 0 빈 문자열 (" ", ' ', ``) unde..
[JavaScript] Recursion (재귀) 코드 반복 작성만이 익숙해지는 길인가, 좀처럼 익숙해지지 않고 있는 애증의 재귀 함수. 오늘은 Recursion 재귀에 대해 정리해 본다. Recursion 이란? 함수는 자신도 호출할 수 있는데, 함수 안에서 자기 자신을 다시 호출하는 프로그래밍 패턴을 말하며 '재귀 함수'라고 한다. 재귀 함수를 사용할 때에는 반드시 재귀 함수를 끝내는 종료 조건(초기화)이 필요하다. 종료 조건을 설정하지 않으면 시스템이 무한 루프의 재귀함수를 돌아서 메모리 오류가 발생한다. 재귀는 같은 종류의 작업을 반복적으로 실행할 때 유용하다. 재귀함수를 쓰는 이유는? 재귀적 알고리즘은 비 재귀적인 알고리즘으로 변환할 수 있다. 재귀는 반복문과 유사하다. 둘 다 동일한 코드를 여러 번 실행하고 종료 조건이 필요하다. 일부 함수는..
Data Structure 03. Tree, Binary Search Tree Tree 나무를 뒤집어 놓은 것처럼 하나의 시작 노드로부터 자식 노드들이 파생되는 자료 구조다. 트리는 항상 root부터 시작해서 아래로 가지치기를 한다. 트리 구조는 그래프의 한 종류로 단일한 방향성을 가지며 원형 구조(순환구조)로는 존재하지 않는다. 하나의 노드에는 하나 이상의 차일드 노드가 붙을 수 있다. HTML의 구조가 좋은 예시가 된다. 관련 용어들 Root : 시작하는 노드를 가리킨다. 하나의 트리에는 1개만 존재. Leaf : 자식 노드가 없이 트리의 가장 마지막에 위치한 노드를 말한다. Parent / Child : 연결된 상위 부모 노드를 parent, 하위 자식 노드를 child라고 한다. Edge/Branch: 노드와 노드의 연결 선 Path: 노드 간의 연결 Children / S..
Data Structure 02: Linked List 노드가 데이터와 포인터를 가지고 일렬로 연결된 형태의 자료 구조. 포인터는 다음 데이터의 주소를 가지고 있다. 데이터의 주소를 일일이 찾아다녀야 하기 때문에 배열보다 느릴 수 있다. 배열은 배열의 길이를 늘리거나 줄일 수 없는 반면, 링크드리스트는 연결된 데이터의 주소를 추가/삭제 해서 데이터를 늘리거나 줄일 수 있다. 따라서 길이가 정해지지 않은 데이터를 핸들링 할 때 적합함. Graph 노드들이 다양한 연결관계를 갖고 있는 자유로운 형식의 자료구조. 네트워크 모델 이라고도 한다. 그래프에는 노드와 엣지가 있으며 에지의 방향이 있으면 Directes graph, 없으면 Undirected graph라고 한다. 검색방법에는 깊이우선검색Depth First Search, 넓이우선검색 ..

티스토리툴바