뭘 배웠지?

엘리스 SW 엔지니어 트랙 21일차 박성국님 실시간 강의날 노드와 타입스크립트를 강의해주실 박성국님 프로그래머가 되면 코드를 쓰는 시간보다 코드를 읽는 시간이 늘어난다 하신다 타입스크립트(TypeScript) 트랜스파일러다 Babel과 같은 JavaScript의 슈퍼셋이라 말한다 JavaScript의 모든 기능과 + 추가적인 기능도 제공 Type(유형) => 명시적인 데이터를 설명 컴파일 언어 TypeScript를 왜 사용하나? 규모가 크면 TypeScript를 사용하는 것 같다고 하신다 코드를 읽을 기회가 많아지는데, 보고 이해하기 좋은 코드(클린코드)를 사용하는데 도움이 된다 객체 복사 헷깔릴 수 있는 객체 복사 참고용 box1 = Object.assign({}, box) box2 = {...box,..

엘리스 SW 엔지니어 트랙 20일차 프로젝트날 프로젝트를 하기전에 FetchAPI와 같은 비동기 통신에 대해 알아봤다 Ajax(Asynchronous JavaScritp and XML) 비동기 자바스크립트라는 의미 화면 전체 새로고침 없이 일부 데이터만 로드 가능(비동기) 비동기를 사용한 자바스크립트를 Ajax라고 부른다!! 알고나면 컨셉은 참 쉬워~ 근데 XMLHttpRequest를 사용할 때만 Ajax라고 부를라나? Axios 웹 브라우저랑 Node.js에서 비동기 통신을 위한 라이브러리 Ajax 기법 중 하나라고 아니라 Ajax처럼 사용된다고 써있다 Fetch vs Axios Fetch 장점 자바스크립트 내장 => import, 별도 설치 필요 없음 Fetch 단점 예전 익스플로러 버전에서 지원안하..

엘리스 SW 엔지니어 트랙 19일차 온라인 강의날 async / await 사용법을 알아보고 HTTP(Hypertext Trasfer Protocol) 서버와 클라이언트 간의 통신하는 방법을 정한 것 서버와 클라이언트 사이에 많은 요소와 절차가 존재 HTTP는 이런 요소들 사이의 통신 방법 규정 여러 통신 방법 중 하나 HTTP가 나오기전에는 마구잡이 요청하고 보내고 했나보다 서버 주소, 요청 메서드, 상태 코드, target path, 헤더 정보, 바디 정보 등 포함 요청 메서드 GET - 가져올 때 POST - 보낼 때 PUT, PATCH - 업데이트 DELETE - 삭제 REST API(Representational State Transfer API) 서버 API와 클라이언트 간 통신의 구조의 베스..

엘리스 SW 엔지니어 트랙 18일차 이고잉님 실시간 강의날 16일차 싱글어플리케이션 복습으로 시작 오늘은 만든 내용을 저장하는 백엔드로 들어간다 프론트엔드 웹 서버에 index.html 등 저장하지만 해석은 클라이언트 브라우저가 한다 클라이언트 사이드 기술 = 프론트엔드 백엔드 일반 웹 서버는 동작이 정해져있지만, 커스텀 웹 서버는 모든일을 할 수 있다 이 커스텀 웹서버는 python, php, node.js, spring 등으로 만들고 DB와 소통한다 서버 사이트 기술 = 백엔드 이번주는 백엔드가 주체 웹 서버가 클라이언트에 응답하는 주체가 Json, xml, csv 요즘은 Json이 압도적으로 우세 fetch가 대박 꼭 알아야겠군 이 코드는 꼭 이해하자 fetch('/topics') .then(fun..

엘리스 SW 엔지니어 트랙 17일차 온라인 강의날 비동기, Promise에 대해 조금 깊게 들어가는날 자바스크립트 엔진은 하나의 메인 스레드 코드를 한 줄씩 실행 동기 반복문, 함수 호출 등 오랜 시간을 메인 스레드를 오래 점유하면 프로그램이 멈춘다 가령 반복문 무한루프 등 비동기 대표적으로 setTimeout(), fetch() 있다. 한 코드가 종료되기전에 다른 코드가 진행된다 시간이 걸리는 행동을 기다리며 동시에 다른 일을 처리할 수 있다 비동기 코드는 정해진 함수(setTimeout, fetch, Promise ... ) 이 함수를 비동기 API라고 부른다 Promise 비동기 처리의 순서 조종 new Promise(callback) callback에는 resolve, reject를 받는다 순서를..

엘리스 SW 엔지니어 트랙 16일차 이고잉님 실시간 강의날 저번주에 배운 Closure를 몰라도 괜찮다는 이고잉님의 격려의 말씀으로 시작 이번주 배울 Promise 지금은 다른 사람이 만든 Promise를 가지고 라이브러리를 이해할 정도만 가도 좋다 Ajax는 꼭 이해하자! 다음주에 나올 클린코드, TypeScript, 디자인 패턴 등 그냥 구경만 해도 좋다 시멘틱 태그 의미론적 태그라고도 불린다 검색 로봇이 사이트를 더욱 가치있게 사용할 수 있게 도와준다 앱을 구상할 때 데이터를 먼저 생각하자 let data = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'js', body..

엘리스 SW 엔지니어 트랙 15일차 오티 빼고 한 주에 5일씩 오늘로 3주차 마지막 날이다 1~2 주차는 쉬엄쉬엄 가는듯 하다가 3주차부터 엑셀 사정없이 밟는다 오늘도 잘 모르는 내용 아니 이제 나오는 것들 대부분 잘 모르는 이야기 집중하자! 오늘은 "옛날 옛적에 자바스크립트가 있었는데" 느낌 어떻게 움직이고, 각 역할들에 대한 이야기 자바스크립트 코드는 자바스크립트 엔징을 통해 파싱되고 실행된다 Chrome 브라우저는 V8 엔진 사용 node.js 브라우저 외에서 자바스크립트 코드를 실행할 수 있게 해주는 프로그램!! 그렇구나~ 이거봐 알고나니 개념은 별거 아니잖아 웹을 벗어나기 위한 JavaScript의 도약이라고 알아두자 브라우저 환경, node.js 환경에서 같은 코드를 작성해도 다른 작동이 될 ..

엘리스 SW 엔지니어 트랙 14일차 온라인 강의날 자바스크립트 심화의 날 보니까 실시간 강의 다음날 온라인 강의는 실시간 강의에서 배운 내용을 복습하고 살을 붙이고 튼튼하게 만드는 내용을 담고 있는구나 계획적이었어.. 온라인 강의를 좀 더 성실히 들어야겠다 아무튼 이번 온라인 강의에서는 자바스크립트 함수가 실행되는 과정으로 시작되었다 이제는 알 때가 됐다 바인딩(binding) 우선 bind()는 언제 사용할까? this를 가지고 있는 객체(object)에 사용하는 것처럼 보인다 this를 자유자재로 사용하기 위해서처럼 보인다 this가 작동하지않는/사라지는 경우가 있다 예) setTimeOut() bind에 관한 좋은 설명 링크 => https://ko.javascript.info/bind 바인드 사용..

엘리스 SW 엔지니어 트랙 13일차 오규석 코치님 스코프, 호이스팅, 실행 컨텍스트 등 익숙하지 않은 단어가 등장하는 날 단어에 쫄 필요가 없다 익숙하지 않아서 그렇지, 알고나면 별거 없다 스코프(Scope) Global과 Local 차이 호이스팅(Hoisting) 선언을 코드 맨 위로 올려진 것 같이 행동 실행 컨텍스트 어려운데 이해하면 자바스크립트 사용에 좋다고 하신다 실행 컨텍스트(Execution Context) 자바스크립트가 실행되기 위해 알아야할 정보들 필요 변수, Scope, this 등 실행 컨텍스트의 종류 전역 실행 컨텍스트 지역 실행 컨텍스트 이 2개만 존재 전역 실행 컨텍스트(Global Execution Context: GEC) 유일하게 하나만 존재 자바스크립트가 실행될 때 보유 G..

엘리스 SW 엔지니어 트랙 12일차 온라인 강의날 오늘은 더욱 집중하고 싶은 내용! DOM, 노드 그리고 이벤트에 대한 날~ 어제 실시간 강의에서 들은 내용을 한번 더 복습도 하고, 새로운 내용을 실습하는 내용도 있다 노드 Node를 이번에는 제대로 잡자! HTML DOM에서 정보를 저장하는 계층적 단위라고 엘리스의 선생님은 말하신다 또누군가 이렇게도 설명을 했었다 A node is a connection or a branch in a hierarchy, etc. where node.js would refer to the software - but you can also just call it node for a short form and most people in the coding world will..