코딩 일지

SSR Server Side Rendering의 약자 이 방식은 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달하는데 클라이언트가 페이지를 이동한다든가, 클릭으로 인한 다른 요청이 생길때마다 이 과정을 반복하기 때문에 화면에서 바뀌지 않아도 되는 부분도 계속해서 다시 렌더링되는 단점이 있다. 이는 곧 서버 부하 등의 문제를 일으킬 수 있다. CSR Client Side Rendering의 약자 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다. SSR, CSR 차이 1) 웹페이지를 로딩하는 시간 웹 페이지 로딩의 종류는 두 가지로 나눌 수 있다. 하나는 웹 사이..

문제 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다. 33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ... n을 d(n)의 생성자라..

문제 세준이는 기말고사를 망쳤다. 세준이는 점수를 조작해서 집에 가져가기로 했다. 일단 세준이는 자기 점수 중에 최댓값을 골랐다. 이 값을 M이라고 한다. 그리고 나서 모든 점수를 점수/M*100으로 고쳤다. 예를 들어, 세준이의 최고점이 70이고, 수학점수가 50이었으면 수학점수는 50/70*100이 되어 71.43점이 된다. 세준이의 성적을 위의 방법대로 새로 계산했을 때, 새로운 평균을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 시험 본 과목의 개수 N이 주어진다. 이 값은 1000보다 작거나 같다. 둘째 줄에 세준이의 현재 성적이 주어진다. 이 값은 100보다 작거나 같은 음이 아닌 정수이고, 적어도 하나의 값은 0보다 크다. 출력 첫째 줄에 새로운 평균을 출력한다. 실제 정답과 출력값의 절대..

문제 두 자연수 A와 B가 있을 때, A%B는 A를 B로 나눈 나머지 이다. 예를 들어, 7, 14, 27, 38을 3으로 나눈 나머지는 1, 2, 0, 2이다. 수 10개를 입력받은 뒤, 이를 42로 나눈 나머지를 구한다. 그 다음 서로 다른 값이 몇 개 있는지 출력하는 프로그램을 작성하시오. 입력 첫째 줄부터 열번째 줄 까지 숫자가 한 줄에 하나씩 주어진다. 이 숫자는 1,000보다 작거나 같고, 음이 아닌 정수이다. 출력 첫째 줄에, 42로 나누었을 때, 서로 다른 나머지가 몇 개 있는지 출력한다. 예제 입력 1 1 2 3 4 5 6 7 8 9 10 예제 출력 1 10 각 수를 42로 나눈 나머지는 1, 2, 3, 4, 5, 6, 7, 8, 9, 10이다. 예제 입력 2 42 84 252 420 8..

문제 세 개의 자연수 A, B, C가 주어질 때 A × B × C를 계산한 결과에 0부터 9까지 각각의 숫자가 몇 번씩 쓰였는지를 구하는 프로그램을 작성하시오. 예를 들어 A = 150, B = 266, C = 427 이라면 A × B × C = 150 × 266 × 427 = 17037300 이 되고, 계산한 결과 17037300 에는 0이 3번, 1이 1번, 3이 2번, 7이 2번 쓰였다. 입력 첫째 줄에 A, 둘째 줄에 B, 셋째 줄에 C가 주어진다. A, B, C는 모두 100보다 크거나 같고, 1,000보다 작은 자연수이다. 출력 첫째 줄에는 A × B × C의 결과에 0 이 몇 번 쓰였는지 출력한다. 마찬가지로 둘째 줄부터 열 번째 줄까지 A × B × C의 결과에 1부터 9까지의 숫자가 각각..

개념 useEffect란, 페이지가 맨 처음에 랜더링 될 때, 또는 변수의 값이 변경될 때 실행되는 함수이다. 클릭할 때마다 1씩 증가하는 간단한 버튼을 만들어보자. 예제 코드 App.js import Count from './Commponents/Count.jsx'; const App = () => { return ( useEffect ); } export default App; Count.jsx import React,{useState,useEffect} from 'react' const Count = () =>{ const [count, setCount] = useState(0) useEffect(()=>{ console.log(count) }) useEffect(()=>{ console.log('..

개념 React hook에서는 useState를 이용해서 간편하게 state값을 변경할 수 있다. const [num, setNumber] = useState(0) 위와 같은 형태로 사용한다. 배열 안에 들어가는 값은 첫번째 인자값은 값을 변화시킬 변수명, 두번째 인자값은 그 값을 변화 시키기 위해 사용할 함수명(?)이다. 두번째 인자값은 어느 값을 넣어도 코드 작동에는 문제가 없으나, 관용적으로 set + 첫번째 인자값(맨 앞글자 대문자) 형태로 사용한다. useState() { return ( useState ); } export default App; App.jsx import React,{useState} from 'react' const Hook = ()=>{ const [num, setNumb..

목차 - 훅이란? - 탄생 배경 - 종류 - 장점 훅(Hook)이란? Hook은 리액트 16.8 버전 이후 추가된 기능이며, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook을 통해 상태 관리를 할 수 있게 되었고, 상태 관리 뿐만 아니라 기존 클래스형 컴포넌트에서만 가능하던 여러 기능을 사용할 수 있게 되었다. Hook이 등장하기 전 리액트에는 여러 문제들이 있었다. 탄생배경 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다. 기존의 개발방식은 일반적으로 함수형 컴..

문제 0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리 수로 만들고, 각 자리의 숫자를 더한다. 그 다음, 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자. 26부터 시작한다. 2+6 = 8이다. 새로운 수는 68이다. 6+8 = 14이다. 새로운 수는 84이다. 8+4 = 12이다. 새로운 수는 42이다. 4+2 = 6이다. 새로운 수는 26이다. 위의 예는 4번만에 원래 수로 돌아올 수 있다. 따라서 26의 사이클의 길이는 4이다. N이 주어졌을 때, N의 사이클의 길이를 구하는 프로그램을 작성하시오. 입력 첫째 ..

목차 - 리액트 cli 다운로드 - hooks - 로그인 구현 - 삼항연산자 조건문 true일 때만 or false일때만 리액트 CLI 다운로드 터미널에서 npx create-react-app [디렉토리명] 를 입력한다.(오래 걸림) npx create-react-app [디렉토리명]로 다운로드 시, 기본적인 세팅은 다 되어있다. webpack, babel, react, react-dom 등등... 많은 기능들이 설치된다. 다 받아지면, cd [디렉토리명] npm run start Hooks 함수형 컴포넌트에서, 상태를 만들 수가 없고, 생명주기를 사용할 수 없다는 단점을 개선한 함수 모음이 바로 hooks이다.. 장점 : this 생산성 / 코드 가독성 재활용/ 커스텀 훅 로그인 구현하기 App.jsx..