나도 개발자 시켜주세요

책 제목: 모던 자바스크립트 Deep Dive 저자: 이웅모 저 출판사: 위키북스 먼저 든 생각은 자바스크립트는 타입이 명시적인 타입정의가 없다는 것이었고, 자바스크립트 엔진이 해주는 일이구나 라는 생각을 했다. 타입변환이라고 하면, 보편적으로 Number → String으로 변경되는 것에 다시 깊게 공부할 필요까지는 없다고 느꼈다. 부르는 용어가 조금 생소했을 뿐... 명시적 타입 변환이 뭐라고, 하면서 더 나를 혼란스럽게 만들었다. 이번 기회를 통해 제대로 알고 가면 좋지 않을까 9.1 타입 변환 타입 변환은 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성한다. 타입 변환을 한다고해서 기존 원시 값을 직접 변경하는 것은 아니다. 자바스크립트에는 모든 값에 타입이 있고, 개발자는 타입을 변환할 수..

책 제목: 모던 자바스크립트 Deep Dive 저자: 이웅모 저 출판사: 위키북스 기본적인 타입을 다 공부하기보다 ES6부터 추가된 데이터 타입과 데이터 타입의 필요성에 대해서 중심적으로 정리해보려고 한다. 사실 타입 정리하기도 귀찮았는데, 필요성을 설명해 봐라 하면 아무 말 못 하는 나를 발견하고 마음을 바로 잡았다. 6.6 템플릿 리터럴 템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 런타임에 일반 문자열로 변환되어 처리된다. 이름만 거창하게 해 놓은 것 같은 기분이 든다. 그냥 작은따옴표 같이 생긴 백틱(``)을 사용한다고 보면 된다. 멀티라인 문자열은 문자열 내에서 줄 바꿈을 허용하지 않는다은 의미이다. const str = `I want to leave the office.`;..

책 제목: 모던 자바스크립트 Deep Dive 저자: 이웅모 저 출판사: 위키북스 개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것이다. 이번 장에서는 앞으로 자주 사용할 용어들에 대해서만 정리한다. 이번 장을 통해 처음으로 표현식인 문과 표현식이 아닌 문을 구분하는 법을 알았다. 값을 쓰기만 했지 구분할 줄은 몰랐던 것 같다. 근데 이게 그렇게 중요한지는 잘 모르겠다. 모르고 살았어도 죽진 않았겠지..? 값 : 표현식이 평가되어 생성된 결과 평가 : 식을 해석해서 값을 생성하거나 참조하는 것 리터럴 : 사람이 이해핼 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 // 숫자 리터럴 3 // 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값(3)..

책 제목: 모던 자바스크립트 Deep Dive 저자: 이웅모 저 출판사: 위키북스 모르는 것만 골라볼까, 고민하다가 아는 개념은 빠르게 넘기기로 .... 사실 모르는 게 더 많음 하다 보니까 할당 부분에서 var, let, const 차이를 알고 4장을 보는 것이 더 이해하기 좋을 것 같다는 생각을 했다. var는 아예 안쓰는데, 이 책에서 예제 설명할 때 var를 사용하여서 일단은 책에 있는 그대로 따라갔다. 4.1 변수란 무엇인가? 왜 필요한가? 아무리 복잡한 애플리케이션이더라도 *동작 방식은 다 똑같다. *동작 방식: 데이터 입력받기 > 처리하기 > 결과 출력하기 데이터를 관리하기 위해서 변수는 주요 개념이다. 10 + 20 사람은 위의 식을 계산하기 위해 아래와 같은 과정으로 결과인 30을 출력한..

