일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- React #Hooks
- 카카오맵 api
- 카카오맵
- CSS
- HTML
- Hooks
- JavaScript
- firebase
- HTML #CSS
- Python #CodeUp
- Template literals
- optional chanining
- css #html
- es6
- react
- 프로그래머스
- Next
- Python
- BOJ
- es11
- nextjs
- Nullish Coalescing Operator
- Python #Baekjoon
- spread operation
- Default parameter
- Redux
- React Kakao map
- Today
- Total
목록분류 전체보기 (105)
거북이개발자
const onFileChange=(event)=>{ const {target : {files}}=event; const theFile=files[0]; const reader=new FileReader(); reader.onloadend=(finishedEvent)=>{ }; reader.readAsDataURL(theFile); }; 1. new FileReader(); -데이터를 읽기 위하여 파일을 가리키는 File객체를 이용해 파일의 내요을 일고 컴퓨터에 저장하는 것을 가능하게 해준다. 2. .onloadend -이벤트 핸들러로 이 이벤트는 읽기 동장이 끝났을때마다 발생. 3. .readAsDataURL() -업로드된 결괏값을 URL로 표시
1. Spread Operator (1)사용 배경 es6에 추가된 문법으로 ...을 사용해서 배열의 값을 받아고서나, 확장할 수 있다. (2) 배열 합치기 const singerOne = [1, 2, 3] const singerTwo = [7, 8, 9] const combinedTwo = [...singerOne, ...singerTwo]; const combinedOne = [...singerOne, 5, 6, ...singerTwo]; 위의 예제처럼 합쳐서 배열을 만들 수 있고, 중간에 다른 값들도 넣을 수 있다. (3) 배열 받아오기 const singerOne = [1, 2, 3] const cloneOne = [...singerOne]; 위처럼 스프레드 연산자를 통해서 배열을 쉽게 갖고 올 수..
1.배경 매끈한 라우팅을 제공하는 기능을 한다. 터미널에 npm install react-router-dom 입력해준다. 2. BrowserRouter import { BrowserRouter as Router } from "react-router-dom" 우선 위처럼 import를 해줘야한다. BrowserRouter은 react-route-dom을 적용하고 싶은 컴포넌트의 최상위에 덮어주면 사용가능하게 해준다. ReactDom.render( , document.getElementById('root')); 3. Route import { Route as Router } from "react-router-dom" (1) Url에 따라 달라지는 컴포넌트를 구현하려면, Route로 감싸준다. 속성으로 pat..
1. lifecycle React의 class는 위의 사진처럼 lifecycle을 갖는다. reder가 실행되고 그후 componentDidMount()가 실행된다. 단 그후 같은 setState로는 rerender가 일어날시 componentDidMount()는 일어나지 않는다. componentWillUnmount 는 컴포넌트가 제거되기 직전일어난다. 2. useEffect 함수형은 위의 lifecycle를 이용하지 못한다. 그래서 대신 이용하는것이 useEffect이다. useEffect( ()=>{ //componentDidMount, componentDidUpdate 역할(1대1 대응은 아님) return () =>{ //componentWillUnmount 역할 } },[]); 위의 형식으로 ..
0. 제목 백준 7490 0 만들기 1. 문제 www.acmicpc.net/problem/7490 7490번: 0 만들기 각 테스트 케이스에 대해 ASCII 순서에 따라 결과가 0이 되는 모든 수식을 출력한다. 각 테스트 케이스의 결과는 한 줄을 띄워 구분한다. www.acmicpc.net 2. 풀이 +, -, ' '을 재귀함수로 전체탐색후 리스트에 모든경우를 리스트에 담는다. 각각의 수에 기호를 넣어준뒤 replace, eval함수로 계산한다. 3. 코드 import copy def recursive(array, n): if len(array)==n: operators_list.append(copy.deepcopy(array)) return array.append(' ') recursive(array,..
1. useRef useRef는 2가지 쓰임이 있다. dom에 직접 접근할때 hooks에서 this의 속성들을 ref로 한다. -state는 return이 다시 실행되지만 ref는 다시 실행안된다. -즉 값이 바껴도 렌더링을 다시 하고싶지 않은부분은 ref로 처리해준다. const timeout=useRef(null); const startTime=useRef(); const endTime=useRef(); startTime.current=new Date(); clearTimeout(timeout.current); 이런식으로 사용해준다. 단 current를 써줘야 한다. 2. Time 함수 setTimeout let timerId = setTimeout(func|code, [delay], [arg1], ..
0. 제목 백준 2747 피보나치 수 1. 문제 www.acmicpc.net/problem/2747 2747번: 피보나치 수 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. 이를 식으로 써보면 Fn = Fn-1 + Fn-2 (n ≥ 2)가 www.acmicpc.net 2. 풀이 재귀함수 이용시 시간초과가 난다. 반복문을 이용해서 푼다. 3. 코드 n=int(input()) a,b=0, 1 while n>0: a, b=b, a+b n-=1 print(a)
0. 제목 백준 10989 수 정렬하기3 1. 문제 www.acmicpc.net/problem/10989 10989번: 수 정렬하기 3 첫째 줄에 수의 개수 N(1 ≤ N ≤ 10,000,000)이 주어진다. 둘째 줄부터 N개의 줄에는 숫자가 주어진다. 이 수는 10,000보다 작거나 같은 자연수이다. www.acmicpc.net 2. 풀이 일반 python의 sort함수는 nlogn의 복잡도여서 쓰면 오류가 난다. 계수정렬을 이용한다. 3. 코드 import sys n=int(sys.stdin.readline()) array=[0]*1001 for i in range(n): data=int(sys.stdin.readline()) array[data]+=1 for i in range(1001): if a..