미새문지

크래프톤 정글 week12, day89 - 알고리즘, 리액트 폴더 설정 본문

크래프톤 정글/TIL

크래프톤 정글 week12, day89 - 알고리즘, 리액트 폴더 설정

문미새 2024. 4. 5. 23:33
728x90
백준
11653
파이썬
브론즈1
소인수분해
const fs = require("fs");
const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";
let input = fs.readFileSync(filePath).toString().split("\n");

let n = Number(input[0]);
while(n != 1) {
    for (let i = 2; i <= n; i++) {
        if((n % i) == 0) {    
            n = n / i;
            console.log(i);
            break;
        }
    }
}​

백준
11720
파이썬
브론즈4
숫자의 합
n = int(input())
num = input()
a = list(num)
c = 0
for i in range(len(a)):
    c += int(a[i])
print(c)

백준
11816
파이썬
브론즈2
8진수, 10진수, 16진수
import sys
input = sys.stdin.readline

n = input()
a = list(n)

if(a[0] == '0' and a[1] == 'x'):
    print(int(n,16))
elif (a[0] == '0'):
    print(int(n, 8))
else:
    print(n)

백준
8595
파이썬
브론즈1
히든 넘버
import sys
input = sys.stdin.readline

n = int(input())
word = list(input().strip())
hiddenNum = ''
result = 0

for i in range(n):
    if word[i].isdigit():
        hiddenNum += word[i]
    else:
        if hiddenNum:
            result += int(hiddenNum)
            hiddenNum = ''

if hiddenNum:
    result += int(hiddenNum)

print(result)

알고리즘을 천천히 풀면서 세진이와 게시판을 같이 만들기로 했기 때문에 깃허브 organization을 파서 폴더를 만들었다.

한 폴더에 client, server를 만들고 세진이는 node.js와 express 본인은 react, typescript를 이용해서 백과 프론트를 각자 맡기로 했다.

리액트 + 타입스크립트를 만들기 위해서는

npx create-react-app [폴더 이름] --template typescript

를 터미널에 작성해서 폴더를 생성해준다.

 

아니면 폴더를 만들고 그 안에

npm i react ...

로 패키지만 설치해줘도 된다.

두 개의 차이는

 

npx create-react-app

  • create-react-app은 React 기반의 프로젝트를 쉽게 시작할 수 있게 해주는 명령어이다.
  • 이 명령어를 사용하면, React 프로젝트를 위한 구조, 필수 라이브러리, 설정 파일 등이 자동으로 생성되는데, 이에 따라 개발자는 환경 설정에 드는 시간을 절약하고 바로 개발에 착수할 수 있다
  • Webpack, Babel 같은 빌드 도구와 ESLint 같은 코드 품질 도구가 사전 설정되어 있어, 별도의 복잡한 설정 과정 없이 현대적인 JavaScript 기능과 최적화된 빌드 과정을 사용할 수 있다.

npm i react (및 npm i react-dom)

  • npm i react 명령어는 React 라이브러리만을 현재 프로젝트에 설치하는데, 이 경우, 프로젝트 구조, 빌드 시스템, 개발 서버 등은 개발자가 직접 설정해야 한다.
  • 이 방식은 프로젝트에 필요한 도구와 라이브러리를 좀 더 세밀하게 제어하고자 할 때 유용하다. 예를 들어, 특정 Webpack 버전을 사용하거나, Babel 설정을 커스터마이즈해야 하는 경우에 적합하다.
  • 기존 프로젝트에 React를 추가하고자 할 때에도 이 방법을 사용할 수 있다.

 

결론은 따로 설정해야 할 부분이 있거나 기존 프로젝트에서 react만 추가하려고 하면 npm i react로 직접 설치해서 나머지 부분을 직접 하는게 좋고, 리액트에 입문하거나 프로젝트를 처음 시작하려고 폴더를 만드는 과정이면  npx create-react-app으로 하는게 시간절약도 되고 좋은 것 같다.

 

본인은 폴더부터 만들어야 했기에 npx create-react-app에 타입스크립트를 입력해서 client를 만들었고, server는 모듈만 사용하고 js로 작업하려고 했기에 npm i react를 사용했다.

그냥 리액트를 사용할 때와 다르게 타입스크립트까지 섞이니까 뭔가 이상한 에러들이 속출한다... 구글링 해봐야 될듯

 

학습 시간 : 10 ~ 24시

 

 

 

728x90