Salangdung_i의 기록

요약키오스크 프로젝트의 CS 인입이 발생했다. 현상 : 키보드 컴포넌트에서 이전에 입력한 값이 input에 왕창 찍히는 현상이 발생확인 : 키보드에서 입력받은 text를 setState로 관리하고, 이 state가 변경될 때마다 useRef로 값을 넣어주고 그 값을 input value로 넘겨줬다. useRef 특성상 값의 변화에 따라 화면을 랜더링 하지 못하고, 이 때문에 useRef의 값이 화면에 그려지는 시점에서  이전에 입력했던 text가 input value에 들어가면서 발생한 현상이다. const [text, setText] = useState('');const input = useRef('');useEffect(() => { input.current.value = text;}, [text..

차트 라이브러리를 비교하게 된 과정이전 프로젝트에서 3000건 이상의 데이터를 차트로 표현하면서 화면이 뻗어버리는 현상이 발생했다. 기존에는 Apexchart를 사용하고 있었고 팀장님이 다른 프로젝트에서는 EChart 사용하는데 그건 문제없었다고 하셔서 급하게 ApexChart에서 EChart로 변경하였다. 그동안 Apexchart 라이브러리를 사용했던 이유는 커스텀 없이도 기본 디자인이 예뻐서였다. 이후 추가 화면개발이 있었을때 Sankey 차트가 필요했고 EChart 라이브러리에서 지원을 안 했기에 d3를 추가로 설치해서 개발하게 되었다.어느 순간 차트를 위해 사용하는 라이브러리가 3개나 되었고, 이 시점에 세 가지를 비교해 보고 차트 라이브러리를 선정하기로 마음먹었다.  예정되어 있는 개발 공부가 ..

기존 환경 셋팅 방식 기존 프로젝트 환경을 구성할 때 create-react-app 명령어를 사용하여 구성했었다. 직접 빌드 도구들에 대해 공부하고 환경을 구성할 필요성도 느끼지 못했고, 이렇다 할 문제도 없었다. 어느 순간 프로젝트에 설치된 라이브러리와 코드로 인해 build 소요시간이 늘어났고, webpack 설정이 필요한 상황에 eject을 해야 했기에 선뜻 시도하지 못하고 eject을 사용하지 않고 우회해서 수정하는 일들이 생기기 시작했다. 혼자 공부해서 개발 환경을 셋팅 할 수 도 있지만, 사내 프론트엔드 표준으로 정의할 생각였고, 혼자 하는 것보다 같이하면 다양한 의견들이 나올 것 같아서 Webpack 개발 환경 구성을 첫 주제로 사내 프론트엔드 스터디를 개설하게 되었다.  프론트엔드 스터디 ..

프론트 팀의 방향성 고민 사내 프로젝트 버전 1 개발하고 버전 2로 가기 위한 고민을 하게 되었다. 코드 리팩토링을 하고 랜더링 최적화를 하는 것이외에 어떤 방법으로 개선할 수 있을까를 고민하는 시간을 가졌다.  개선 방향내가 했던 방법은 1. 프로젝트의 개선점 꼼꼼히 고민하기 2. 구직 사이트에서 3-5년차의 요건 찾아보기3. 공통 요건을 찾아 개선 경험이 될 수 있는 것 공부하기프로젝트의 개선점을 다시한번 생각해 보면백엔드 개발자가 build 파일 사이즈가 크다고 했던 것과 build 속도가 느리다고 했던 것, 또 사전에 요구사항이 정의되지 않고 갑자기 추가되는 경우가 많아서 grid의 컴포넌트의 경우 기존의 antd table 컴포넌트로 커버가 불가능했고, 다른 개발자가 요구사항을 충족할 수 있는 ..

4월은 좀 여유로운 시기여서 못했던 공부도 하고, 수정&배포를 반복하면서 맞닥트린 이슈를 해결하는 시간들을 보냈다. 개발 이슈 'cache-busting (캐시 무효화)' 빈번한 수정과 배포를 반복하면서 캐시 이슈가 발생했다. 배포된 url로 접속한 업체에서는 강력 새로고침을 해야만 수정사항이 반영되는 이슈가 있었다. 찾아보니 static파일은 캐시에 저장되어 만료된때가지 존재할 수 있고 만약 사이트를 업데이트하는 경우 이전 버전의 파일들이 캐시에 남아 변경사항을 알아차리지 못해 사용자가 변경되기 이전의 버전을 보게 되는 것이었다. cache-busting 은 이전에 남아있는 캐시로 인해 새로 배포된 브라우저 혹은 이미지 등이 반영되지 않고 이전의 캐시 상태를 바라보고있는 문제에 대해서 이를 해결하기 위..

쉼과 생각의 전환23년 12월부터 1월 중순까지 바쁜 일정과 야근에 너무 힘들었다. 그 시기에 나에게 어떤 테스트를 했는데, 그 테스트는 퇴근 후에 30분에서 1시간씩 꾸준히 어떤 노력을 하고 결과를 낼 수 있는가? 였다. 결과적으로 성공이었다. 이 테스트를 해본 이유는 내가 퇴근 후에 뭔가?를 꾸준하게 할 수 있는가가 궁금해서였다.ㅎ 추가적으로 성과평가표를 잘 작성하기 위해 서적과 영상을 보며 공부했다. 📚 서적 리스트 📚 - 요즘 직장 생존법 - 성과 관리 - 성과 코칭 워크북 2월에는 지친 몸을 회복하기 위해 쉬고 연말에 만나지 못했던 지인들과의 시간을 보냈다. 청첩장 모임을 가게 되었는데 이직을 잘한 지인을 보고 나의 현황을 돌아보며 경력 기술서와 프로젝트 회고를 작성하고 향후 커리어에 대한 고민..

project #6 : L**개발 자체는 어려운 것들은 없었고 내가 해보고 싶은 시도는 있었다. 시도해보고 싶었던 것들 - polling interval 방식에서 벗어나기 - 비지니스 로직을 완전히 분리하기1) polling interval 말고 react query를 사용해서 바꿨다.polling interval 수정에 관심이 무뎌졌을 때 팀원 중 한 분이 React-query를 적용해 놓은걸 보게 되었다. polling interval은 - 데이터의 양이 많거나 polling interval이 짧을 때 서버에 부하가 생길 수 있다. - 실시간성도 부족하다.개발시에 큰 문제점은 없었지만 구닥다리 기술 같아서 더 이상 쓰고 싶지 않았다. 팀원이 개발한 코드를 살펴보고 공부를 해보았다.   const ge..

트러블 슈팅 1) 다국어 지원 새로고침시 초기 셋팅 값으로 바뀌는 현상2) 로그인 구현의 어려움 3) remote components error  1) 다국어 지원 새로고침시 초기 셋팅 값으로 바뀌는 현상다국어 지원 코드는 구글링해보니 잘 나와있는 것들이 많아서 참고해서 개발했다. ➡️  참고한 다국어지원 코드 그림이 너무 허접하지만.. 흐름에 대한 설명!  header bar에 user 아이콘을 넣고 가까이 가면 menu가 내려온다. 한국어 또는 English를 클릭하면 ko, en 이 redux의 language 변수에 할당되도록 구현했다. 버튼을 클릭할 때마다 언어가 바뀌는 것을 확인할 수 있었다. 다만! 새로고침을 하면 language 변수에 할당한 값이 초기화되는 오류가 있었다. 로직상의 오류인..

플랫폼화 준비  project #1, #2, #3 이 끝난 후 이를 하나로 합쳐 보여 줄 수 있는 플랫폼을 위한 작업을 했다.   개발내용은?- project #1, #2, #3 을 하나의 프로젝트로 모으고 배포하는 것- SSO(Single Sign On)- 배포를 위한 Nginx, docker 스터디 - 화면을 embedded 하기 위한 iframe 트러블 슈팅 1) SSO 2) iframe 호출을 감지한 라우터 변경 1) SSO project 여러개를 하나의 인것 처럼 보이기 위해서 각각 프로젝트를 다른 포트에 배포 시켜놓고 matrix 프로젝트 페이지 하나하나에 iframe으로 link해서 불러오게 만들었다. 여기서 matrix 프로젝트에 로그인 한번만 하면 다른 프로젝트에서도 로그인 되어 있는 것..