일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 스타일가이드라인
- javascript
- React 리액트
- Null비교 금지
- 변수 선언
- 자바스크립트의 기본 포멧
- 자바스크립트 코드 스타일
- 함수 호이스팅
- JS 이벤트
- 자바스크립트 클래스
- Programming Practice
- 리엑트 이벤트
- UI 레이어
- 객체지향프로그래밍 언어
- JS cod e style
- 트라이캐치
- js
- 사용자 에러
- Try...catch
- 자스
- 비구조화 할당
- 브라우저 탐지
- 자바스크립트
- html5
- 자바스크립트 생성자
- 에이전트 탐지
- 자바스크립트 문자열
- 프로그래밍 프랙티스
- 에러 던지기
- 자바스크립트 객체
- Today
- Total
목록 (36)
GomJu's Coding Blog
UI 레이어 느슨하게 연결하기.웹 개발에서 사용자 인터페이스(UI)는 총 세 개의 레이어로 나뉘고 서로 유기적으로 작동합니다.HTML은 페이지에서 데이터와 의미를 정의하는 데 사용합니다CSS는 페이지의 스타일을 꾸미는 데 사용합니다.자바스크립트는 페이지에 동작을 부여하는 데 사용합니다.UI 레이어는 다음 그림처럼 HTML이 기본이 되고 CSS와 자바스크립트 레이어가 그 위에 있습니다.그림에서는 CSS 위에 자바스크립트가 있지만 실제로는 자바스크립트가 CSS에 의존한다기 보단 서로 형제같은 관계입니다. 자바스크립트 없이 HTML과 CSS만으로 페이지를 만들 수 있고, 그 반대로 CSS 없이 자바스크립트와 HTML만으로도 페이지를 만들 수 있습니다. 세 레이어의 관계는 다음 그림과 같습니다.전체 UI에서 C..
프로그래밍 프랙티스란?도서 : '읽기 좋은 자바스크립트 코딩 기법' - 니콜라스 자카스 "소프트웨어를 디자인할 때는 두 가지 방법이 있다. 하나는 너무 간단해서 확실히 결함이 없게 디자인 하는 것 이고, 또 하나는 너무 복잡해서 확실히 결함이 없게 디자인 하는 것 이다." -C.A.R Hoare스타일 가이드라인을 공부하며 코드를 작성한 사람에 관계없이 코드를 일관성 있게 작성할 수 있도록 돕기 위한 것 입니다. 지금부터는 스타일 가이드라인에서는 다룰 수 없었던 문제, 개발할 때 누구나 한 번쯤은 겪거나 고민하는 문제와 그 해결 방법을 알아봅시다. 먼저 프로그맹 프랙티스를 소개하겠습니다.프로그래밍 프랙티스프로그래밍 프랙티스는 또 다른 코딩 규칙으로 스타일 가이드라인이 코드의 외간에 중점을 두었다면 프로그래..
주석주석 작성은 개발보다는 문서 작성에 가까운 일이라 개발자에게는 가장 인기 없고 최대한 미루고 싶어하는 일 입니다. 하지만 전체적인 코드의 유지보수를 위해 주석은 정말 중요합니다. 주석이 없는 파일에 작업할 때는 새로운 모험을 하는 것처럼 흥미진진한 기분을 느낄 수 있지만, 프로젝트 마감일이 코 앞이면 그건 모험이아니라 고문입니다. 적절한 주석이 있으면 코드를 처음 부터 일일이 살펴볼 필요 없이 코드의 작성 이유를 바로 파악하고 작업을 시작할 수 있습니다.2.1 한 줄 주석한 줄 주석은 두 개의 슬래시를 이용해 작성하고, 그 줄에서 끝납니다.// 한 줄 주석보통 두 개의 슬래시를 입력하고 주석을 입력하기 전에 한 칸을 띄웁니다. 한 줄 주석은 3가지 방법으로 사용합니다.주석을 입력하기 전, 한 줄을 비..
기본 포맷스타일 가이드의 핵심은 기본 포맷 규칙입니다. 규칙에 따라 코드를 어떻게 작성할지 큰 틀에서 정합니다. 개발자가 중요하지 않게 생각하는 문법들을 다루기도 하지만 코드를 일관되게 작성하려면 이런 모든 규칙이 중요합니다.1.1 들여쓰기들여쓰기는 자바스크립트 뿐만아니라 거의 모든언어에서 첫번째로 결정하는 부분입니다. 마치 종교적 논쟁처럼 소프트웨어 엔지니어들끼리 몇 시간동안 논쟁할 수 있는 주제입니다. 들여쓰기가 재대로 되어있지 않으면 일관성이 없기 때문에 코드를 빠르게 이해할 수 없게됩니다.들여쓰기에는 크게 두 가지 의견이있습니다.탭을 이용한 들여쓰기들여쓰기를 탭으로 처리합니다. 즉 한 단계 들여쓰기는 탭 한번이고, 두 단계 들여쓰기는 탭 두번, 이런식으로 사용됩니다. 이 방법에는 여러 장점이 있습..
스타일 가이드라인을 따르는 이유.도서 : '읽기 좋은 자바스크립트 코딩 기법' - 니콜라스 자카스 "프로그램은 우선 사람이 이해할 수 있어야 한다. 컴퓨터에서 실행되는가는 부차적인 문제다." -도널드 커누스각자 다른 일을 하던 사람들이 모여 처음 한 팀을 이루면 코드작성 방법도 일치하지 않고, 제각각이기 마련입니다. 모두가 다른 환경에서 일해왔기 때문에 코드작성 방법에 대한 생각도 서로 다릅니다. 이에 따라서 코드 작성 방법을 통일할 필요가 있습니다. 따라서 팀이 구성되면 스타일 가이드라인부터 가능한 빨리 세워야 합니다.보통 '스타일 가이드라인'과 '코딩 규칙'을 자주 혼동하여 사용합니다. 스타일 가이드라인은 소스코드의 레이아웃에 초점을 맞춘 코딩 규칙입니다. 반면 코딩 규칙은 프로그래밍 관례와 디렉터리..
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..