기록일지

1. 선언(Declaration)실행 컨텍스트의 변수 객체에 변수를 등록하는 단계스코프에 변수를 등록하는 단계(변수를 정의함으로써 존재를 알려주는 단계라고 생각하면 쉽다 !!)2. 초기화(Initialization)실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계선언된 변수에 저장 공간을 만들고 초기값으로 undefined를 준다고 생각하면 된다 !(콘솔에 찍어봐도 쉽게 확인할 수 있다.)let initialization;console.log(initialization); // undefined3. 할당(Assignment)undefined로 초기화 된 메모리에 다른 값을 넣는 것'=' 연산자를 통해 값을 할당해 줄 수 있다.let assignment = '할당';con..

1. 스코프(Scope)란? 스코프의 정의는 "변수에 접근할 수 있는 유효범위"이다. 중괄호(블록)이나 함수에 의해 달라진다. 2. 스코프의 2가지 타입 1. 전역 스코프 (Global Scope) 전역에 선언되어 있어 어느 곳에서든 해당 변수에 접근 가능하다. 어디서나 접근 가능해서 이게 최고다!!라고 생각할 수도 있지만 오히려 Scope Pollution이라는 문제가 생길 수 있다. 전역변수를 선언하고 그 뒤 어떤 블록에서 그 변수를 다시 선언하면 그 변수의 값은 변하게 되는 것이다. 2. 지역 스코프 (Local Scope) 크게 함수 스코프와 블록 스코프로 나뉜다. 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데 이를 함수 스코프라고 한다. 블록은 중괄호({})를 의미하는데,..

1. Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 (https://ko.redux.js.org/) => 컴포넌트가 1~2개라면 우리는 쉽게 상태관리를 할 수 있을 것이다. 그러나 실제 앱이나 웹사이트에서는 수많은 컴포넌트가 있기 때문에 react만으로는 비효율적이다. 그래서 효율적으로 쉽게 상태관리를 하는 라이브러리인 Redux가 등장했다. 2. Redux 개념정리 · Store : 상태가 관리되는 오직 하나의 공간 => getState()를 통해 상태에 접근, dispatch(action)을 통해 상태 수정, subscribe(listener)를 통해 리스너 등록 const store = createStore(reducer); / · Action : 상태의 변화가 필요할 때 액션을 발생..

1. Hook 리액트 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 이때, 클래스 컴포넌트는 상태관리나 Life Cycle의 기능이 있지만, 함수 컴포넌트에는 존재하지 않는다. Hook이 생기면서 함수 컴포넌트에서도 가능해지게 되었다. const Example = (props) => { // 여기서 Hook을 사용할 수 있다! return ; } function Example(props) { // 여기서 Hook을 사용할 수 있다! return ; } 2. useState 가장 기본적인 Hook으로 클래스 컴포넌트에서 this.state의 기능과 같다. => useState() Hook의 인자로 넘겨주는 값은 state의 초기값이다. => 차례로 state 변수, 해당 변수를 갱신할 수 있는 ..

앞서 진행했던 chatterbox client는 fetch API를 활용해 이미 만들어진 AWS 서버와 연결했었는데 이번에는 직접 Node.js에서 서버를 구축하는 스프린트를 진행했다. 1. Node Debugging - postman을 이용해 디버깅을 진행할 수 있다. - package.json에서 npm start 내용을 '--inspect'를 이용해 "start": "nodemon --inspect server/basic-server.js"로 바꿔주면 크롬창에서 새로운 디버깅을 할 수 있다. ※ 참고 사이트 : nodejs.org/ko/docs/guides/debugging-getting-started/ 2. Chatterbox Server 클라이언트는 chatterbox client의 파일을 받아..

1. Node.js = Chrome V8 javascript 엔진으로 빌드된 javascript 런타임 (V8 : 자바스크립트를 기계어로 컴파일 해준다. / 런타임 : 자바스크립트가 구동중인 환경) - 이벤트 기반의 non blocking 모델로 속도가 빠르다. - 별도의 설치 없이 node 상에서 require('') 방식으로 쓸 수 있는 모듈이 있다. ex) fs, http, url, path const fs = require('fs'); const http = require('http'); fs.readFile('./something.json', (err, data) => { console.log(data); }) http.get('http://localhost:5000/api', (res) => ..

HTTP에 대한 개념을 바탕으로 fetch API를 활용해 서버에 메시지를 요청하고 보내는 과정을 스프린트로 진행했다. 이번에 대부분의 코드는 singleton 패턴으로 작성했다. (싱글톤 패턴 : 똑같은 인스턴스를 여러 개 만들지 않고, 기존에 생성했던 동일한 인스턴스를 사용하는 패턴) 1. Chatterbox Client index.html에서는 어드밴스드 과제로 clear 버튼만 넣어줬고 나머지는 app.js에서 코드를 짰다. 싱글톤 패턴을 처음 접해서 낯설었지만, 페어가 잘 맞는 분이셔서 같이 얘기하면서 차근차근 해결했다. 아직은 get, post 모두 왜 이 코드를 사용하는지 몰라도 이게 패턴처럼 사용되는 느낌이라 문서들을 참고하며 적절히 변형했다. const githubID = '내 깃헙아이디..

1. 클라이언트(client) & 서버(server) · 클라이언트는 리소스를 사용하는 앱의 역할이며 주로 플랫폼에 따라 구분된다. => 웹 플랫폼, 스마트폰/태블릿 플랫폼, 데스크탑 플랫폼 ··· · 서버는 리소스가 존재하는 곳이라 볼 수 있고 무엇을 하느냐에 따라 구분된다. => 파일 서버, 웹 서버, 메일 서버 ··· · 클라이언트 서버 아키텍처 (Client Server Architecture) = 리소스가 존재하는 곳(서버)과 리소스를 사용하는 앱(클라이언트)을 분리시킨 것 (2티어 아키텍처라고도 부르며 리소스를 저장하는 데이터베이스가 추가되면 3티어 아키텍처라고 부른다.) ※ 프론트엔드 개발자 vs 백엔드 개발자 클라이언트처럼 사용자가 직접 사용하는 앱을 주로 개발하면 프론트엔드 개발자라고 한..

이번에는 Promise와 Async에 대한 개념을 바탕으로 스프린트를 진행했다. 1. fs module : fs.readFile 메서드는 비동기적으로 파일 내용 전체를 읽는다. fs.readFile(path[, options], callback) · path : | | | (주로 문자열) · options : | (문자열로 전달할 경우 주로 'utf8'이라는 인코딩 방식으로 연다.) · callback : (err : , data : | ) - callback const fs = require("fs"); const getDataFromFile = function (filePath, callback) { fs.readFile(filePath, "utf8", function (err, file) { if ..

1. 동기 vs 비동기 · 동기(Synchronous) : 요청을 보낸 후 응답을 받아야 다음 동작이 이루어진다. · 비동기(Asynchronous) : 요청을 보낸 후 응답과 상관없이 다음 동작이 이루어진다. 2. Callback 비동기 처리 방식으로는 출력값이 반드시 순서대로 나오지 않는다. 그러나, 순서를 꼭 지정해 주어야 하는 경우가 있는데 이런 경우를 위해 콜백 함수를 사용한다. 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 3. Callback Hell 콜백 함수를 쓰다 보면 콜백 지옥에 빠질 수 있다. 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 이런 콜백 지옥을 해결하기 위해 사용하는 것이 Promise나 Async이다. 4...