목록Today I Learned (16)

Minwook’s portfolio

HTMLFormElement currentTarget 타입지정

타입스크립트를 사용하여 form 태그의 childElement에서 value를 가져올때 타입이 any로 가져와지는 문제가 있었다. 코드 구조는 name이 image_search인 form 태그, 안에는 name이 image_search__select인 select와 name이 image_search__input인 input이 있다. event.currentTarget을 name 프로퍼티와 elemets로 접근할시 타입이 지정되지 않아 any로 추정되게 된다. any로 타입을 지정해둔다면 타입스크립트를 사용하는 이점이 없어지기 때문에 form태그의 타입을 지정해주었다. form태그는 HTMLFormElement를 상속받고 elements 프로퍼티를 HTMLFormControlsCollection를 상속받아..
Today I Learned 2023. 3. 18. 04:37
백엔드 s3 upload 구현

지난 프론트 img를 서버로 전송한 코드를 이어서 서버에서 받은 img를 aws s3 bucket에 올리고자 한다 과정은 크게 나누자면 1. 프론트에서 받은 formData를 fomidable로 파싱하고 서버 폴더에 저장 2. 서버에 저장한 이미지를 fs module로 buffer로 읽어온다 3. buffer를 params body에 담아서 s3 bucket으로 보낸다. 4. 이미지 전송에 성공하면 서버에 저장되었던 이미지를 지운다. 5. 파일 이름을 응답으로 내보낸다. *추후에는 파일 이름을 응답으로 내보내지 않고 파이어베이스 데이터베이스에 저장할 것 이다. 이전 프로젝트에서 프론트에서 s3에 업로드 기능을 구현한 코드를 참고하고자 했는데 AWS.s3.upload()함수의 params body가 타입을..
Today I Learned 2023. 3. 13. 23:34
로컬서버 file upload구현

사용스택 next.JS, typeScript, sass, axios, formidable 추가. multer, next-connect 1. 프론트에서 file input으로 data 받기 이미지 구현방식은 useRef로 DOM에 접근해서 이미지파일을 가져오고 onChange를 걸어서 이미지 미리보기가 자동으로 바뀌게 구현할 것 이다. 1) useRef로 DOM에 접근하여 file 데이터 받아오기 const imgRef = useRef(null); const imgReset = () => { if (imgRef.current) { imgRef.current.value = ""; } }; return ( ... file 삭제하기 ... ) 삭제하기를 누를시에 e.current.value를 삭제시켜서 파일 이..
Today I Learned 2023. 3. 10. 00:14
webpack ts, sass, img loader 설정

필요한 패키지 npm i css-loader sass sass-loader style-loader file-loader url-loader ts-loader typescript 이미지는 url loader와 file loader를 사용한다. url loader, 파일을 base64로 인코딩하여 번들링파일에 포함된다. file loader, 파일을 output 경로로 복사해준다. 용량이 적은 파일은 url loader를 사용하고 용량이 큰 파일은 fallback으로 file loader를 사용하는게 좋다. tsconfig.json 설정 { "compilerOptions": { ...생략 "typeRoots": ["node_modules/@types", "types"] //타입폴더위치 "outDir": "...
Today I Learned 2023. 3. 6. 16:10
코딩테스트 문제풀이 소수 찾기

출처: 프로그래머스 코딩 테스트 연습, https://school.programmers.co.kr/learn/courses/30/lessons/12921 저작권 관련 더보기 비상업적, 비영리적 용도로 사용합니다. 광고가 노출되지 않는 블로그나 YouTube 채널, GitHub 등에 문제 풀이 게시 코딩테스트 연습에 공개된 문제는 (주)그렙이 저작권을 가지고 있습니다. (지문 하단에 별도 저작권 표시 문제 제외) 코딩테스트 연습 문제의 지문, 테스트케이스, 풀이 등과 같은 정보는 비상업적, 비영리적 용도로 게시할 수 있습니다. ※ 2020 KAKAO BLIND RECRUITMENT, Summer/Winter Coding 등의 문제는 기업 코딩 테스트에 나온 문제이나, 코딩테스트 연습에 공개된 문제이기 때문..
Today I Learned 2023. 1. 24. 15:58
코딩테스트 문제풀이 겹치는 선분의 길이 풀이

출처: 프로그래머스 코딩 테스트 연습, https://school.programmers.co.kr/learn/courses/30/lessons/120876 저작권 관련 더보기 비상업적, 비영리적 용도로 사용합니다. 광고가 노출되지 않는 블로그나 YouTube 채널, GitHub 등에 문제 풀이 게시 코딩테스트 연습에 공개된 문제는 (주)그렙이 저작권을 가지고 있습니다. (지문 하단에 별도 저작권 표시 문제 제외) 코딩테스트 연습 문제의 지문, 테스트케이스, 풀이 등과 같은 정보는 비상업적, 비영리적 용도로 게시할 수 있습니다. ※ 2020 KAKAO BLIND RECRUITMENT, Summer/Winter Coding 등의 문제는 기업 코딩 테스트에 나온 문제이나, 코딩테스트 연습에 공개된 문제이기 때..
Today I Learned 2023. 1. 10. 13:35
코딩테스트 문제풀이 옹알이(1) 풀이

출처: 프로그래머스 코딩 테스트 연습, https://school.programmers.co.kr/learn/courses/30/lessons/120956 저작권 관련 더보기 비상업적, 비영리적 용도로 사용합니다. 광고가 노출되지 않는 블로그나 YouTube 채널, GitHub 등에 문제 풀이 게시 코딩테스트 연습에 공개된 문제는 (주)그렙이 저작권을 가지고 있습니다. (지문 하단에 별도 저작권 표시 문제 제외) 코딩테스트 연습 문제의 지문, 테스트케이스, 풀이 등과 같은 정보는 비상업적, 비영리적 용도로 게시할 수 있습니다. ※ 2020 KAKAO BLIND RECRUITMENT, Summer/Winter Coding 등의 문제는 기업 코딩 테스트에 나온 문제이나, 코딩테스트 연습에 공개된 문제이기 때..
Today I Learned/JavaScript 2023. 1. 3. 19:44
Heap 정리

힙(heap)이란? 이진트리의 형태를 띄고 있는 자료구조, 우선순위가 높은 요소가 먼저 나가기 위해 요소가 삽입, 삭제될 때 바로 정렬된다. 우선순위 큐를 구현할때 가장 적합한 자료구조이다. (우선순위 큐에 힙이 포함되는 형태) *Root : 트리에서 최상위 Node 힙의 특징 우선순위가 높은 요소가 먼저 나온다. Root가 최대값이 되는 최대 힙(오름차순)과 가장 작은 값(내림차순)이 되는 최소 힙 두가지 있다. 자바스크립트에서는 직접 구현해야 하는 단점. 완전 이진 트리의 높이는 logN이기 때문에, 노드 추가 삭제시 시간복잡도는 O(logN) 지수시간을 가진다. *빠름 O(1) < O(logN) < O(N) < O(NlogN) 느림 힙에서 추가를 구현할때 알고리즘 (최대힙) 1. 새로운 요소를 추가..
Today I Learned 2022. 12. 29. 21:43
이전 Prev 1 2 Next 다음