전체 글 (27) 썸네일형 리스트형 BACKEND DEVOPS 세팅 삽질 기본적으로 운영체제가 window이므로 wsl2 기반에서 작업하는도중이다. ( ec2에 올릴거고 아무리 docker 사용한다 한들 local 테스트 환경도 세팅할 계획이기 때문 ) 현재 쓰고있는 visual studio code를 기준으로 설명하겠다. WSL과 WINDOW를 나누는 기준 window10에서 wsl2를 사용할경우 기존의 c, d 등의 하드 드라이브들의 경로는 다음과 같이 된다. /mnt/c/... /mnt/d/... / (root path) 에는 기본적으로 여타 unix 기반 운영체제처럼 /var /etc /root 등의 폴더가 있고 window에서 wsl과의 환경을 나누는 기준은 요 /mnt/ 뒤에있는 폴더들이다. 따라서 visual studio code 텍스트 에디터 기준으로는 다음과 .. Vue extends, mixin의 "자세한" 차이 1. 오해 mixin과 extend는 둘다 같은 병합전략 사용 (부모 > 자식) mixin은 "다중상속" 가능 하지만 style, template 못가져옴 ( 기능적인 부분 분리 ) extends는 "하나만" 상속 가능 하지만 style, template 가져올수 있다. ( 기능 + ui or ui 분리 ) 2. 삽질 오지게한 결과 알아낸 것들 extend를 사용했을 경우 mounted, created, destoryed 등의 lifecycle은 "통합" 된다. 즉 가져오는 com과 사용하는 com 둘다 설정했을때 2번 실행됨 그 외 name, method들은 통합이 안된다!! 당연한 얘기겠지만 extend를 사용했을경우 template는 통합 안됨 "ui적인 부분"(style)을 분리하기 위해 따로 뺏.. vue cli 3 sass resource 공유 공식문서에 따르면 module.exports = { css: { loaderOptions: { css: { // options here will be passed to css-loader }, postcss: { // options here will be passed to postcss-loader }, sass: {}, ... } } } 이런식으로 추가한다음 넣어주는 option 값은 각각의 loader를 보고 삽입하라고 했다. 또한 공식문서에서는 sass loader에는 additionalData 라는 option이 있으며 이것을 이용해서 variable을 공유하는 sass 하나를 자동으로 추가해주라는 말이 있었는데 공식문서대로 하니까 에러뜨고 난리났다 ( 기준 버전 vue-cli@4.x ) 에러 메.. Object.defineProperty, Object.defineProperties 자바스크립트는 프로토타입 기반 언어이자 객체지향 언어다. 잘쓰면 편리하지만 잘못사용하기 쉬운 Object의 속성값을 지정하고 불변(immutable) 속성으로 만들거나 간단하게 getter, setter도 선언할수 있는 메소드다 컨셉 object를 다루는데 있어서 동작은 크게 다음과 같이 나눌수 있다. 열거하기 ( enumerable ) Ex) for in, Object.keys() 초기값 선언하기 값 수정하기 ( writable, set ) 값 가져오기 ( get ) Object.freefreeze 를 사용하거나 Symbol, yield 등을 사용해서 나타낼수도 있지만 defineProperty, defineProperties를 사용해서 간단하고 쉽게 제어할수도 있다. 대표적으로 VUE가 초기 data.. Tetris 개발일지 (day 4) 1. userBlock shilhouete 그리기 블럭 shilhouete을 그리기 전 현재 위치에서 블럭이 얼마나 떨어질수 있는지를 구해야 한다. 1. 위와같이 현재 블럭의 y 좌표값을 기준으로 각각 얼마나 떨어질수 있는지 구하고 2. 떨어질수 있는 범위중 제일 낮은 값이 현재 블럭이 떨어질수 있는 값이다. getblockDropPos(pos: [number, number][], background: string, stage: ModelStage): {pos: [number, number][], background: string} { // key is rowIndex, value is column index let toCheckPos: { [key: number]: number } = {} for (c.. Tetris 개발일지 (day 3) 1. canSettle 메소드 작성 canSettle (positions: [number, number][]) { for (let pos of positions) { if ( pos[0] > this.state.stage.length - 1 || pos[0] this.state.stage[0].length - 1 || pos[1] < 0 || this.state.stage[pos[0]][pos[1]].settle ) return false } return true } position의 x, y가 stage를 넘어설때 이미 stage에 놓아져 있을때 위와 같을때 false를 반환한다. 2. event handler 작성 stage component엔 내부적으로 사용자의 키보드에.. Tetris 개발일지 (day 2) 1. 테트리스 구조 나누기 후에 게임 저장 기능도 만들거기 때문에 해당 데이터들은 Tetris에 props로 뿌려주는 방식으로 할거며 없을수도 있으니 ? 키워드를 붙인다 만약 없으면 Tetris component에서 initial value로 생성해서 뿌려주는 방식 2. Type 구조 짜기 export type Cell = { background: string; settle: boolean; } export type ModelStage = Cell[][] export type ModelScoreBoard = { score: number; rows: number; level: number } export interface ModelBlock { shape: boolean[][], background: st.. [javascript] Array.fill 포인터 문제 this.state = { stage: new Array(stageX).fill( new Array(stageY).fill({ background: '', settle: false }) ) , .... } 자 요놈은 Tetris에서 state constructor 내부 분장이다. 실행시키면 다음과 같은 결과가 나온다. concatStageByBlock ({ pos, background }: { pos: [number, number][]; background: string }, isSettle: boolean, stage?: ModelStage): ModelStage { const copyStage = stage ? [...stage] : [...this.state.stage] pos.forEach(pos.. 이전 1 2 3 4 다음
