프론트엔드 작업 : 오랜만에 무너진 CSS와 반응형 조정

아오 테스트 했을때 잘 됬는데 왜 또 무너지고 난리야 ㅋㅋㅋㅋ scroll down, up 버튼을 추가했더니 휠이 안 돌아감 보니까 index.css의 body에 overflow hidden걸려있음 그래서 그냥 일단 내가 하는 css 에 바디 속성에 overflow-y : scroll 추가함 설마 다른 사람 코드 css 무너 트리지 않겠지…? 괜찮은 것 같음!   흠 && 조건을 걸어서 동일한 위치에 다운과 … Read more

프론트엔드 리액트 개발자 상사의 문제 해결법 고찰

하다하다 안되는게 있으면 미팅 때 상사가 봐준다. 문제를 어떻게 해결 하는가 했더니 공식 문서에 들어가서 뒤진다. 사례 코드를 본다 복붙하고 과감히 내 코드 주석처리하고 적용 해본다. payload 부터 모든 것을 다 콘솔에 찍어보고 개발자 도구 켜서 확인한다. 혹은 이전에 개발 되어 있는 다른 대시보드의 코드를 보고 한번 적용해본다. 나는 보면 과감히 적용하는게 잘 안된다. 기존 … Read more

react-i18next 다국어 적용

react-i18next 다국어 적용을 해보고자 한다. 기존 프로젝트는 react-intl 을 사용했는데 지금 내가 맡은 GS 프로젝트는 외롭게 쓸쓸하게 나 혼자 하는거라서 나에게 조금 더 편할 것 같은 라이브러리를 사용하고자 react-i18next 를 선정하게 되었다. 처음에는 기존에 상사가 했던 것 처럼 내가 번역해서 obeject의 key와 value 값으로 넣을까 고민했지만, 나중에 계속 이렇게 하다보면 번거로울 것 같아서 위의 라이브러리를 … Read more

3월 프론트엔드 리액트 개발자 프로젝트 일정

FreeAudit 페이지가 끝나자마자 바로 투입된 ㅠㅠ GS Dashboard certificate 프로젝트 (휴가 다녀와서 못 쉼 주의…) FreeAudit은 상사가 만들어 놓은 틀에 내가 들어가서 만들면 되는거라 참 편했는데, GS Dashboard는 모든 걸 나 혼자 해야 해서 좀 막막하기도 하고 좀 편하기도 하고… 참고로 GS꺼는 RTK 사용함..! 근데 내가 입사하자 마자 쓴 코드 들이라서,,,, 로직이랑 코드가 개 더럽고…. … Read more

프론트엔드 똑같은 api, method의 데이터 처리

똑같은 api, method의 데이터 처리 난관에 봉착 애초에 보니까 reducer의 initial state부터 정리를 잘 못했다. 케이스를 따로 나눴어야 하는데, 한 번에 받다 보니까, selector로 뿌린 메세지가 여기서 적용된 게 저기서도 적용되고, 또 그 조건을 적용해서 렌더링 하는  UI가 무너지고 조금 힘들었음. 요새 스트레스 받는지? 긴장을 풀려고 자꾸 껌을 씹는데 턱이 네모가 될 것 같다. ㅋㅋ … Read more

2월 3월 프론트엔드 리액트 개발자 프로젝트 일정

2월 Feedback 받은 Leaflet Offline Map 2월에는 Leaflet Offline map 과 각 테이블과 Map의 Marker 및 pop up을 연결시키는 유지 보수 + 신기능 추가 작업을 완료했고 Test를 받았으며, 오늘 피드백을 받았다. 새로운 변수를 사용하지 말고 에러 핸들링과 로딩 처리를 하라고 지시. 그리고 yarn 이나 package json으로 뭔가 받았는데 리드미에 업데이트 하지말고 올리는 ticket에 써 놓으라고 … Read more

Leaflet Offline Map – React

상사가 준 또 다른 task 기존 Leaflet에 오프라인 시에도 map tileLayers 가 보이게 해달라~! 그간 정신이 좀 딴 데 팔려있어서, research를 잘 못하고 있었다. 다시 온전히 집중하면서 stackoverflow, chatgpt, git을 통해 찾은 자료!   1. 직면한 문제점 : 현재 node version: 15.0.1 그리고 yarn 을 사용하므로 npm을 통해서 leaflet.offline을 받을 수가 없었다. 그래서 stackoverflow롤 통해서 … Read more

프론트엔드 개발자의 프로젝트 월 별 정리

지금까지 해온 작업 정리 9월~ 11월 : GS 대시보드 UI, UX, 반응형 Recharts, Luxon, MUI, Leaflet map 등을 활용하여 실시간 데이터 뿌리기 Login, Logout <- 재정리 필요 CRUD for Admin Password Reset Redux ToolKit 사용 <- 코드 정리 필요.. 개더럽. 11 ~ 12월 : GS Caltex 내곡점 GS color pallete 를 활용한 전광판 UI, UX … Read more

비전공자 프론트엔드 리액트 개발자의 4개월차 후기

너무 오랜만에 글을 쓰는군요..! 4개월차 생존 보고를 올립니다. ㅎㅎ   1.긴장감이 살짝 사라졌다. 항상 출근할때 어깨에 곰 백마리가 얹혀져 있는 것 같았는데, 그리고 일 외에는 카톡 확인 할 시간도 없었는데, 요새는 조금 여유로워졌다. 마음이 조금은 수월해졌다고 해야하나. 좋은것 같기도 하고 집중력이 가끔 떨어질 때가 있어서 좋지 않은것 같기도 하고. 그래서 회사 피씨에 있는 카카오톡을 삭제했다. … Read more

React Redux Toolkit Login Authentication 로그인 완료

신규 프로젝트 대시 보드의 모든 것을 내가 맡게 되었다..! 면접 볼때 질문이 있냐는 말에, “혹시 프론트엔드는 몇 명이니?” “지금 면접보는 사람이 프론트 리드이고 너랑 프론트 리드 둘이야.. ” 라고 했다. “혹시 그럼 나는 어떤 작업을 하게 돼?” “신규 프로젝트의 대시보드를 프론트 리드랑 함께 할 꺼 야… ” 함 께 할 꺼 야… 가 아니고 내가 … Read more