분류 전체보기 169

[React] 전역에서 사용 가능한 모달 만들기

📌 모달 구현 1. 모달의 오픈 여부를 알 수 있는 상태값이 있는 slice 만들기 // ModalSlice.jsx import { createSlice } from '@reduxjs/toolkit'; const initialState = { modal: false, }; export const modalSlice = createSlice({ name: 'modal', initialState, reducers: { showModal: (state) => { state.modal = true; }, closeModal: (state) => { state.modal = false; }, }, }); export default modalSlice.reducer; export con..

Programming/Client 2023.01.08

[Javascript] 모듈로 설정된 파일의 변수는 전역 변수가 아니다!

🤔 문제 바닐라 자바스크립트로 프로젝트를 진행하던 중 html에 자바스크립트 파일을 연결하던 부분을 변경하게 되었다. 단순히 타입을 모듈로 변경한 것이었다. 그런데 이렇게 타입을 지정하니까 js 파일에서 삽입한 코드의 이벤트 함수를 인식하지 못했다. 버튼을 눌러도 아무런 반응이 없었다. // box 안에 버튼 넣어주기 const box = document.querySelector(".box"); box.innerHTML = ` Click! `; // 버튼의 이벤트 함수 const handleClick = () => { console.log("hi"); }; 🔑 해결 이 문제는 전역에서 해당 handleClick 함수를 찾지 못해 생기는 것이었다. 타입을 모듈로 지정하면 해당 파일만의 스코프가 만들어진다...

Programming/Client 2023.01.06

[Leetcode] 371. Sum of Two Integers (Medium) - javascript

📝 문제 Given two integers a and b, return the sum of the two integers without using the operators + and -. (+, - 연산자의 사용 없이 인자의 합을 구하시오) Example 1: Input: a = 1, b = 2 Output: 3Example 2: Input: a = 2, b = 3 Output: 5Constraints: -1000 배열로 변환 b = b.toString(2).split(''); let next = 0; // 올림수 let result = ''; // 더해진 이진수 저장 while((a.length || b.length) > 0) { // 모두 배열의 값이 사라질 때까지 반복 ..

Coding test 2022.09.28

[프로그래머스] 셔틀버스 (Lv2) - javascript

📝 문제 카카오에서는 무료 셔틀버스를 운행하기 때문에 판교역에서 편하게 사무실로 올 수 있다. 카카오의 직원은 서로를 '크루'라고 부르는데, 아침마다 많은 크루들이 이 셔틀을 이용하여 출근한다. 이 문제에서는 편의를 위해 셔틀은 다음과 같은 규칙으로 운행한다고 가정하자. 셔틀은 09:00부터 총 n회 t분 간격으로 역에 도착하며, 하나의 셔틀에는 최대 m명의 승객이 탈 수 있다. 셔틀은 도착했을 때 도착한 순간에 대기열에 선 크루까지 포함해서 대기 순서대로 태우고 바로 출발한다. 예를 들어 09:00에 도착한 셔틀은 자리가 있다면 09:00에 줄을 선 크루도 탈 수 있다. 일찍 나와서 셔틀을 기다리는 것이 귀찮았던 콘은, 일주일간의 집요한 관찰 끝에 어떤 크루가 몇 시에 셔틀 대기열에 도착하는지 알아냈다..

Coding test 2022.09.17

[프로그래머스] 뉴스 클러스터링 (Lv 2) - javascript

📝 문제 여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브는 사용자들이 편리하게 다양한 뉴스를 찾아볼 수 있도록 문제점을 개선하는 업무를 맡게 되었다. 개발의 방향을 잡기 위해 튜브는 우선 최근 화제가 되고 있는 "카카오 신입 개발자 공채" 관련 기사를 검색해보았다. 카카오 첫 공채..'블라인드' 방식 채용 카카오, 합병 후 첫 공채.. 블라인드 전형으로 개발자 채용 카카오, 블라인드 전형으로 신입 개발자 공채 카카오 공채, 신입 개발자 코딩 능력만 본다 카카오, 신입 공채.. "코딩 실력만 본다" 카카오 "코딩 능력만으로 2018 신입 개발자 뽑는다" 기사의 제목을 기준으로 "블..

Coding test 2022.09.15

[엘리스 SW 엔지니어 트랙] 3기 합격 후기

🌱 들어가며 올해 중반부터 부트캠프를 알아보기 시작했는데, 들어가는 과정이 결코 만만치 않았다. 기업에서 운영하는 교육기관이나 k-digital으로 진행되는 부트캠프는 물론이고 수강비가 고가인 곳도 교육의 퀄리티가 보장되어 있다면 최소 2단계의 선발 단계를 거쳤다. 나는 기업 교육 기관을 시작으로 마지노선을 정한 채 여러 곳을 지원했다. 그 과정에서 몇 번의 탈락을 맛봤지만, 그때마다 더 성장했고 자소서와 테스트의 퀄리티는 좋아졌다. 엘리스는 선발되기까지 서류, 프리트랙 수강, 코딩테스트, 면접까지 무려 4단계를 거친다. 다 통과할 수 있을까? 하는 경악과 아득함이 동시에 느껴졌다. 그러나 정신차리니 관문을 하나하나 통과하고 있었고... 다음주부터 4개월 간 진행되는 엘리스 SW 엔지니어 트랙 3기에 합..

경험·후기 2022.09.10

[알고리즘] 재귀 문제 풀이 - javascript

1. 주어진 str를 거꾸로 나열하는 함수를 작성하시오. ex) 'awesome' => 'emosewa' 나의 풀이 function reverse(str){ if(str.length === 1) return str; return str[str.length-1] + reverse(str.slice(0,-1)); } 모범 풀이 function reverse(str){ if(str.length true 나의 풀이 function isPalindrome(str){ function helper(str) { if(str.length === 1) return str; return str[str.length-1] + helper(str.slice(0,-1)); } if(str === hel..

[알고리즘] javascript 문제해결 패턴 - Sliding Window (기준점 간 이동)

📌 Sliding Window (기준점 간 이동) 배열 속 연속한 값을 이용해서 답을 도출하는 문제 예시 배열 속 n만큼 연속한 숫자들의 합 중, 최대값 구하기 ⇒ 맨 처음부터 n개의 연달은 숫자의 합을 구하고, 두 개의 포인터를 이동해가며 (i-n, i) 앞꺼는 빼고, 뒤는 더해주면서 합계 비교 if(arr.length < n) return null; let maxSum = 맨 처음 연달은 n개의 값의 합 let tempSum = maxSum; // 비교할 임시값 for (let i = n; i < arr.length; i++) { // maxSum에 더한 수 바로 다음 값부터 순회 tempSum = tempSum - arr[i-n] + arr[i]; maxSum = Math.max(maxSum, te..

[알고리즘] javascript 문제해결 패턴 - Multiple Pointers (다중 포인터)

📌 Multiple Pointers (다중 포인터) 배열 속의 값을 비교해서 답을 도출할 때 사용 (주로 쌍으로 비교) 예시 양쪽 끝에 포인터 배치 오름차순으로 정렬된 배열 요소 중, 합치면 0이 되는 두 요소를 찾아 배열로 반환 ex) [-2,1,0,2] ⇒ return [-2, 2] best 양쪽 끝에서 출발하는 포인터 설정 후, 비교하고 포인터 변경하면서 값 찾기 let left = 0; // 왼쪽에서 출발하는 인덱스 let right = arr.length -1 // 오른쪽 출발 인덱스 while(left 0) right -..