발견 보고서

class Car { constructor(make, model) { this.make = make; this.model = model; this.userGears = ["P", "N", "R", "D"]; this.userGear = this.userGears[0]; } shift(gear) { if (this.userGears.indexOf(gear) < 0) throw new Error(`Invalid gear: ${gear}`); this.userGear = gear; } } const carA = new Car("Kia", "Morning"); const carB = new Car("Tesla", "Model S"); car1.shift("D"); car2.shift("R"); 프로토타입 클래스..

객체지향 프로그래밍 (Object-oriented programming) 이하 OOP 객체지향 프로그래밍은 컴퓨터 과학에서 절차적 프로그래밍에서 대두되던 단점. 어떤 구체적인 실재적인 정보를 다루지 못하고 추상적인 기능 구현만 가능하게 됐던 단점들을 해결하기 위해 등장한 패러다임이다. 자동차로 예를 들어보면, 객체지향 이전 절차적 프로그래밍에서는 시동을 걸거나 창문을 내리고 기어 변속을 하는 기능에 대한 함수는 만들 수 있었지만 그 자동차의 제조사, 모델명, 그리고 차량의 색깔같은 우리의 눈에서 실재적으로 보이는 부분들을 다룰 수 없었다. OOP에서는 그런 부분들을 전부 다룰 수 있게 해줌과 동시에 사물에 관해 추상적으로 생각하는 것 (세상 어딘가에 있는 자동차)과 구체적으로 (내 자동차) 생각하는 것을..

REST API Representational state transfer 의 약자로 백엔드와 클라이언트에서 어떤 방식으로 커뮤니케이션을 할지를 결정해놓은 것 RESTful Web services 로도 불린다. 많이 쓰이는 걸로는 GET POST PUT DELETE GET => 이미 존재하는 사용자의 데이터를 읽을 때 사용 POST => 새로운 사용자를 만들 때 사용 PUT => 이미 있는 사용자의 정보를 업데이트할 때 사용 DELETE => 사용자의 정보를 지울 때 사용 Graph QL 을 쓰지 않으면, 거의 대부분 REST API를 쓰기 때문에 꼭 정확히 이해하는 것이 중요하다! GET을 요청할 때 아래 이미지의 end point 이후 ? 가 있으면, query parems이 시작된다. query pa..

Fetch 실제 코딩을 할 때는 Promise를 직접 생성해서 리턴해주는 코드 보다는 어떤 라이브러리의 함수를 호출해서 리턴 받은 Promise 객체를 사용하는 경우가 더 많다. 그 중 대표적인 상황이 REST API를 호출할 때 사용하는 브라우저 내장 함수인 fetch()이다. fetch() 함수는 API의 URL을 인자로 받고, 미래 시점에 얻게될 API 호출 결과를 Promise 객체로 리턴한다. network latency 때문에 바로 결과값을 얻을 수 없는 상황이므로 이전 포스트에서 설명한 Promise의 사용 목적에 정확히 부합한다. Promise 객체의 then() 메소드는 결과값을 가지고 수행할 로직을 담은 콜백 함수를 인자로 받는다. 그리고 catch() 메서드는 예외 처리 로직을 담은 ..

내가 아직 비동기적 프로그래밍, Promise, Async, Fetch에 대해 이해를 하지 못한 것을 발견하고, 다시 정리를 해야겠다는 필요성을 느껴 다시 작성한다. 비동기적 프로그래밍 자바스크립트에는 매우 일찍부터 비동기적 실행 메커니즘이 존재했지만, 자바스크립트로 만드는 소프트웨어가 점점 복잡해짐에 따라 비동기적 프로그래밍에 필요한 장치들이 추가되었다. 자바스크립트의 비동기적 프로그래밍에는 세 가지의 패러다임이 있다. 처음에는 콜백이 있었고, Promise가 그 다음 그리고 마지막은 Async await이다. (특히 최근 문법은 Async await이 중심이 되는 것으로 보인다. 익숙해져야 한다.) 우리가 비동기적 프로그래밍을 공부해야 하는 이유는 사용자의 행동이 대부분의 경우에 비동기적으로 실행되기..

