Jaddong's Lab

1. 문자열끼리 비교 (유니코드) - 문자열 중에서 앞에서 부터 순서대로 비교하게된다.(사전순) - 소문자의 유니코드 값이 기본적으로 크다. alert( 'Z' > 'A' ); // true, 'Z'가 'A'보다 유니코드 값이 큼 alert( 'Glow' > 'Glee' ); // true, 'o'는 'e'보다 유니코드 값이 큼 alert( 'Bee' > 'Be' ); // true, 'e'는 빈 값 보다 유니코드 값이 큼 2. 다른 형을 가진 값 간의 비교 - 비교하려는 값의 자료형이 다르면, 값 들을 숫자형으로 바꿔 비교하게된다. alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다. alert( '01' == 1 ); // true, 문자열 '01'..

Object와 Array의 경우 레퍼런스 타입이어서 아래와 같이 값이 복사되는 것 같지만 그렇지 않다. // 변수 person과 person의 value는 각각 저장됨. const person = { name: 'Max' } const secondPerson = person; // 값을 그대로 복사하는 것 같지만, secondPerson이 person의 value를 가르키게 됨(포인터 값) person.name= 'Ginny'; console.log(secondPerson); // { name : 'Ginny' } // secondPerson는 동일하게 person의 value의 값을 가르키고 있으므로 영향을 받아 위와 같이 찍힘 별도의 person과 별개의 secondPerson을 만들기 위해서는 아래..

Classes are essentially blueprints for objects. Class는 Object의 필수적인 설계이다. Class는 class 이름이 있고 프로퍼티와 메소드를 둘 다 가지고 있을 수 있다. constructor 디폴트 메소드로 해당 class를 인스턴스화할 때마다 실행된다. class Human { constructor(){ this.gender = 'male'; } printGender() { console.log(this.gender) } } class Person extends Human { constructor(){ super(); // extends를 쓸 때 이것이 없으면 상의 클래스인 Human의 constructor가 실행되지 않아 에러가 발생한다. this.na..

더보기 primitives : 원시형 explicitly : 명쾌하게 exclusively : 독점으로 intuitively : 직관으로 대부분의 경우, 연산자와 함수들은 자동적으로 주어진 값을 적절한 형태로 변환한다. 예를 들면, alert은 값을 보여주기 위해 어떤 값을 문자열 형태 자동 변환한다. 수학적 연산자는 값을 숫자형으로 변환한다. 우리가 값을 기대한 형태로 명확하게 변환할 필요가 있을 때도 형변환 하는 경우이다. 아직 객체에 대해서 얘기하고 있진 않다. 이 챕터에서 우리는 객체는 다루지 않을 것이다. 지금부터 우리는 원시형에 대해서만 다룰 것이다. 객체를 원시형태로 변화하는 건, 객체에 대한 것을 배우고 이 후에 볼 것이다. 문자형으로 변환 문자형으로 형 변환은 문자형태의 값이 필요할 때 ..

변수 변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 이다. var, let, const를 사용해 변수를 선언할 수 있다. let : 모던한 변수 선언 키워드 var : 오래된 변수 선언 키워드 (잘 사용하지 않음) const : let과 비슷하지만, 변수의 값을 변경할 수 없음 아래 문(statement)은 'message’라는 이름을 가진 변수를 생성(선언)한다. let message; 이제 할당 연산자 =를 사용해 변수 안에 데이터를 저장해 봅시다. let message; message = 'Hello'; // 문자열을 저장합니다. 문자열이 변수와 연결된 메모리 영역에 저장되었고 변수명을 이용해 문자열에 접근할 수 있다. let message; message = 'Hell..

use strict 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다. 예시: "use strict"; // 이 코드는 모던한 방식으로 실행됩니다. ... "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 올 수도 있다. 이렇게 하면 오직 해당 함수만 엄격 모드로 실행된다. ✅ "use strict"는 반드시 최상단에 위치시키세요. "use strict"는 스크립트 최상단에 있지 않으면 엄격 모드가 활성화되지 않을 수도 있다. 다음 코드에서는 엄격 모드가 활성화되지 않는다. alert("some code"); // 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다. "use strict"; // 엄격 모드가 활성화되지 않습..

프롤로그 벨로그를 만든 지 얼마 안되서 '트렌딩'과 '최신'메뉴를 둘러보다가,,,, 어떤 분이 친구에게 생일 선물이 웹사이트를 선물한 걸 포스팅한 걸 보았다.(⊙o⊙) 너무 좋은 아이디어라고 생각이 들었고, 한 번 나도 해보기로 했다....! 근데 지인보다는 내가 좋아하는 연예인?가수?의 생일 팬페이지 면 좋을 것 같다는 생각이 들어서 개발에 돌입했다. 계획 디자인 우선 디자인부터 해야하는데,,,, 넘나 막막한거다ㅠㅠ 그런데 안그래도 요즘 자바스크립트로 만드는 다이나믹한 인터렉션에 관심이 생겨(사실 예전부터 있었음 ㅎ.ㅎ) 수강신청해놨던 '1분코딩'강의를 들으면서 만들어보기로 했다. 메뉴구성 Home : 말 그대로 인덱스 페이지로 휘황찬란한 인터렉션을 넣어보는 거 목표로 했다. Letter : 친구의 아..

document.querySelectorAll() 사용하여 반환하는 NodeList객체를 for문으로 각각 요소에 이벤트 리스너를 추가합니다. const buttons = document.querySelectorAll(".button") for (const button of buttons) { button.addEventListener('click', function(event) { //... }) }

이미 리액트 빌드 되어진 저장소에서 프로젝트는 받아서 작업하여 빌드, 배포합니다. 1. 프로젝드받아서 실행하기 프로젝트의 깃주소로 저장소 프로젝트를 로컬에 clone 및 실행합니다. git clone https://github.com/{username}/{repo-name}.git // 예시 cd {repo-name} // 로컬 프로젝트 폴더로 들어감 yarn yarn start 2. 작업 후에 저장소로 커밋, 푸쉬 git add . // 내가 수정한 전체내역을 git commit -m "커밋메세지" // 커밋하고 git push // 푸쉬 3. 빌드 후 배포 $ yarn build $ yarn run deploy

node, npm/yarn, create-react-app 설치, build와 GitHub Pages 배포까지 1. node.js 설치 리액트 작업에 필요한 라이브러리들을 손쉽게 설치하기 위한 node의 패키지 매니저 npm/yarn을 위해 먼저 node.js 를 설치합니다. node.js 사이트 : https://nodejs.org/ko/ 설치가 잘 되었다면 터미널에서 버전확인이 가능합니다. $ node -v v10.15.1 npm은 node.js를 설치할 때 함께 설치되기 때문에 따로 설치할 필요가 없습니다. $ npm -v 6.8.0 2. create-react-app 설치 및 사용 프로젝트들을 담아둘 디렉토리에서 아래와 같이 설치를 하면 "my-app"이라는 폴더가 생깁니다. $ npx creat..