천천히, 꾸준히

😺 Study/JavaScript, jQuery

자바스크립트가 실행되는 원리는 html에서 onclick 속성의 명령을 기억했다가, 사용자가 해당 태그와 상호작용하면 (예를 들어, 클릭한다면) 기억했던 명령을 브라우저가 실행하는 것이다. 웹 브라우저에서 일어나는 유용한 사건을 이벤트(event)라고 한다. 예를 들면, - 버튼 타입의 hi를 누르게 되면 onclick이 실행되면서 hi라는 경고창이 뜨게 된다. - onclick 이벤트: 사용자가 어떤 것을 클릭하는 사건 - 그 외의 다른 이벤트 속성들: onchange, onkeydown, onmouseover 등등 참고: edwith [부스트코스] 자바스크립트의 시작 by 생활코딩 www.edwith.org/boostcourse-web-106/joinLectures/52258

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트를 처음부터 다시 공부해보니 언어를 받아들여야 한다는 거부감이 들었다. 무엇보다 어떻게 읽히고 동작하는지부터 알아야 훨씬 쉽게 받아들일 수 있을 것 같았다. 그래서 찾다가 알게된 edwith 사이트..! edwith은 네이버와 네이버커넥트재단이 제공하는 온라인 교육 플랫폼이다. 강의를 무료로 이용한 뒤 실무자에게 코드리뷰를 받을 수도 있다. 참고로 코드리뷰는 유료다. 자세한 내용은 아래 링크 참고// https://www.edwith.org/ 에듀케이션위드 : edwith 에드위드(edwith)는 네이버(NAVER)와 네이버 커넥트재단(NAVER Connect)이 제공하는 온라인 강좌(MOOC : Massive Online Open Course) 교육 플랫폼입니다. 에듀케이션위드(educati..

2020. 11. 23.

😺 Study/JavaScript, jQuery

자바스크립트에서 스코프는 2가지 타입이 있다. global(전역)과 local(지역). 더 자세한 내용은 아래 링크를 참고해보자. https://medium.com/@yeon22/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023 (JavaScript) 스코프(Scope)란? 자바스크립트를 공부할 때 스코프(Scope)란 단어를 많이 접할 수 있는데요. 이 스코프란 무엇인지에 대해 알아보겠습니다. medium.com global scope(전역 스코프)는 파일 안에 바로 정의해서 쓸 수 있다. 따라서 어디에 위치해도 읽을 수 있다. (출력 가능) let globalScope = 1; { console.log(globalScope); }..

2020. 11. 19.

😺 Study/JavaScript, jQuery

지난 포스팅에 언급한 var이 갖고 있는 오류는 console.log(age); age = 28; console.log(age); var age; 이처럼 변수를 나중에 선언해도, 콘솔창에 age값이 출력되는 것을 알 수 있다. 어디에 선언했냐에 상관없이 상단으로 선언을 끌어올려주는 것을 hoisting(호이스팅)이라고 한다. name = 'happy'; let name; 하지만 let으로 변수를 선언할 경우, 위처럼 순서가 뒤바뀌었을 때 콘솔창에 오류가 나는 것을 확인할 수 있다. *hoisting(호이스팅)은 block scope(블럭 스코프)도 무시하는데, 이와 관련된 내용은 아래 링크에서 확인할 수 있다. https://haeeeell.tistory.com/24 참고: 드림코딩 by 엘리

2020. 11. 19.

😺 Study/JavaScript, jQuery

아주 기본적인, 변수를 선언하고 할당하여 출력까지 해보자. let name = 'sad'; console.log(name); name = 'happy'; console.log(name); 윗줄부터 직역하면, 변수 name에 sad를 할당했다. 변수 name을 출력해보자. 변수 name에 다시 happy를 할당했다. 변수 name을 출력해보자. >>sad가 아닌 새로 할당된 happy가 출력된다. // 이 같은 일이 벌어지는 원리 name이라는 변수를 정의하면 메모리 하나를 차지하는 포인터가 생긴다. 그 안에 'sad'나 'happy'값이 할당된다. (예를 들어, 어플을 실행하면 어플마다 쓸 수 있는 메모리(텅텅 빈 box들)가 할당되는 것) *ES6(ECMAScript6)부터 javascript에 변수를..

