nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/JavaScript

ES6에서 추가된 const와 let에 대해 정리해 봅니다. 예전 블로그 내용을 가져와 살짝 다듬었습니다. const와 let 키워드를 처음 접하는 초보자가 보시면 좋을 것 같아요 :) 프롤로그 예전에 자바스크립트 강의를 듣다가 스크립트 파일에 적힌 const와 let이란 키워드를 보고, '허허허 강의 잘못 클릭했네 이건 JS강의가 아니잖아 허허' 이러고 뒤로가기를 누른 적이 있습니다. 그때 var 말고도 다르게 변수를 선언할 수 있다는 걸 알고 엄청난 충격을 받았죠...... 너무 충격을 받아서 일기까지 썼을 정도 😵 ES6가 뭐지? const와 let은 ES6에서 등장했습니다. 그런데 ES가 뭐죠? 이건 ECMAScript를 뜻합니다. Ecma라는 곳에서 '이거 표준안으로 합시다 땅땅'하고 정한 내용..

2020. 4. 29.

Blog/JavaScript

this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 this가 어디에 바인딩되는지 알아봅시다. 1. 단독으로 쓴 this 묻지도 따지지도 않고 this를 호출하는 경우엔 global object를 가리킵니다. 브라우저에서 호출하는 경우 [object Window]가 되겠죠? 이는 ES5에서 추가된 strict mode(엄격 모드)에서도 마찬가지입니다. 'use strict'; var x = this; console.log(x); //Window 2. 함수 안에서 쓴 this 함수 안에서 this는 함수의 주인에게 바인딩됩니다. 함수의 주인은? win..

2020. 4. 28.

Blog/JavaScript

문제 ReferenceError: primordials is not defined in node 라고 에러가 뙇! 떠서 당황당황 😣 검색해본 결과, Gulp 3 버전은 node 12 버전에서 제대로 동작하지 않는다고 합니다. 제가 작업한 환경은 node@11.13.0에 gulp@3.9.1였기에 잘 동작했는데, 최신 node 버전(12 이상)이 설치된 환경에서는 프로젝트가 실행이 되지 않았습니다(ㅠㅠ) 방법1 node 버전을 11로 다운그레이드하거나, gulp 버전을 4로 업그레이드합니다. (참 쉽죠..?) 방법2 graceful-fs@4.2.3으로 오버라이딩합니다. package.json을 열고 아래와 같이 추가해 줍니다. { "scripts": { "preinstall": "npx npm-force-r..

2020. 4. 24.

Blog/JavaScript

+ 이 글은 노마드 코더의 [유튜브 클론 코딩] 내용을 담고 있습니다. (2-0) What is a Server 소프트웨어 의미의 서버란, URL에 응답하고 접속을 허락하는 일을 해줍니다. 예를 들어, nykim.net 이란 웹 사이트도 서버가 있을 텐데요, 이 서버는 누군가 접속하길 기다리고 있다가 요청이 들어오면 갖고 있던 정보를 알려줍니다. 요약하자면, 서버란 접속을 Listen하는 무언가👂라고 할 수 있죠 (2-1) What is Express Express.js 는 프레임워크에요! 프레임워크는 훌륭하신 분들이 저 같은 쪼렙을 위해 만들어주신 위대한 산물로, 코드를 쓱쓱 손쉽게 가져다 쓸 수 있게 해주죠. 예를 들면, 쟝고→파이썬 / Rails→루비 /라라벨 →PHP등이 있겠네요. 그럼 Expre..

2020. 2. 24.

Blog/JavaScript

이래나 저래나 원페이지가 많은 가운데, 여기에 쓰이는 스크롤 효과도 참 많습니다. 그중에 가장 유명(?)하고 대중적인 건 스크롤 할 때 요소가 페이드인 되는 효과인 듯 합니다. 그래서 이걸 직접 구현하려고 했..으나 이 효과를 이해하기 위해서는 우선 스크롤과 관련된 속성을 알아야 합니다. 아하 그래서 어려운 거군요 ＼(Ｔ∇Ｔ )／ 후새드... 눈물 닦고 테스트용 페이지를 만들어 봅니다. 아이템 4개로 이루어진 페이지인데, 각 아이템의 높이는 500px입니다. .item { width: 100%; height: 500px; } 마진과 패딩이 하나도 없다고 할 때, 이 문서의 총 높이는 500*4 = 2000이 되겠군요. 그리고 윈도우의 높이는 딱 500px이라고 합시다. 그럼 첫번째 아이템만 보이는 상태겠..

2019. 12. 5.

Blog/JavaScript

요소의 크기 1. 요소의 크기 알아내기 여기, 이렇게 생긴 요소가 하나 있습니다. 이 아이가 가진 CSS 속성은 아래와 같습니다. .box { width: 100px; height: 100px; padding: 50px; border: 50px solid #F16B6F; margin: 50px; } 만약 이런 CSS 속성을 모르거나, 속성이 유동적으로 바뀌는 상황에서 요소의 크기를 알아내고 싶다면 어떻게 해야할까요? 네, 그냥 콘솔에 찍으면 됩니다. var box = document.querySelector(".box"); console.dir(box.getBoundingClientRect()); 이럴 때 쓰라고 있는 게 getBoundingClientRect() 입니다. [MDN 링크] 이름이 어려운데..

2019. 12. 3.

Blog/JavaScript

zerocho님의 글을 보고 따라 만들어본 Text RPG 스크립트입니다 :> 이런저런 기능을 쉽게 추가할 수 있을 거라 생각했는데 예상보다 시간이 더 걸림ㅋㅋㅋㅋ 그래도 게임은 게임인지라 재미있었던 작업이었어요!! 못 넣은 기능도 많고 리팩토링은 하지도 못했지만ㅋㅋㅋㅋ (밸런스는 엉망이고 버그는 고이 접어 나빌레라) 일단 직접 짜봤다는 거에 만족하며 일단락! Codepen 링크 See the Pen Text RPG (19.11.12) by NY KIM (@nykim_) on CodePen. var makeMonster = function (lv) { var lv = lv || 0; var newMonster = new Character(); var random = getRandom(0, (monster..

2019. 11. 12.