Archive

Create React App 1. useState() 사용법 create react app에서 useState()은 아래의 코드를 통해 import해야 사용 가능하다 import { useState } from "react"; 이전에 React JS에서 useState를 사용할 때 React.useState()로 사용했던 것과 달리 create react app은 useState()만 작성해도 된다 Count Click Button 예제 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () =>setValue((prev) => prev + 1) return (..

문제 그룹 단어란 단어에 존재한는 모든 문자에 대해서, 각 문자가 연속해서 나타나는 경우만을 말한다. 예를들면, ccazzzzbb는 c, a, z, b가 모두 연속해서 나타나고, kin도 k, i, n이 연속해서 나타나기 때문에 그룹 단어이지만, aabbbccb는 b가 떨어져서 나타나기 때문에 그룹 단어가 아니다. 단어 N개를 입력으로 받아 그룹 단어의 개수를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 단어의 개수 N이 들어온다. N은 100보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 단어가 들어온다. 단어는 알파벳 소문자로만 되어있고 중복되지 않으며, 길이는 최대 100이다. 출력 첫째 줄에 그룹 단어의 개수를 출력한다. 내 풀이 # 문제 : https://www.acmicpc.net/..

보호되어 있는 글입니다.

Creat-React-App prop-types VS Code 터미널에 npm i prop-types를 입력하여 설치한다 prop-types가 적용되어야 할 component의 파일에 아래와 같은 방식으로 코드를 작성한다 Button.js import propTypes from "prop-types"; // import propTypes function Button({text}) { return {text} } Button.propTypes = { text: propTypes.string.isRequired, } export default Button; CSS 한 개의 css 파일인 style.css를 만들어 index.js에 import한다. import "./style.css" > CSS Module..

Python의 Requests 모듈을 활용하여 입력 받은 URL이 연결 가능한지 확인하는 코드를 작성하였다 참고 Requests 모듈과 OS 모듈을 사용하기 위하여 터미널에 pip install requests과 pip install os를 입력하여 설치한다 조건 프로그램은 쉼표로 URL의 개수를 구별합니다. 또한 ‘http’의 유무와 공백을 체크하여 ‘http’가 없다면 추가해주고 공백은 모두 제거해 줍니다. 대문자가 포함되어 있을 경우도 생각하여 소문자로 변환시켜줍니다. 이러한 경우들을 모두 생각하여 처리해줍시다. URL이 실제로 존재하는지 존재하지 않는지 체크해야 됩니다. 사용자들은 프로그램이 모두 종료된 후 다시 시작할 수 있습니다. 코드 import requests import os while ..

문제 행복 왕국의 왕실 정원은 체스판과 같은 8 X 8 좌표 평면이다. 왕실 정원의 특정한 한 칸에 나이트가 서 있다. 나이트는 말을 타고 있기 때문에 이동을 할 때는 L자 형태로만 이동할 수 있으며 정원 밖으로는 나갈 수 없다. 나이트는 특정한 위치에서 다음과 같은 2가지 경우로 이동할 수 있다. 1. 수평으로 두 칸 이동한 뒤에 수직으로 한 칸 이동하기 2. 수직으로 두 칸 이동한 뒤에 수평으로 한 칸 이동하기 이처럼 8 X 8 좌표 평면상에서 나이트의 위치가 주어졌을 때 나이트가 이동할 수 있는 경우의수를 출력하는 프로그램을 작성하시오. 이때 왕실의 정원에서 행 위치를 표현할 때는 1부터 8로 표현하며, 열 위치를 표현 할 때는 a부터 h로 표현한다. 입력 첫째 줄에 8 x 8 좌표 평면상에서 현재..

Create React App 일반적인 리액트 어플리케이션은 스크립트를 직접 import해야 한다 그러나 create-react-app을 사용한다면, 위 과정 없이 ReactJS 어플리케이션을 쉽게 만들 수 있다 create-react-app은 개발 서버 접근, 자동으로 새로고침, 즉각적으로 CSS를 포함시키는 유용한 기능들을 포함한다 1. Node.js 설치 https://nodejs.org/ko/download/ Node.js로 작업한다면 component를 import 할 수 있게 하여 파일들을 각각 분리시키고 조직적으로 구성 가능하게 한다 먼저 Node.js 를 설치 후 cmd 를 열어 아래 명령어를 입력한다 # 설치 확인을 위해 아래 두 줄 각각 입력 node -v npx 그리고 위와 같이 뜬다..

PropTypes PropType은 어떤 타입의 prop을 받고 있는지 체크해준다 타입 검사 먼저 PropTypes 패키지를 사용하기 위해 위 script 소스를 추가해준다 Btn.propTypes = { // props 값의 타입 제시 text: PropTypes.string, fontSize: PropTypes.number } function App() { return( ) } 위와 같이 타입을 제시해주면 타입을 벗어난 경우 아래와 같은 경고 문구를 콘솔창에 띄운다 isRequired 그리고 prop 값이 필수적인 경우 .isRequired를 덧붙이면 된다. Btn.propTypes = { text: PropTypes.string.isRequired, fontSize: PropTypes.number...

문제 정수 N이 입력되면 00시 00분 00초부터 N시 59분 59초까지의 모든 시각 중에서 3이 하나라도 포함되는 모든 경우의 수를 구하는 프로그램을 작성하시오. 예를 들어 1을 입력했을 대 다음은 3이 하나라도 포함되어 있으므로 세어햐 하는 시각이다. 입력 첫째 줄에 정수 N이 입력된다. ( 0

부모의 상태를 바꾸는 함수 만들기 아래는 onClick 이벤트리스너를 통해 부모 component의 상태를 바꾸는 예이다 React.memo() memo는 memorize를 뜻한다 이를 통해 useState를 통해 props가 변경되지 않은 특정 componenet를 re-render 되지 않도록 할 수 있다 이는 변경사항이 있는 component만 re-render하게 하여 불필요한 render을 하지 않을 수 있게 한다