choi95의 TIL📝

시작한 계기 머리를 식힐 겸(?) 원티드에서 채용 공고를 보다가, 2기 때 수료 했던 원티드 프리온 보딩 공고가 떠 있어 들어가 봤다.이번에는 어떤 선별 과제가 있는지 확인하다가 첫 번째 구현 문제가 눈에 띄었다. 해당 문제는 Toggle Switch 를 구현하는 것인데, 이전의 Toggle Switch와는 다르게 Slider 영역에 두 개의 글자가 각 사이드에 위치하였고 Toggle이 해당 글자 부분으로 이동하게 되면 동적으로 스타일링이 변하는 흥미로운 문제였다. 한산한 밤, 오랜만에 바닐라 JS 🍌 를 사용하고 싶어 해당 문제를 다음과 같이 간단히 코딩해보았다. Code See the Pen Untitled by 최병현 (@leulsiqf) on CodePen.

문제 https://github.com/choi2601/LeetCode-ProblemSolving/tree/main/797-all-paths-from-source-to-target GitHub - choi2601/LeetCode-ProblemSolving: 👨🏼‍💻 LeetCode 알고리즘 문제풀이 코드 저장소 👨🏼‍💻 LeetCode 알고리즘 문제풀이 코드 저장소. Contribute to choi2601/LeetCode-ProblemSolving development by creating an account on GitHub. github.com 릿코드에서 인접 행렬 그래프 문제를 풀다가 어이 없는 실수로 인해 오랜 시간 고민을 했다. 다시는 같은 실수를 하지 않기 위해 해당 부분을 짧게 포스팅하고자..

회고 https://programmers.co.kr/competitions/2165/2022-web-fe-first 2022 Dev-Matching: 웹 프론트엔드 개발자(상반기) 접수 22년 02월 21일 10:00 ~ 03월 10일 17:00 테스트 22년 03월 12일 14:00 ~ 03월 12일 17:00 programmers.co.kr 2022.03.12 Dev-Matching 테스트를 보았다.우려했던 것보단 테스트의 난이도가 크게 어렵진 않았지만 한동안 라이브러리 사용에 익숙해 있던 나에게, 오랜만에 Vanilla JS만으로 어플리케이션 구현하는 과정이 조금 낯설었다. 테스트가 끝난 뒤, 어떠한 라이브러리에 맹목되지 않고 기반이 되는 JS를 끊임 없이 학습해야 겠다는 의지를 되새겼다. 이에 테..

문제 프로젝트 도중 검색창에 영어를 치면 별 문제 없이 쿼리 값을 API path에 담아 서버에서 관련 데이터를 무사히 가져오지만, 한글을 칠 경우에는 해당 keyword의 값이 깨진 상태로 쿼리 값을 서버에 보내 제대로 데이터를 가져오지 못하는 문제가 있었다. 문제해결_encodeURI https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURI encodeURI() - JavaScript | MDN encodeURI() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. developer.mozilla.org The encodeURI()..

문제 "info_list": [ { "id": 1, "name": "숲과 생활", "category": "민박", "address": "전라/전주시", "min_people": 2, "max_people": 3, "min_price": 187000, "max_price": 264000, "image_url": "https://images.stayfolio.com/system/pictures/images/000/058/604/small/632cee6dc35346df1f2c6b5d586ed5e73ec7c8a7.jpg?1606199154" }, ( ... ) ] 다음과 같이 서버에서 숙박 리스트 데이터를 가져와 화면에 랜더링하고자 했다. 이때 키 값 중 min_price와 max_price는 원화로 표시되어야..

코드 export class InstantSearch { constructor(configuration) { this.DEFAULT_DELAY_TIME = 500; (...) this.delayTime = (configuration.delayTime === null || configuration.delayTime === undefined) ? this.DEFAULT_DELAY_TIME = 500 : configuration.delayTime; } 부모 컴포넌트에서 객체를 통해 state 값을 전달 받아 해당 객체 내 프로퍼티 값으로 시간 값이 설정되어 있지 않다면 생성자 함수 내 인스턴스의 기본 시간을 변수에 할당해주는 과정을 삼항 연산자를 통해 구현하였다. (참고로 delayTime은 Input Val..

문제 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbersreturn [6, 10..

문제 이벤트 위임(Event Delegation)을 위해 최상위 부모 컨테이너에 이벤트 핸들러를 바인딩해줄 경우 해당 요소 내부에 자식 요소들이 또 한번 부모(ParentElem)-자식(ChildElem) 관계를 이루고 있고 두 요소가 레이아웃 상 완전히 겹쳐져 있을 때 문제가 발생하였다. 예를 들어 click 이벤트를 생각해보자. ParentElem에서 click 이벤트에 대한 후속 처리를 하고 싶지만 웹 상에서 ChildElem이 wrapper인 ParentElem과 위치 값이 겹쳐져 있고 크기가 같을 경우에는 ParentElem이 아닌 ChildElem이 계속해서 선택이 되어 원하는 결과를 얻지 못할 수 있다. /h1> p> (...) 다음과 같이 모든 요소를 감싸는 container인 leafl..