본문 바로가기

분류 전체보기296

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.
[Lv.1] 비밀지도 1. 문제 2. 전략 1) 지도1과 지도2 배열 각각 10진수를 2진수로 변경하여 spread연산자로 펼쳐서 0과 1로 된 배열 생성 2) 생성된 지도1배열과 지도2배열을 비교하여 1이 존재하는 좌표는"#", 두 좌표 모두 0인 경우 0으로 치환 3) 각각의 배열을 array.join('') 으로 연결하여 출력 function solution(n, arr1, arr2) { var answer = []; let a1 = []; let a2 = []; // 2진수의 a1 배열 생성 for(i in arr1){ //정사각형이므로 arr1, arr2 둘다 같은수 반복으로 사용가능 a1.push([...arr1[i].toString(2)]) a2.push([...arr2[i].toString(2)]) } //00.. 2023. 1. 31.
[Lv.1] 3진법 뒤집기 1. 문제 2. 풀이 function solution(n) { var answer = parseInt([...n.toString(3)].reverse().join(''),3) // n.toString(3) 은 10->3진법 변환 // 배열로 나눈 뒤 reverse()로 순서를 바꿔서 join으로 연결해준 뒤 // parseInt()로 3->10진법 변환 return answer; } 3. 알아야할 사항 1) 10진법 -> n진법 : num.toString(n) 2) n진법 -> 10진법 : parseInt(num,n) 2023. 1. 31.
[Lv.1] JS 최대공약수, 최소공배수 구하기 1. 문제 2. 풀이 function solution(n, m) { var answer = []; let 공약수 =[]; let 최대공약수; let 최소공배수; for(let i = 1; im?n:m); i++){ if(n % i ===0 && m % i ===0){ //i로 나눴을때 두 수 모두 나머지가 0인 수를 모두 공약수배열에 넣어버린다 공약수.push(i) } } 최대공약수 = Math.max(...공약수) //공약수 중에 가장 큰 수가 최대공약수 최소공배수 = (n/최대공약수 * m/최대공약수 * 최대공약수) //최소공배수 공식 : 초등학생 때 배운거다. answer = [최대공약수, 최소공배수] return answer; } 3. 알아야할 사항 1) 그냥 공약수 공배수는 가끔 쓸 것 같아서 .. 2023. 1. 31.
[Lv.0] 문자열 내림차순 정렬하기 (array.sort(), array.reverse(), array.join(), Spread 연산자, 1. 문제 2. 풀이 function solution(s) { var answer; answer = [...s]; //spread연산자로 문자열 s를 분해하여 배열에 각각 넣는다 answer.sort() // 문자열을 오름차순한다 answer.reverse() // 순서를 바꿔버린다(!) answer = answer.join('') // 배열을 연결해서 합친다 return answer; } 3. 알아야할 사항 1) spread연산자 (...a) : a가 문자면 한글자씩 분해한다. 괄호를 벗긴다 2) .sort() : 파라미터가 없으면 유니코드 기준으로 오름차순한다. 3) .reverse() : 배열의 순서를 뒤집는다. 4) .join(a) : 배열을 구분자 a기준으로 연결하여 합친다. 2023. 1. 31.

티스토리툴바