현재 인턴으로 근무하는 회사의 웹 프론트엔드 프로젝트는 다수의 프로젝트를 단일 레포지토리에서 관리하는 모노레포 방식을 채택하고 있다. common 프로젝트에 컴포넌트 A가 있었다. 컴포넌트 A가 common 프로젝트에 있긴 했지만 현재 내가 작업하고 있는 프로젝트 B에서 밖에 사용이 안되었고, 프로젝트 B에서 만든 api hook을 활용해 컴포넌트 A에서 데이터를 주고받아야 했기 때문에, 고민 끝에 컴포넌트 A를 common 프로젝트에서 프로젝트 B로 옮기기로 하였다.1. 그냥 drag and drop을 하면 될 것이라 생각했지만컴포넌트 A를 옮길 때 고려해야 될 내용이 있었나 싶었지만, vscode가 알아서 업데이트해주겠지 싶어서 일단은 그냥 drag and drop으로 파일을 옮겼다. 옮기고 나서 v..

책 '그림으로 배우는 네트워크 프로토콜 활용'을 읽고 정리한 내용입니다.0. 들어가며 호스트: 네트워크 상의 IP 주소를 가진 컴퓨터노드: 호스트에 네트워크 장치를 추가한 용어 스탠드 얼론: 한 대의 단말기가 독립적으로 존재, 작업자는 차례를 기다려 사용 TSS(time sharing system: 시분할 시스템): 한 대의 컴퓨터를 여러 사람이 사용, 로컬 단말기에서 원격으로 액세스 가능 ARPANET: 세계 최초의 패킷 교환 방식의 네트워크패킷 교환 방식(Packet Switching): 전송할 데이터를 패킷 단위로 나누어 전송하고, 수신한 단말기에서 원래 데이터로 복원하는 방식장점: 필요한만큼만 회선을 이용할 수 있고, 여러 사람이 회선을 공유할 수 있다. 회선 교환 방식: 컴퓨터끼리 통신할 때 ..

행동경제학자 댄 에리얼리의 ‘마음이 움직이는 순간들’을 읽었다. 인턴 근무를 하게 된지 어느덧 한 달이 지났다. 스스로 일을 해 돈을 번다는 사실에 기뻤고, 내가 관심을 가지던 분야의 지식과 경험을 활용할 수 있다는 것에 감사했다. 이 사실들만으로도 일을 할 이유는 충분했지만, ‘사람들은 왜 일을 하는가?’라는 질문은 머릿속에서 계속 떠올랐다. 취미가 업이 되면 괴롭다는 말에서 알 수 있듯이, 아무리 좋아하는 일이라도 그 일로 먹고 살기란 쉽지 않다. 이런 생각들을 하다보니 도서관에서 이 책이 눈에 띄었나보다. 인간은 무슨 상황에서 동기부여가 되는지 궁금했다. 이 질문에 대한 답을 알 수 있다면, 앞으로 나의 선택에 큰 도움이 되지 않을까.1. 의외로, 돈이 오히려 동기부여의 방해 요소가 될 수 있다사실..

폰의 뒷면이 작살났다. 언젠가부터 생겼던 작은 금은 어느새 커져 가지를 뻗어나갔다. 이 흔적들을 나는 대수롭지 않게 여겨 별 다른 조치를 하지 않았다. 그리고 얼마 지나지 않아 뒷면이 벗겨져 보여서는 안될 부품이 보였고, 케이스를 열면 유리조각이 떨어져나왔다. 험하게 다루지는 않았던 것 같은데. 순진하게도 나는 투명케이스가 외부로부터 오는 모든 충격으로부터 폰을 지켜주리라 굳게 믿고 있었다. 아무리 약해보이는 충격이라도 그 대상은 영향을 받을 수 밖에 없다는 사실을 종종 까먹는다.  스마트폰 교체의 적절한 주기는 얼마나 될까. 사람마다 다양한 답이 나오겠지만 그 답변들 중 틀린 답변은 없을 것이다. (컴퓨터공학부에 다니지만) 전자기기에 무지해서 답변을 하기 쉽진 않지만, 기기 뒷면에서 유리조각이 떨어지면..

