나도 개발자 시켜주세요

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

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

더보기 이론으로 처음 들어본 듯한 표현식의 이름이라 생소했다. swap 부분에서는 다른 언어로 코드를 짜는 것보다 훨씬 코드가 짧고 간결해서 보기 좋았다. 그리고 자바에서 하던 get set..을 여기서 또 만났다. 언어를 많이 접한다는 건 좋은 거니까..ㅎㅎ 자바스크립트 es5까지만 해도 자바스크립트에는 클래스가 없었다고 한다. ES6 버전이 되면서 클래스와 비슷한 구조 문법을 추가하였다고 하니, 사용하는 것이 개발자의 숙명이지 않을까 라는 생각이 든다. 구조 분해 할당 구조 분해 할당은 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는다. 구조 분해 할당에는 배열 구조 분해와 객체 구조 분해가 있으며, 할당이라는 말이 익숙하듯 "변수의 값을 할당한다"랑 비슷하다. 배열 구조 분해 const[변수..

동기 처리 vs 비동기 처리 작업을 어떤 흐름으로 처리할거야? 세탁기가 다 돌아가야 설거지를 시작할 수 있어! => 동기 처리 세탁기가 돌아가는 동안 설거지를 하자! => 비동기 처리 동기 처리(Synchronous) : A가 B의 작업 완료 여부를 확인하고 완료를 기다리는 것 비동기 처리(Asynchronous) : A가 B를 부를 때 콜백함수를 같이 보내서 B의 작업이 끝나면 콜백함수를 실행하고, 호출 이후, B가 완료하든 말든 신경쓰지 않는다. setTimeout() setTimeout() 메서드는 시간이 만료되면 지정된 코드를 실행하는 타이머 역할이다. //delay동안 기다리다가 code 함수 실행 setTimeout(code, delay); 기다리지 않고 다음 줄을 실행함 => 비동기 처리 비..

🪙 todays-account-book 프로젝트 소개 1인 가구를 위한 가계부 ✍ 프로젝트에서 담당한 기능 start page 떨어지는 동전 animate.style transform: translate(), rotate(), skew() 사용 animation-duration으로 동전마다 시간 조절 main 사용 설명서 sweetalert2 사용자의 여러 가지 경우 생각 -> then if문 반복 => 피드백 : 이 아니라 함수 사용을 했어야 했다. 다른 팀원께서 강사님께 질문했다가 피드백을 받은 부분이었다. 사용자가 사용 설명서를 읽을 경우 / 읽지 않을 경우 / 읽다가 중간에 닫을 경우를 생각하여 close 버튼과 다음 버튼으로 구성 하였다. 맞춤형 생활 정보 swiper slider 사용 cove..

03/17 팀 배정 강사님께서 배정해 주신 팀으로 팀을 배정받았다. 어색한 공기가 흐르는 정적을 깨고 자기소개를 하고, 팀원 간 간단한 인사를 주고받았다. 이렇게 어색해 죽겠는데 팀이름을 정하라는 말씀에 팀 이름까지 정하고 팀장님을 뽑았다. 깃 레포지토리 깃에서 팀 레포지토리를 만들고 팀원들 각 개인의 브랜치에서 pull/add/commit/push 하는 과정을 익혔다. 25일 (토) 2시 발표 누가 거짓말이라고 좀 해줬으면 좋겠는 심정이었다. 일주일 만에 모든 것을 끝내야 하는 프로젝트라 아무 생각이 들지 않았다. 03/18 계획서 작성 - 기획 시작, 팀 역할 분배, 레이아웃 구성 -> 자세한 구현은 개발하면서 수정 밥 먹기 전까지 계획서 다 제출하는 게 오늘의 반이었다. 팀원 모두 적극적으로 의견을..

DOM HTML 문서는 node와 object의 집합으로 구성된다. dom 으로 각각의 node 또는 object에 접근해 문서 구조 , 스타일, 내용 등을 변경할 수 있다. Document : 웹 페이지에 존재하는 HTML 요소에 접근할 때 .querySelector('선택자')요소 선택자를 사용해 요소를 가져오는 메소드문서에서 만나는 첫번째 요소를 반환console.log(document.querySelector(".pink")); //핑크1 클래스 가져오기 .querySelectorAll('선택자')문서에 존재하는 모든 요소를 배열의 인덱스에 맞게 배열 요소로 반환 1 2 3 console.log(document.querySelectorAll(".box")); //모든 요소를 배열의 인덱스에 맞게 ..