Connecting the dots

1. 오늘 공부한 내용 📝 ES6 복습 Object Shorthand function getName(first, last) { let fullName = first + " " + last return { first : first, last: last, fullName: fullName } } function getName(first, last) { let fullName = first + " " + last return { first, last, fullName } } Array Destructuring const arr = [1, 2, 3, 4, 5]; const [a, , , b] = arr; const [, , , , , c] = arr; const [, , , , , d=10] = arr; con..

1. 오늘 공부한 내용 📝 try / catch 예외 처리를 위한 문법 try 블럭 내에서 에러가 발생하면 catch 블럭에서 처리할 수 있음 throw를 통해서 일부러 에러를 발생 시킬 수 있음 async function 이름 그대로 비동기 함수임을 선언하는 함수 함수를 실행하면 Promise 객체를 반환함 명시적으로 Promise 객체를 반환해도 동일 함 await는 async 함수 내에서만 사요 가능 promise가 완료될 때까지 다음 코드를 실행하지 않고 기다림 HTTP이란? HyperText Transfer Protocol HTML같은 하이퍼미디어 문서를 전송하기 위한 프로토콜 단순히 서버와 통신하는 것을 의미 디바운싱 연속적으로 호출되는 함수들 중 마지막 함수만 호출 기법 사용자의 마지막 행동..

1. 오늘 공부한 내용 📝 비동기 프로그래밍 JSON 데이터 Promise 익히기 Fetch API 비동기 프로그래밍? 코드가 완료될 때까지 기다리는 방식이 동기 프로그래밍(현재까지 방식) 코드가 실행되고, 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이 비동기 프로그래밍 function sleep(ms) { const start = Date.now(); while ((Date.now() - start) < ms); } sleep(5000); sleep이 동작하는 동안 다른 부분은 실행되지 않고 while문만 계속 반복됨 실제로 돌려보면 브라우저가 렉걸린 듯 동작 됨 Javascript는 싱글 쓰레드로 동작함. ⇒ 이벤트 루프를 통해 동기 프로그래밍의 단점을 해결 ⇒ 실제론 브라우저에서 멀티 쓰..

1. 오늘 공부한 내용 📝 Scope : Global / Local 실행 컨텍스트(Execution Context) 실행 가능한 코드가 실행되기 위해 필요한 환경 (객체 형태) 변수, 함수, 스코프(scope), this 코드를 형상화하고 구분하는 추상적 개념 코드가 실행 시 생성되고, 완료되면 소멸 "Context": { variableObject: { arguments: null, variable: [...], }, scopeChain: ["해당 되는 스코프"], this: "함수가 호출된 형태에 따라 할당" } Lexical Scope : 함수 호출이 아닌 선언한 곳을 기준으로 스코프를 결정 Scope Chain : 스코프의 레퍼런스가 차례로 저장된 리스트, 함수가 정의될 때를 기준으로 만들어짐 호..

1. 오늘 공부한 내용 📝 컴포넌트 개념 변수(var, let, const), 클래스 export, default export, import Arrow function 기존의 함수를 간단하게 사용할 수 있음 대신 몇가지 제한점이 존재 this값이 바인딩 되지 않음 생성자를 사용할 수 없음 객체 객체는 데이터와 함수의 집합 값을 가진 것을 프로퍼티(property) 함수를 가진 것을 메소드(method) const person = { name : "John", age : 30 } person.name = "Bob"; // 변경 가능 person == { name : "Bob", age : 30 } // 변경 불가 Object.freeze()? - 모든 걸 상수로 감싸고 싶을 때, 잘 쓰진 않음. 이런 것도..

1. 오늘 공부한 내용 📝 7일차는 강의는 없이 자바스크립트 문제집만 풀어서 따로 새롭게 배우게 된 내용은 없었다. 최근에 코딩테스트를 대비해서 알고리즘 문제를 풀고 있어서 크게 어렵지 않게 금방 풀었다. 8일차 이론 강의는 다음과 같은 목차로 진행됐다. DOM 복습 BOM은 무엇일까? 다양한 이벤트 사용해보기 jQuery 알아보기 추후에 배울 리액트의 Virtual DOM을 이해하기 위해서는 DOM에 대한 이야기는 꽤 중요하다. 그렇다면 DOM은 알겠고, BOM은 무엇일까? 솔직히 BOM이라는 단어는 처음 들어봤다. 수업을 들으면서 느낀건데 그래도 좀 배웠다고 생각했는데 모르는 부분이 너무 많은 것 같다. BOM (Browser Object Model) 문서 이외의 모든 것을 제어하기 위해 브라우저가 ..

1. 오늘 공부한 내용 📝 왜 웹개발자를 시작했는가? 앞으로 웹은 더욱 강력해질 것이다. 코치님이 수업을 통해 알려주시지만 개발자는 결국 스스로 공부해서 채워나가야한다. 자바스크립트란? 객체 기반 스크립트 언어 : 객체란? 객체는 변수들의 모음, DOM? 인터프리터 언어 한 줄씩 기계어로 변경하여 실행하기 때문에 중간에 에러가 발생해도 이전 코드들은 실행된다. C, Java와 같은 언어는 전체 코드가 컴파일러를 거쳐 컴파일 될 때 에러를 잡아주는데 인터프리터 언어는 에러를 잡기 어렵다는 단점이 있다. 대표적인 인터프리터 언어 : JavaScript, Python, SQL 컴파일러 vs 인터프리터 누가 더 빠를까? → 컴파일러가 더 빠름. 한줄 씩 바꾸는 속도보다 컴파일러에서 기계어로 바꾸는 속도가 훨씬 ..

1. 오늘 공부한 내용 📝 협업 관리 도구 Git, 왜 사용할까? 가지 치기와 병합 가볍고 빠르다 분산 작업 데이터 보장 준비 영역 (Staging area) 오픈 소스 Git 호스팅 서비스 : Github, Bitbucket, GitLab... 2. 어려웠던 내용 🤯 지금껏 단순히 혼자 개발을 하면서 commit을 남기고 저장 용도로만 사용해서 git add, git commit, git push의 무한반복이였는데 branch 개념과 다 거의 처음 접하다 보니까 아직은 어렵다.. 다음 주부터 팀 프로젝트가 있으니까 앞으로 사용해보면서 익히는게 더 빠르게 와닿을 것 같다. 3. 궁금한 내용 / 부족했던 내용 🧐 Git은 Working directory(Untracked), Staging area, Git..

1. 오늘 공부한 내용 📝 2. 어려웠던 내용 🤯 3. 궁금한 내용 / 부족했던 내용 🧐 4. 느낀 점 🤔

1. 오늘 공부한 내용 📝 Transform (rotate, scale, skew, translate) Transition(property, duration, timing-function, delay) Animation prefix 접두사 2. 어려웠던 내용 🤯 3일차 이론 수업에 배웠던 내용이지만 지금까지 flex만 주구장창 써오다가 grid.. 좀 헷갈린다. 하지만 배워놓으면 그 동안 flex container만 계속 만들던거보다는 더 좋은 코드를 짤 수 있을 것 같다. 3. 궁금한 내용 / 부족했던 내용 🧐 현업에서는 transform을 쓸 때마다 prefix 접두사를 일일이 사용하나? 더 효율적인 방법은? 박건후 코치님께서 이런 prefix를 처리해주는 tool이 있다고 했던 것 같은데 찾아봐야겠..