Muscardinus

Why Router? SPA (Single Page Application) SPA는 Page가 한 개인 Application이다 한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법을 위해서 Router를 사용한다 Routing Routing이란 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것 이다 React 자체에는 이러한 기능이 내장되어 있지 않다 ----> React가 framework이 아닌 Library인 이유 중 하나 React-router는 React의 라우팅 기능을 위해 가장 많이 사용되는 Library이다 React Router Example Routes.component.jsx import React from 'react'; import { BrowserRo..

Component Component: 재활용 가능한 UI 구성 단위 특징 1. 재활용하여 사용할 수 있다 2. 코드 유지보수에 좋다 3. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다 4. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트) Class vs Functional Component 컴포넌트는 두 가지 방식으로 선언할 수 있다 Class Component import React from 'react' class Component extends React.Component { render() { return ( This is Class Component! ) } } export default Component 특징 render 함수 가 꼭 있어야 하..

Hosting 인터넷에 띄운다는 것은 홈페이지의 구성파일들이(html, css, js) 인터넷에 “항상" 연결되고, “절대" 꺼지지 않는 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든 응답 서비스 예) AWS ec2/S3, cafe24 호스팅센터 등 IP IP 주소는 Internet으로 통신하는 각 device(컴퓨터, 통신장비)에 부여된 고유한 값. 스마트폰이나 노트북부터 대규모 소매 웹 사이트의 콘텐츠를 서비스하는 서버에 이르기까지 인터넷상의 모든 컴퓨터는 숫자를 사용하여 서로를 찾고 통신하며, 이러한 숫자를 IP 주소라고 한다. 이 값은 기기마다 다르다 이 큰 값을 사람이 외울수는 없기 때문에 쉽게 읽을 수 있는 DOMAIN으로 대체한다 DOMAIN 문자(string)으로 ..

function LongestWord(sen) { sen = sen.trim(); sen = sen.replace(/[^a-zA-Z0-9 ]/g, ''); sen = sen.split(" "); let ret = sen[0]; sen.forEach((str) => {if(str.length>ret.length) ret = str} ) // code goes here return ret; } // keep this function call here console.log(LongestWord(readline()));

HTTP (HyperText Transfer Protocol) 1.HyperText 문서와 문서가 링크로 연결되도록 하는 태그로 구성된 언어 2.Transfer 로컬 뿐만 아니라 다른 컴퓨터에도 전송 전송은 보내는 주체와 받는 주체가 있다 3.Protocol 통신 규약, 물리적으로 떨어진 컴퓨터 끼리 어떻게 HTML파일을 주고 받을지에 대한 약속 Q. HTTP란 무엇인가? A. 컴퓨터들끼리 HTML파일을 주고받을 수 있도록 하는 소통방식 또는 약속 HTTP의 두가지 특징 1. Request/Response(요청, 응답) Transfer에서 설명했듯이, 전송은 보내는 주체와 받는 주체가 있다. 보내는 주체는 받는 주체에게 요청(Request)을 보내고, 받는 주체는 요청을 보낸 주체에게 응답(Respons..

www.acmicpc.net/problem/19238 19238번: 스타트 택시 첫 줄에 N, M, 그리고 초기 연료의 양이 주어진다. (2 ≤ N ≤ 20, 1 ≤ M ≤ N2, 1 ≤ 초기 연료 ≤ 500,000) 연료는 무한히 많이 담을 수 있기 때문에, 초기 연료의 양을 넘어서 충전될 수도 있다. 다 www.acmicpc.net #include #include using namespace std; struct CUSTOMER { int start, end; }; struct TAXI { int pos, distance; }; const int WALL = -1; const int EMPTY = -2; const int dy[] = { 0,0,1,-1 }; const int dx[] = { -1,1..

www.acmicpc.net/problem/5373 5373번: 큐빙 각 테스트 케이스에 대해서 큐브를 모두 돌린 후의 윗 면의 색상을 출력한다. 첫 번째 줄에는 뒷 면과 접하는 칸의 색을 출력하고, 두 번째, 세 번째 줄은 순서대로 출력하면 된다. 흰색은 w, 노란 www.acmicpc.net 기억하기! 반시계 방향은 시계방향 x 3과 같다 #include using namespace std; /* U 0 1 2 3 4 5 6 7 8 L __________ R B 36 37 38|F18 19 20 | 45 46 47 | 27 28 29 39 40 41| 21 22 23 | 48 49 50 | 30 31 32 42 43 44| 24 25 26 | 51 52 53 | 33 34 35 ----------- ..

www.acmicpc.net/problem/19237 19237번: 어른 상어 첫 줄에는 N, M, k가 주어진다. (2 ≤ N ≤ 20, 2 ≤ M ≤ N2, 1 ≤ k ≤ 1,000) 그 다음 줄부터 N개의 줄에 걸쳐 격자의 모습이 주어진다. 0은 빈칸이고, 0이 아닌 수 x는 x번 상어가 들어있는 칸을 의미 www.acmicpc.net #include using namespace std; int n, m, k, ret; int board[20][20][3]; // 위치 상어 번호 / 냄새의 상어 번호 / 냄새 강도 struct SHARK { int y, x, d; int priority[4][4]; }; SHARK shark[400]; int dy[] = { -1,1,0,0 }; int dx[] =..