전체 글
-
[그리디] 결혼식알고리즘 2023. 1. 28. 12:28
문제 현수는 다음 달에 결혼을 합니다. 현수는 결혼식 피로연을 장소를 빌려 3일간 쉬지 않고 하려고 합니다. 피로연에 참석하는 친구들 N명의 참석하는 시간정보를 현수는 친구들에게 미리 요구했습니다. 각 친구들은 자신이 몇 시에 도착해서 몇 시에 떠날 것인지 현수에게 알려주었습니다. 현수는 이 정보를 바탕으로 피로연 장소에 동시에 존재하는 최대 인원수를 구하여 그 인원을 수용할 수 있는 장소를 빌리려고 합니다. 여러분이 현수를 도와주세요. 만약 한 친구가 오는 시간 13, 가는시간 15라면 이 친구는 13시 정각에 피로연 장에 존재하는 것이고 15시 정각에는 존재하지 않는다고 가정합니다. ▣ 입력설명 첫째 줄에 피로연에 참석할 인원수 N(5 0); for(let i = 0; i < arg.length; i..
-
230116 30분 TIL (Proxy)하루 30분 TIL 2023. 1. 16. 12:49
1. Proxy 상황) Nextjs의 SSR 빌드 방법론 중 on-demand-isr를 적용 중이다. 해당 함수를 왜 적용하는 지는 별도의 포스팅으로 작성해보자! 여튼 on-demand-isr 적용시 revalidate 타임에 구애받지 않고 어디민 페이지에서 수정 시 바로 해당 상품 페이지를 재생성 시켜줄 수 있다! 이때 어드민에서 수정 시 플랫폼 코드로 /api/revalidate 를 날려야 하는데 그냥 날리게 되면 다른 도메인으로 CORS에러로 잡히게 된다 그래서 Proxy 서버를 통해 플랫폼 도메인 포트로 변경하여 플랫폼에서 COSR에러로 거절되지 않도록 해주는 작업이 필요하다. Proxy는 대리라는 의미로 주로 보안 분야에서 보안상의 이유로 직접 통신하지 못할 때 사용한다. 위의 경우 직접 통신할..
-
230113 30분 TIL forEach의 return하루 30분 TIL 2023. 1. 13. 14:32
1. forEach 안에서 return/ breack 처리 ?! 상황 아래의 코드를 리팩터링 하고자 했다. useEffect(() => { if (!Object.keys(QUIZ_TASTE_DESCRIPTION).find((key: string) => title?.includes(key))) { return setTasteData(initialTasteData); } for (const [key, value] of Object.entries(QUIZ_TASTE_DESCRIPTION)) { if (title?.includes(key)) { setTasteData(value); } } }, [title]); QUIZ_TASTE_DESCRIPTION을 순회하는건 데 두 번씩이나 loop 할 필요 있을까? 한번..
-
2301112 30분 TIL (a태그 noopener noreferrer / SOLID)하루 30분 TIL 2023. 1. 13. 01:03
1. noopner와 noreferer가 뭘까? 코드를 보다 a태그에서 noopner와 noreferer라는 속성을 봤는 데 궁금해서 찾아봤다. a태그에 새 탭을 띄울 때 사용하는 target="_blank"라는 속성만 사용하면 보안상의 취약점이 생기고 퍼포먼스가 떨어진다고 한다! 흐헉!! 1) 보안상의 취약점 : 새 탭에 링크된 페이지가 악의를 가진 사람이 만든 것이고 이 페이지에서 자바스크립트 로직을 통해 부모 윈도우의 URL을 바꿔치기 할 수도 있다. 이렇게 부모 윈도우의 정보를 마음대로 사용 및 조작한다면 개인 정보 유출을 유도하는 가짜 페이지로 부적절한 리디렉션 하는 등 보안상의 문제가 발생 할 수 있다. 해결법: noreferrer 지정 - noreferrer 지정 시 다른 페이지로 이동할 때..
-
221220 TIL(useRef)하루 30분 TIL 2022. 12. 20. 21:20
useRef를 어떨 때 쓸까? 0. useRef로 특정 DOM 선택 - 특정 엘리먼트의 크기, 스크롤바 위치 혹은 포커를 설정해줘야 한다던지 DOM을 직접 선택해야 하는 상황 - D3, chart.js 같은 외부 라이브러리 사용할 때에도 특정 DOM에다 적용하기 때문에 DOM을 선택해야 하는 상황 발생 1. useRef를 활용한 리렌더링 방지 input에 이름을 입력한 후 제출 버튼 클릭 시 입력된 이름 상태가 문장에 추가되도록 코르를 작성한다고 하자. useState을 사용한다면 아래와 같이 사용할 것이다. import React, { useState } from "react" function App() { const [name, setName] = useState("") const [currentNa..
-
221214 TIL(useImperativeHandler)하루 30분 TIL 2022. 12. 14. 21:26
useImperativeHandle customizes the instance value that is exposed to parent components when using ref... useImperativeHandle should be used with forwardRef: useImperativeHandler은 거의 사용할 일도 없고 리액트 문서에서 사용을 지양하라는 훅이라 익숙하지 않다. (하지만 때로는 권장하지 않더라도 사용해야 할 때가 있고 그 때 다양하게 알고 있는 게 힘이 된다.) 여튼 이 훅은 설명만 보면 도통 무슨 말인지 알기 힘들다. ref를 사용할 때 부모의 컴포넌트에 노출되는 인스턴스 값을 커스텀하고 forwardRef와 함께 사용된다고 한다. 우선 useRef와 fowardR..
-
221208 TIL(uncontrolled vs controlled)하루 30분 TIL 2022. 12. 9. 01:07
form의 요소인 html 태그들은 , , 가 존재 위와 같이 단순하게 form 요소를 구성하여 사용자의 입력에 따라 값을 업데이트 시킬 수 있다. 즉 HTML input `스스로` 유지하고 사용자의 입력에 따라 state(상태)가 업데이트가 되는 것이다. 위 코드는 똑같이 React로 구성할 수 있지만 React는 자체적으로 State을 관리하고 필요 시 자식 컴포넌트로 props로 내려주는 방식을 사용한다. React 컴포넌트에서 HTML form 요소들을 사용한다는 의미는 React 컴포넌트에서도 State을 가지고 있고 HTML form 요소에서도 State을 동시에 가지고 있는 것이다. 하지만 이것는 React의 single source of truth의 원칙을 위배하므로 React의 State..