본문 바로가기
반응형

Coding/TIL (Today I Learned)

 (29)
브라우저는 어떻게 동작 할까 - Basic Web Architecture 드디어 클라이언트와 서버 간의 요청과 응답을 주고받는 과정을 공부하고 있다. 매일 사용하는 브라우저와 그 안의 웹페이지 뒷단에서 통신이 이루어지는 과정을 배우는 건 흥미진진하고 놀라운 일이다. 이렇게나 복잡한 과정을 통해 이루어지는 일들을 나는 정말 무심하게 당연하게 사용하고 있었구나 라고. 하지만 알아둬야 할 내용이 상당히 많다. Browser HTML로 작성된 웹페이지를 볼 수 있도록 해주는 응용 소프트웨어다. (크롬, 사파리, IE 등) 컴퓨터는 2진수만 이해할 수 있지만, 우리가 작성한 코드를 컴퓨터가 이해할 수 있는 것은 브라우저 덕분. 브라우저는 사용자가 선택한 자원을 서버에게 요청하고, 받은 내용을 다시 브라우저에 나타낸다. 다시 말하면, 사용자가 웹브라우저를 통해 웹서버에게 Request ..
함수이름 앞에 언더바(_)를 쓰는 이유 함수 명 앞에 _ 언더 바가 있는 코드를 발견했다. 왜일까? var printArray = function() { function _print(targetArr) { //왜 print가 아니라 _print로 썼을까? //코드생략 } } _print(arguments[0]); }; 코딩 컨벤션(스타일 가이드) 함수명 앞에 _ 언더바를 붙여주는 것은 일종의 코딩 컨벤션이다. 코딩 컨벤션이란 프로그래밍 언어별로 권장하는 코딩 규칙(스타일)이다. 예를 들면 구글에서 권장하는 방식은 링크를 통해 확인할 수 있다. 반드시 따라야 하는 룰이라기 보다는 이해하기 쉬운 코드를 작성하기 위한 가이드 정도로 참고해서 활용할 수 있다. 보통은 지역변수나 sub function일 경우 이름앞에 언더바를 써 주는데 이는 자바스크..
Time Complexity: 시간 복잡도와 Big-O 표기법 Complexity Analysis(복잡도 분석) 복잡도란 알고리즘이 문제를 해결하는 데 있어서 시간(time complexity)과 공간(space complexity)을 얼마나 차지하는지를 나타내는 지표이다. 여기서 공간 복잡도는 코드를 저장하고 수행하기 위한 시스템 공간 등을 의미한다. 시간과 공간의 복잡도는 왜 중요할까? 시간과 공간의 복잡도가 그 알고리즘이 얼마나 효율적인지를 나타낼 수 있기 때문이다. 시간과 공간이라는 자원이 무한정이라고 가정한다면 이 복잡도라는 것은 의미가 없다. 심지어 알파고 조차도 플레이 가능한 모든 가짓수를 계산해서 넣는다면 거의 무한에 가까운 경우의 수가 나온다고 해도 언젠가는 가능할 것이기 때문이다. 하지만 현실적으로는 불가능한 일. Time complexity 이 ..
[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..

티스토리툴바