import time start_time = time.time() # 측정 시작 # 프로그램 소스코드 end_time = time.time() # 측정 종료 print("time :", end_time - start_time) # 수행 시간 출력

SPA 기법을 그대로 유지한 상태로 REACT에서 페이지 이동 처리하는 방법으로 React Router가 사용된다. 라우팅이란? - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면 쉽다. - 리액트에는 라우팅 관련 라이브러리가 존재하는데, 그 중 리액트 라우터(React Router)를 사용해보려고 한다. React Router(리액트 라우터)란 무엇인가? - 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. 종류 - BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지한다. - HashRouter: 해시 주소를 감지한다. React Router(리액트 라우터) 사용해보기! (❗ ..

SPA를 설명하기 전 SPA를 왜 사용하는지? 전통적인 웹 사이트는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링 하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않으며, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 굉장히 비효율적이다. 웹 사이트의 규모가 커질수록 서버쪽에선 과부하가 걸릴 수 밖에 없다. 그 만큼 속도적인 측면에서 사용자는 불편함을 그대로 느끼게 된다. 틀릴확률이 높은 개인적인 지식(수정 가능성 높음❗) Traditional Page Lifecycle HTML → CSS → DOM → Web browser SPA Lifecycle HTML → CSS → Virtual Dom → DOM(필요 요소만 변경) → Web browser..

1. 해당 프로젝트 경로로 들어간다.c: \projects\...\프로젝트 경로 2.  npm을 이용해 Netlify 파일을 글로벌적으로 설치$ npm install netlify-cli -g 3.  Netlify 명령어 실행$ netlify deploy 4. What would you like to do? (방향키를 이용하여 선택)+ Create & configure a new site 5. Team & Site name 입력? Site name: Seongho's team? Site name: seongho-site-name 6. build 폴더를 deploy (주의❗ build 폴더가 없다면 $ npm run build를 통해 생성)? Publish directory build 7. 생성된 draf..

문제 알파벳 대소문자로 된 단어가 주어지면, 이 단어에서 가장 많이 사용된 알파벳이 무엇인지 알아내는 프로그램을 작성하시오. 단, 대문자와 소문자를 구분하지 않는다. 풀이 const input = require('fs').readFileSync('예제.txt').toString().trim().toUpperCase(); // 26의 길이를 가진 빈 배열에 0을 채워서 배열 객체 생성 const arr = new Array(26).fill(0); // 문자 A의 인덱스 = 0 (UTF-16 코드를 나타내는 정수 - 65) for (let i = 0; i < input.length; i++) { arr[input.charCodeAt(i) - 65]++; } // 배열 안에서 최댓값 찾기 const max =..

PureComponent & memo Component에 state나 props에 변화가 없다면 render 함수가 호출되지 ❌ React.PureComponent React.PureComponent는 React.Component와 비슷하다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교(레퍼런스만 비교해서 안에 데이터가 달라져도 동일한 오브젝트)를 구현한다는 차이점만이 존재한다. 참조값이 동일하면 업데이트 ❌ => ShouldComponentUpdate 함수는 false를 리턴 React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌..

문제 알파벳 소문자로만 이루어진 단어 S가 주어진다. 각각의 알파벳에 대해서, 단어에 포함되어 있는 경우에는 처음 등장하는 위치를, 포함되어 있지 않은 경우에는 -1을 출력하는 프로그램을 작성하시오. 풀이 const input = require('fs').readFileSync('예제.txt').toString().trim().split(''); let result = ''; // UTF-16 코드 유닛의 시퀀스로부터 a - z 문자를 생성한 후 해당 문자의 인덱스를 반환 // 해당 문자가 존재하지 않으면 -1을 반환 for (let i = 97; i

React 앱 만들기 $ yarn create react-app 폴더 이름 ❗ 폴더 이름에 공백이 들어 있지 않도록 해야한다. 템플릿 폴더 ⇒ 새로운 폴더 $ cp -R [템플릿 폴더] [새로운 폴더] ❗ 템플릿 폴더가 들어있는 경로로 설정해야 한다. fontawesome 사용하기 cmder $ yarn add @fortawesome/fontawesome-free index.js import '@fortawesome/fontawesome-free/js/all.js'; 컴포넌트 골격 생성 // Class Component rcc + Tab // function Component rsi + Tab axios 라이브러리 추가 // $ yarn add 라이브러리 $ yarn add axios