GomJu's Coding Blog

This자바스크립트의 This는 다른 언어와 매우매우 다릅니다. 지금까지 다른 언어를 공부해보신 분들도 있을 것 이고, OOP언어를 접해보신 분들도 계실겁니다. 하지만 모두들 자바스크립트의 this에 대하여 감을 잡기 쉽지 않을 것 이라고 예상됩니다.자바스크립트에서 this를 이해하기 위해서는 call Stack과 call Site를 이해해야합니다.Call StackCall Stack은 함수가 Stack에 쌓이고, 호출 되는 스택을 말합니다. 이때 스택은 흔히 자료구조에서 말하는 스택을 말하는 것 입니다. 만약 Javascript_ALL의 자바스크립트의 작동원리를 읽어 보셨다면 충분히 이해 가리라고 생각합니다. 이 그림은 자바스크립트의 Call Stact 동작을 나타내고 있는 사진입니다. Main 함수를..

프로미스(Promise)자바스크립트에서는 대부분의 상황에서 작업들이 비동기적으로 이루어집니다. 어떤 작업을 요청하면서 콜백 함수를 등록하면, 작업이 수행되고 난 후 결과를 나중에 콜백을 통해 알려주는 식 입니다. 실제 비동기 작업이 아니더라도 자바스크립트의 세계에서는 콜백을 통해 결과를 알려주는 패턴이 매우 흔하게 발생합니다.초기의 자바스크립트는 이벤트가 발생했을때 콜백 함수를 호출하는 정도의 수준 이었기 때문에 복잡도가 높지 않았지만 최근에는 프론트엔드의 비중이 높아졌기 때문에 자바스크립트로 작성하는 코드를 바라만 볼 수 없어졌습니다.이렇게 복잡도가 높아지는 경우에서 특히 어려워지는 케이스는 콜백의 중첩입니다. 하나의 작업을 콜백을 통해 결과를 받은 뒤 순차적으로 다음 작업을 진행하고자 할 때 이러한 ..

브라우저 탐지브라우저 탐지 방법은 웹 개발에서 항상 뜨거움 쟁점입니다. 이 논쟁은 특히 과거에 가장 인기 있었떤 넷스케이프 내비게이터의 등장으로 더 일찌감치 시작되었습니다. 당시 넷스케이프2.0은 다른 웹 브라우저보다 훨씬 발달하여 웹사이트가 사용자에게 정보를 보내기 전에 사용자 에이전트 문자열을 확인하는 것도 가능했습니다. 이 때문에 많은 브라우저 공급사, 특히 마이크로소프트에서는 어쩔 수 없이 당시 쓰였던 브라우저 탐지 방법에 맞춰 사용자 에이전트 문자열을 넣게 되었습니다.6.1 사용자 에이전트 탐지요즘에는 클라이언트에서 브라우저를 주로 탐지하지만, 초기에는 서버에서 사용자 에이전트 문자열을 기준으로 서버에서 특정 브라우저의 접속을 막아 사이트의 내용을 아예 보여주지 않았습니다. 이때 가장 큰 혜택을..

사용자 에러 던지기자바스크립트에서 에러를 발생시키는 것도 능력이 필요합니다. 에러를 어디에 발생시켜야 좋을지 감을 잡으려면 경험이 있어야 하지만 일단 감을 잡으면 디버깅하는 시간이 줄어들고 자신이 짠 코드를 보며 느끼는 만족도 높아집니다.5.1 에러의 본질프로그래밍 에러는 예상치 못하게 발생합니다. 함수에 잘못된 값을 전달하거나 산술 연산에 잘못된 연산자를 입력해 발생하기도 합니다. 프로그래밍 언어는 코드가 정해진 기본 규칙에서 벗어나면 개발자에게 코드를 수정하라는 의미로 에러를 발생시킵니다. 만약 에러가 발생하지 않는다면 디버깅은 거의 불가능해 집니다. 에러 수정은 고사하고 문제 발생을 알아차리기까지 한참이 걸릴 수 있습니다. 이러한 의미에서 본다면 에러는 개발자의 적이 아니라 오히려 도움이 되는 친구..

