jh.nrtv

서비스를 개선하는 작업에서 '관세/ 소비세'를 도입하는 작업을 진행했다. 결제에 전에 없던 요소가 생긴 것이기 때문에 서비스 내 판매가 일어난 데이터를 보여주는 결제 상세 화면이 수정이 필요했다. 당연히 가격을 다루는 여러 데이터를 계산해서 보여주는 로직도 함께 변경됐다.  프론트 어드민에서는 코드 특성 상 데이터를 가공해서 화면에 표시하는 경우가 많다.이번에도 당연히 그런 줄 알고 데이터를 임의로 계산 및 가공해서 화면에 표시했다.  그런데 그 결과로 계산이 잘못되어 이상한 결제가격이 화면에 보이는 오류가 확인됐다. ㅠㅠ  이에 오류에 대해서 회의 중에 잠깐 논하는 과정이 있었는데  시니어 개발자분께 '데이터를 임의 로 조작하는 것을 조심하라'는 피드백을 받았다.  서버에서 보내준 값은 정확했으나 프론..

개요현재 회사에서 만들고 있는 서비스는 4가지 마켓을 대응해야 한다. 기존 우리 서비스는 일본, 한국 등의 정수 가격만을 핸들링 하면 됐으나 해당 서비스를 개선 및 확장하는 과정에서 중국의 위안, 미국의 달러 소수점 가격이 보편적인 화폐를 대응하기 위해서 기능 개발을 진행했다. 크게 개발한 것은 두 가지이다. 1. 원하는 자릿수 제한된 소수 input 대응2. 수학 산식을 통해 나온 무한소수 원하는 자릿수 미만 처리  2번 개발의 경우 우리는 특정 계산(예를 들어 할인율 등)으로 인해서 소수점이 길어질 경우 (1.599999...) 플랫폼 공통 정책으로 반올림, 내림 등을 강제하지 않는다.소수점 몇 번째 자리까지 남길 것인지(ex.1, 0.1, 0.01... ), 해당 소수점 이하는 반올림, 올림, 내림..

어느덧 개발자로 커리어를 시작한 지 6개월이 흘렀다.  간단하게 회고를 남겨보고자 한다.    나는 어떤 개발자일까?내가 지난 6개월동안 생각하는 '나'라는 개발자는 다음과 같다.장점1. 소통, 협업 등에 능하다.2. 서비스의 맥락을 파악하면서 일하려고 한다.3. 눈치로 코드를 파악하고 일감을 쳐내기 때문에 생각보다 빠르게 일을 배우고, 빠르게 일감을 처리한다. 1번 장점은 지난 6개월 동안에 내가 회사에서 들었던 긍정적인 피드백이다.질문은 문제상황이 잘 드러나도록 깔끔하게 드리려고 노력했고,도움 요청은 먼저 스스로 열심히 고민해보고도 꼭 필요하다면 다들 바쁘시기에 기분 나쁘지 않게 정중히 드리려고 노력했다.이는 개발자로서만 국한된 것이 아니라 지금까지 다른 일을 하면서도 항상 그랬고 그것을 좋게 평가해..

오늘의 반성: 문제를 명확하게 이해하고 해결하는 개발자가 되자.  얼마 전에 바쁘게 일감을 하고있는데 PM님께 슬랙으로 알림이 왔다. 요구조건은 다음과 같다. 사내 에디터에서 url 이미지 등록 기능에서 [입력]버튼을 누르면 이미지의 url 중xxx.xxx.xxx가 들어오면 yyy.yyy.yyy로 바꿔주세요! 지금 하고 계신 일감 끝나면 바로 들어가주세요!  이렇게 나를 언급하면서 들어오는 일감의 경우에는 보통 급한 일감인 경우가 많기 때문에 많은 생각을 하지 않았다.그저 이를 구현할 수 있는 방법이 뭘까를 가장 먼저 고민했다.  그 과정에서 회사에서 만들고, 여러 프로젝트에 사용하고 있는 공용 ui kit를 수정해야 더 효율적으로 일감을 구현할 수 있다고 판단했다. 즉시 팀 리드께 슬랙을 드렸다."~~..

- 들어가며프론트엔드 개발을 하면 정말 여러 데이터를 받고, 조작하여 화면에 표시한다.이 과정에서 여러 성격의 데이터가 섞이는 경험을 할 수 있는데,데이터의 목적과 성격이 정 반대인 경우에도 그것들을 혼용해서 사용하는 경우가 있다. 최근 사내 여러 프로젝트들에서 프론트엔드 라우터를 개선하는 작업이 많이 이루어졌다.이 과정에서 팀원분들과 CTO님과 의견을 나누었고, 혼자서는 생각하지 못했을 여러 깨달음을 얻을 수 있었다.그 과정에서 배운 것들을 공유하고자 한다. - 상황기술: vue-routerhttps://v3.router.vuejs.org/kr/guide/essentials/named-routes.html 이름을 가지는 라우트 | Vue Router이름을 가지는 라우트 때로는 라우트에 연결하거나 탐색을..