과제형 코딩 테스트 연습 n초부터 1초마다 1씩 감소하는 타이머를 구현해보려고 한다. stop 버튼을 누르면 타이머가 멈추도록 할 것이다. react에서는 useState hook과 useEffect hook을 활용하여 설정할 수 있다. 자바스크림트에서는 setTimeout 과 setInterval 함수로 해결할 수 있다. 그 중 setInterval()를 호출해서 고정된 시간 지연으로 함수를 반복적으로 호출하고 setInterval 이 반환한는 interval ID를 clearInterval() 함수로 제거한다. import { useState, useEffect, useRef } from 'react'; const Time = () => { //컴포넌트는 useState 훅을 사용하여 min, sec..

더보기 지금까지 프론트와 백을 배우면서 다르게 구현만 해봤지 같이 합친 경우는 이번이 처음이었다. 아무런 문제 없이 합쳐지기 위해서는 CORS가 그 중심에 있었고 Full stack mini project에 사용했던 CORS에 대해 더 궁금해져서 찾아보게 되었다. CORS(Cross-Origin Resourc Sharing) CORS는 HTTP 헤더 기반 메커니즘으로 처음 리소스를 제공한 도메인이 현재 요청하려는 도메인과 다르더라도 요청을 허락해 주는 웹 보안 방침이다. Origin Origin= 프로토콜+도메인+포트 번호 Origin: https://miunoribird.tistory.com url : https://miunoribird.tistory.com/62#mount%C2%A0-1 https:/..

웹 브라우저의 렌더링이라 .. 그럼 브라우저는? 브라우저 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Explorer 등이다. 브라우저는 웹에서 페이지를 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 한다. 유저가 선택한 페이지의 요소들을 서버로부터 받아와서 유저에게 보여준다. 실시간으로 웹 사이트가 그려지는 과정, 이 과정이 웹 브라우저의 렌더링 과정이다. 인터넷 웹 브라우저는 두 개의 엔진이 있다. 1. 렌더링 엔진 사용자가 볼 화면을 그려내는 역할 압축파일을 해제해 파일을 실행하는 것과 유사 크롬, 엣지 브라우저는 크롬의 블링크 렌더링 엔진을 사용 2. 자바스크립트 엔진 - 자바스크립트 코드를 읽고, 기능을 작동시키는 역할 담겨진 내용 HTML :..

더보기 🙌 자바스크립의 메서드 map, filter, concat 등을 먼저 복습하고 react에서 응용하여 실습 코드를 작성했다. 배운 메서드만 적용하는 것이 아닌, 실습 코드에서 필요한 'Enter 입력' & '공백 입력x' & 'input 값 초기화'까지 추가했다. JavaScript 메서드 복습 map() 함수 메서드는 배열 내의 모든 요소 각각에 대한 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 필요에 따라 반복문처럼 사용 가능 arr.map(callbackFunc, [Arg]) callbackFunc : 새로운 배열의 요소를 생성하는 함수로 3개의 인수(currentValue, index, array)를 가질 수 있다. [Arg]는 생략 가능한 것으로 callbackFunc에서 ..

더보기 이미 나도 모르게 쓰고 있었다. 생각보다 별 거 없으니 쫄지 말 것. Synthetic Event는 이벤트가 너무 많아서 찾아보면서 사용하고, 익혀야 할 것 같다. Event Handling html Event : react event : 괄호x 카멜케이스 함수 이름 자체 전달. 기본 dom 요소에만 이벤트 설정 가능 synthetic Event : 웹브라우저에서 사용하는 기본 이벤트를 감싸는 새로운 기능, =리액트 고유 이벤트 객체 Synthetic Event 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤드 래퍼 SyntheticEvent 객체를 전달 받는다. =리액트 고유 이벤트 객체 import { useState } from 'react'; function Synt..

더보기 몇 주차 회고록인지 까먹었다. 리액트는 순수 자바스크립트랑은 비슷하면서도 다른 느낌이다. 그래서 더 기존 자바스크립트 개념이 흔들려서는 안 되겠다고 생각했다. 클래스형 컴포넌트는 잘 사용하지 않지만, 알아두면 좋을 것 같다. 계속 함수형 컴포넌트만 사용하다가 클래스형 컴포넌트를 마주했을 때, 어색하지 않을 정도로만 익혀두자! state React에서 앱의 유동적인 데이터를 다루기 위한 개체 컴포넌트 내에서 지속적으로 변하는 특정 값을 관리하기 위해 사용 state가 변경될 경우 자동으로 재랜더링 state 사용 state의 값을 변경하기 위해서는 반드시 setState 함수를 사용. state 값을 임의로 변경X, setState 함수를 이용해서 값을 변경!! setState 내에 변경할 값 넣기..