본문 바로가기

전체 글315

[React.js] State 사람은 배고픔, 적당함, 배부름 상태를 번갈아 유지하고, 이 상태에 따라 다른 행동을 수행한다. state도 마찬가지로 계속해서 변화하는 특정 상태를 의미하고, 상태에 따라 각각 다른 동작을 한다. counter 만들기 우선, counter.js파일을 새로 만든다. 그 다음 App.js파일을 위와 같이 수정하면 이런 화면이 완성된다. 현재는 버튼을 눌러도 아무런 설정을 하지 않았기 때문에 반응이 없다. 여기서 숫자가 변해야 하므로 숫자를 하나의 상태로 생각할 수 있다. counter.js에 위와 같이 리액트와 usestate를 import 한다. 그 다음 const [상태명, 새터함수] = useState(초기값) 을 이용해서 상태를 만든다. 그 다음 숫자가 들어갈 자리에 state를 넣어준다. ({상태.. 2023. 8. 13.
코드트리 [자바 java] 부분수열의 합이 m https://www.codetree.ai/missions/2/problems/the-sum-of-the-subsequences-is-m?utm_source=clipboard&utm_medium=text 코드트리 | 코딩테스트 준비를 위한 알고리즘 정석 국가대표가 만든 코딩 공부의 가이드북 코딩 왕초보부터 꿈의 직장 코테 합격까지, 국가대표가 엄선한 커리큘럼으로 준비해보세요. www.codetree.ai 이 문제는 동전문제와 비슷하다. 하지만 이 문제에서 유의할 점은 동전을 오직 한번만 사용해야한다는 것이다. 이를 위해 합으로 만들어야 하는 수만큼 dp 값을 만들고, 뒤에서부터 탐색을 진행한다. 순서는 상관이 없으니 고려하지 않는다. 0 10000 10000 10000 10000 10000 여기서 만약 .. 2023. 8. 12.
[React.js] JSX 리액트는 위와 같이 기능들을 컴포넌트로 분할해서 재사용할 수 있다. 컴포넌트 만들기 src 폴더에 위 사진과 같이 MyHeader.js파일을 만든다. 그 다음 위와 같이 입력합니다. 주의할 점은 컴포넌트에서 꼭 리턴하는 값이 있어야 한다는 것입니다. 그 다음 App.js에 들어가서 위와 같이 import 한 후 코드에 MyHeader 컴포넌트를 추가합니다. 그럼 위와 같이 컴포넌트가 화면에 표시되는 것을 볼 수 있습니다. jsx문법 닫힘규칙 태그가 열리면 무조건 닫는 태그가 있어야한다. 태그가 하나이면 와 같이 바로 닫는 방법도 있다. 최상위태그 컴포넌트를 만드려면 반드시 최상위태그가 있어야한다. 최상위태그를 두고싶지 않다면 이렇게 리액트를 import하고 React.Fragment를 이용해서 최상위태그.. 2023. 8. 11.
코드트리 [자바 java] 조삼모사 https://www.codetree.ai/problems/three-at-dawn-and-four-at-dusk?utm_source=clipboard&utm_medium=text 코드트리 | 코딩테스트 준비를 위한 알고리즘 정석 국가대표가 만든 코딩 공부의 가이드북 코딩 왕초보부터 꿈의 직장 코테 합격까지, 국가대표가 엄선한 커리큘럼으로 준비해보세요. www.codetree.ai 위와 같은 업무가 주어졌을 때 아침과 저녁에 할 일의 분배가 최대한 비슷하게 만드는 문제이다. 나는 백트래킹을 이용한 브루트포스를 사용했다. 우선, 아침에 할 일과 저녁에 할 일을 묶는데 한번 사용하고, 아침과 저녁에 할 업무를 전부 더해서 값을 구하는데 한번 더 사용했다. 또한 거의 모든 배열은 사용하기 용이하게 하기 위해서.. 2023. 8. 11.
[React.js] Create React App 리액트를 다룰 때 다운받고, 관리해야 하는 패키지들이 많다. 그래서 이미 세팅 완료된 패키지인 Boiler Plate를 사용할 것이다. 리액트 어플리케이션 만들기 1. 새로운 폴더를 만든다. 2.터미널을 이용해서 리액트 프로젝트를 설치한다. 방금 만든 폴더를 vscode에 열고, 터미널을 연다. 설치되어있지 않은 패키지를 딱 한번만 쓰고싶을 때 사용하는 도구인 npx를 사용할 것이다. 이와 같이 npx -v를 명령어로 입력하여 버전이 출력되면 설치가 정상적으로 되어있는 것이다. 만약 설치가 되어있지 않다면 , npm install -g npx 를 통해서 설치하면 된다. 리액트 프로젝트를 생성하기 위해 npx create-react-app [프로젝트명] 명령어를 입력한다. 나는 여기서 밑에와 같은 에러가 .. 2023. 8. 11.
코드트리 [자바 java] 최소 경로로 탈출하기 https://www.codetree.ai/missions/2/problems/escape-with-min-distance?utm_source=clipboard&utm_medium=text 코드트리 | 코딩테스트 준비를 위한 알고리즘 정석 국가대표가 만든 코딩 공부의 가이드북 코딩 왕초보부터 꿈의 직장 코테 합격까지, 국가대표가 엄선한 커리큘럼으로 준비해보세요. www.codetree.ai 이전에 풀었던 네방향 탈출하기 문제와 유사하다. 하지만 다른 점이 있다면 도착까지 거쳐온 칸수를 세야한다는 점이다. 이 문제는 dfs보다는 bfs로 푸는 것이 좋은데 그 이유는 bfs는 경로를 탐색하다가 가장 빨리 도착점을 발견한 시점이 최소거리이지만, dfs는 도착점을 발견했더라도, 그 경로가 최소인지 알기 위해서는.. 2023. 8. 10.