분류 전체보기 143

[엘리의 드림코딩 JS] 6. Class vs Object

https://youtu.be/_DLhUBWsRtw class 내에 속성(fields, property)만 있고 method 없는 경우는 데이터 class라 부른다. 1. class(틀, 자체에 데이터는 없다 => 메모리에 안올라간다.) - template - declare once - no data in 2. object(객체, 인스턴스. 실제 데이터 있음 => 메모리에 올라감) - instance of a class - created many times - data in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript reference - JavaScript | MDN The JavaScript reference..

[엘리의 드림코딩 JS] 5. 함수(Function)

https://youtu.be/e_lU39U-5bQ Function은 sub-program이라고도 불린다. 그만큼 function은 프로그램의 작동에 있어 중요하다! //Function // - fundamental building block in the program // - subprogram can be used multiple times // - performs a task or calculate a value // 1. Function declaration // function name(param1, param2) {body ... return; } // one function === one thing // naming: doSomething, command, verb // e.g. create..

[엘리의 드림코딩 JS] 3. 데이터 타입, 호이스팅

https://youtu.be/OCCpGh4ujb8 변수 선언 : let(mutable) vs const(immutable) // 2. Variable // let (added in ES6) rw(read/write 둘다 가능) let globalName = 'global name' { let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); console.log(globalName); } console.log(name); console.log(globalName); // var (don't ever use it) // var hoisting (move declaration from bottom to top) // has no b..

[엘리의 드림코딩 JS] 2. script async, defer, use strict

https://youtu.be/tJieVCgGzhs script async와 defer Web API란? : JS가 제공하는 것이 아니라 브라우저가 제공하는 함수들.(더 많은 Web API들: https://console.spec.whatwg.org/) Console Standard Abstract This specification defines APIs for console debugging facilities. Table of Contents 1 Namespace console 1.1 Logging functions 1.1.1 assert(condition, ...data) 1.1.2 clear() 1.1.3 debug(...data) 1.1.4 error(...data) 1.1.5 info(...d..

[엘리의 드림코딩 JS] 1. JavaScript의 역사

https://youtu.be/wcsVjmHrUQg 엘리의 드림코딩 - JS의 역사 자바스크립트는 넷스케이프의 Navigator 브라우저에서 사용할 수 있도록 만들어진 스크립팅 언어인 Mocha(=>Live Script)가 그 기원이다. 넷스케이프 사는 당시 Java의 인기를 이용하기 위해 1994년 Live Script를 JavaScript라는 이름으로 바꾼 것이다. 1995년 마이크로소프트 사는 이 JavaScript를 revers Engineering하여 JScript라는 것을 만들게 된다. 이렇게 되니 개발자들은 Internet Explore와 Netscape의 브라우저, 둘 다에서 돌아가게 웹을 만들어야 해 매우 복잡했다. 결국 Netscape가 이런 상황을 방지하고자 ECMA internati..

브라우저에 URL을 입력하면 어떤 일이 일어날까?

https://youtu.be/T2WqQcqssoE [가장 쉬운 웹개발 with Boaz] https://youtu.be/T2WqQcqssoE 브라우저에 URL을 입력하면 일어나는 일 - 기본 CS 지식 브라우저에 URL을 입력하면 크게 2가지 일이 일어난다. 1) 브라우저에서 파일을 가져오고, 가져온 파일을 브라우저에서 렌더링 한다. 우선 1) 브라우저에서 파일을 가져오는 과정부터 OS와 메모리와 연결지어 확인해보자. 하드웨어 종류 1. CPU: GPU에 비해 좀 더 커다랗고 복잡한 일을 처리하는 유닛(크기가 크고, 개수가 적다) - Core: 각종 연산을 수행하는 핵심 요소, 스레드 단위로 Core 단위에 맵핑 2. Memory(ROM, RAM): 기억 장치. 3. 연산장치 4. Control Uni..

브라우저 동작 원리 - 브라우저는 어떤 순서로 동작하는가?

https://www.youtube.com/watch?v=oLC_QYPmtS0 출처: [가장 쉬운 웹개발 with Boaz] Browser Elements 7가지와 그 역할 1. 사용자 인터페이스 : 주소표시줄, 홈버튼, 새로고침 버튼 등 브라우저 상에서 페이지 외에 사용자가 컨트롤할 수 있는 부분 2. 브라우저 엔진 : 1) 사용자 인터페이스의 요청(주소창에 URI 입력, 새로고침 버튼 누르기 등)을 렌더링 엔진에 전달 2) 사용자 인터페이스에서 입력받은 URI 요청에 대한 자료를 자료 저장소에 접근해 찾아봄(캐싱 기법) 3. 렌더링 엔진 : 브라우저 엔진이 요청한 URI를 받아서 서버에 요청한 후, 응답받은 데이터를 받아 통신 레이어, 자바스크립트 해석기, UI 백엔드에 파싱 후 전달한다.(보다 자세..

You Don't Know JS - 자바스크립트가 이렇게 재미있다고?

우연히 도서관에서 발견한 보물같은 책이다! 보물같다고 하는 이유는, 이 책 덕에 '아, 자바스크립트는 정말 재밌다. 자바스크립트 공부 재밌다.'라는 감정을 처음으로 느꼈기 때문이다. 전에는 언어 문법 공부는 필요하니까 하는 것이고, 그냥 외우는 것으로 생각했다. 하지만 이 [You Don't Know JS] 를 읽으며 내가 외우기만 했던 문법의 동작 원리가 어떤 식으로 이뤄지는지도 알 수 있었고, 내가 잘못 알고 있던 부분을 파악할 수도 있었다. 이 책의 가장 큰 장점은 매끄럽고, 술술 잘 읽히는 서술 + 번역이다. 타 기술서적을 읽을 때와 달리 책을 읽으며 정말로 '술술 읽힌다'고 느껴졌다. 번역 해주신 분들이 정말 번역을 잘 해주셨다고 생각했다. (잘된 기술서 번역은 이렇게 초보 개발자를 구하기도 한..

[마켓컬리 해커톤 회고] 5주차: 결선 진출, 그리고 최종 우승!

결선 준비 (8/29 ~ 8/31) 사실 나는 우리 팀이 결선에 진출할 것이라고 생각을 못했어서, 결선 진출 메일을 보고 한참을 눈을 비볐다. 원래 해커톤 시작할 당시 목표(라기보단 희망사항이었다.)가 결선 12팀에 선발돼 입사 특전을 받는 것이긴 했지만, 본선 설명회 당시 워낙 많은 팀들이 올라왔었기 때문에 그 중 우리 팀이 선발될 거란 기대는 조금 내려놓았었다. 그런데 우리 팀이 진짜 선발되다니, 감동보단 놀라움이 더 컸던 것 같다. (그리고 결선 당일, 더 상상치 못한 일이 발생했다. 최종우승이라니) 시연 영상 제작 마켓컬리 해커톤 최종 PT는 5분 간의 발표(시연 포함)와 5분 간의 심사위원과의 질의응답으로 구성되었다. 처음에는 서비스를 직접 발표 당시 직접 시연할 생각이었지만, 1) 총 5분이라..