GomJu's Coding Blog

HTML이 5버전이 나오면서 신규로 추가된 여러 엘리멘트가 있습니다. HTML5를 공부하면서 저번에 봤던 것들인데 다시한번 보니까 또 새로워서 오늘은 이중에서 태그의 재미있는 타입들을 포스팅 해드리려고합니다. 목차는 이렇게 이루어집니다. date timeweekmonthdatetimeDate Timeinput의 type으로 datetime-local 이라고 Mark-UP 해주면 다음과 같은 이미지가 나타나게 됩니다. 처음에는 JS를 이용해서 코딩을 했었는데 HTML로 간편하게 표기할 수 있는게 정말 대단한 것 같다고 생각했어요. datetime-local 은 연도, 월, 일, 시간 모두 나타나 줍니다. Week Week 타입은 datetime과는 달리 주별로 띄워줍니다. 이름값 잘 하네요 ㅎㅎ. mont..

프로미스(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스타일 가이드라인을 공부하며 코드를 작성한 사람에 관계없이 코드를 일관성 있게 작성할 수 있도록 돕기 위한 것 입니다. 지금부터는 스타일 가이드라인에서는 다룰 수 없었던 문제, 개발할 때 누구나 한 번쯤은 겪거나 고민하는 문제와 그 해결 방법을 알아봅시다. 먼저 프로그맹 프랙티스를 소개하겠습니다.프로그래밍 프랙티스프로그래밍 프랙티스는 또 다른 코딩 규칙으로 스타일 가이드라인이 코드의 외간에 중점을 두었다면 프로그래..

주석주석 작성은 개발보다는 문서 작성에 가까운 일이라 개발자에게는 가장 인기 없고 최대한 미루고 싶어하는 일 입니다. 하지만 전체적인 코드의 유지보수를 위해 주석은 정말 중요합니다. 주석이 없는 파일에 작업할 때는 새로운 모험을 하는 것처럼 흥미진진한 기분을 느낄 수 있지만, 프로젝트 마감일이 코 앞이면 그건 모험이아니라 고문입니다. 적절한 주석이 있으면 코드를 처음 부터 일일이 살펴볼 필요 없이 코드의 작성 이유를 바로 파악하고 작업을 시작할 수 있습니다.2.1 한 줄 주석한 줄 주석은 두 개의 슬래시를 이용해 작성하고, 그 줄에서 끝납니다.// 한 줄 주석보통 두 개의 슬래시를 입력하고 주석을 입력하기 전에 한 칸을 띄웁니다. 한 줄 주석은 3가지 방법으로 사용합니다.주석을 입력하기 전, 한 줄을 비..

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