0. 지도가 너무 렉이 걸려!지금 작업하고 있는 프로젝트는 네이버 지도를 활용해서 사용자가 저장한 식당 위치를 지도에 띄워주는 기능이 있다. 커스텀 마커를 생성하고 마커에 대한 정보들을 html로 변환 후, 마커의 content에 추가해주었다. 네이버 지도에 마커가 하나씩 생성될 때마다 DOM 요소가 하나씩 생성된다. 즉, 마커가 생성되는 개수가 늘어날수록 렌더링 성능에 영향을 끼치게 된다. 실제로 마커가 500개 넘게 네이버 지도에 추가되었을 경우, 줌과 드래그를 할 때 너무 렉이 걸려서 사용자 경험에 악영향을 끼치게 되었다. 그래서 일주일에 걸쳐서 네이버 지도를 최적화하기 위해서 여러 가지 시도를 하며 삽질을 해보았다.1. HTML 마커 방식 대신 캔버스를 사용해보자위에서 설명했듯이, 마커가 하나씩 ..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42627 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 생각우선순위 큐(즉, Heap)을 사용해서 풀어야 하는 문제다. Javascript는 우선순위 큐를 직접 구현해야하는데, 아직 다 외우지 못해서 아래 블로그 글을 참고해서 우선순위 큐를 구현했다.(블로그 링크: https://velog.io/@qltkd5959/JS ) 작업의 우선순위는작업의 소요시간이 짧은 것,작업의 요청 시각이 빠른 것작업의 번호가 작은 것이다. 이 문제에서 주어지는 jobs는 [작업이 요청되는 시점, 작업의..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42583 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 생각제일 헷갈렸던 부분은, 트럭 한대가 다리를 건너는 데 bridge_length초 걸린다는 사실이다. 문제에서 이 부분에 대한 설명 미흡해서 이해가 어려웠다. 맨 처음, truck_weights에 다리를 지난 시간을 나타내는 time 속성을 각 객체에 map을 통하여 추가해주었다. 그리고 truck_weights의 첫 번째 트럭을 새로 생성한 bridge 배열에 넣어주고 time 속성을 +1 해준다음, 우리가 구해줘야 하는 ..

0. 제안과 고민동아리 회장을 맡아달라는 제안을 들었다. 처음에는 부담스러웠다. ‘회장’이라는 단어는 내게 너무 이질적으로 다가왔다. 초등학교 때 몇 번 반장을 맡았던 적은 있었지만 그건 그 때 뿐이었고, 내가 나서는 것을 좋아하지 않는다는 사실을 알게 된 이후로 무언가를 대표하는 직책을 맡지 않았었다. 웹 파트장도 내가 웹 프론트엔드를 좋아해서 맡은 거였다고. 회장은 자신감이 넘쳐야하고, 남들을 설득할 줄 알아야하고, 책임을 질 줄 알아야한다. 나에게는 없는 요소들이었다. 그랬기에 사실 이런 제안은 나에게 기회기도 했다. 아마 다시는 오지 않을 기회. 회장을 맡으면 더 성숙한 내가 될 수 있지 않을까. 자리가 사람을 바꾼다는 뻔한 말을 한 번 믿어볼까. ‘내가 모든 걸 망쳐버리면 어떡하지?’라는 생각이..

0. CORS 에러는 프론트에서 해결이 가능하다고?우연히 어떤 트윗을 봤다.(출처: https://x.com/robinyoondev/status/1891720787863687634)CORS 에러는 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하면, 특정 출처에서의 접근을 허용함으로써 해결할 수 있다.(CORS에 대해 알고 싶다면 아래 링크에서 잘 설명되어 있다! 링크: https://www.maeil-mail.kr/question/78 )그런데 위 트윗에서는, 백엔드 개발자분께서 CORS 에러를 프론트엔드에서 해결할 수 있다고 말했다고 한다. 프론트엔드에서 어떻게 CORS 에러를 해결할 수 있을까?다음과 같은 트윗들이 달려있었는데, 이해가 가지 않는 단어들이 있어서 검색을 해..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42579  프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 생각정렬 기준이 무려 세가지다!속한 노래가 많이 재생된 장르를 먼저 수록장르 내에서 많이 재생된 노래를 먼저 수록장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록그래서 일단 Map을 생성한 후,속한 노래가 많이 재생된 장르를 먼저 수록하기 위해genres와 plays를 순회를 돌며 genres 별로 plays들을 더해줘서 plays가 큰 순서대로 Map을 내림차순 정렬을 해주었다. (이 때, M..