post-thumbnail

Vue Router

뷰 라우터는 뷰 라이브러리를 이용하여 싱글페이지 어플리케이션을 구현할때 사용되는 라이브러리프로젝트에 vue 라우터를 설치하는 방법은 CDN방식과 NPM방식 2가지가 있다.뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록한다

2022년 5월 27일
·
0개의 댓글
post-thumbnail

같은 레벨의 컴포넌트 간 통신

Vue에서 동일한 상위 컴포넌트를 둔 같은레벨의 컴포넌트간의 데이터를 직접적으로 전달하는 방법은 없음(vuex와 같은 상태관리 라이브러리 제외)따라서 같은 레벨의 컴포넌트에 데이터를 전달하기 위해선 상위 컴포넌트에 emit으로 이벤트를 전달하여 전달한 이벤트로 받은 데

2022년 5월 27일
·
0개의 댓글
post-thumbnail

Vue 인스턴스에서의 this

위의 obj관점에서의 this는 객체 자신을 가르킨다 위와 같은 방식으로 Vue 인스턴스의 this를 이해한다면위처럼 Vue인스턴스안의 methods 속성 안에서 this는 data속성을 바라본다.실제로 콘솔에 Vue인스턴스를 출력할 경우 num이라는 속성은 데이터

2022년 5월 27일
·
0개의 댓글
post-thumbnail

스도쿠 검사

스도쿠는 매우 간단한 숫자 퍼즐이다. 9×9 크기의 보드가 있을 때, 각 행과 각 열, 그리고 9개의 3×3 크기의 보드에 1부터 9까지의 숫자가 중복 없이 나타나도록 보드를 채우면 된다.예를 들어 다음을 보자. 위 그림은 스도쿠를 정확하게 푼 경우이다. 각 행에 1부

2022년 5월 10일
·
0개의 댓글
post-thumbnail

봉우리

지도 정보가 N\*N 격자판에 주어집니다. 각 격자에는 그 지역의 높이가 쓰여있습니다. 각 격자판의 숫자 중 자신의 상하좌우 숫자보다 큰 숫자는 봉우리 지역입니다. 봉우리 지역이 몇 개있는 지 알아내는 프로그램을 작성하세요.격자의 가장자리는 0으로 초기화 되었다고 가정

2022년 5월 6일
·
0개의 댓글
post-thumbnail

곶감(모래시계)

현수는 곳감을 만들기 위해 감을 깍아 마당에 말리고 있습니다. 현수의 마당은 N\*N 격자판으로 이루어져 있으며, 현수는 각 격자단위로 말리는 감의 수를 정합니다.그런데 해의 위치에 따라 특정위치의 감은 잘 마르지 않습니다. 그래서 현수는 격자의 행을기준으로 왼쪽, 또

2022년 5월 4일
·
0개의 댓글
post-thumbnail

두 리스트 합치기

오름차순으로 정렬이 된 두 리스트가 주어지면 두 리스트를 오름차순으로 합쳐 출력하는 프로그램을 작성하세요.첫 번째 줄에 첫 번째 리스트의 크기 N(1<=N<=100)이 주어집니다.두 번째 줄에 N개의 리스트 원소가 오름차순으로 주어집니다.세 번째 줄에 두 번

2022년 4월 25일
·
0개의 댓글
post-thumbnail

카드 역배치

