인생은 회전목마 우린 매일 달려가

언제쯤 끝날진 잘 몰라

Study/JavaScript 21

[모던 JavaScript] 코어 자바스크립트 - 소개 - 3. 코드 에디터

코드 에디터는 크게 통합 개발 환경(IDE)과 경량 에디터로 나뉜다. 통합 개발 환경 - Integrated Development Environment, IDE - 프로젝트 전체를 관장하는 다양한 기능 제공 - 단순 에디터가 아닌 개발 환경을 쾌적하게 해주는 통합 환경 제공 - 파일 간 탐색 수월, 전체 프로젝트 기반 자동 완성 기능 - 버전 관리 시스템(git), 테스팅 환경 등 프로젝트 수준의 작업도 가능 추천 IDE Visual Studio Code (크로스 플랫폼, 무료) WebStorm (크로스 플랫폼, 유료) 경량 에디터 - 많은 기능을 제공하진 않지만 속도가 바르고 단순 - 파일을 열고 바로 수정할 때 주로 사용 - 다양한 플러그인 지원 - 디렉터리 레벨 문법 분석기나 자동 완성 기능 등을 ..

Study/JavaScript 2022.10.21

[모던 JavaScript] 코어 자바스크립트 - 소개 - 2. 매뉴얼과 명세서 (새로운 기능과 호환성 확인)

명세서 ECMA-262 명세서(specification) ECMA-262 - Ecma International ECMAScript® 2022 language specification, 13th edition - ECMAScript is a programming language based on several technologies like JavaScript. www.ecma-international.org - js 관련 가장 심도 있고 상세한 정보를 담고 있는 공식 문서, js 정의 - 가장 신뢰할 만한 자료지만 이해하기 쉽지 않다. - 매년 새 버전이 나온다. 이전 초안은 https://tc39.es/ecma262/ - 갓 등록되거나 등록 직전에 있는 기능, 제안 목록은 https://github.co..

Study/JavaScript 2022.10.12

[모던 JavaScript] 코어 자바스크립트 - 소개 - 1. 자바스크립트란? (모던 자바스크립트 읽고 정리해보쟈 >___<)

출처 https://ko.javascript.info/intro 자바스크립트란? ko.javascript.info 이 책을 읽으...려고 했으나 뭔가 아직 사기에는 쫌... 음... 어.... 다 읽을 수 있을까 자신이 없었다. 요새는 인프런에 https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C#reviews [무료] 모던 자바스크립트 딥다이브 스터디 - 인프런 | 강의 《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, - 강의 소개 | 인..

Study/JavaScript 2022.10.07

[TIL - 노마드코더] 바닐라JS로 크롬 앱 만들기 (3)

시계 만들기 setInterval과 setTimeout 개념 Date object로 시계 구현! 시계 만들기 getClock으로 바로 실행해서 현재 시간 나타내준 다음 setInterval로 1초마다 시간 업데이트! 시간의 한 자리수가 1이 아니라 01이 나오게 고쳐보기 padStart를 쓰면 첫 번째는 지정 글자수, 두 번째는 빈칸에 채워 넣을 문자 랜덤 명언 보여주기 꼭 array로!! 안에는 object로 key와 value를 넣어줌 명언은 위로 화자는 아래로 가야되니까 각각 qeurySelector로 지정해주고 Math.random() 메서드로 무작위로 보여줄 거! Math.floor를 사용해서 내림 해줄거 이렇게 최종적으로 이렇게 쓰면 완성! quote와 author에 각각 명언과 작가 quer..

Study/JavaScript 2022.07.03

[TIL - 노마드코더] 바닐라JS로 크롬 앱 만들기 (2)

로그인 기능 구현하기 필수 입력 사항, 최대길이 등 js 파일에서 if 문으로 이렇게 만들어 줄 수도 있지만 이정도 기능은 html 자체에서도 지원하고 있음 required는 필수로 적어야 된다는 거고 maxlength='' 로 최대 길이를 설정해 놓을 수 있음 하지만 그냥 이 상태로 하면 검사가 유효하지 않음 왜냐, input은 form 안에서 검사가 유효해지기 때문에 > 지금은 div안에 있다. 이렇게 form 안에 input이 있으면 검사가 잘 된다 input type='submit' 으로 하든 태그를 쓰든 form 안에서는 무조건 submit이 되고 페이지를 새로 로딩한다 > 새로고침 된다 // 버튼의 클릭이 중요한게 아니라 form의 submit이 중요하다! submit을 할 때마다 새로고침이 ..

