전체 글

[어쩌다보니 비건?!] 프로젝트 2022 회고

9월 3일 "프로젝트를 시작하면서" 포스팅을 마지막으로 약 4개월이 지나고... 2022년 회고록으로 돌아오게 되었습니다! 자주 프로젝트 관련 글을 쓰겠다고 마음먹은게 엊그제 같은데 시간이 이렇게나 흘러버렸네요ㅎㅎ 사실 현재까지 프로젝트가 한 20%정도 밖에 진행이 안되었기에 저 글을 쓴 시점과 상황 자체가 크게 달라지지는 않았습니다. 프로젝트 진행이 잘 되지 않은 데에는 여러가지 이유들이 있었지만 가장 큰 원인은 시간 부족 + 인원 부족을 꼽을 수 있을 것 같습니다. 또한, 팀원들의 작업이 대부분 개인적으로 관리되었고 위와 같은 현상이 길어지면서 사기가 떨어져 개인의 퍼포먼스가 낮아진 것도 중요한 이유라 생각합니다. 뭐 어쨌든간에 2022년 프로젝트 회고를 한 번 해보면서 "1. 그동안 뭘 했는지", ..

package 버전 문제 (lock 파일의 중요성)

이슈 발췌일: 2022.10.28 (금) 문제 상황 갑자기 Popup의 레이아웃이 깨지는 현상을 발견했다. 확인해보니 Viewport 사이즈 별로 css를 적용하기 위해 세팅해주는 className이 Popup에 세팅되지 않아서 발생한 문제였다. 문제 원인 분석 해당 상황이 발생했을 때는 내가 Popup 컴포넌트를 수정하는 작업을 하고 있을 때였다. 그래서 혹시 내가 뭘 잘못 건드렸나 싶어서 지금까지 한 작업을 브랜치를 따서 커밋하고 develop 브랜치에서 확인해보았다. 해당 이슈는 develop 브랜치에서도 발생하고 있었다. 그럼 예전부터 문제가 발생했다는 걸까...? 망했다...근데 다행히도 production에서는 문제가 발생하지 않더라... 일단 해당 이슈가 처음 발생한 commit 지점을 찾아..

[React] Input Focusing이 없어지는 현상

이슈 발췌일: 2022.08.26 (금) 이슈 내용 입력 폼 안에서 어떤 Input에 값을 입력하고 다른 Input으로 포커싱을 옮기기 위해 클릭을 했을 때, 포커싱이 없어지는 문제점이 있었다. 두 번 이상 클릭해야만 포커싱이 정상적으로 되었다. 해당 현상으로 인해 사용자가 폼에서 데이터를 입력하기 불편해졌다. 전체 폼을 입력하는 시간이 이전보다 길어지게 되는 문제점이 발생했다. 문제 원인 파악 당장 문제 현상만 봤을 때는 어떤 오류인지 감이 잘 잡히지 않았다. 따라서 예상되는 원인을 나열해보고 확인해보는 방식으로 문제 원인을 파악해보려고 했다. 일단 가장 유력한 원인으로 "컴포넌트의 불필요한 리렌더링"을 예측했다. Input 컴포넌트가 클릭되는 순간 어떤 state값이 변경되어 컴포넌트가 리렌더링 되었..

웹 구글 지도 마커 렌더링 최적화

이슈 발췌일: 2022.03.11, 14, 15 (조사 및 구현)문제 상황마커 5000 ~ 7000개 정도를 표출하는 구글 지도를 사용하는 페이지에서 아래와 같은 이슈가 발생하고 있었다.화면 초기 렌더링이 5~6초 정도로 지연됨지도 확대/축소 시 지연 시간 발생, 확대/축소를 짧은 시간 내에 여러 번 실행 시 페이지가 먹통이 되는 현상도 발생함해결 방법 조사서버에서 직접 클러스터링 처리이동/확대/축소 시 현재 viewport에 포함되는 마커, 클러스터 정보를 서버로부터 받아서 표시한다.직방 사이트가 이와 같은 방식으로 마커를 표시하고 있었다.클러스터링 기준을 직접 설정하여 표출 할 수 있다는 장점이 있다. 맵 라이브러리가 제공하는 클러스터링 기능보다 빠른지는? 잘 모른다.클라이언트 단에서 보이는 부분만 ..