Redux Redux는 스토어를 이용한 상태관리 라이브러리이다. Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. 공식 홈페이지 상에서 정의하는 리덕스는 상태를 예측 가능하게 만들어주는 JavaScript의 앱이라고 한다. State는 컴포넌트 내에서 관리하는 것이고, React Hook에서는 useState를 통해 관리를 한다. 보통 State는 컴포넌트 내에서만 관리하기 때문에 어떤 자료를 전달하려..

최근에 또 게으름을 이겨내지 못하고, 해야할 것들에 집중하지 못하고, 도망을 쳤다. 다시 한 번 다짐을 하기 위해 글을 적는다. 사실 어떻게 공부를 해야할지 고민을 하지 않았고, 그냥 단지 해야만 하는 것을 하고만 있었다. 이제는 내가 도망을 치며 시간을 낭비했던 그 시간에 고민을 하고, 어떻게 하면 내가 하고자 하는 목표에 도달할 수 있을지 고민에 고민을 거듭하는 시간을 갖겠다. 생각을 해야 인간이다. 사는대로 생각하면 결국 짐승과 다를 바 없다. 아이디를 삭제하는 건 자신이 없었다. 그래서 동생에게 비밀번호를 바꿔달라고 부탁했다. 이렇게 함으로 인해 내 습관이 잡힐 것이라 믿는다. 하나씩 하나씩 조금씩이라도 나의 부분들을 고쳐나가겠다.

Ajax Ajax는 원래 비동기적 자바스크립트와 XML의 약어이다. Ajax를 통해 서버와 비동기적으로 통신하면 페이지 전체를 새로 고칠 필요 없이 서버에서 데이터를 받아올 수 있다. 이 시스템은 2000년 초반 XMLHttpReques의 도입으로 가능해졌고, 웹 2.0이라 불리기도 했다. Ajax의 핵심개념은 브라우저 자바스크립트에서 HTTP요청을 만들어 서버에 보내고 데이터를 받는다는 것이다. 받는 데이터는 보통 JSON 형식이다. XML로 받을 수도 있지만 JSON이 자바스크립트로 처리하기 훨씬 쉽기에 JSON으로 받는다. 브라우저에서 JSON으로 받은 데이터를 사용한다. Ajax 또한 다른 웹 페이지와 마찬가지로 HTTP위에서 동작하지만, 페이지를 불러오고 렌더링하는 부담이 줄어들어 웹 어플리케이..

패러다임 프로그래밍을 하는 기초적인 방법을 말한다. 언어에 독립적이며 어떤 프로그래밍 구조를 사용할지, 언제 구조를 사용해야 하는지를 결정하게 해주는 기준이다. 즉, 프로그래머에게 프로그래밍 관점을 제공해준다. 패러다임은 무엇을 해야할지를 제시하기 보다는 추가적인 규칙들을 부과하여 하면 안되는 기준을 제시한다. 순차적 프로그래밍(Sequential Programming), 비구조적 프로그래밍(Non-structured programming) 이름에서 유추할 수 있듯 코드가 순서대로 흘러가는 방식이다. 구조라는 개념이 없어서 goto문을 사용했다. 하지만, 수 많은 goto문의 남용으로 인해 코드 자체에 대한 이해가 어려워지고(순서를 신경써야 하므로 여기저기 왔다 갔다 해야하는) 보수를 해야되는 상황이 벌..

위 이미지처럼 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 Component Driven Development (CDD)이라 한다. 이런 방식으로 개발을 이어나가게 되면, 혹시나 수정이 들어오게 되더라도 모든 페이지에 대한 수정을 거치치 않고도 독립적인 컴포넌트를 수정하여 유동적으로 변경이 가능하게 된다. 또한 각 기술에 따른 독립적인 개발을 지향하다보니 재사용성도 늘어나 효율적인 코딩을 할 수 있게 된다. CDD가 트렌드로 자리잡으며 이 방식에 도움을 줄 수 있는 다양한 라이브러리가 등장했는데, 그 중 Story Book을 익히고자 한다. 먼저 Story Book이란 무엇일까? Storybook is an open source tool for building UI components and pag..