NULL 비교 금지변수에 필요한 값이 할당되었는지 확인할 때 null과 비교하는 방법은 흔히 잘못 사용하는 패턴입니다.const Controller = { process : (items) => { if (items !== null) { // bad items.sort(); items.forEach((item) => { // do something }); } } };위 코드는 process() 메서드의 items 변수에 sort()와 forEach()를 사용하는 것을 보아 items 변수가 배열이라는 전제하에 작성한 코드인 것을 알 수 있습니다. 코드의 의도는 명확하지만, items변수가 배열이 아니라면 로직을 수행할 수 없습니다. 이 코드는 변수값이 null인지 확인은 하고 있지만, 에러를 막기에는 부족..

UI 레이어 느슨하게 연결하기.웹 개발에서 사용자 인터페이스(UI)는 총 세 개의 레이어로 나뉘고 서로 유기적으로 작동합니다.HTML은 페이지에서 데이터와 의미를 정의하는 데 사용합니다CSS는 페이지의 스타일을 꾸미는 데 사용합니다.자바스크립트는 페이지에 동작을 부여하는 데 사용합니다.UI 레이어는 다음 그림처럼 HTML이 기본이 되고 CSS와 자바스크립트 레이어가 그 위에 있습니다.그림에서는 CSS 위에 자바스크립트가 있지만 실제로는 자바스크립트가 CSS에 의존한다기 보단 서로 형제같은 관계입니다. 자바스크립트 없이 HTML과 CSS만으로 페이지를 만들 수 있고, 그 반대로 CSS 없이 자바스크립트와 HTML만으로도 페이지를 만들 수 있습니다. 세 레이어의 관계는 다음 그림과 같습니다.전체 UI에서 C..

프로그래밍 프랙티스란?도서 : '읽기 좋은 자바스크립트 코딩 기법' - 니콜라스 자카스 "소프트웨어를 디자인할 때는 두 가지 방법이 있다. 하나는 너무 간단해서 확실히 결함이 없게 디자인 하는 것 이고, 또 하나는 너무 복잡해서 확실히 결함이 없게 디자인 하는 것 이다." -C.A.R Hoare스타일 가이드라인을 공부하며 코드를 작성한 사람에 관계없이 코드를 일관성 있게 작성할 수 있도록 돕기 위한 것 입니다. 지금부터는 스타일 가이드라인에서는 다룰 수 없었던 문제, 개발할 때 누구나 한 번쯤은 겪거나 고민하는 문제와 그 해결 방법을 알아봅시다. 먼저 프로그맹 프랙티스를 소개하겠습니다.프로그래밍 프랙티스프로그래밍 프랙티스는 또 다른 코딩 규칙으로 스타일 가이드라인이 코드의 외간에 중점을 두었다면 프로그래..

기본 포맷스타일 가이드의 핵심은 기본 포맷 규칙입니다. 규칙에 따라 코드를 어떻게 작성할지 큰 틀에서 정합니다. 개발자가 중요하지 않게 생각하는 문법들을 다루기도 하지만 코드를 일관되게 작성하려면 이런 모든 규칙이 중요합니다.1.1 들여쓰기들여쓰기는 자바스크립트 뿐만아니라 거의 모든언어에서 첫번째로 결정하는 부분입니다. 마치 종교적 논쟁처럼 소프트웨어 엔지니어들끼리 몇 시간동안 논쟁할 수 있는 주제입니다. 들여쓰기가 재대로 되어있지 않으면 일관성이 없기 때문에 코드를 빠르게 이해할 수 없게됩니다.들여쓰기에는 크게 두 가지 의견이있습니다.탭을 이용한 들여쓰기들여쓰기를 탭으로 처리합니다. 즉 한 단계 들여쓰기는 탭 한번이고, 두 단계 들여쓰기는 탭 두번, 이런식으로 사용됩니다. 이 방법에는 여러 장점이 있습..

스타일 가이드라인을 따르는 이유.도서 : '읽기 좋은 자바스크립트 코딩 기법' - 니콜라스 자카스 "프로그램은 우선 사람이 이해할 수 있어야 한다. 컴퓨터에서 실행되는가는 부차적인 문제다." -도널드 커누스각자 다른 일을 하던 사람들이 모여 처음 한 팀을 이루면 코드작성 방법도 일치하지 않고, 제각각이기 마련입니다. 모두가 다른 환경에서 일해왔기 때문에 코드작성 방법에 대한 생각도 서로 다릅니다. 이에 따라서 코드 작성 방법을 통일할 필요가 있습니다. 따라서 팀이 구성되면 스타일 가이드라인부터 가능한 빨리 세워야 합니다.보통 '스타일 가이드라인'과 '코딩 규칙'을 자주 혼동하여 사용합니다. 스타일 가이드라인은 소스코드의 레이아웃에 초점을 맞춘 코딩 규칙입니다. 반면 코딩 규칙은 프로그래밍 관례와 디렉터리..

Q : 자바스크립트의 예외처리는 어떻게 진행되나요?A : 자바스크립트에선 대표적으로 try catch문을 통해서 예외처리가 진행됩니다.자바스크립트의 예외처리는 다른 언어들과 다르지 않습니다. 먼저 예외처리가 무엇인가에 대해 설명드리겠습니다.예외처리예외처리는 프로그램이 실행되는 동안 문제가 발생할 때 대처할 수 있게 처리하는 것입니다. 이때 예외는 프로그램 실행 중 발생하는 오류이고, 에러는 프로그래밍 언어의 문법적인 오류입니다.예외처리에는 기본예외처리와 고급예외처리로 나눌 수 있습니다.기본예외처리기본적인 예의처리에는 if문의 else if문이 있습니다.if (node.addEventListener) { node.addEventListener(event, listener, false); // 파이어폭스, ..