[React] useMemo를 사용한 캐싱으로 중복 호출 방지하기

이슈 발췌일: 2022.09.05 (월) 현재 회사에서는 UI 컴포넌트 라이브러리로 Devextreme을 사용한다. 오늘은 Devextreme의 기능 중 CustomStore를 사용하면서 있었던 이슈에 정리해보려고 한다. Devextreme의 DataGrid나 Lookup 컴포넌트를 사용할 때, 대부분 CustomStore를 만들어주고 이를 컴포넌트에 전달하여 해당 CustomStore로 데이터를 가져오도록 되어있다. Pagination이나 Filter, Sort 등이 필요한 경우에 CustomStore를 사용하면 옵션 값이 바뀌었을 때 알아서 데이터를 다시 가져올 수 있기 때문이다. 사용자의 인터랙션으로 옵션의 값이 바뀌면, CustomStore는 load 함수를 다시 실행하여 데이터를 다시 가져온다...

[어쩌다보니 비건?!] 프로젝트를 시작하면서

몇 개월 전부터 어쩌다보니 비건?! 이라는 새로운 사이드 프로젝트를 시작하게 되었다. 다들 직장인이시고(물론 나도 포함) 주말엔 뭐 개인적으로 할 일도 있을테니 너무 일정을 타이트하게 가져가지는 않기로 했다. 때문에 한 3개월 전부터 프로젝트 기획을 시작했지만 개발 작업을 본격적으로 하고 있지는 않다. 이전에 해본 사이드 프로젝트는 3명이서 같이 하긴 했지만 다 개발자들이었고 내 개인 프로젝트에 백엔드+인프라 부분을 지인이 도와준 느낌으로 같이 했던 거여서 솔직히 이번 프로젝트는 조금 더 기대되는 부분들이 많다. 이 프로젝트는 기획자 + 디자이너 + 웹 프론트엔드 개발자 + 앱(Android) 개발자가 모여 진행한다. 백엔드 개발자가 없는 부분이 조금 아쉽긴 하지만 내가 6개월 백엔드 경험을 살려 서버리..

z-index가 동작하지 않는 이유, 같은 위계에서 비교하기

오늘도 룰루랄라 신나게 프로젝트 코딩을 하던 도중에 UI가 깨지는 부분을 발견했다! 오호~ 이건 당연히 z-index 문제겠지! 하고 메뉴 화면 Element에 z-index를 줬지만...! 여전히 문제는 해결되지 않았다. 흠...왜 z-index가 안먹히는거지? menu1 menu2 menu3 메인 텍스트 position도 넣고 z-index도 넣었는데 왜 안되지? 나는 분명히 저 메뉴 Element에 position: absolute도 설정해주고, z-index도 1000으로 설정해줬다. 혹시 메인 콘텐츠에 z-index를 따로 설정했나? 하고 확인해봤는데 z-index가 따로 설정되어 있지도 않았다. 그럼 z-index 순서가 밀린 것도 아닐텐데... 내가 아는 선에서 머리를 데굴데굴 굴리며 메뉴 ..

[forensic] 디스크 이미지 분석 프로그램 (2)

지난 번에는 섹터 위치를 입력받아서 해당 섹터를 출력하는 프로그램을 구현하였다. 이번에는 기존 코드를 조금 수정해서 사용자가 표시된 메뉴 중에서 원하는 것을 사용할 수 있도록 선택하도록 하였다. New!) 파티션 보기 기능 옵션에는 1. 섹터 정보, 2. 파티션 보기 3. 종료가 있다. 파티션 보기를 가장 마지막에 추가하였는데, 저 부분에서 가장 애를 먹었다. (과제 하기 시러잉....) 파티션 테이블은 각각 16 바이트씩 4개의 엔트리를 가지고 있는데, 4번째 파티션이 확장 파티션이라면 LBA주소로 이동해서 다른 섹터에 있는 파티션을 읽어오는 것이다. 하나의 하드디스크에 파티션을 4개까지 생성할 수 있기 때문에, 4개 이상의 파티션을 사용하기 위해서는 확장 파티션에 논리 파티션을 생성하면 된다. Par..