회사 프로젝트에서는 jstree를 사용해 트리를 보여 주는데, 펼치고 접는 아이콘을 +, -로 바꿔 달라는 요청이 있었다. 아이콘을 png로 바꿔서 해도 된다고는 하지만 제일 싫어하는 게 이미지 찾고….. 그거 집어넣고…. 하는 것이기 때문에 이것저것 구글링을 해 본 결과 proton이라는 bootstrap 기반의 테마를 찾을 수 있었다. 데모 페이지에도 나와 있는데, 다들 cdn 방식으로 사용하는 게 대부분이었다. 나도 그렇게 할 수 있었지만 회사 프로젝트의 index.html 파일이 너무 깨끗해서……. ㅋㅋㅋㅋㅋㅋㅋ 건드리지 않고 패키지로 다운받을 수 있으면 했다. https://www.npmjs.com/package/jstree-bootstrap-theme 우리의 위대한 npm은 당연히도 패키지를 ..
회사 업무를 하다 보면 예외 처리를 엄청 꼼꼼히 해 주어야 하는데, 그래서인지 정규표현식도 굉장히 많이 쓰인다. 늘 필요한 정규표현식은 구글링해서 복붙해 왔던 나… 이제는 더이상 미룰 수 없다… 공부하자..! 정규 표현식 - JavaScript | MDN 정규표현식을 만드는 두 가지 방법 리터럴 슬래시로 패턴을 감싸서 작성한다. const re = /ab+c/; RegExp 객체의 생성자 호출 정규표현식 패턴 작성하기 정규 표현식 패턴은 /abc/ 처럼 단순한 문자로 구성하거나, 단순한 문자와 특수 문자의 조합으로 구성할 수 있다. /abc/ 처럼 단순 문자로 구성된 패턴은 abc 라는 문자의 조합이 일치하는 문자열을 찾는다. Grab crab 처럼 a, b, c가 모두 들어가 있지만 ab c 이기 때문..
문제 상황 보통의 redux state는 새로고침 하면 state가 날아가기 때문에 persist 사용이 불가피하다. 현재 프로젝트에도 redux-persist를 사용하고 있었다. 아직까지는 전역으로 관리할 상태가 많지 않아서 reducer를 하나만 두고 사용하고 있는데, 같은 reducer에서 관리할 state에 프로퍼티가 하나 늘었다. 즉, // Reducer const initialState = { A: [] } 에서 // Reducer const initialState = { A: [], B: [] } 가 되었다는 뜻이다. 당연히 아무런 문제가 없을 줄 알고 액션마다 객체를 return 할 때 B에 대한 코드를 추가해서 수정해서 커밋했는데… 다른 팀원 분의 컴퓨터에서 테스트를 하니 에러가 났다. ..
어쩌다 보니 풀스택 개발자로 달리고 있는 나. csv 파일을 읽어서 데이터를 가공하고 db에 저장하는 기능을 만들어야 했다. 하지만 csv 파일마다 인코딩이 전부 제각각이라는 문제에 직면했다. 예를 들어, csv 파일을 메모장으로 만드는 경우 기본적으로 UTF-8로 저장된다. (사용자 설정에 따라 다를 수도 있다) 하지만 .csv 파일은 엑셀 프로그램이 깔려 있는 경우 일반적으로 엑셀로 열리기도 하는데, UTF-8로 저장된 csv 파일을 엑셀로 열었을 경우 한글이 전부 깨진다! 그제서야 부랴부랴 엑셀에서 잘 보일 수 있도록 ANSI로 인코딩을 해서 업로드를 하면 백단에서 다 깨진다! 어찌저찌 긴급 처치를 해도 일어날 수 있는 모든 상황에서 한글이 예쁘게 보일 수 있는 방법은 없다고 판단... 파일 입력과..
[프로그래머스] 게임 맵 최단거리 - Lv.2 / JavaScript
https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 지금부터 당신은 한 팀의 팀원이 되어 게임을 진행하려고 합니다. 다음은 5 x 5 크기의 맵에, 당신의 캐릭터가 (행: 1, 열: 1) 위치에 있고, 상대 팀 진영은 (행: 5, 열: 5) 위치에 있는 경우의 예시입니다. 위 그림에서 검은색 부분은 벽으로 막혀있어 갈 수 없는 길이며, 흰색 부분은 갈 수 있는 길입니다. 캐릭터가 움직일 때는 동, 서, 남, 북 방향으로 한 칸씩 이동하며,..
https://programmers.co.kr/learn/courses/30/lessons/64065 코딩테스트 연습 - 튜플 "{{2},{2,1},{2,1,3},{2,1,3,4}}" [2, 1, 3, 4] "{{1,2,3},{2,1},{1,2,4,3},{2}}" [2, 1, 3, 4] "{{4,2,3},{3},{2,3,4,1},{2,3}}" [3, 2, 4, 1] programmers.co.kr 문제 설명 셀수있는 수량의 순서있는 열거 또는 어떤 순서를 따르는 요소들의 모음을 튜플(tuple)이라고 합니다. n개의 요소를 가진 튜플을 n-튜플(n-tuple)이라고 하며, 다음과 같이 표현할 수 있습니다. (a1, a2, a3, ..., an) 튜플은 다음과 같은 성질을 가지고 있습니다. 중복된 원소가 ..
[프로젝트 회고] 설치형 협업툴 서비스 TOOLIV
Github: https://github.com/TOOLIV/tooliv 1. 서비스 소개 협업을 위한 새로운 선택, TOOLIV 친구 및 동료들과 자유롭게 채팅하고, 화상회의를 통해 업무 효율을 높이고 실시간으로 소통해보세요! 주요 기능 튜토리얼 TOOLIV을 처음 사용하는 사용자들도 서비스를 쉽게 사용할 수 있도록 튜토리얼을 제공합나다. 워크스페이스 워크스페이스는 팀 구성원이 함께 소통하고 작업할 수 있는 채널로 구성됩니다. 공동의 작업공간인 워크스페이스를 생성하고 소통하고 싶은 회원을 초대할 수 있습니다. 채널 채널은 채팅 및 파일 송·수신, 화상회의 등 팀원들이 모여 업무를 공유할 수 있는 공간입니다. 공개/비공개 여부을 선택할 수 있습니다. 워크스페이스 소속멤버라면 해당 워크스페이스의 모든 공개..
https://programmers.co.kr/learn/courses/30/lessons/67257 코딩테스트 연습 - 수식 최대화 IT 벤처 회사를 운영하고 있는 라이언은 매년 사내 해커톤 대회를 개최하여 우승자에게 상금을 지급하고 있습니다. 이번 대회에서는 우승자에게 지급되는 상금을 이전 대회와는 다르게 다음과 programmers.co.kr 문제 설명 기본적인 연산자 우선 순위는 *, +, - 지만 이 문제에서는 연산자 우선순위를 마음대로 지정할 수 있다. 수식이 주어지고, 연산자 우선 순위를 지정해서 수식의 절대값이 가장 큰 값을 출력하라. 입출력 예 expression result "100-200*300-500+20" 60420 "50*6-3*2" 300 문제 해결 아이디어 먼저 정규표현식으로..
