ARABOJA ARABOJA

당연히 Node.js 를 설치해야겠죠. 공식홈페이지에 가서 LTS버전으로 설치합시다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS와 Current 버전에 대한 차이는 쓰지 않겠읍니다. LTS가 안정적인 버전이라 생각하시면 됩니다. 잘 설치됬는지 볼까요. CMD창을 켜고 아래처럼 입력해주세요. 저랑 같은 결과가 나왔다면 성공입니다. node라고 입력하고 나서 > 이렇게 입력화면이 나타나죠? 이걸 REPL(Read Eval Print Loop)이라고 한답니다. REPL 에서 빠져나오는 방법은 Ctrl + C를 두번 누르거나 .exit 라고 입..

노드로 프로젝트를 하려다가 너무 부족한 자신을 발견해서 node.js를 제로부터 알아갈 수 있도록 정리하는 연작(?)을 써보려고 한다. 딱 내 눈높이에 맞게... 사실 제로는 안되구요. Javascript, HTML5, CSS3는 아셔야 합니다. 1. Node.js 배경사 JavaScript는 1994년 브랜든 아이히 라는 분이 만들었습니다. 웹이 발전함에 따라 자바스크립트는 웹에서 빠질 수 없는 존재가 되었습니다. 자바스크립트의 활용도가 높아지면서 브라우져 밖에서 자바스크립트를 사용해보자 라는 아이디어가 나왔습니다. 그렇게 해서 탄생한 것이 Node.js 입니다. (라이언 달 이라는 분이 만드셨읍니다.) Node.js가 나오기 전에는 LiveWire나 Jaxer를 사용했다고 하지만, 당시에는 JavaS..

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. onClick 같은 이벤트에서 함수를 부르도록 쓰면 이 에러가 발생할 때가 있다. 그 해결법이다. 예를들어 이런 코드가 있다고 해보자 메뉴 이렇게 쓰면 당첨이다. 왜 Maximum update depth exceeded 가 뜨냐하면... 함수를 부른다 > render를 다시한다 > 또 함수를 부른다 > 반복 함수를 부른다? ..

프로젝트 진행 중 정말 절망적인 상황이 생겼는데 하위 컴포넌트에서 상위 컴포넌트를 제어해야 하는 상황이었다. 사실 구조를 현명하게 고려하지 않고 진행해서 생긴 상황이다. 이런 방법이 있었다. 상위에서 state를 만들고, 그 state를 바꾸는 함수를 하위 컴포넌트에 props로 넘긴다. import React, { Component } from 'react' import Header from './Header/Header.js' import Section from './Section/Section.js' import Footer from './Footer/Footer.js' export default class Container extends Component { state = { section: 'm..

리액트는 Component 단위로 개발한다. 근데 그거 말고는 딱히 정해진 양식이 없다. 이벤트 제어도 자유 (권장하는 방식이 있긴 있음) css 스타일링도 자유다. 그래서 너무 허허벌판에 서있는 것 같은 느낌이 들어서 디자인 패턴에 대해 하나 알아두면 그나마 규칙성 있는 정돈된 코드를 만들 수 있지 않을까? 그러니까 가장 유명한 방법인 Container + Presenter 패턴에 대해서 아주 간단하게 ARABOJA. 우선 Container + Presenter 패턴에 대해서 한마디로 정의하면 !-! 데이터처리와 데이터출력을 분리 (logic과 presenter를 분리) 그러니깐 Container : API Request, Exception Error, setState... ETC... Presente..

JavaScript에서 this는 쓰이는 상황에 따라서 의미가 달라진다. 오늘은 this가 쓰이는 세가지 상황을 정리해볼까 한다. 물론 더 있을텐데, 나는 크게 세가지경우로 나뉜다. 세가지 상황을 보기전에, 그냥 this라 하면 뭐가 나오는지 보고 시작하는게 좋을 것 같다. console.log(this) this는 기본적으로 Window다. Window가 아닌 경우의 this 세가지를 ARABOJA. 1. 객체를 가르키는 this function Car (name, maxSpeed) { this.name = name this.maxSpeed = maxSpeed this.whoIsThis = function () { console.log(this) console.log(this.name) } } var ..

1. let, const는 ES6에서 추가된 문법 2. var는 기존에 있던 문법 let, const와 var의 차이를 이해하려면 hoisting, scope에 대한 개념이 필요하다. 먼저 기존의 var에 대해서 알아보자. 1. var var는 기존 문법으로 매우 유연하고 관대한 녀석이다. 그런데 너무 관대해서 문제도 좀 있었다. 1-1. scope var의 scope는 function이다. var a = 'im free' function imLockedUp () { var a = 'im locked up' console.log(a) } imLockedUp() console.log(a) if(true){ var a = 'im free' } console.log(a) 위 예제들로 var의 scope를 명확..

프로토타입은 이럴 때 필요하다. 예를 들어 자동차라는 객체를 정의한다고 가정해보자. function Car (name,maxSpeed,n) { this.name = name this.maxSpeed = maxSpeed this.currentSpeed = 0 this.speedUp = () => { this.currentSpeed += n } this.speedDown = () => { this.currentSpeed -= n } } 정상적으로 작동할 것이다. 그런데 문제가 있다. 만약 Car 객체가 아주 많다면 어떻게 될까? 모든 Car 객체가 speedUp, speedDown 기능을 내장할 것이다. 모든 Car객체가 같은 기능을 중복으로 가지고 있는 것이다. 즉 메모리 낭비다. 그렇기 떄문에 proto..