오묘한

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..

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..

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..

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] 를 읽으며 내가 외우기만 했던 문법의 동작 원리가 어떤 식으로 이뤄지는지도 알 수 있었고, 내가 잘못 알고 있던 부분을 파악할 수도 있었다. 이 책의 가장 큰 장점은 매끄럽고, 술술 잘 읽히는 서술 + 번역이다. 타 기술서적을 읽을 때와 달리 책을 읽으며 정말로 '술술 읽힌다'고 느껴졌다. 번역 해주신 분들이 정말 번역을 잘 해주셨다고 생각했다. (잘된 기술서 번역은 이렇게 초보 개발자를 구하기도 한..

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

본선 (8/19 ~ 8/24) 그 어느때보다 빡센 개발 기간 마켓컬리 해커톤은 본선 진출 후 19일부터 24일까지 개발 기간이 약 5일 정도로만 주어졌다. 그래서 5일 안에 우리가 생각한 아이디어를 빠르게 구현해야만 했다. 협업툴(Git) 우선 함께 사용할 github repository를 만든 후, git 컨벤션을 같이 의논했다. 커밋 메시지의 경우 쉽게 커밋 내용을 알아볼 수 있도록 gitmoji를 사용하기로 했다. React(Redux, Redux-toolkit, CSS-Module사용) 이번 프로젝트에서 나는 Redux를 처음으로 익혔다. Vuex와 유사점이 많아서, 쉽게 익힐 수 있었다. 특히 dispatch를 통해 Actions를 작동시키는 부분이나, Vuex의 mutations처럼 직접 st..

1주차 (8/1 ~ 8/6) 주제 정하기 우리 팀은, 다행히 1주차에 주제를 빠르게 정했다. 1) 카테고리 기준으로 나눠서 검색 결과 보여주기 + 2) 라이프스타일이 비슷한 유저에 기반해 제품 추천 이다. 1) 카테고리에 기준해 검색 결과를 보여주는 방식은 마켓컬리의 원재료나 신선함을 잘 보여줄 수 있고, 경쟁사보다 제품 수가 적음에도 검색 결과를 한 눈에 확인하기 어려운 마켓컬리의 단점을 보완할 수 있을 것이다. 2) 라이프스타일이 비슷한 유저에 기반해 제품 추천은 박리다매, 타겟층 불분명한 타 커머스와 달리 명확하게 라이프스타일에 기준하여 나와 비슷한 사람들이 애용하는 제품을 추천받는다는 느낌이 들어 상대적으로 세련되고 고급화된 이미지의 마켓컬리의 이미지와 맞다고 판단했다. (그간 광고홍보학과에서 공..

엘리의 드림코딩으로 공부하는 GitHub Action(https://youtu.be/iLqGzEkusIw) 깃허브 액션 5가지 키워드 1) Event: main 브랜치로 머지하거나, 커밋 푸쉬하거나, 이슈 누군가 여는 등 이벤트 실행 시 2) Workflow: 특정 이벤트 발생 시 이 워크 플로우의 Job들이 실행. 3) Jobs Workflow 안의 여러가지 Job들 병렬 처리됨(필요하면 순차처리 하도록 지정 가능) Job 안에는 step1>step2>.. 이렇게 순차적으로 처리되도록 명령어(step) 저장. 4) Actions 재사용할 수 있는 명령문 가장 먼저 action check out 을 step에 집어넣은 후, 이후 step에서 활용 가능. 5) Runner Job을 실행하는 것 / VM 머..