본문 바로가기

분류 전체보기303

[React기본 일기장 만들기] React에서 사용자 입력 처리하기 1.기본 파일 설정 2.제목 입력받기 3.내용 입력받기 4.기분 입력받기 5.버튼 만들기 6.스타일 변경하기 1.기본파일 설정 원하는 곳에 새 폴더를 만들고, npx create-react-app 폴더명 을 명령어로 입력한다. 그 다음 사진과 같이 안쓰는 폴더를 제외한 src파일들을 삭제한다. 이번 포스팅에서 만들 페이지는 위와 같이 입력을 처리하고, 선택박스 입력 처리하기, 사용자 입력 데이터 핸들링하기이다. diaryEditer 파일을 만들고 위와 같이 div를 리턴하도록 한다. 나중에 css작업을 원활하게 하기 위해서 div명은 파일명과 객체명과 동일하게 하는 것이 좋다. 그 다음 App.js에 들어가서 DiaryEditer객체를 넣는다. 이 때 import가 제대로 되어있는지 확인한다. 우리가 만.. 2023. 8. 14.
목표달성 백준장학금 3주차 8/7 https://ethereal-coder.tistory.com/103 코드트리 [자바 java] 피보나치 수 https://www.codetree.ai/missions/2/problems/fibonacci-number?utm_source=clipboard&utm_medium=text 코드트리 | 코딩테스트 준비를 위한 알고리즘 정석 국가대표가 만든 코딩 공부의 가이드북 코딩 왕초보부터 꿈의 직장 ethereal-coder.tistory.com 8/8 https://ethereal-coder.tistory.com/104 코드트리 [자바 java] 정수 사각형 최대 합 https://www.codetree.ai/missions/2/problems/maximum-sum-path-in-square?utm.. 2023. 8. 13.
코드트리 [자바 java] 동전 거슬러주기 https://www.codetree.ai/missions/2/problems/coin-change?utm_source=clipboard&utm_medium=text 코드트리 | 코딩테스트 준비를 위한 알고리즘 정석 국가대표가 만든 코딩 공부의 가이드북 코딩 왕초보부터 꿈의 직장 코테 합격까지, 국가대표가 엄선한 커리큘럼으로 준비해보세요. www.codetree.ai 거슬러줄 금액과 동전의 종류가 나오면, 거슬러줄 수 있는 최소한의 동전 수를 출력하는 문제이다. 이 문제는 dp를 사용했다. 0부터 해당 금액까지의 dp배열을 선언하고, 사용할 수 있는 동전들을 하나 쓰는 방법을 모두 비교하여 최솟값을 넣도록 하였다. import java.util.*; import java.io.*; import java... 2023. 8. 13.
[React.js] Props props는 컴포넌트에 데이터를 전달하는 방법이다. App 컴포넌트에서 counter컴포넌트로 데이터를 전달하고 이를 사용해보자. prop 전달하기 이렇게 객체 안에 전달 할 값을 넣어준다.() 그럼 counter.js에서는 이런식으로 매개변수로 값을 받아서 사용하면 된다. prop는 여러개를 해도 되는데 이럴 때는 점표기법을 사용한다.(props.initialValue) 위와 같이 여러개의 prop를 전달할 때에는 가독성이 떨어진다. 그래서 이런 식으로 spread를 사용해서 전달한다. 이때 counter.js에서 위와 같이 매개변수를 설정하면 props에서 a만 받겠다는 의미이다. 기본 props값 설정하기 만약 받은 매개변수에서 원하는 prop이 나오지 않았다면 이 때 사용할 기본값을 지정해야한다... 2023. 8. 13.
[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.