2020. 11. 19.

😺 Study/JavaScript, jQuery

프로그래밍을 하면서 가장 중요한 3가지 원리를 기억하자. 1. 입력 사용자에게 콘솔이나 UI에서 입력받은 데이터를 2. 연산 연산을 통해 3. 출력 사용자에게 출력 4. 전송 서버를 통해 전송한다. *CPU에 최적화된 연산, 메모리 사용의 최소화도 중요하다! **무언가 배우기 이전에 돌아가는 원리를 파악하면 좀 더 다가가기 수월한 느낌이다. 참고: 드림코딩 by 엘리

2020. 11. 19.

😺 Study/JavaScript, jQuery

지난 역사에서도 잠깐 살펴 봤듯이 javascript는 단기간에 만들어진 언어이고 유연한 성격을 갖고 있어 개발자들이 실수하기 쉬운 환경이다. 오류를 줄이기 위한 해결책은 'use strict'를 사용하는 것이다. 상단에 이렇게. 'use strict'; 선언하면 오류를 찾기 비교적 쉬워진다. 비교를 해보자면, 하지만, 엄격 모드로 전환하면! let a; 그럴 땐 위처럼 a를 선언해준다. 참고로 'use strict'는 ECMAScript5부터 추가 되었다. 올바른 범위 안에서 작업할 수 있도록 'use strict' 사용하기! 참고: 드림코딩 by 엘리 https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&..

2020. 11. 19.

😺 Study/Git, Github

- 웹 퍼블리셔를 꿈꾸는 신입입니다! - 피드백 환영합니다! - 혹시 내용에 잘못된 부분이 있으면 댓글 남겨주세요. 수정하겠습니다! 열심히 작업만 하고 관리하지 못한다면 도루묵이란 것을 알았다. 올바른 방법으로 업로드하는 것을 최근에서야 알았기 때문에, 내 Github 잔디밭은 제초 작업이 이루어진 모양새다. 안 게 다행이니 지금부터라도 조금씩 잔디를 심어보자. ***VSCode 사용 Terminal 메뉴에서 New Terminal을 클릭한다. git add 파일이름 을 입력한다. 업로드하고 싶은 파일을 추가하겠다는 의미이다. git status 를 입력한다. 현재 git 상태를 확인하겠다는 의미이다. git commit -m "커밋할 메시지" 를 입력한다. git log 를 입력한다. 업로드할 파일의 ..

2020. 11. 10.

😺 Study/JavaScript, jQuery

*안에 를 만나서 html 분석을 멈추고 필요한 js파일을 서버에서 다운(fetching js)받아서 실행(executing js)하고 다시 html 분석 > 단점: js파일이 무겁거나 사용자의 pc가 좋지 않다면 웹 사이트를 이용하는데 많은 시간이 소요된다. //1. > async[에이싱크]는 boolean type[불리언 타입]이기 때문에 선언한 것만으로도 true로 설정됨. 마찬가지로 parsing html(html 분석)하다가 병렬로 js파일 실행명령만 해놓고 다시 html 분석. js파일 다운 완료되면 분석을 멈추고 다운된 js파일 실행. 그리고 나머지 html 실행함. > 장점: 분석과 다운이 병렬로 이루어져 시간 절약 > 단점: 필요한 html이 분석되기 전에 js가 먼저 실행. js파일이 ..

2020. 10. 24.

😺 Study/JavaScript, jQuery

API application programming interface > 브라우저가 이해할 수 있는 함수들 Node.js와 웹 API는 같은 콘솔을 쓰기 때문에 둘 다 출력이 가능하다. 브라우저의 console 창에서도 간단한 js 출력 가능 console.log('Hello'); //Hello 출력됨 //그냥 Hello만 입력시 '아직 Hello가 정의되지 않았다~' 오류 메시지 뜸 var Hello; //Hello 정의 Hello=10; //Hello에 10 할당 //Hello 다시 입력하면 10 출력 p.s 브라우저의 Source 탭은 디버깅할 때 유용하다. 브라우저의 Network 탭은 오고 간 데이터 양 확인 가능하다. *공식 사이트 ecma-international.org > 보기 어려운 편 d..

2020. 10. 24.