본문 바로가기

javascript23

[TS] MERN에서 TS 사용하기 1. CRA 세팅하기 (npx) npx create-react-app your-app-name --template typescript 2. Express에서 세팅하기 - 설치하기 npm init -y npm install typescript express ts-node @types/node @types/express --save - 세팅하기 npx tsc --init //tsconfig.json 생성 - tsconfig.json 설정하기 { "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es6", "moduleResolution": "node", "sourceMap": true, "outDir": "dist",.. 2023. 4. 10.
[Lv.1] 햄버거 만들기 1. 문제 햄버거 만들기 문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다. 예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯.. 2023. 2. 6.
[Lv.1] 둘만의 암호 (정규식과 변수, 복잡한 재반복 for문) 1. 문제 문제 설명 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. index만큼의 뒤의 알파벳이 z를 넘어갈 경우 다시 a로 돌아갑니다. skip에 있는 알파벳은 제외하고 건너뜁니다. 예를 들어 s = "aukks", skip = "wbqd", index = 5일 때, a에서 5만큼 뒤에 있는 알파벳은 f지만 [b, c, d, e, f]에서 'b'와 'd'는 skip에 포함되므로 세지 않습니다. 따라서 'b', 'd'를 제외하고 'a'에서 5만큼 뒤에 있는 알파벳은 [c, e, f, g, h] 순서에 의해 'h'가 됩니다. 나머지 "ukks".. 2023. 2. 6.
React - 2장 : JSX 2-1. JSX란? - JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 구성되어있다. - 브라우저에서 실행되기 전에 번들링 되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환된다. 2-2. JSX의 장점 1) 보기 쉽고 익숙하다 - 아래 두 코드는 JSX 코드와 일반 자바스크립트 코드로 변환된 코드이다. - 단순히 비교만 해봤을때에도 JSX코드가 가독성이 높고 작성하기도 쉽게 느껴진다. function App() { return ( Hello react ); } function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } 2) 더욱 높은 활용.. 2023. 2. 2.
[Lv.1] 다트게임(정규식, string메소드, 조건반복문 혼합) (카카오) 1. 문제 2. 전략 1) 정규식을 통해 [점수영역, (보너스), 점수영역, (보너스), 점수영역, (보너스)] 형태의 배열로 만든다 2) 배열을 순회하며 보너스를 조건에 따라 계산해준다. 3) 배열 중 점수영역을 합쳐서 return. function solution(dartResult) { var answer = 0; let reg = /\d{1,2}\w|\*|\#/g; //정규식 // /d는 모든숫자이며 뒤에 붙은 {1,2}는 최대1개, 최대2개 // /w는 모든문자 // | 는 or 연산자이다. // \*는 '*', \#는 '#' 이다. let arr = dartResult.match(reg) // 정규식 메소드 // string.match(RegExp) : string에서 정규식에 match 되는.. 2023. 2. 2.
[Lv.1] 푸드 파이트 대회 (String(str).repeat()) 1. 문제 2. 전략 1) food array의 1부터 마지막까지 각각 요소를 나누기 2한값의 버림 값이 한쪽사람이 먹을 해당 음식의 양이다. 2) 새로운 문자열에 그 음식의 양 만큼 반복해서 쌓는다 3) 문자열 str이 완성되면 0을 추가하고 str을 뒤집어서 뒤에 연결하여 return 한다. function solution(food) { var answer = ''; let arr = []; let str = ''; for (let i = 1; i < food.length; i++) { str += String(i).repeat(Math.floor(food[i]/2)); //str에 (총음식양/2)의 정수부분만큼 1부터 반복하여 추가해준다. } arr = [...str].reverse().join('.. 2023. 2. 1.
React - 1장 : React 이해 앞으로 포스팅할 React 빠르게 복습하기 내용은 React를 익힌지 오래되었거나, 공부를 한 두번 해봤는데 맥락을 이해하기 어렵거나, 이해는 했는데 자주 잊어버리는 경우 훑어보면서 빠르게 복습할 수 있도록 간결화하여 포스팅합니다. 1-1. 리액트를 왜 쓰는가 1) React Library - 많은 프레임워크들이 순수한 자바스크립트만으로 다양한 어플리케이션을 편하게 관리하려고 노력해왔다. - React.js, Vue.js, Angular.js, Backbone.js, Ember.js 등등 - 이들은 주로 MVC(Model-View-Controller)패턴, MVVM(Model-View-View Model)패턴을 사용한다. - Model : 어플리케이션에서 사용하는 데이터/구조를 관리하는 영역 - View.. 2023. 2. 1.