분류 전체보기 검색 결과

해당 글 251건

2. JSX

2-2. JSX란? JSX는 자바스크립트의 확장 문법이며 브라우저가 코드에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트로 변환된다 2-4. JSX 문법 감싸인 요소 컴포넌트는 반드시 하나의 부모로 이루어진 태그만 반환해야 한다 function Test(){ return ( Title Contents ) } 이런식의 JSX를 반환하는 컴포넌트는 에러를 발생시킨다 function Test(){ return ( Title Contents ) } 이렇게 의미 없이 div태그로 감싸는 것이 싫다면 Fragment라는 기능을 사용하면 된다(v16이상부터 사용가능) function Test(){ return ( Title Contents ) } //아래도 Fragment를 이용한 감싸기. 동일하게 작동한다 fu..
React/리액트를 다루는 기술 2021. 1. 8. 00:37

1. 리액트 시작

1-1. 왜 리액트인가? 프론트엔드 사이드에서 규모가 큰 애플리케이션을 관리하기 위해 수많은 프레임워크 들이 존재 프레임워크들은 주로 MVC, MVVC, MVW와 같은 구조를 차용하며 모두 Model과 View를 가짐 Model, View, Controller MVC 프로그램 개발할 때 Model, View, Controller를 나누어서 개발하는 개발 방법론이다 위의 사진과 같이 작동하며 일반적으로 User가 Controller에 요청 Controller가 Model에 반영 반영된 Model을 View가 다시 그려서 User에게 보여주는 과정을 거치게 된다 View의 문제점 위와 같은 MVC패턴은 당연하게도 View를 변형시킨다 아래와 같은 JSON 객체를 보자 { 'title': 'Hello', 'c..
React/리액트를 다루는 기술 2021. 1. 6. 01:29

baekjoon. 단어 정렬

문제 풀이 자바스크립트 내장 함수인 sort()를 이용해서 문제를 풀어보기로 했다 물론 내가 구현할 수도 있었겠지만 구현할 자신이 있기 때문에 굳이 시간 낭비하고 싶지 않기 때문에.. 다음에 기회에 구현하는 걸로하고 sort메소드의 콜백을 이용해서 구현해봤다 구현 첫번째 const input = require("fs").readFileSync("/dev/stdin").toString().trim().split('\n'); // const input = [13, 'but', 'i', 'more','ac', 'ab','wont', 'hesitate', 'no', 'more', 'it', 'cannot', 'wait', 'im', 'yours']; const unDup = []; input.shift(); i..
Algorithm/문제 2021. 1. 4. 14:11

baekjoon. 통계학

풀이 문제에 나와있는데로 풀면 되는 문제라 딱히 풀이랄게 없다 3번째로 구해야하는 최빈값 정도가 머리를 좀 써야하는 정도?라고 생각해서 바로 코드를 짰다 구현 첫번째 const input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n').map(num => parseInt(num)); input.shift(); const first = Math.round(input.reduce((acc,v)=>{ return acc + v; },0)/input.length); const second = input.sort((a, b) => a-b)[Math.floor(input.length/2)];..
Algorithm/문제 2021. 1. 2. 13:55

baekjoon. 수 정렬하기 3

풀이 이번에도 정렬이지만 시간 복잡도가 O(n)이 되게 구현해야한다 카운팅 정렬을 사용하면 되는데 내가 설명하기 보다는 굉장히 참고하기 좋게 포스팅해둔 블로그가 있어서 남긴다 Counting Sort : 계수 정렬 Counting Sort Counting Sort Counting Sort 소개 정렬 과정 애니메이션 예시 구현 정리 끝 소개 Counting Sort 는 정렬 알고리즘으로 의 시간복잡도를 갖습니다. 반면 일반적 상황에서 가장 빠른 정렬 알고리즘. bowbowbow.tistory.com 구현 첫번째 const input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n').map(num => parseInt(num))..
Algorithm/문제 2021. 1. 1. 14:38

baekjoon. 수 정렬하기 2

풀이 수 정렬하기 1번 문제와 톳씨하나 틀리지않고 동일한 문제 처럼 보이지만 시간 복잡도가 n^2보다 작아야한다 즉, 합병 정렬, 퀵 정렬, 힙 정렬, 기수 정렬.. nlog(n)의 시간 복잡도를 갖는 정렬 방법으로 정렬을 구현해야 하는 것 구현 첫번째 const input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n').map(num => parseInt(num)); input.shift(); let answer = []; function sort(left, right) { const newArr = []; while (left.length){ if(left[0] >right[0]){ newArr.push(right.sh..
Algorithm/문제 2020. 12. 30. 19:46

baekjoon. 분해합

풀이 브루트 포스 문제이다 보니 무식하게 시도했다 처음에 문제를 제대로 읽지 않고 백준에서 푼 문제인 셀프 넘버 처럼 생성자의 생성자를 찾아가는 줄 알고 헤딩을 좀 했다 4673번: 셀프 넘버 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, www.acmicpc.net 그냥 분해합을 구하는 함수를 하나 생성하고 216까지 반복문을 돌려가며 216이 만들어지는 첫 수를 반환하면 그게 제일 작은 생성자다 구현 1번째 const input = 216; // const input = Number(require("fs"..
Algorithm/문제 2020. 12. 29. 21:12

논리 연산자

논리 연산자 이 때까지 자바스크립트를 공부하면서 논리 연산자라는 소단위의 제목을 보면 바로 건너뛰어서 다음 공부를 진행했다 논리 연산자라는게 어느 언어에서나 똑같이 작동하기 때문에 공부할 필요가 없다고 생각했기 때문이었다 하지만 다른 사람의 코드를 보다 보니 '이게 뭐지..?'싶은 코드들이 있었는데 역시나 이 포스팅의 시발점이었다 자바스크립트의 논리 연산자 자바스크립트에서는 논리 연산자의 피연산자가 3개 이상이 되면 그 때부터 다르게 작동한다 바로 참과 거짓 찾기를 수행하는데 아래의 예시를 보자 || 의 경우 ||의 경우 참을 찾을 때까지 연산을 수행한다 const value1 = false; const value2 = false; const value3 = true; console.log(value1|..
JavaScript 2020. 12. 24. 15:01

if, else 줄이기

if else 줄이기 어디서 읽었는진 모르겠는데 코딩 스타일에 관한 글을 읽다가 'if문과 else문을 난발하는 것을 굉장이 싫어한다'라고 하며 map에 데이터를 넣어두고 코드를 깔끔하게 하는 것을 보고 '오... 코드 깔끔한데?'와 막연하게 고수의 스타일같아서 따라해보기로 했다 왜 줄여야 하는가? 가독성 사방팔방으로 찾아봤지만 가장 큰 이유는 가독성인 것 같다 const input = 'c'; if(input==='a'){ console.log(1); } else if(input==='b'){ console.log(2); } else if(input==='c'){ console.log(3); } 보다는 const map = new Map(); map.set('a',1); map.set('b',2); m..
JavaScript 2020. 12. 23. 19:53

baekjoon. 하노이 탑 이동 순서

풀이 대표적인 재귀 문제이다 n-1개 만큼 즉 바닥에 있는 제일 큰 원판을 뺀 나머지를 2번에 옮기고 제일 큰 원판을 3번에 놓은 뒤 더 이상 이동할 필요가 없기 때문에 원판을 제외시키고 2번에 있는 원판 중 제일 큰 원판을 뺀 n-1만큼 1번으로 옮긴 뒤 제일 큰 원판을 3번으로 이동 시키는 것을 재귀적으로 구현하면 된다 구현 //const input = Number(require("fs").readFileSync("/dev/stdin").toString()); const input = 4; const stack = []; function hanoi(n,from,to){ const by = 6 - from - to; if(n===1) { stack.push([`${from} ${to}`]); retur..
Algorithm/문제 2020. 12. 20. 14:50