Archive

1. /src에 components와 routes 폴더를 생성한다 2. App.js 파일을 components 폴더에 담은 후 index.js 파일에서 App.js의 경로를 수정한다 /src/index.js import App from './components/App'; 3. routes 폴더에 Auth.js, Home.js, Profile.js, EditProfile 파일을 생성하고 다음과 같이 코드를 작성한다 Routes component들을 입력하고 Enter을 눌렀을 때 자동으로 import할 수 있게 한 것이다 /src/routes/Auth.js import React from "react" const Auth = () => Auth; export default Auth; 4. npm i rea..

1. https://console.firebase.google.com/u/0/?hl=ko로 이동하여 프로젝트를 만든다 2. 생성한 프로젝트에 들어가 웹 App을 생성한다 3. npm i firebase@9.6.1를 입력하여 Firebase를 설치한다 4. 아래 표시한 부분을 복사한다 5. src 폴더에 fbase.js를 생성하여 아래와 같이 입력한다 import * as firebase from "firebase/app" // 복사한 코드 붙여넣기 export default firebase.initializeApp(firebaseConfig) 6. npm run start를 했을 때 문제가 없으면 된다 7. 그리고 index.js 파일에 firebase를 import한다 import firebase fr..

1. Repository를 생성한 후 vs 명령창에 git remote add origin https://github.com/gaeunnlee/ReactJS-Twitter-App.git을 입력한다 2. git branch -M gh-pages을 입력하여 gh-pages가 main branch가 되도록 설정한다 3. git add ., git commit -m "MESSAGE"로 변경 사항을 gh-pages branch에 commit한다 4. git push -u origin gh-pages를 입력하여 깃헙에 push한다 5. package.json 파일 밑에 깃헙 페이지 주소를 아래와 같이 추가한다 "homepage": "https://gaeunnlee.github.io/ReactJS-Twitter-Ap..

문제 주어진 수 N개 중에서 소수가 몇 개인지 찾아서 출력하는 프로그램을 작성하시오. 입력 첫 줄에 수의 개수 N이 주어진다. N은 100이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다. 출력 주어진 수들 중 소수의 개수를 출력한다. 내 풀이 n = int(input()) data = [] result = 0 data = list(map(int,input().split())) for num in data: k = 2 while True: if num % k != 0 and k

문제 알파벳 소문자로 이루어진 N개의 단어가 들어오면 아래와 같은 조건에 따라 정렬하는 프로그램을 작성하시오. 길이가 짧은 것부터 길이가 같으면 사전 순으로 입력 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. 출력 조건에 따라 정렬하여 단어들을 출력한다. 단, 같은 단어가 여러 번 입력된 경우에는 한 번씩만 출력한다. 내 풀이 n= int(input()) words = [] result = [] for i in range(n): word = input() words.append(word) words.sort() words.sort(key=len) ..

Coin Tracker App 만들기 Coin Tracker App을 만들기 위해서는 API를 사용해야 한다 const [coins, setCoins] = useState([]); // api로 받은 코인들을 나타내기 useEffect (() => { fetch("https://api.coinpaprika.com/v1/tickers") .then(response => response.json()) // response로부터 json 추출 .then((json) => { setCoins(json) // json 값을 coins 배열에 담는다 }); }, []) useEffect()를 통해 API를 처음 한 번만 가져오게 하고 fetch()를 통해 api를 호출한다 response로 받은 json을 추출하여..

ReactJS로 To Do List 만들기 리스트에 item 추가하기 ...array명은 array의 모든 item들을 가리킨다 이를 이용하여 리스트에 item을 다음과 같이 추가할 수 있다 const food = [apple, banana] const new_food = [orange, ...food] // new_food = [orange, apple, banana] map() map()은 array 각각의 원소들에 대해 함수를 실행하게 하고 그 결과를 array로 return한다 map 함수의 첫번째 argument를 통해 현재의 item을 가져올 수 있다 const array = ['hello','who','are','you'] array.map(() => "mapped!") // return [..

문제 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의 사이클의 길이를 구하는 프로그램을 작성하시시오. 입력 첫째 줄에 N이 주어진..

문제 1부터 N까지의 수를 이어서 쓰면 다음과 같이 새로운 하나의 수를 얻을 수 있다. 1234567891011121314151617181920212223... 이렇게 만들어진 새로운 수는 몇 자리 수일까? 이 수의 자릿수를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 N(1 ≤ N ≤ 100,000,000)이 주어진다. 출력 첫째 줄에 새로운 수의 자릿수를 출력한다. 내 풀이 문자열의 길이를 구하는 방법으로 풀었는데 시간 초과가 떠서 직접 계산하는 코드로 작성하였다 n = int(input()) result = 0 n_len = len(str(n)) if n_len == 1 : result = 1 * n else : for i in range(1,n_len+1): if i == 1: result +=..

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 (..