나도 개발자 시켜주세요

책 제목: 모던 자바스크립트 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..

🗣️ 프로젝트 소개 Full stack Mini Project ⏰ 개발 기간 2023.04.28 ~ 2023.04.30 ⚙️ 개발 환경 Front-End : React Back-Ent : Node.js Express Server : Mysql ✍ Todo List 기능 - 파비콘 설정 - document.title 변경 - 엔터 입력/ 빈값 입력 x - 반응형 -show / create / edit / delete - 취소선 - 내림차순 정렬 - checkbox 크기 변경 ✍ 코드 기술 Client Public index.html에서 favicon.ico 수정 src components AppTodo.js OnBuutonClick addItem 함수 실행 공백 입력 X input 초기화 onEnterKe..

더보기 🙌 자바스크립의 메서드 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 내에 변경할 값 넣기..

더보기 front -> back 을 지나서 다시 front로 돌아왔다. 지금부터 가장 많이 사용하고 있는 react에 대해 배웠다. 아직 순수 자바스크립트만으로 코드 짜는 것도 벅차지만, 리액트를 배우면서 하나씩 더 채워나갈 예정이다. React 현재 가장 많이 활용하는 UI 화면을 만들기 위한 자바스크립트 라이브러리이다. 웹의 규모가 커지면, DOM을 직접 건드리게 되면서 코드가 복잡해진다. 리액트는 UI 상태가 변경되었을 때, 처음부터 새로 만들어서 보여주자는 아이디어에서 생겨났다. 속도와 성능의 문제는 가상 Dom인 Virtual Dom으로 빠르게 변경하고 Virtual Dom과 Dom을 비교하여 브라우저 Dom에 패치한다. react는 특정 환경에 렌더링하기 위해 다른 라이브러리와 함께 사용될 뿐..