본문 바로가기

분류 전체보기140

TypeScript union타입, any타입, unknown 타입 let name1 :string = 'kim' let age :number = 25; let friend :null = null; //undefined, null 타입도 있음. let male :boolean = true; 변수에 타입지정이 가능하다는 것은 타입이 실수로 변경되는 것을 방지할 수 있는것을 의미한다. let arr : number[] = [123,456]; Array도 type을 지정하여 사용한다. 위 배열의 요소는 number만 올 수 있다. 유니온타입 Union Type let member : number | string = 'kim'; 유니온타입은 타입 2개 이상을 합쳐 새로운 타입을 만든다. member 변수에는 string, number 두가지 타입이 올 수 있다. 배열과 오브젝트.. 2021. 10. 25.
TypeScript 설치와 타입지정 설치 nodejs설치 VScode 터미널 오픈후 npm install -g typescript .ts 확장자인 파일하나를 생성한다. index.ts 생성 tsconfig.json 생성 //tsconfig.json { "compilerOptions": { "target" : "es5", "module" : "commonjs", } } 이 파일에 대해서는 나중에 알아볼 것이다. TypeScript 의 Type //index.ts let name1 = "kim"; ts파일은 브라우저가 읽을 수 없다. ts파일을 js파일로 변환해야사용할 수 있음. //index.ts let name2 :string = "park"; name2 = 123 타입스크립트는 변수에 type지정을 할 수 있다. name2라는 변수에는 .. 2021. 10. 24.
[백준 / 2164 / node.js] 카드 2 javascript 처음에는 그냥 class로 queue를 구현해서 동작시키려고 했다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); const n = parseInt(input.shift()) class Queue { constructor(num){ this.arr = []; } enqueue(num){ this.arr.push(num); } drop(){ this.arr.shift(); } move(){ this.enqueue(this.arr.shift()) } length(){ return this.arr.length; } ans(){ return this.arr.shift(); } } con.. 2021. 9. 22.
Webpack이 뭔데!!(6) template engine을 webpack과 함께 사용해보기 Webpack이 바라보는 Module js sass hbs jpg, png hbs는 handlebars 의 약자로 이 확장자는 템플릿 엔진인handlebars가 사용하는 template 파일을 말합니다. 문서 내에 특정 데이터를 노출시켜야 할 때 직접 DOM을 파싱하고 데이터가 들어갈 공간을 찾아서 넣어주는 작업을 반복해야합니다. 이런 일을 많이해야할 때 템플릿 엔진을 사용합니다. 템플릿 엔진은 Model Template View 로 나눠져있습니다. Model은 문서에 노출시킬 데이터를 뜻하고 , Template 은 일반적인 문서와 비슷한데 모델이 갖고 있는 데이터가 어디에 어떻게 표현될 지 문서내에 작성이 되어있습니다. Model과 Temp.. 2021. 9. 14.
[프로그래머스/javascript] 짝지어제거하기 js 효율성검사 2번때문에 당황 했던 문제. 문제 자체는 어렵지않다. 배열을 하나 생성해주고 s를 쭉 순회하면서 배열에 담아준다. 그러면서 생성한 배열의 마지막 값과 현재 순회중인 s의 요소 값이 같으면 배열의 마지막 값을 pop해주고 다르면 현재값을 push해준다. function solution(s) { let tmp =[] let arr = [...s]; if(s.length % 2!==0) return 0 for(let cur of s){ if(tmp[tmp.length-1] === cur){ tmp.pop() }else{ tmp.push(cur) } } return !tmp.length ? 1 : 0; } 그리고 만약에 그 배열이 비어있으면 1을 리턴 하나라도 남아있으면 0을 리턴해주면된다. 여기서 .. 2021. 9. 1.
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'inline'. These properties are valid: object { allowedHosts?, bonjour?, client?, compre.. [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'inline'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddlewar.. 2021. 8. 29.
[백준 / 1929 / nodejs] 소수구하기 javascript 소수 구하기 문제는 에라토스테네스의 체를 쓰거나 범위의 제곱근까지만 비교해서 찾는 방식이 대부분인 것 같아서 둘 다 해봤다. 1. 2~ 제곱근까지 나눠보기 let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); const isPrime = (num) => { if(num === 1) return false; for(var i=2; iparseInt(e)); for(var i=n; iparseInt(e)); const arr = Array.from(Array(m+1).keys()) for(let i=2; i 2021. 8. 24.
[백준 / 1920/ nodejs] 수찾기 javascript nodejs로 풀었다. 처음시도했던 방식은 includes를 사용했다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split('\n'); const N = parseInt(input.shift()) const arr = input.shift().split(' '); const M = parseInt(input.shift()) const arrM = input.shift().split(' '); arrM.map( e => {arr.includes(e) ? console.log(1) : console.log(0)}) 결과는 시간초과 1. 이진탐색 그래서 이진탐색으로 시도해봤다. let fs = requ.. 2021. 8. 24.
TestDome React Image Gallery App 문제의 요구사항을 살펴보자. 이미지와 함께 X버튼이 존재하고 X버튼을 누르면 해당하는 이미지가 삭제되는 형태다. 1. 이미지 리스트 2. remove 버튼 눌렸을 때 삭제되게 ( 코드의 아랫쪽을 보면 첫번째 링크는 생성되자마자 remove가 클릭되게 되어있음) links라는 props를 전달하고 links는 배열형태. 이 말은 X Jsx에서는 class 말고 className을 그리고 img 태그도 꼭 닫아줘야한다. class ImageGallery extends React.Component { constructor(props) { super(props); this.state = { links: props.links }; this.remove = this.remove.bind(this); } remove.. 2021. 8. 21.
TestDome React Focusable Input 렌더링 될 때 shouldFocus prop이 true면 자동 포커스 되게끔 하면 되는 문제다. functional component이므로 useRef로 DOM에 접근해서 focus() 메서드를 사용하면 될 것 같다. 우선 문제의 요구사항은 1. shouldFocus가 true일 때 input focusing 2. 오직 첫 렌더링때만 input focuing 3. react hook 사용 const FocusableInput = (props) => { const inputRef = React.useRef(); React.useEffect(() => { if (props.shouldFocus) inputRef.current.focus(); }); return ; }; docum.. 2021. 8. 20.
TestDome React Change Username 문제에서 요구하는 사항을 보면 1. h1태그 사이에 value 값이 뜨게 2. 버튼을 누르면 input값을 읽어 Username 의 value를 변경 3. Reference Hook 사용해서 Username의 value update // React is loaded and is available as React and ReactDOM // imports should NOT be used class Username extends React.Component { state = { value: "" }; changeValue(value) { this.setState({ value }); } render() { const { value } = this.state; return {value}; } } functi.. 2021. 8. 20.
[백준/nodejs/1085] 직사각형에서 탈출 javascript (0,0) 과 (w,h) 에 꼭짓점이 있고 주어진 (x,y)좌표에서 가장 가까운 거리를 가진 거리를 제출하면 된다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split(' '); const [x,y,w,h] = input; let res = []; res.push(x) res.push(y) res.push(Math.abs(x-w)) res.push(Math.abs(y-h)) console.log(Math.min(...res)) x,y,w,h를 구조분해할당으로 각각 받아서 x-0 , y-0, x-w, y-h 중 가장 작은 값을 찾으면 됨. 2021. 8. 11.
[프로그래머스] 거리두기 확인하기 javascript javscript 거리두기 확인하기 문제풀이 https://programmers.co.kr/learn/courses/30/lessons/81302 코딩테스트 연습 - 거리두기 확인하기 [["POOOP", "OXXOX", "OPXPX", "OOXOX", "POXXP"], ["POOPX", "OXPXP", "PXXXO", "OXXXO", "OOOPP"], ["PXOPX", "OXOXP", "OXPOX", "OXXOP", "PXPOX"], ["OOOXX", "XOOOX", "OOOXX", "OXOOX", "OOOOO"], ["PXPXP", "XPXPX", "PXPXP", "XPXPX", "PXPXP"]] [1, 0, 1, 1, 1] programmers.co.kr bfs로 문제를 풀었습니다. 2자리 거리까지 .. 2021. 8. 10.
Webpack이 뭔데!!(5) plugin 플러그인은 웹팩이 동작하는 자체적인 과정에 개입할 수 있어 웹팩이 동작하는 과정 전반적으로 광범위한 작업을 수행할 수 있습니다. 번들파일에 변화를 주거나 최적화하고, 애셋을 관리하고 또 환경변수 주입등과 같은 작업을 수행할 수 있습니다. plugin은 require()을 통해 플러그인을 요청하고 plugins 라는 key를 시작으로 설정할 수 있습니다. 이번에는 HtmlWebpackPlugin 을 사용해 볼 예정입니다. 이 플러그인은 번들러를 위한 html 파일을 자동으로 만들어주고 설정해줍니다. 플러그인은 loader 와 다르게 webpack package 내부에 있는 plugin과 외부 저장소에서 관리되는 plugin으로 나뉩니다. 이번에 사용하는 HtmlWebpackPlugin 은 외부.. 2021. 8. 6.
플로엑셀 붓이끼 제거 후기 후기가 늦었습니다만 약 2주간의 플로엑셀 투입끝에 붓이끼를 제거했습니다. 생물 피해는 하나도 없었고, 어항에는 야마토새우와 다리오다리오만 있었습니다. 플로엑셀을 투입하는동안 콩돌은 계속해서 틀어줘야합니다. https://fishhi.kr/ 피쉬하이에서 내 어항에 맞는 플로엑셀 정량에 대해서 확인해보고 2배 3배 4배 플로엑셀 투입량을 조금씩 늘려가며 백탁이나 생물반응을 살펴보고 이상반응이 보이기 전의 용량까지 투입하는식으로 진행했습니다. 피쉬하이 :: 어항 물양 계산 상세 설정 상세설정 Toggle 내 수조의 용량을 계산해보세요. fishhi.kr 1일차 2일차 3일차 4일차 5~7일차 8~10일차 2021. 8. 4.

티스토리툴바