본문 바로가기
분류 전체보기86
REACT 공식 문서 정리 - 5. Component 와 Props 5. Component 와 Props 5.1 Component의 정의 컴포넌트의 제작 방법은 함수형과 클래스형으로 나누어져 있다. 컴포넌트를 쓰는 이유중 하나는 재사용을 편하게 하기 위함이다. App 최상위 컴포넌트 아래에 여러 사용자 정의 컴포넌트가 존재한다. 클래스형 보다는 함수형이 간결하게 사용할 수 있다. 5.2 props의 정의 React가 JSX 속성 또는 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 Props라 한다. 주의사항 : props는 읽기 전용이므로 수정 X ex) 함수 컴포넌트와 클래스 컴포넌트 예시 1 2 3 4 5 6 7 8 9 10 // 함수형 function Welcome(props) { return Hello, {props.name}; } // 클래스형 cla.. 2021. 6. 20.
REACT 공식 문서 정리 - 4. Element 렌더링 4. Element 렌더링 4.1 element의 정의 Element는 컴포넌트의 구성요소이며 React 앱의 가장 작은 단위이다. 특정 부분만 리렌더링 할 수 있기에 효율적인 자원관리를 할 수있다. 1 2 3 4 5 6 7 8 9 function Welcome(props) { return Hello, {props.name}; } const element = ; ReactDOM.render( element, document.getElementById('root') ); cs 위의 예시는 다음과 같은 일이 일어난다. 엘리먼트로 ReactDOM.render()를 호출한다. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다. Welcome 컴포넌트는 결과적으로 Hel.. 2021. 6. 20.
REACT 공식 문서 정리 1~3 1. React를 배우는 이유 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 한다. 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다. 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React가 제작됨. 2. React를 배우기 전 기본 조건 HTML 및 CSS 에 대한 기본 지식. Javascript 및 프로그램에 대한 기본 지식 DOM 에 대한 기본적인 이해. ES6 구문 및 기능 Node.js 및 npm 설치 3. JSX 표현식 JavaScript를 확장한 문법이며 UI를 제작에 React와 함께 사용할 것을 권장한다. JavaScript의 모든 기능이 포함되어 있다. JSX는 HTML문법을 사용해서 View를 구성할 수 있게 도와주.. 2021. 6. 20.
REACT 공식 문서 정리 REACT 공식 문서 정리 목차 1. React를 배우는 이유 2. React를 배우기 전 기본 조건 3. JSX 표현식 1. React를 배우는 이유 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 한다. 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다. 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React가 제작됨. 2. React를 배우기 전 기본 조건 HTML 및 CSS 에 대한 기본 지식. Javascript 및 프로그램에 대한 기본 지식 DOM 에 대한 기본적인 이해. ES6 구문 및 기능 Node.js 및 npm 설치 3. JSX 표현식 JavaScript를 확장한 문법이며 UI를 제작에 React와 함께 사용할 것을 권장.. 2021. 6. 20.
highlight 추가하기 코드를 쓸 때 이쁘게 쓰려면 highlight 를 추가하면 된다. 1. 먼저 아래 주소로 들어가서 맘에드는 디자인을 선택한다. highlight.js demo highlightjs.org 2. 아래 주소로 들어가 사용법 대로 코드를 적용한다. How to use highlight.js Getting Started The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad: hljs.initHighlightingOnLoad(); This will find and highlight code inside of ta.. 2020. 4. 10.
카펫 카펫 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 빨간색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 빨간색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 빨간색 격자의 수 red가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 빨간색 격자의 수 red는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 깁니다. 입출력 .. 2020. 4. 10.
문자열 압축 문자열 압축 데이터 처리 전문가가 되고 싶은 어피치는 문자열을 압축하는 방법에 대해 공부를 하고 있습니다. 최근에 대량의 데이터 처리를 위한 간단한 비손실 압축 방법에 대해 공부를 하고 있는데, 문자열에서 같은 값이 연속해서 나타나는 것을 그 문자의 개수와 반복되는 값으로 표현하여 더 짧은 문자열로 줄여서 표현하는 알고리즘을 공부하고 있습니다. 간단한 예로 aabbaccc의 경우 2a2ba3c(문자가 반복되지 않아 한번만 나타난 경우 1은 생략함)와 같이 표현할 수 있는데, 이러한 방식은 반복되는 문자가 적은 경우 압축률이 낮다는 단점이 있습니다. 예를 들면, abcabcdede와 같은 문자열은 전혀 압축되지 않습니다. 어피치는 이러한 단점을 해결하기 위해 문자열을 1개 이상의 단위로 잘라서 압축하여 더.. 2020. 4. 10.
124 나라의 숫자 124 나라의 숫자 124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다. 124 나라에는 자연수만 존재합니다. 124 나라에는 모든 수를 표현할 때 1, 2, 4만 사용합니다. function solution(n) { let input = n; var answer = []; let realAnswer = []; let arr = [1,2,4]; while(input){ answer.unshift(input%3) input = Math.floor(input/3) } for(let i = answer.length-1; i>0;i--){ if(answer[i] realAnswer.push(arr[v-1])) return realAnswer.join('').. 2020. 4. 10.
비밀지도 비밀지도 function solution(n, arr1, arr2) { var answer = []; let a = arr1.map((v,index)=>{ let a1 = v.toString(2).slice(0,n) let a2 = arr2[index].toString(2).slice(0,n) let result = (parseInt(a1) + parseInt(a2)).toString() console.log(result.length) while(result.length v > 0 ? "#" : " " ).join('') }) return a; } 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받.. 2020. 4. 10.
크레인 인형뽑기 크레인 인형뽑기 function solution(board, moves) { var answer = 0; let list = []; moves.reverse(); while(moves.length>0){ let current = moves.pop()-1; for(let i = 0 ; i 1 &&list[list.length-1] == list[list.length-2]){ list.length-=2; answer+=2; } } return answer; } 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2020. 4. 10.
소켓 프로그래밍 #define WIN32_LEAN_AND_MEAN #include #include #include #include #include // Need to link with Ws2_32.lib, Mswsock.lib, and Advapi32.lib #pragma comment (lib, "Ws2_32.lib") #pragma comment (lib, "Mswsock.lib") #pragma comment (lib, "AdvApi32.lib") #define DEFAULT_BUFLEN 512 #define DEFAULT_PORT "27015" int __cdecl main(int argc, char** argv) { WSADATA wsaData; SOCKET ConnectSocket = INVALID_SOCKE.. 2020. 4. 9.
Date() Date() 메인화면 좌측 상단 시계만들때 쓰임 2020. 1. 24.

티스토리툴바