Front-End26 [JS] 호이스팅과 TDZ (Temporal Dead Zone) - let도 호이스팅이 된다! 처음 자바스크립트를 공부하면서 호이스팅이란 개념을 들었을 때 '단순히 끌어올린다'라는 생각만 했었다. 맞는 말이지만, 실제로 아래 코드를 실행해보면 다음과 같은 결과가 일어난다. console.log(success); // undefined; console.log(fail); // ReferenceError var success = '성공!'; let fail = '실패 ㅠ' var을 사용한 경우는 문제가 없고, let을 사용한 경우는 에러가 발생한 것을 보니까 var은 호이스팅이 되고 let은 호이스팅 되지 않는 것일까? 근데 호이스팅이 되면 끌어올려지니까 let을 사용한 경우는 그렇다치고, var로 선언한 success는 접근할 수 있는데 왜 값은 undefined지? 의문점들이 막 생겨났다. 이러한.. 2021. 6. 9. [JS] 자바스크립트 Event Loop 자바스크립트에 대해 찾아보면 자바스크립트는 단일 스레드 기반의 언어라고 한다. 그런데 단일 스레드는 한번에 한가지 일만 처리할 수 있다. 그런데 평소에 코드를 작성하고 실행해보면서 서버에서 데이터를 가져오는 도중에 다른 일을 못해 멈추거나 이를 처리하는 데 멈추거나 한 기억은 없다. 즉, 순서대로 처리하는 동기적인 방식이 아니라 비동기적으로 구현이 가능했다. 어떻게 가능한 것일까? 우선 자바스크립트 엔진, 런타임 환경에 대해 알아보자. 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행시켜주는 프로그램 혹은 인터프리터를 뜻한다. 대표적으로 그 유명한 크롬의 V8 등이 있다. 아래 사진은 자바스크립트 엔진을 간략하게 나타낸 모습이다. (출처) Heap : 메모리 할당이 일어나는 곳 Ca.. 2021. 6. 7. 코드스테이츠 파이널 프로젝트 회고 배포 링크 깃헙 링크 소개 링크 마지막 프로젝트가 끝났다😭😭😭 2주 프로젝트보다 만족한 점들도 있지만, 또 아쉬웠던 점들도 많았다. 4주 간 진행하며 이번에도 많은 것들을 배울 수 있었으며 이를 정리하는 시간을 가져보려 한다!!! Scraplan(스크랩플랜)이란? 우리 팀의 프로젝트 주제는 지도를 기반으로 해당 장소의 다양한 즐길거리를 큐레이션 형식으로 제공하고, 해당 큐레이션을 이용해 나만의 일정을 편리하게 관리할 수 있는 서비스다. (plan을 scrap 하세요~!) 비회원은 다른 사람의 일정을 구경, 카카오톡으로 공유, 일정을 직접 만들어볼 수도 있다. 거의 대부분의 기능을 사용할 수 있다!! 하지만 저장을 하려면 회원가입을 하도록 유도했다. 후후.. 실제 프로젝트 결과들을 보자면 우선 메인페이지에.. 2021. 5. 1. 2주 프로젝트 회고, My Surpin 코드스테이츠에서 몇 달간의 이머시브 과정을 지나 드디어 첫 프로젝트를 완료했다. 첫 프로젝트인 만큼 아쉬운 부분, 힘든 일이 많았지만 좋은 팀원들 덕분에 2주라는 시간을 재밌게 보낼 수 있었다! 프로젝트에 대한 소개와 느꼈던 점을 정리하기 위해 회고글을 작성해보려 한다. 깃헙링크 (소개 글은 Github에 더욱 자세히 되어있습니닷!) 배포링크 My Surpin🏄♂️ 이란?! 당신만의 북마크를 만드세요! My Surpin는 웹 서핑(Surfing🏄♂️)을 하면서 마음에 드는 사이트를 핀( Pin📌)을 꽂아 고정한다는 뜻을 가지고 있다. 즉, My Surpin = My + Surfing🏄🏼♂️+ Pin📌의 합성어다!! 인터넷에는 정말 유용한 사이트들이 많다! 이런 사이트들을 기억하기 위해 우리는 보통 .. 2021. 4. 1. 첫 React Twittler (+ 개념 정리) 코드스테이츠 과정 중 몇 번이나 만들었던 Twittler를 이번에는 그 유명한 React로 만들어보는 시간이다!!! 공식 사이트에서 몇 번이나 봐도 직접 적용하기가 너무 어렵다... 그래서 과정마다 기록을 남겨 헷갈리는 개념들을 정리해보고자 한다. (기능 구현에만 신경을 써서 CSS는 건드리지도 않았다..ㅎ) React 준비 1. 기존 폴더에 react 설치 npx create-react-app . 2. 실행 npm start Component 폴더 및 파일 생성 만들기 전, 중요한 개념이 있는데 바로 props와 state다. props vs. state 공통점 리액트에서 컴포넌트가 데이터를 다룰 때 사용하는 개념 차이점 props 읽기 전용(값 변경❌) like 함수 인자 부모 컴포넌트가 자식 컴포넌.. 2021. 2. 12. ChatterBox 만들기 ✅ 설명 클라이언트(chatterBox)에서 채팅 입력칸에 이름과 내용을 적어 제출(POST 요청)을 하면, 서버는 그에 대한 응답(저장)을 한다. 그리고 클라이언트는 다시 서버에게 GET요청을 보내 이를 바탕으로 JS에서 DOM을 구현한다. ✍ 배운 것 지금까지 배운 지식들과 새로 배운 HTTP 개념과 node.js를 이용하여 chatterBox를 만들어 봤다. 이전까진 단순히 JS로 HTML을 조작하는 것만 구현했었다면, 이번에는 직접 서버와 클라이언트를 구현하고 서버에서 데이터를 가져와 클라이언트는 이 데이터를 바탕으로 JS로 HTML을 조작하는 것이었다. 프로젝트를 통해 HTTP 통신 방법과, 이를 위한 node.js 사용법을 조금이나마 이해하고 사용할 수 있었다. 1. HTTP HTTP는 인터넷.. 2021. 2. 8. 자바스크립트 비동기 처리 방식 ✅ 비동기(Asynchronous) 란? 비동기는 하나의 요청 처리가 완료되기 전에 다음 요청을 처리하는 방식이다. 즉 순서에 상관없이 동시에 여러개의 작업을 할 수 있기 때문에 효율적이다. 왜 처리를 해야하는가? 우선 자바스크립트는 싱글스레드 방식이라 동기적으로밖에 진행할 수 없는데, 기본적으로 자바스크립트는 웹브라우저나 node.js 엔진에서 실행이 된다. 이때 엔진에는 자바스크립트를 돌리는 하나의 스레드가 존재하는데, 엔진 뿐 아니라 비동기 처리모델인 web api라는 것이 함께 동작해서 setTimeout 같은 시간이 소요되는 일을 처리한다. web api들이 자바스크립트 엔진 스레드와는 따로 비동기 처리를 해주면서 콜백함수를 가지고 이벤트 루프에 들어가 처리되는 대로 콜백함수를 자바스크립트 엔진.. 2021. 2. 2. psuedoclassical VS class[ES6] 상속 방법 자바스크립트는 프로토타입 기반 객체지향 언어언어다. 그렇기 때문에 class라는 개념이 없어서 prototype을 기반으로 class를 흉내냈다! (ES6에서 class 문법이 추가되었지만 클래스가 아닌 프로토타입을 기반으로 한 문법) 지금까지 class를 통해 객체(인스턴스)를 만드는(흉내) 프로토타입에 대해 이해를 했다면, 오늘은 객체지향의 특징 중 하나인 클래스에서 클래스로 행해지는 '상속'에 대해 공부해보려고 한다. ✅ psuedoclassical (prototype) ES6에서 class 문법이 추가되기 전에 class를 흉내내기 위한 방법 중 하나이다. 다음 예시는 Human - Student 상속을 구현하는 과정이다. 방법 뿐만아니라, 추가적인 것들도 알아보자. 우선 복습을 해보자면, pro.. 2021. 1. 16. 프로토타입(Prototype) 이해하기(2) 프로토타입(Prototype) 이해하기(1)에서는 목적인 프로토타입에 대해 공부하기보다 단순히 프로토타입 기반 언어인 자바스크립트가 어떻게 클래스 기능을 흉내내는지 알아봤다. 이번엔 정말로 프로토타입에 대해 알아보자! ✅ 자바스크립트의 프로토타입이란? 프로토타입에 대해 알기 전에 몇가지 정리하는 것이 필요할 것 같다. 나 같은 경우에도 이상한 말들이 자꾸 튀어나와 이해하는데 정말 많은 시간이 걸린것 같다 ㅠㅠ 밑에 글들을 보기전에 결론을 먼저 말하자면 정리 🖋 prototype 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 prototy.. 2021. 1. 15. 프로토타입(Prototype) 이해하기(1) C++, Java와 같은 클래스 기반 객체지향 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 언어다. 객체지향 프로그래밍에 대해서 미리 공부한 상태라고 가정할 것이다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입 객체지향 프로그래밍 언어는 클래스라는 개념이 없다. 그럼에도 자바스크립트가 객체지향 언어인 이유는 다른 방법으로 클래스의 기능을 구현했기 때문이다. (ES6에서 class 문법이 추가되었지만 클래스가 아닌 프로토타입을 기반으로 한 문법) 그리고 클래스 기반 객체지향 프로그래밍에서 명심할 것 클래스란, 객체를 만들어 내기 위한 추상적인 개념, 설계도 혹은 틀 객체란, 소프트웨어 세계에 구현할 대상, 클래스.. 2021. 1. 15. this ✅ this란? 함수 실행시 호출(invocation) 방법에 의해 결정되는 특별한 객체이다. this는 함수 실행시 결정이 되므로, 실행되는 맥락(execution context)에 따라 this는 다르게 결정된다. 모든 함수는 실행할 때마다 this라는 객체가 추가된다. arguments 객체와 함께 함수 내부로 암묵적으로 전달되는 것이다. 아무리 봐도 딱 한줄로 정의하기가 너무 어렵다. 이 말은 공부가 덜 되었다는 뜻! 우선 의식의 흐름대로 정리해보려고 한다. 함수 실행의 다섯가지 방법 함수 실행에는 다섯 가지 방법이 있다. 이때 this에게 있어서, '함수가 무엇인지?'가 중요한 것이 아니라, '어떻게 실행(호출)되는 것인지?'가 중요하기 때문에 함수 실행의 다섯가지 방법을 보도록 하자. 1. G.. 2021. 1. 12. 관련 도구 (feat. NVM, NPM, package.json) ✅ NVM node.js의 버전관리를 위한 관리 매니저 프로그램 Node Version Manager의 약자로, 간단한 명령어로 node를 설치하고, 다양한 node version을 옮겨 다닐 수 있다. 우리가 node.js로 개발을 하다보면, 어떤 버전에서는 실행이 잘되는데 다른 버전에서는 오류가 발생할 수 있다. 그렇다면 우리는 오류가 발생한 node 버전을 설치하고 수정 ⬇ 이전 버전을 가기위해, 새로 설치한 node 버전을 지움 ⬇ 사용하던 node 버전을 다시 설치 아주 불편하다! 이를 해결해주는 것이 NVM이다. 굳이 node버전을 설치하고 지우고를 반복할 필요없이, 여러 node 버전을 옮겨 다니면서 작업을 할 수 있게 도와준다. 🖋 설치 및 사용 방법 1. NVM 설치 $ touch ~/... 2021. 1. 11. 이전 1 2 3 다음
