데구리 블로그

요즘 들어 알고리즘 문제를 자바스크립트로 한두 문제씩 풀고 있습니다. BOJ를 자바스크립트로 시도해보셨다면 아시겠지만, 들어오는 입력을 모두 한 배열에 때려 박고 각각 인덱스로 접근해 사용하게 됩니다. 저는 이게 너무 적응이 안 돼 방법을 찾던 중 괜찮은 아이디어가 떠올라 공유하게 되었습니다. 중간 설명 없이 바로 이용하고 싶으신 분은 여기를 클릭해주세요. input 함수 만들기 백준 사이트의 컴파일 실행 도움말에서는 Node.js 입력을 다음처럼 소개합니다. var fs = require('fs'); var input = fs.readFileSync('/dev/stdin').toString().split(' '); var a = parseInt(input[0]); var b = parseInt(inpu..

레포지토리 링크 github.com/degurii/fake-talk 요즘 몸이 별로 안 좋아 코딩을 많이 하진 못했다. 건강도 잘 챙겨야겠다. 1) User 객체를 직접 사용하는 대부분의 코드에 대해 User ID를 이용하도록 변경했다. 간단히 끝날 줄 알고 무작정 수정을 시작했는데, 중간중간 너무 헷갈려 컴포넌트 구조를 몇 번씩 확인하고 User가 어디서 사용되는지 메모장에 써가며 해결했다. 다음부터 이런 류의 수정은 더 체계적으로 시작해야 할 듯하다. 2) 시간 표시 기능을 조금 손봤다. 실제 카카오톡에선 채팅 중 시간이 바뀌면 타임스탬프가 한번 더 표시된다. 지금 내 코드에선 같은 유저가 연달아 채팅하는 경우 가장 마지막 톡에서만 타임스탬프를 표시하고 있다. ChatItem 컴포넌트에 first, ..

문제 링크 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 요즘 들어 c++을 지원하지 않는 코딩 테스트가 많이 보여 프로그래머스 문제를 자바스크립트를 이용해 풀기로 했습니다. 풀이 1) 주어진 문자열을 파싱 해줍니다. 저는 각 집합을 리스트로 표현해 [[...], [...], [...], ...] 꼴로 저장했습니다. 2) 부분 집합을 길이 순으로 오름차순 정렬해줍니다. ..

오늘은 메시지 수정, 삭제, 유저 이름 수정 기능을 구현했다. 1) 처음엔 수정할 chatItem의 id를 찾아 item.message만 변경해줬는데 수정된 내용이 렌더링 되지 않았다. 생각해보니 리액트가 state를 이전 상태와 비교할 때 객체는 변경되지 않고 안의 내용물만 변경되었으니 다시 렌더링 하지 않았던 상황이었다. 이를 새로운 객체로 대체해주어 해결했다. 2) 분명히 컴포넌트가 7개밖에 안 되는 작은 프로젝트인데도 state 관리하기가 너무 귀찮았다. 부모 컴포넌트에 2~3개의 자식 컴포넌트가 들어가고, 그 컴포넌트 안에서도 2~3개씩 자식 컴포넌트가 존재한다. 근데 자식 컴포넌트 사이에서 state를 공유해야 할 일이 생기니 공통 부모 컴포넌트마다 state가 생기고, 그에 따른 state ..

이번엔 git rebase를 성공했다!! 깃(Git) 리베이스 사용하기 - 스타트업 엔지니어링 이 글이 정말 많은 도움이 되었다. feature브랜치에서 디벨롭 브랜치와 rebase하고, 디벨롭에서 피쳐를 머지하니 성공적으로 커밋이 합쳐졌다. 설명을 보면서 느낀 점은, 아직 HEAD가 뭔지도 잘 모르고 있었다는 거다. 프로젝트가 끝나면 꼭 깃 북을 정독해야겠다는 생각이 들었다. 오늘 한 일 메시지가 처음인지, 끝인지를 판단해 아바타, 이름과 시간을 상황에 맞게 출력하도록 했다. 시간 설정 기능을 추가 채팅 입력창과 메시지 출력창을 mock up 데이터말고 실제 데이터를 사용하도록 변경했따 남은 일 메시지 수정, 삭제 기능 이미지 파일 업로드(채팅, 아바타) 자잘한 css 수정, css 안입힌거 구현 텍스..

