본문 바로가기

전체 글

 (177)
[JS - portfolio] 랜덤 숫자 맞추기 게임 HTML/CSS 그리고 JavaScript를 이용하여 랜덤 숫자 맞추기 게임 페이지를 완성했다. 물론 bootstrap의 container를 사용하여 반응형 웹페이지로 만들어 주었다. 아직 혼자서 코드를 다 짤수 있을지는 모르겠다. 어제 들은 JS 랜덤 숫자 맞추기 게임 코드를 지우고 혼자 써봤다. 그렇지만, 역시나, 중간 중간 막혀, 답을 참고했다. 그래도 친구에게 보내주니, 에러가 나거나 하는 부분을 짚어주어 그런 부분을 수정하여 다시 git에 commit했다. 첫번째 JS 포트폴리오 완성에 신이 난다. 랜덤 숫자 맞추기 게임: https://dev-jn-first-portfolio.netlify.app/ Document 랜덤 숫자 맞추기 게임을 시작하세요! 남은 도전 기회 : 5번 dev-jn-fi..
[portfolio] 랜덤 숫자 맞추기 게임 https://dev-jn-first-portfolio.netlify.app Document 랜덤 숫자 맞추기 게임을 시작하세요! 남은 도전 기회 : 5번 dev-jn-first-portfolio.netlify.app 랜덤 숫자 맞추기 깃허브 소스코드: https://github.com/jn33-dev/first-JS-project GitHub - jn33-dev/first-JS-project Contribute to jn33-dev/first-JS-project development by creating an account on GitHub. github.com
[JS] basic syntax 오늘로, 드림코딩 아카데미의 Javascript 문법 강의와, Udemy noonacoding의 Javascript 기본 문법 강의를 모두 끝마쳤다. 드림코딩에서 깊게 배웠던 내용들을 다시 훑고, 내가 놓쳤던 부분들을 다른 시각에서 이해하는데 누나코딩 강의가 도움이 되었다. 특히, 함수의 사용, return과, 지역변수가 어떻게 작용하는지를 조금 더 명확하게 이해할 수 있었다. 또한, 누나코딩의 샘플 문제들이 드림코딩의 것과는 달리 코딩 시험에 좀더 가까운 유형이어서 좋았다. 실질적인 예제로 코딩을 해보니, 내가 놓치는 부분(수학적 논리를 프로그래밍으로 풀어내는)이 무엇인지 정확이 알 수 있었다. 문제를 풀어내는 수학적 논리를 먼저 세우고, 그것을 어떤 함수와 조건문을 사용하여 풀어낼 것인가에 대한 고민..
[JS] This 자바스크립트에서 This는 다른 언어에서 this와는 조금 다르다고 한다. JS에서는 문맥에 따라 this를 사용하는 방식이 달라진다. 1) global context에서의 this 브라우저 : window Node.js : 모듈 2) 함수 내부에서 this strict 모드에서는 undefined slopy 모드에서는 globalThis 3) 생성자 함수 또는 class에서 this 앞으로 생성될 인스턴스 자체를 가리킴 자세한 용례와 추가 학습 내용은 아래 링크를 클릭! 노션노트 - This_all
[JS] 호이스팅, let과 var의 차이 hoisting을 설명: 코드를 실행하기 전에 변수, 함수, 클래스의 선언문을 미리 끌어 올리는 것 변수와 클래스의 경우, 선언만 호이스팅 되고, 초기화는 되지 않음 console.log(a); // undefined a = 1 var a = 1; console.log(a); // 1 let & var의 차이점을 설명 var는 전역/지역 변수의 구분이 없음 그러나, 함수에서는 hoisting되어 지역변수로 사용이 가능 똑같은 변수명으로 재선언이 가능 // 함수에서 var는 지역변수로 기능 function foo() { var b = 1; } console.log(b); // *b is undefined* // 조건문에서 var는 전역변수로 기능 for(var i = 1; i
[JS] Closures closures는 외부함수에서 내부함수에 접근하게 해주는 환경이다. closure를 사용하여 캡슐화 및 정보를 은닉한다. 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해 사용한다. 캡슐화와 정보은닉을 위해 사용한다. 클래스 private 필드 또는 메소드를 사용하는 효과와 동일! 하지만, 클래스 private field 문법 이후 사용하지 않는다. 자세한 내용은 아래 링크 참고 노션노트 - closure_all
[JS] Prototype Javascript에서 모든 오브젝트는 객체 간 상속을 위해 내부에 숨겨진 Prototype을 가지고 있다. ES6 이후, class 기능이 추가되면서, 이제는 사용하지 않는 문법이라고 한다. 하지만, 오랫동안 JS의 상속을 위한 문법으로 알아두면 좋다고 했다. 객체 간 상속의 연결 고리는 프로토타입 체인으로 연결되어 있고, freez, seal, preventExtensions라는 static 함수가 있다. 또한, 모든 object는 단 하나의 prototype을 가리킬 수 있게 설계되어 있다. 하지만, mixin을 통해 여러 개의 함수를 상속할 수도 있다. 자세한 내용은 아래 링크 참고 노션노트 - Prototype_all
[JS] Scope & Hoisting 오늘은 scope와 hoisting에 대해 배웠다. scope는 변수를 참조할 수 있는 유효한 범위를 의미한다. 메모리의 절약과 성능 향상을 위해, 변수는 꼭 필요한 곳에서만 정의해야 한다. 전역 스코프에 변수를 정의하는 경우, 사용하지 않더라도 메모리에서 자동 삭제되지 않는다. 또, G.C.(garbage cleaner)가 메모리를 모니터링하면서 자동으로 사용하지 않는 object를 삭제하지만, g.c.또한 cpu 메모리를 먹으며 작동한다. 여기에 더해, 각각의 코드 블럭은 lexical 환경을 가지고 있으며, 실행 컨택스트 스택에 각각의 블럭이 쌓였다가 지워지기 때문에, 이 때문에 메모리 절약 뿐 아니라 성능향상을 위해서라도 변수를 꼭 필요한 곳에서만 정의해야 한다. 다음은 hoisting이다. 호이..

티스토리툴바