Study/JavaScript 2022.07.03

[TIL - 노마드코더] 바닐라JS로 크롬 앱 만들기 (1)

document - 브라우저에 이미 존재하는 object document 인터페이스는 - 브라우저가 불러온 웹 페이지를 나타내고 - 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행한다. - DOM 트리는 와 및 여러 다른 요소를 포함한다. - 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공한다. console.dir > javascript 에서 html을 읽어옴 파일에서 써도 똑같음 javascript에서 html을 읽어올 수 있고 조작할 수 있다 document로! autofocus 를 html 태그에 써주면 true로 바꿀 수 있고 javscript에서 html 태그의 class로 조작할 수 있다 innerText와 textContent 차이 뽀인튜 element..

Study/JavaScript 2022.07.03

[JS] forEach 란, map 이란, filter 란, reduce 란? / 고차함수 / 구조, 동작 방식, 설명

forEach, map, filter, reduce 모두 고차함수 (함수를 인자로 받을 수 있는 함수) 1. forEach forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다 이게 무슨 말이냐면... a = [10, 11, 12, 13, 14, 15, 16] // forEach란? for 대신 사용, 아마 이렇게 돌아갈 듯! function forEach(predicate, thisArg) { for (let i = 0; i { // 인자로 넘어가는 매개변수로 넘어가는 함수가 콜백함수 console.log(v, i, this) // 여..

Study/JavaScript 2022.06.28

자바스크립트 기초 - 조건문, if문, switch문, 삼항 연산자(조건부 연산자)

조건문 - 조건에 따라 실행 하거나 실행하지 않는 1. if문 if (조건식) 동작문 // 동작문이 많을 때는 {} 중괄호로 감싸준다 if (조건식) { 동작문1 동작문2 동작문3 } if (조건식) { 조건식이 true일 때 실행 } else { 조건식이 false일 때 실행 } if(조건식){ true일 때 실행 }else if(다른 조건){ 다른 조건이 있을 때 다른 조건이 true일 때 실행 }else{ 모두 false일 때 실행 } 80 > score >= 70 이런 식이 지원이 안됨.. 무조건 &&그리고를 써줘야 실행.. (안타깝) if는 중첩도 가능! if안에 if를 쓰면 두 조건 다 충족해야 실행. 2. switch문 switch (조건식) { case 비교조건식 : 동작문; } - 조건식..

Study/JavaScript 2022.01.23

자바스크립트 기초 - 변수, let, const, var

프로그램을 만들 때 잠깐 동안 특정한 값을 저장해야 하는 상황이 자주 발생한다 이때 사용하는 것이 변수 변수를 사용하면 값을 저장할 수 있다. // 이렇게 값을 저장하고 저장한 값을 불러올 수 있게 하는 것이 변수(variavle)고 변수를 만드는 행위를 선언(declaration)한다고 표현한다 변수에 값을 넣는 걸 할당한다, 대입한다 라고 한다 변수를 선언함과 동시에 값을 대입하는 행위를 초기화(initialization)라고 한다 변수 선언은 결과값이 undefined로 나온다 변수를 만드는 세 가지 방법 - let, const, var 1. let let 으로 시작하는 명령을 선언문이라고 한다 여러가지 예약어들 예약어는 자바스크립트 버전에 따라 추가되거나 제외될 수 있다. 예약어지만 변수명으로 쓸..

Study/JavaScript 2022.01.23

자바스크립트 기초 - 자료형, typeof

자료형 자바스크립트에 존재하는 값(value)들 값(value)은 프로그램이 조작할 수 있는 데이터를 의미한다. 값에는 여러 종류가 있고 이런 값의 종류를 자료형(data type)이라고 한다. 1. 문자열(string) - 따옴표로 감싸야 한다. (따옴표, 큰따옴표, 백틱) '' "" ₩₩ - 연산자 가능, 하지만 +말고는 NaN이 나온다. 2. 숫자(number) - 따옴표 없이. - NaN은 넘버로 나오지만 Not a Number라는 뜻. 숫자가 아니지만 타입은 숫자...! 5e4는 0위에 숫자 4개 50000 5e-4는 0아래 숫자 4개 0.0005 이진법 8진법 16진법 문자 '124'에 숫자 5를 더하면 그냥 문자 '1245'가 됨 - 문자열과 다른 자료형을 더하면 다른 자료형이 문자열로 바뀐..

Study/JavaScript 2022.01.22