이번 프로젝트부터 git flow와 칸반 보드를 적용하게 되었다. 칸반 보드는 여러 협업 툴이나 깃허브 자체에서도 지원해주는 프로젝트 관리 툴이다. 이런 식으로 issue를 통해 해야 할 일을 추가하고, 칸반 보드에서 진행 상황을 쉽게 관리할 수 있다. 각 이슈 번호에 대해 커밋을 날리니 어떤 일을 언제, 어떻게 한 건지 알아보기 편해서 좋다 ㅎㅎ git flow는 여러 브랜치를 나눠서 작업하는 전략인데, 나는 master, develop, feature만 사용할 예정이다. 음.. 처음이다 보니 실수로 feature 브랜치에서 바로 master 브랜치로 풀리퀘를 때려버렸다. 잠시 멍때리다 develop에다가 풀리퀘를 때렸다. 사실 뭔지도 모르고 일단 해본 거다.. 그랬더니 레포지토리에 revert-fea..

문제 링크 www.acmicpc.net/problem/1376 1376번: 민식우선탐색 첫째 줄에는 정점의 개수 N(= '0' && c = k) return query(node * 2, s, m, k); else return query(node * 2 + 1, m + 1, e, k - leftCnt); } void removeEdge(int e) { int idx = lower_bound(ALL(edges), e) - edges.begin(); update(1, 0, treeSize - 1, idx, -1); numEdges--; } void update(int node, int s, int e, int idx, int diff) { if (s

리액트 공부 중 웹팩 설정 부분을 자꾸 까먹어 내용을 따로 정리하게 되었습니다. 웹팩이 무엇이고 왜 사용하는지를 다루지 않습니다. 어떻게 웹팩을 설정하고 리액트와 함께 사용할 수 있는지에 대해 다룹니다. 초심자 입장에서 쓴 글이니 더 깊은 내용을 원하시는 분들은 다른 문서를 참조해주시면 감사하겠습니다. 해당 포스트는 조현영 님의 웹 게임을 만들며 배우는 리액트 강의와 webpack 공식 문서를 참고하여 작성했습니다. 1. npm 패키지 설치 우선 react, react-dom을 설치해 줍니다. npm i react react-dom webpack 관련 패키지를 개발용으로 설치해줍니다. npm i -D webpack webpack-cli ECMA2015 이후 문법과 jsx 문법을 사용하기 위해 babel ..

Syntax Highlighter 신택스 하이라이터는 개발 관련 블로그에서 꽤 중요한 역할을 합니다. 내가 작성한 코드를 이쁘게 보여주거든요. #include using namespace std; int main(){ cout

문제 링크 https://www.acmicpc.net/problem/1726 1726번: 로봇 많은 공장에서 로봇이 이용되고 있다. 우리 월드 공장의 로봇은 바라보는 방향으로 궤도를 따라 움직이며, 움직이는 방향은 동, 서, 남, 북 가운데 하나이다. 로봇의 이동을 제어하는 명령어는 다음과 같이 두 가지이다. 명령 1. Go k - k는 1, 2 또는 3일 수 있다. 현재 향하고 있는 방향으로 k칸 만큼 움직인다. 명령 2. Turn dir - dir은 left 또는 right 이며, 각각 왼쪽 또는 오른쪽으로 90° 회전한다. 공장 내 궤 www.acmicpc.net 풀이 로봇의 위치와 방향을 묶어 하나의 스테이트로 저장해서 BFS를 돌리면 됩니다. 한 스테이트에서 갈 수 있는 경우의 수는 앞으로 1,..