개발 연습 블로그

생성자 함수 const Person = (function(){ //인스턴스 메소드, 프로퍼티 function Person(name){ this.name = name; this.sayName = function(){ console.log('name:'+this.name); } } //프로토타입 메소드, 프로퍼티 Person.prototype.age = 20; Person.prototype.sayHi = function(){ console.log('Hi! My name is '+this.name); } //정적 메소드, 프로퍼티 Person.country = "america"; Person.sayHello = function(){ console.log('Hello'); } return Person; }())..

🐤 zerocho 리액트(웹 게임) 강좌를 듣고 정리했습니다. 코드 출처도 zerocho 입니다. 리액트 특징 [1] 리액트를 쓰면 개발 방식의 큰 변화중 하나가 직접 DOM을 조작해서 화면을 바꿔주는 방식이 아니라, 우리는 state, props등의 데이터만 바꿔주고, 리액트가 state의 변경 사항을 감지하고 다시 렌더링해서 알아서 데이터 - 화면의 싱크를 맞춰준다는 것이다. + [2] 일종의 사용자 정의 엘리먼트인 컴포넌트 단위로 화면을 구성해나가기 때문에 재사용성이 좋아지고, [3] 결과물이 single page application라는 점 때문에 (서버에게 요청하는 페이지는 첫 엔트리 지점 하나고 나머지는 js 코드로 생성한 컴포넌트들이 조건에 따라 보여지고 숨겨지고 하는 방식으로 페이지 이동을..

함수가 정의될 때 결정되는 것 : scope (클로저, 콜백의 행동을 이해하는 것과 큰 관련 있다) 함수가 호출될 때 결정되는 것 : this > 다음을 실행 컨텍스트를 통해 이해해 보자. ( ※ 이글은 모던 자바스크립트 Deep Dive 책을 토대로 작성했습니다. 인용 박스 안의 설명들은 책에서 인용! ) 실행 컨텍스트 실행 가능한 코드가 실행되기 위한 환경 (실행 가능한 코드를 형상화하고 구분하는 추상적인 개념) 실행가능한 코드 (executable code)의 단위는 전역코드, 함수코드, eval 코드로 분류 [1] 실행 순서 = 실행 컨텍스트가 push, pop되는 스택으로 관리됨. ( 실행 제어권은 스택 탑이 갖고 있음 ) [2] 실행에 필요한 정보 = 실행 컨텍스트가 식별자, this, Sco..

🐳 자바스크립트 모듈 종류 + 같이 보면 좋을 모듈로더, 모듈번들러에 관한 글 [요약] * CJS : node.js에서 채택한 동기적으로 동작하는 서버사이드에서 쓰기 용이한 모듈 포맷 require, module.exports - AMD : 브라우저에 중점을 둔 (로컬에서 바로 불러오는게 아니라 네트워크를 통해 모듈을 전송받는 환경) 비동기적으로 동작하는 모듈 포맷 - UMD : CJS와 AMD가 서로 호환되도록 하는 모듈 작성 방식 * ESM : 자바스크립트 언어 자체 모듈 포맷 import, export (참고) export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있다. 그러면 가져올 때 중괄호 { } 없이 모듈을 가져올 수 있다.

npm vs npx npm (리눅스의 apt-get, ocaml의 opam과 비슷한 역할 인듯?) npm에 등록된 패키지(모듈) 다운로드, 버전 관리, 의존성 관리 등을 할 수 있게 해준다. 참고로 yarn은 페이스북에서 내놓은 패키지 매니저로, npm 대체제이다. 주요 명령어 npm init : package.json 파일 생성됨 npm install [package명] : node_modules 폴더 (설치한 패키지와, 그 패키지가 의존하고 있는 패키지들의 소스) package-lock.json 파일 (node_modules에 들어있는 패키지들 버전과 의존 관계) 이 생성된다. 그리고 package.json 파일의 dependencies 속성에 해당 패키지 추가. (※global 옵션으로 설치시 de..

create-react-app 작업 과정 간단히 보기 (1) 프로젝트 생성 (2) 작업하기 (3) 서버 실행하고 브라우저에서 localhost:3000으로 접속 만든 app 실행 과정 (서버 돌리는 코드 어딨나?) (1) 터미널에 npm run [ start / test / build / eject ] (start , test는 run이라고 적는 것 생략 가능) (2) package.json 파일을 보면 이렇게 되어있다. (scripts 부분은 npm 명령어를 저장해두는 부분) 그럼 각 명령을 argument로 가지고서 react-scripts 패키지로 위임됨. 참고로 npm 홈페이지에서 react-scripts를 찾아보면 create-react-app에서 사용하는 script랑 설정으로 구성된 패키지라..

🐣 정규표현식 이용해서 풀었던 알고리즘 문제 모음 [백준] 2941. 크로아티아 알파벳 링크 : https://www.acmicpc.net/problem/2941 입력으로 주어진 단어가 몇 개의 크로아티아 알파벳으로 이루어져 있는지 출력한다. const readline = require('readline'); const rl = readline.createInterface(process.stdin, process.stdout); let input = []; let eval = () => { const regex = /(c(=|-))|(d(z=|-))|lj|nj|s=|z=|[a-z]/g; const str = input[0]; let count = [...str.matchAll(regex)].length;..

까먹었을 때 메소드, 프로퍼티들만 빠르게 상기하려고 그냥 캡쳐만 해둔 글입니다. 이글을 참고해 주세요 : https://javascript.info/map-set Map and Set javascript.info Map 🤠 일반 Object와 성능비교 참고 : https://medium.com/@wdjty326/javascript-es6-map-vs-object-performance-%EB%B9%84%EA%B5%90-7f98e30bf6c8 새로운 데이터 넣기 (set작업)은 일반 Object가 더 빠르고 , 값 가져오기 (get 작업)은 Map이 훨씬 빠르다고 함. (Object는 값을 아무렇게나 넣고, Map은 순차적으로 적재한다고 함) javascript로 hashmap 구현하는 최적의 방법은 아직 ..