본문 바로가기
[React] TypeScript + React에서 useHistory, useLocation을 사용해 state 넘기기! 시작! 이번 포스팅에서는 typescript로 react application을 개발하며 useHistory와 useLocation을 이용해 State를 넘기는 과정을 작성해볼것이다! 🤖 useHistory를 사용한 route push와 state넘기기 우선 routing이 가능하게 하기 위해서는 useHistory를 import시킨다! pathname은 이동하고자 하는 경로 주소를 입력해주면 되고, state에서는 전달하고자하는 state를 Object로 감싸고 이 두개를 또 Object로 감싸서 넘기면 된다! 너무 쉽지 않은강... 🙀 import { useHistory } from "react-router-dom"; export interface IState { a: string; b: string.. 2021. 8. 11.
[JavaScript] Arrow Function, 함수의 선언과 표현 ✅ Function fundamental building block in program subprogram can be used multiple times performs a task or calculates a value ✅ Function Declaration function name(param1, param2) { body ... return ;} one function === one thing naming: doSomething, command, verb e.g) crateCardAndPoint → createCard, createPoint function is object in JS function printHello() { console.log("Hello"); } printHello(); f.. 2021. 8. 11.
[Javascript] 자바스크립트 연산, 반복문 1. Numeric Operators console.log(1 + 1); //add console.log(1 - 1); //subtract console.log(1 / 1); //divide console.log(1 * 1); //multifly console.log(5 % 2); //remainder console.log(2 ** 3); //exponentiation -> 2의 3승 2. Increment and Decrement Operators PreIncrement let counter = 2; const preIncrement = ++counter; //same as //counter = counter + 1; //preIncrement = counter; console.log(`preIncre.. 2021. 8. 10.
[Javascript] 데이터 타입 이번 포스팅은 자바스크립트에서 사용되는 변수 선언 타입과 데이터 타입에 대한 이해! 그리고 dynamic Typing에 대한 이해를 해보려 한돠! 1. 변수 - rw(read/write) 📌 let (added in ES6) //let (added in ES6) //global name은 블럭 안, 블럭 바깥에서 모두 사용된다. // app이 실행되고나서부터 끝날때까지 계속 메모리에 유지되는 내용이니 //최소한으로 사용하는 것이 좋다! let globalName = "global name"; //block scope //블럭 내의 내용들은 블럭 바깥에서 접근이 불가능하다! { let name = "sieun"; console.log(name); name = "hello"; console.log(name).. 2021. 8. 10.
[Javascript] 콘솔 출력 && async와 defer의 차이점 오늘은 Javascirp 파일에 콘솔을 작성하고 출력하는 과정과 브라우저에서 스크립트 파일을 불러오는 여러가지 방법들에 대한 이해를 해보겠다. 1. Hello World 출력하기 Javascript 파일에 콘솔을 작성하고 출력하는 과정, 스크립트 파일을 불러오는 여러가지 방법들에 대한 설명 main.js console.log("Hello World"); 출력 확인 방법 node main.js VS code Live Server → Browser console 위 두 환경에서 모두 Hello World 가 실행되는 것을 확인할 수가 있다! 그 이유는 Node.js랑 Web Browser 모두 Console 에 관한 API가 존재하는 것! 2. Async & Def 2-1. Including in head .. 2021. 8. 10.
[JavaScript] Javascript: 브라우저의 역사 ✏️ 자바스크립트: 브라우저의 험난한 역사 1. NetScape 1993년 마크 앤더슨이 NetScape 회사를 설립했다. NetScape는 오직 HTML과 CSS 만을 사용하여 정적인 웹 사이트를 만들었는데 , 동적인 웹 사이트를 만들고 싶어 Scripting 언어를 만들고 싶어 하였고 그렇게 JavaScript가 탄생하였다. 2. MicroSoft - Internet Explorer 마이크로소프트는 NetScape를 "reverse engineering"을 통해 비슷한 인터넷 웹 브라우저를 만들어냈다. 3. ECMAScript 1 Language Specification 1997, 7월! 4. jQuery, dojo, mooTools 해당 라이브러리들의 api를 통해 함수를 사용하면, 더이상 브라우저.. 2021. 8. 10.
[백준 4963번 섬의 개수(DFS)/ C++] www.acmicpc.net/problem/4963 4963번: 섬의 개수 입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스의 첫째 줄에는 지도의 너비 w와 높이 h가 주어진다. w와 h는 50보다 작거나 같은 양의 정수이다. 둘째 줄부터 h개 줄에는 지도 www.acmicpc.net 훟 예전 같았으면 이문제를 bfs로 풀었겠지만...! 더이상 예전의 내가 아니양!🥳 난 dfs로 문제를 풀어낼 수 이찌 응켘엨엥 이 문제는 영역 개수를 세는 다른 문제들과 크게 다를 것은 없었당 하지만 하나 꼽자면 가로, 세로 뿐만 아니라 대각선에 있는 "1"까지 동일한 영역으로 간주하였기 때문에 그 부분을 dx, dy에 포함시켜주는것 만 포함했다면 완뵥!✨ #include #include using na.. 2021. 1. 26.
[백준 10451번 순열 사이클(DFS)/ C++] www.acmicpc.net/problem/10451 10451번: 순열 사이클 1부터 N까지 정수 N개로 이루어진 순열을 나타내는 방법은 여러 가지가 있다. 예를 들어, 8개의 수로 이루어진 순열 (3, 2, 7, 8, 1, 4, 5, 6)을 배열을 이용해 표현하면 \(\begin{pmatrix} 1 & 2 &3&4&5&6&7&8 \\ 3 www.acmicpc.net 어떻게 보면 혼란스러울 수 있는데! 사실 연결돼 있는 노드 집합의 개수를 찾는 방식과 똑같다 ㅎㅎ 2021/01/22 - [Studying 📖/알고리듬(thm) 공부 🌱] - [백준 11724번 연결 요소의 개수(BFS, DFS)/ C++] [백준 11724번 연결 요소의 개수(BFS, DFS)/ C++] www.acmicpc.net/pr.. 2021. 1. 22.
[백준 1707번 이분 그래프(DFS)/ C++] www.acmicpc.net/problem/1707 1707번: 이분 그래프 입력은 여러 개의 테스트 케이스로 구성되어 있는데, 첫째 줄에 테스트 케이스의 개수 K(2≤K≤5)가 주어진다. 각 테스트 케이스의 첫째 줄에는 그래프의 정점의 개수 V(1≤V≤20,000)와 간선의 개수 www.acmicpc.net 처음에는 이분그래프가뭐지!!!! 무슨 말이 저렇게 어렵지!!!하고 있었는데 Prof.google을 통해 알게 되었다.. 정말 어렵게 설명돼 있지만 결국 서로 연결돼 있는 노드끼리 다른 그룹에 속하는 그래프를 의미한다! 더 쉽게 시각적으로 이해한다면 다음과 같다! ㅎㅎ 다음 그림을 보면 서로 연결된 노드는 다른 색을 가지고 있다 ㅎㅎ! 그럼 dfs를 통해서 한 노드에 들어갈 때마다 색깔을 이전에 노드.. 2021. 1. 22.
반응형

티스토리툴바