1부터 20까지 숫자가 하나씩 쓰인 20장의 카드가 아래 그림과 같이 오름차순으로 한 줄로 놓여있다. 각 카드의 위치는 카드 위에 적힌 숫자와 같이 1부터 20까지로 나타낸다.이제 여러분은 다음과 같은 규칙으로 카드의 위치를 바꾼다: 구간 a, b (단, 1 ≤ a ≤

2022년 4월 25일
·
0개의 댓글
post-thumbnail

점수 계산

OX 문제는 맞거나 틀린 두 경우의 답을 가지는 문제를 말한다. 여러 개의 OX 문제로 만들어진시험에서 연속적으로 답을 맞히는 경우에는 가산점을 주기 위해서 다음과 같이 점수 계산을 하기로 하였다. 1번 문제가 맞는 경우에는 1점으로 계산한다. 앞의 문제에 대해서는 답

2022년 4월 22일
·
0개의 댓글
post-thumbnail

정다면체

두 개의 정 N면체와 정 M면체의 두 개의 주사위를 던져서 나올 수 있는 눈의 합 중 가장 확률이 높은 숫자를 출력하는 프로그램을 작성하세요.정답이 여러 개일 경우 오름차순으로 출력합니다.첫 번째 줄에는 자연수 N과 M이 주어집니다. N과 M은 4, 6, 8, 12,

2022년 4월 22일
·
0개의 댓글
post-thumbnail

대표값

N명의 학생의 수학점수가 주어집니다. N명의 학생들의 평균(소수 첫째자리 반올림)을 구하고,N명의 학생 중 평균에 가장 가까운 학생은 몇 번째 학생인지 출력하는 프로그램을 작성하세요.평균과 가장 가까운 점수가 여러 개일 경우 먼저 점수가 높은 학생의 번호를 답으로 하고

2022년 4월 22일
·
0개의 댓글
post-thumbnail

K번째 큰 수

현수는 1부터 100사이의 자연수가 적힌 N장의 카드를 가지고 있습니다. 같은 숫자의 카드가여러장 있을 수 있습니다. 현수는 이 중 3장을 뽑아 각 카드에 적힌 수를 합한 값을 기록하려고 합니다. 3장을 뽑을 수 있는 모든 경우를 기록합니다. 기록한 값 중 K번째로 큰

2022년 4월 22일
·
0개의 댓글
post-thumbnail

K번째 약수

어떤 자연수 p와 q가 있을 때, 만일 p를 q로 나누었을 때 나머지가 0이면 q는 p의 약수이다.6을 예로 들면6 ÷ 1 = 6 … 06 ÷ 2 = 3 … 06 ÷ 3 = 2 … 06 ÷ 4 = 1 … 26 ÷ 5 = 1 … 16 ÷ 6 = 1 … 0그래서 6의 약수

2022년 4월 22일
·
0개의 댓글
post-thumbnail

K번째 수

2022년 4월 22일
·
0개의 댓글
post-thumbnail

Hook useTabs

더미 데이터로 contents 생성한다.위의 더미데이터 배열을 map메소드를 사용해서 section1,2 버튼을 만듦useTabs hook 생성⇒useTabs hook작업중 마주친 에러React Hook "usestate" is called conditionally

2022년 3월 30일
·
0개의 댓글
post-thumbnail

Router

웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 따라 그에 해당하는 페이지를 보여주는것을 의미한다.터미널에 해당 명령어를 입력하고 router를 설치한다설치한 react 프로젝트 디렉토리를 열러 package.json 파일에 “dependencies”중 “reac

2022년 3월 28일
·
0개의 댓글
post-thumbnail

memo

컴포넌트의 props가 바뀌지 않았다면 리렌더링 되는것을 방지하여 컴포넌트의 성능을 최적화 할 수 있도록 해줌.React.memo()로 컴포넌트를 감싸면, 리액트는 컴포넌트를 메모리제이션 하고 불필요한 렌더링은 건너뜀.Dom의 업데이트를 결정할 때, 리액트는 컴포넌트를

2022년 3월 17일
·
0개의 댓글
post-thumbnail

PropsTypes

기본적으로 javascript는 자료형이 없기때문에 자식컴포넌트에 props를 전달할때 해당 props데이터의 자료형을 체크해서 애러발생하는 일을 방지하기 위해 사용한다.propTypes를 사용함으로써 타입정의 만으로도 좋은 문서가 될 수 있다. propTypes를 이

2022년 3월 16일
·
0개의 댓글
post-thumbnail

props

props는 properties의 줄임말로 특정한 값을 컴포넌트에 전달해 줘야 할 때 props를 사용한다.App이라는 컴포넌트에서 Test컴포넌트를 사용 할 때 text라는 값을 전달하려고 한다면 아래와 같이 코드를 작성하면된다.이제 Test컴포넌트에서 text값을

2022년 3월 16일
·
0개의 댓글
post-thumbnail

Javascript 기본 문법 정리

varvar는 한번 선언된 변수를 다시 선언할 수 있다.var는 선언하기 전에 사용할 수 있다letlet은 한번 선언된 변수는 다시 선언할 수 없다.let과 const는 TDZ(Temporal Dead Zone)의 영향을 받는다 즉 할당을 하기 전에는 사용할 수 없다.

2022년 3월 2일
·
0개의 댓글