GomJu's Coding Blog

브라우저 탐지브라우저 탐지 방법은 웹 개발에서 항상 뜨거움 쟁점입니다. 이 논쟁은 특히 과거에 가장 인기 있었떤 넷스케이프 내비게이터의 등장으로 더 일찌감치 시작되었습니다. 당시 넷스케이프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인지 확인은 하고 있지만, 에러를 막기에는 부족..

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

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

Q : 자바스크립트의 비교연산자에는 무엇이 있나요?A : 자바스크립트는 ==대신 ===을 사용합니다 :D사용자바스크립트의 비교연산자는 여러 자료형에서 사용됩니다.Objects : TrueUndefined : FalseNull : FalseBooleans : boolean형의 값Nubmer : True 하지만 0, NaN의 경우에는 False로 평가String : True 하지만 빈 문자열의 경우에는 False로 평가종류자바스크립트의 비교연산자에는 ==도 있고, ===도 있고, !=도 있고, !==도 있습니다. 하지만 자바스크립트측에서는 ===과 !==을 사용할 것을 적극 추천합니다.또 삼항연산자라고 하는 비교방법이 있습니다. 다음은 삼항연산자의 예시입니다.let a = false; const Check ..

Q : 자바스크립트에서 호이스팅이란 무엇인가요?A : Hoisting(호이스팅)은 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미합니다.자바스크립트에선 모든 변수 할당을 할 때 호이스팅이 발생합니다. 즉 변수가 함수내에 정의되었을때 선언이 함수의 최상위로, 함수 밖에서 정의되었을 때 루트에 선언이 됩니다.변수 호이스팅변수를 선언할 때 사용하는 var는 사용하는 즉시 호이스팅에 의해서 루트함수에서 선언식이 실행 됩니다. 다음은 var의 역할에 대한 코드입니다.function EXvar() { console.log(x); // undefined var x = 2; console.log(x); // 2 };위의 코드를 다시 해석해 보면 다음과 같습니다.function EXvar() { var..

Q : 자바스크립트에서는 모듈을 어떻게 불러오나요?A : 자바스크립트에서는 import를 이용해서 모듈을 불러옵니다.자바스크립트에서도 다른 언어들 처럼 모듈을 불러올 수 있습니다. 모듈을 불러오는 방법은 ES6문법이 들어오면서 간편화되었습니다.ES6 모듈 시스템의 이점ES6문법이 업데이트되면서 새로 들어온 import나 from, export, default등의 문법들은 모듈의 내보내기와 불러오기에 정말 많은 도움을 줍니다. 이처럼 모듈 전용 키워드가 생기면서 가독성이 좋아졌고, 또한 비동기 방식으로 작동하고, 모듈의 일부분만 불러오기 때문에 메모리 성능면에서도 도움이 됩니다. 또한 ES5에서 이용했던 common.js에서는 지원하지 않는 기능들이 상당히 있습니다.내보내기모듈을 내보내는 방식에는 복수객체..

Q : 자바스크립트의 비구조화 할당은 어떨때 쓰이나요?A : 자바스크립트에서 구조화된 데이터를 변수로 받기 위해 사용합니다.자바스크립트의 문법은 크게 ES5와 ES6로 나눌 수 있습니다. ES6는 ECMAscript의 6번째 에디션입니다. 지금까지 ES5문법에서 비구조화를 표현하기 위해서는 복잡한 과정을 치러야 했습니다. 다음은 ES5에서의 비구조화 하는 방식입니다.// browser var data = $('body').data(), // data has properties house and mouse house = data.house, mouse = data.mouse // Node.js var jsonMiddleware = require('body-parser').json var body = req..

Q : 자바스크립트의 함수는 어떻게 쓰이나요?A : 자바스크립트에서는 화살표함수라고하는 ES6문법이 있습니다. 정말 유용하게 사용하는 기술입니다.자바스크립트에서는 함수가 정말 중요합니다. 함수선언에는 함수선언식과 함수표현식이 있습니다. 함수 선언식은 함수를 정의하기 전에 먼저 선언하는 것 입니다. 다음은 예제입니다.function print() { return console.log('Hello JavaScript!'); };또 다음은 함수를 미리 선언하지 않는 표현식 입니다.const printFunc = function print() { return console.log('Hello JavaScript!'); };자바스크립트에서는 함수 표현식을 지향합니다.화살표 함수ES6문법에 추가된 화살표 함수는 함..