티스토리

개발 연습 블로그

검색하기

블로그 홈

개발 연습 블로그

pinball1973.tistory.com/m

개발 공부 정리하는 블로그

구독자: 1

방명록 방문하기

주요 글 목록

생성자 함수 vs 클래스 생성자 함수 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; }()).. 공감수 0 댓글수 0 2021. 5. 10.
react 뼈대 🐤 zerocho 리액트(웹 게임) 강좌를 듣고 정리했습니다. 코드 출처도 zerocho 입니다. 리액트 특징 [1] 리액트를 쓰면 개발 방식의 큰 변화중 하나가 직접 DOM을 조작해서 화면을 바꿔주는 방식이 아니라, 우리는 state, props등의 데이터만 바꿔주고, 리액트가 state의 변경 사항을 감지하고 다시 렌더링해서 알아서 데이터 - 화면의 싱크를 맞춰준다는 것이다. + [2] 일종의 사용자 정의 엘리먼트인 컴포넌트 단위로 화면을 구성해나가기 때문에 재사용성이 좋아지고, [3] 결과물이 single page application라는 점 때문에 (서버에게 요청하는 페이지는 첫 엔트리 지점 하나고 나머지는 js 코드로 생성한 컴포넌트들이 조건에 따라 보여지고 숨겨지고 하는 방식으로 페이지 이동을.. 공감수 0 댓글수 0 2021. 4. 20.
실행 컨텍스트를 알면 보이는 것들 함수가 정의될 때 결정되는 것 : scope (클로저, 콜백의 행동을 이해하는 것과 큰 관련 있다) 함수가 호출될 때 결정되는 것 : this > 다음을 실행 컨텍스트를 통해 이해해 보자. ( ※ 이글은 모던 자바스크립트 Deep Dive 책을 토대로 작성했습니다. 인용 박스 안의 설명들은 책에서 인용! ) 실행 컨텍스트 실행 가능한 코드가 실행되기 위한 환경 (실행 가능한 코드를 형상화하고 구분하는 추상적인 개념) 실행가능한 코드 (executable code)의 단위는 전역코드, 함수코드, eval 코드로 분류 [1] 실행 순서 = 실행 컨텍스트가 push, pop되는 스택으로 관리됨. ( 실행 제어권은 스택 탑이 갖고 있음 ) [2] 실행에 필요한 정보 = 실행 컨텍스트가 식별자, this, Sco.. 공감수 0 댓글수 0 2021. 4. 1.
참고하면 좋은 글 모음 🐳 자바스크립트 모듈 종류 + 같이 보면 좋을 모듈로더, 모듈번들러에 관한 글 [요약] * CJS : node.js에서 채택한 동기적으로 동작하는 서버사이드에서 쓰기 용이한 모듈 포맷 require, module.exports - AMD : 브라우저에 중점을 둔 (로컬에서 바로 불러오는게 아니라 네트워크를 통해 모듈을 전송받는 환경) 비동기적으로 동작하는 모듈 포맷 - UMD : CJS와 AMD가 서로 호환되도록 하는 모듈 작성 방식 * ESM : 자바스크립트 언어 자체 모듈 포맷 import, export (참고) export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나태낼 수 있다. 그러면 가져올 때 중괄호 { } 없이 모듈을 가져올 수 있다. 공감수 0 댓글수 0 2021. 3. 18.
[node] node로 웹 프로젝트 시작할 때 나오는 용어들 정리 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.. 공감수 0 댓글수 0 2021. 2. 27.
[react] create-react-app으로 만든 app에서 테스트용 서버는 어떻게 돌아가나 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랑 설정으로 구성된 패키지라.. 공감수 0 댓글수 0 2021. 2. 27.
정규표현식 예제 🐣 정규표현식 이용해서 풀었던 알고리즘 문제 모음 [백준] 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;.. 공감수 0 댓글수 0 2021. 2. 20.
Map and Set 까먹었을 때 메소드, 프로퍼티들만 빠르게 상기하려고 그냥 캡쳐만 해둔 글입니다. 이글을 참고해 주세요 : 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 구현하는 최적의 방법은 아직 .. 공감수 0 댓글수 0 2021. 2. 20.
String.prototype.replace() 함수 기본 문법 str 문자열의 pattern 부분을 replacement로 교체한 새로운 문자열을 리턴한다. (기존 str 문자열을 변경시키지 않음) pattern인자로 문자열이 들어온 경우는 제일 처음 매치하는 패턴 1개만 교체됨. flag가 g (global)인 RegExp가 들어온 경우에는 매치하는 모든 패턴이 교체됨. 문제 LeetCode 394번 Decode String 문제를 풀면서 replace 함수 사용법을 알아보자. The encoding rule is: k[encoded_string]k [encoded_string], where the encoded_string inside the square brackets is being repeated exactly k times. 입력 내부의 모든 .. 공감수 0 댓글수 0 2021. 1. 22.
javascript 팁 nodejs 콘솔 입력 템플릿 const readline = require('readline'); const rl = readline.createInterface(process.stdin, process.stdout); let input = []; let eval = () => { // Code } rl.on('line', function(line){ input.push(line); }).on('close', eval); 2차원 배열 만들기 let arr = Array.from(Array(5), () => Array(2).fill(0)) 0으로 초기화한 n*m 사이즈 배열 let arr = (new Array(n)).fill(0) 0으로 초기화한 길이가 n인 1차원 배열 배열 복사 (deep copy) .. 공감수 0 댓글수 0 2021. 1. 21.
javascript 콘솔 입출력 (1) 출력 console.log( ) (2) 입력 : readline 모듈 이용하는 방법 const readline = require('readline'); const rl = readline.createInterface(process.stdin, process.stdout); let input = []; let eval = () => { // Code } rl.on('line', function(line){ input.push(line); }).on('close', eval); readline 모듈 Readable 스트림으로부터 한 줄씩 읽어 들이는 인터페이스를 제공하는 모듈. The readline module provides an interface for reading data from a Rea.. 공감수 0 댓글수 0 2021. 1. 21.
[queue] javascript 효율적인 큐 간단한 구현 : javascript로 큐를 간단히 구현하려면 배열, push() 함수 (enqueue), shift() 함수 (dequeue)를 이용하면 된다. 그런데 shift() 함수의 시간 복잡도는 O(n)으로 다소 비효율적일 수 있다. 온라인 저지 사이트에서 javascript로 문제 풀다가 큐 때문에 시간 초과가 나면 아래처럼 바꿔보자. 효율적인 구현 : offset 변수를 추가로 이용해서 배열에서 dequeue 될 요소에 바로 접근한다 O(1) 만약 offset이 큐 길이 2배 이상이 되면 앞 부분을 자르고 (이미 dequeue 된 요소들), offset은 0으로 초기화한다. (내가 구현한 것 아님. 맨 아래 출처 참고 바랍니다.) function Queue(){ // initialise th.. 공감수 0 댓글수 0 2021. 1. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.