GomJu's Coding Blog

오랬만에 글을 올린다!필자는 블로그를 만들때 client와 server로 나눠서 진행했다. server는 app.js에 여럿 미들웨어를 등록시켰다. 다음은 server의 package.json파일이다.{ "name": "blog-server", "version": "0.0.1", "description": "make blog with node", "main": "app.js", "scripts": { "start": "nodemon app", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "bcrypt": "^2.0.1", "connect-flash": "^0...

현재 T-Story를 사용하여 블로그를 운영하고 있는 필자이다.필자는 자신이 직접 독학하며 공부하면서 알게된 사실이나, 지식을 타인과 공유하기 위해 블로그를 작성했다. 하지만 블로그를 운영하는 것은 쉽지 않았다. 현재 점점 블로그를 유지하기 힘들어 지고있는 상태이다. 따라서 필자는 대안을 세웠다. 그리곤 실행했다. 필자는 T-Story에서 제공하는 블로그가 마음에 들지 않았다. 매번 MD를 통해 github에 업로드 후 복사해서 포스팅하는 작업이 귀찮기만 했고, 양심에 찔렸다. 따라서 필자는 블로그를 만들기로 결심했다. 여기서 잠깐, 블로그를 무엇으로 만드느냐... 블로그는 내가 직접 서버와 클라이언트를 제작한다. 서버는 공부한지 얼마 안되서 미숙하고 실력은 형편없지만 API를 제공해주는 형식으로 만들어..

React SyntheticEventGetInputData = event => { this.setState({ [event.target.name]: event.target.value }); }; GetInputData(event)} />;ReactJS를 공부하고 여러 프로젝트를 진행해보며 나의 코딩 능력이 향상되고 성장하면서 여러 코드를 보았다. 그 중 Input 태그의 Text들을 State에 저장하기 위해선 위의 자바스크립트 코드 처럼 사용해야 한다. state를 변경 해주기위해 this.setState()를 사용하고, 변경할 state에 input 값을 넣어준다. 이 함수에서 Parameter로 event를 받아왔다. 그리곤 이를 이용해 [event.target.name]과 event.target...

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