들어가며 코드리뷰 시간에 팀 리드분께서 전역 객체에 대해서 살짝 말씀해 주셔서 이번 기회에 정리하고자 한다. 전역객체란? 전역객체 : 모든 요소들이 소속된 객체로, 최상위에 존재하기 때문에 어디서든 접근이 가능하다. JS는 소스코드를 실행하기 전에 최상위에 위치한 전역객체를 만든다. 전역객체는 전체 코드에서 단 한개만 존재할 수 있으며 constructor가 없기에 새로 생성할 수 없다. 또한 실행 환경에 따라서 달라진다. 예를 들어 브라우저라면 window, node라면 global이다. 전역 객체는 전역 스코프를 가진다. 전역객체는 자식 객체를 사용할 때 생략할 수 있다. 예를 들어 아래 두 객체는 동일하게 동작한다. window.document document 우리가 매우 익숙하게 사용하는 aler..

✅ 들어가며 최근에 알고리즘 문제풀이 언어를 Python에서 JavaScript로 변경했다. JS 대신에 Py를 코테 언어로 사용해본 결과 느낀 장점은 다음과 같다. - 문제 해결을 위한 방법론에만 집중하고, 세세한 구현은 내장 모듈을 활용하고 간결한 문법구조로 구현할 수 있었기 때문에 더 빠르게 다양한 문제를 풀고, 알고리즘 문제풀이 전체에 대한 감을 빠르게 쌓을 수 있었다. 하지만 알고리즘 스터디를 통해서 다른 언어를 사용하는 팀원들과 답안을 교환해본 결과, 답안의 길이나 문제 풀이 소요시간에서 분명한 차이가 있음을 확인할 수 있었다. 따라서 JS를 주요 언어로 사용하는 입장에서 Python을 활용한 문제풀이가 진짜 내 실력이 아니라고 느꼈고, JS로 동일한 수준의 실력을 쌓아야겠다고 마음먹었으며 J..

✅ 들어가며 React를 더 심도있게 공부하기 위한 방법을 고민하다보니 직접 React의 여러 hook을 구현해 보는 것이 효과적일 것이라는 생각이 들었다. 먼저 리액트의 훅 중에서 가장 유명하고 특징적인 useState를 구현해보고자 한다. 사실 useState의 구조와 사용법은 간단하기 때문에 쉽게 가능할것이라 생각했으나 큰 오산이었다... ㅠ 라이브러리나 프레임워크가 아닌 html와 js만을 사용한 프로그래밍은 익숙하지 않기도 하거니와, event listener가 중복해서 추가된다던가 의도치 않게 재실행 된다던가 하는 수 많은 시행착오가 있었기에 시간도 매우매우 많이 걸렸다. 그래도 감사하게도 먼저 구현하시고 그 과정을 공유하신 분( 개발자 황준일 님 )들이 많이 계시기에 해당 자료들을 참고하고,..

✅ 들어가며 알고리즘 스터디를 하면서 내가 Array등의 자료형을 순회할 때 for, while, map등과 같은 전형적인 방법만을 사용한다는 것을 발견했다. 물론 다양한 방법을 구사하지 않아도 알고리즘 문제에서는 동일한 시간복잡도로 내가 원하는 방향을 구현할 수 있다면 상관없다. 하지만 협업의 상황에서는 여러 사람들이 다양하고 간결한 메서드 사용을 선호하며 이는 가독성 향상에 긍정적이다. 때문에 각 메서드를 이해하고 정리해서 친숙해질 필요가 있겠다고 느꼈다. 주요 메서드를 정리하고 간략한 예시를 제시한다. 🔸 arr.map 각 배열 요소에 대해 작업 수행해서 새 배열을 반환한다. 기존 배열은 바꾸지 않는다. 매개변수 중 currentValue 는 필수이나, 나머지는 옵셔널하다. //구문 arr.map(..

✅ 들어가며 오늘은 매우 친근한 자료구조 형태인 해시 테이블에 대해서 정리하고자 한다. ✅ 해시 테이블이란? 해시란 key- value 쌍의 데이터 형태를 가진 자료구조이다. 기본적으로 Python의 dictionary , JavaScript의 Object 와 형태가 유사하다. 해시의 특징 및 장점 중 하나는 키를 통해서 즉시 value에 접근할 수 있기 때문에 저장,삭제,검색 의 시간복잡도가 전부 O(1)이다. 여기서 key를 입력받으면 value를 어디에 보관해야 하는지에 대한 고민이 생긴다. 🔸 직접 주소화 테이블? 말 그대로 k를 그대로 주소로 사용하는 방법이다. 다만 key가 순서대로 존재하지 않고 1, 100, 9999 와 같은 경우 메모리 낭비가 심하며 key가 문자열인 경우 사용할 수 없기..