크래프톤 정글 week12, day90 - 알고리즘, 리액트 페이지 작성

백준

1269

파이썬

실버4

대칭 차집합

import sys
input = sys.stdin.readline

def daeching(a, b):
    zip1 = set(map(int, input().split()))
    zip2 = set(map(int, input().split()))

    print(len(zip1-zip2) + (len(zip2-zip1)))

a, b = list(map(int, input().split()))
daeching(a, b)

---

백준

11728

파이썬

실버5

배열 합치기

import sys
input = sys.stdin.readline

a1, a2 = map(int, input().split())

arr1 = list(map(int, input().split()))
arr2 = list(map(int, input().split()))
arr3 = arr1 + arr2
arr3.sort()
print(' '.join(map(str,arr3)))

---

 

어제 리액트 폴더를 생성하고 타입스크립트 에러를 잡았다. 분명 에러를 해결하고 블로그에 쓸려고 했는데 어떻게 해결했는데 까먹어서 나중에 생각나면 쓰기로 했다.

일단 우리는 폴더 작성을 client와 server를 동시에 실행시키려고 했는데, 원래는  client 따로 실행 server 따로 실행 해서 두 터미널에서 했었었다. 하지만  client와 server폴더 밖에서 package.json에

{
  "name": "myun_sj",
  "version": "1.0.0",
  "description": "MYun_SJ",
  "main": "index.js",
  "scripts": {
    "client": "cd client && npm start",
    "server": "cd server && nodemon index.js",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "concurrently": "^8.2.2",
    "nodemon": "^3.1.0"
  }
}

이렇게 작성해줌으로써 실행할 때 둘다 동시에 실행되게 했다.

npx create-react-app으로 설치한 폴더의 정리는

https://moonmisae-cdpt.tistory.com/41

vscode react 설정

옛날에 언제 적은지 모르는 글이 있어 가져왔다. 리액트를 이 떄 처음 접했나보다.

지울 부분 다 지우고 시작

리액트가 자바스크립트보다 좋은 점은 조금 밖에 모르지만 일단 각 구조 부분을 컴포넌트로 분리해서 에러가 발생했을 때 발생한 컴포넌트 부분만 수정할 수 있기 때문에 유지보수에 용이하다. 그리고  props를 통해 각 인자들을 전달받아 한 컴포넌트를 여러 부분에서 다르게 사용할 수 있다. 개발자에게 편의성을 제공해주는 듯

옛날에 리액트 만져봤을 때 기억나는 부분은 컴포넌트, 페이지, css부분을 폴더로 나눠서 작업했는데 기억나는대로 나누었다.

리액트 폴더 구조

폴더를 나누고 실행 테스트를 위해 app.tsx에 <div>:)</div>를 작성해 실행해보았다.

첫 app.tsx 테스트

실행 페이지

너무 잘된다. 이제 실행이 되는걸 확인했으니 작업하기전에 어떻게 만들지 구상해야된다.

이 부분은 세진이가 본인에게 맡겼기 때문에 다른 상업 사이트들을 살펴보면서 좋은게 있나 확인해보려고 한다.

 

학습 시간 : 10 ~ 24시