전체 글

목표 컴포넌트가 전환될 때 또는 특정 태그에 애니메이션을 적용시켜본다. css설정 .start{ opacity:0; } .end{ opacity:1; transition:opacity 0.5s; } opacity는 투명도, transition은 0.5초에 걸쳐 서서히 변하도록 하는 것을 명시한 것이다. 위처럼 애니메이션 동작 전 스타일을 담을 className과 애니메이션 동작 후 스타일을 담을 className을 별도로 만든다. 그리고 transtion 속성을 추가해야한다. 태그에 애니메이션 적용 function TabContent({tab}){ let [fade,setFade]=useState('') useEffect(()=>{ setTimeout(()=>{setFade('end')},100) ret..

https://www.acmicpc.net/problem/1275 1275번: 커피숍2 첫째 줄에 수의 개수 N과 턴의 개수 Q가 주어진다.(1 ≤ N, Q ≤ 100,000) 둘째 줄에는 처음 배열에 들어가 있는 정수 N개가 주어진다. 세 번째 줄에서 Q+2번째 줄까지는 x y a b의 형식으로 x~y까지의 합 www.acmicpc.net 풀이 사용한 알고리즘 : BIT(Binary Index Tree, segment tree) 풀이 전략 바이너리 인덱스 트리에 대한 이해가 있어야만 풀 수 있는 문제이다. 바로 전에 풀었던 구간합 구하기와 풀이 방법이 동일했다. 바이너리 인덱스 트리와 풀이 방법에 대해 자세히 적어놓았으니 아래 링크를 참고바란다. https://chaechaeros.tistory.com..

https://www.acmicpc.net/problem/2042 2042번: 구간 합 구하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)과 M(1 ≤ M ≤ 10,000), K(1 ≤ K ≤ 10,000) 가 주어진다. M은 수의 변경이 일어나는 횟수이고, K는 구간의 합을 구하는 횟수이다. 그리고 둘째 줄부터 N+1번째 줄 www.acmicpc.net 풀이 사용한 알고리즘 : BIT(Binary Index Tree) 풀이전략 BIT 알고리즘에 대해 이해하고 있어야만 이 문제를 풀 수 있다. 따라서 BIT 알고리즘에 대해 설명하도록 하겠다. 1. 트리 구조 만들기 원소가 8개인 리스트가 주어졌을 때, 해당 리스트를 바이너리 인덱스 트리로 만들어 보겠다. 1~8 사이의 숫자들을 이진수로 바..

https://www.acmicpc.net/problem/1365 1365번: 꼬인 전깃줄 첫 줄에 전봇대의 개수 N(1 ≤ N ≤ 100,000)이 주어지고, 이어서 N보다 작거나 같은 자연수가 N개 주어진다. i번째 줄에 입력되는 자연수는 길 왼쪽에 i번째 전봇대와 연결된 길 오른편의 전봇대가 www.acmicpc.net 풀이 사용한 알고리즘 : 이진 탐색, LIS(Longest Increasing Subsequence) 풀이 전략 1. 첫 번째 입력한 수를 비어있는 result 리스트에 추가한다. 2. i 번째 입력한 수가 result의 맨 끝값보다 크면 result 리스트에 추가한다. 3. i 번째 입력한 수가 result의 맨 끝값보다 작으면 result 내부를 이진탐색하여, 해당 수보다 크거나..

https://www.acmicpc.net/problem/2550 2550번: 전구 첫 번째 줄에는 가장 많은 전구가 켜지게 하는 스위치의 수를 출력한다. 두 번째 줄에는 눌러야 하는 스위치의 번호를 오름차순(번호가 커지는 순서)으로 빈칸을 사이에 두고 하나의 줄에 출력 www.acmicpc.net 풀이 사용한 알고리즘 : LIS 풀이 전략 import sys input=sys.stdin.readline N=int(input()) switch=list(map(int,input().split())) bulb=list(map(int,input().split())) arr=[] for i in switch: arr.append(bulb.index(i)) length=[0]*N preNode=[] for i i..

npm start 가 정상적으로 동작하지 않으면서 위와 같은 오류 메시지를 남긴다. 이는 이더넷 케이블 구성에서 IP주소가 비공개라 값을 가지고 오지 못하기 때문에 발생하는 문제였다. 해결방법은 2가지다. 1. 유선랜을 뽑고 유선랜을 사용한다. 2. React 프로젝트 폴더에 .env 파일 생성한다. DANGEROUSLY_DISABLE_HOST_CHECK=true 생성하면 잘 동작한다.

목표 Spring Boot와 React간 JSON을 전송해본다. SpringBoot -> React로 JSON 전송하기 @RestController public class HelloController { @PostMapping(value="/api/login", consumes="application/json;") public Member login(@RequestBody HashMap map) { System.out.println(map); Member member=new Member("chaeros","1234","채로스",28); return member; } } React에서 Spring Boot로 /api/login URL을 통해 post방식으로 접속했을 때, 매개변수 HashMap 자료형의 m..

https://www.acmicpc.net/problem/18353 18353번: 병사 배치하기 첫째 줄에 N이 주어진다. (1 ≤ N ≤ 2,000) 둘째 줄에 각 병사의 전투력이 공백을 기준으로 구분되어 차례대로 주어진다. 각 병사의 전투력은 10,000,000보다 작거나 같은 자연수이다. www.acmicpc.net 풀이 사용한 알고리즘 : LIS (Longest Increasing Subsequence) 원소가 N개인 배열에서 일부 원소를 골라내서 만든 부분수열 중 오름차순을 만족하며, 그 길이가 최대인 수열을 LIS라고 한다. 풀이과정 1. 입력값을 저장할 arr, 특정 인덱스에서 내림차순의 LIS 값을 저장할 length 리스트를 정의한다. 2. 0~N-1 인덱스를 돌며 특정 인덱스에서 해당 ..

https://www.acmicpc.net/problem/2470 2470번: 두 용액 첫째 줄에는 전체 용액의 수 N이 입력된다. N은 2 이상 100,000 이하이다. 둘째 줄에는 용액의 특성값을 나타내는 N개의 정수가 빈칸을 사이에 두고 주어진다. 이 수들은 모두 -1,000,000,000 이상 1,000,00 www.acmicpc.net 풀이 사용한 알고리즘 : 풀이1_ 라인 스위핑, 풀이2_투 포인터 ※풀이 전략 2가지 전략으로 풀이를 해보았다. 풀이1. (라인 스위핑) 1. 입력받은 각각의 수를 튜플 형식으로 리스트에 추가한다. 만약 음수면 (abs(수), -1)로, 양수면 (수, 1) 형식으로 리스트에 추가한다. (abs는 절댓값 의미) 2. 리스트에 저장된 튜플들을 튜플의 첫 번째 원소로 ..

에러코드 Failed to compile. Module not found: Can't resolve 'react-router-dom' (파일경로) App.js에서 다른 자바스크립트 파일에 있는 컴포넌트를 import해서 사용하려고 하는데 계속해서 위와 같은 에러가 발생했다. 가져올 컴포넌트가 저장된 자바스크립트 파일이 다른 폴더에 있어 라우팅이 안 되어 발생하는 문제였다. npm install react-router-dom --save react-router-dom은 브라우저에서 사용되는 리액트 라우터로 위 명령어 사용하여 설치하면 문제가 해결된다.