뭘 배웠지?

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

엘리스 코딩 자료구조에서 배운 내용 자료구조는 왜 배울까 프로그램에 필요한 자료를 효율적으로 담기위해 여우와 두루미가 있으면 여우는 접시, 두루미는 호리병이 편한 것처럼 적절한 것을 선택해야 된다 프로그램에서 특정 알고리즘 구현하기 위해 적절한 자료구조 사용해야 좋은 성능이 나온다 추상적 자료형 자료들과, 연산들을 개념적으로 정의 자료구조 자료 저장 방법과 자료에 적용할 수 있는 연산을 구체적으로 제공 추상적 자료형 => 자료구조 추상적 자료형을 구체적으로 구현한 것이 자료구조

엘리스 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 바인드 사용..

자바스크립트로 알고리즘 문제를 풀 때 프로그래머스 같은 곳이 아니라면 직접 입력을 구현이 필요하다 몇 가지 방법을 사용해봤는데 그 중에서 자주 사용하는 것을 까먹기 전에 기록 해놓아야겠다 3가지를 주로 사용했다 최근 것부터 살펴보면 readline 방법 1 readline 방법 2 fs 방법 1번은 엘리스 코딩 하며 2번은 엘리스 코딩 테스트를 준비하며 3번은 백준을 할 때 사용했던 것 1번 readline 방법 1 이 방법은 엘리스 코딩에서 배우다가 밑에 나올 2번 방법으로 답이 안나오는 문제가 1개 있었다 그 문제를 풀기위해 변형했다 터미널에 입력을 나가기 위해 컨트롤 + C 혹은 컨트롤 + D 를 눌러줘야된다 답안 제출시에는 자동으로 된다 const readline = require('readlin..

엘리스 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..

엘리스 SW 엔지니어 트랙 11일차 오규석 코치님 DOM 이해하는 날 Document Object Model 태그는 노드라고 할 수 있다고 하신다 DOM 구성 될 때 태그, 텍스트, 주석까지 모두 노드다 Test1 // h1 태그도 노드 Test2 // 들어있는 Test2도 노드 // 줄바꿈도 노드 Test3 Test4 // 이 녀석도 노드 // 모든게 노드!! 라고 적은 이 주석도 노드 노드 탐색 nextSibling firstChild previousSlbling nextElementSibling 등 하지만 직접 getElementyById, querySelector로 가져오기 때문에 잘 사용할 일은 없다고 한다 JavaScript에서 노드 만들어서 HTML에 넣기 let header = docume..