| 애플리케이션 기능/서비스 설계 기능목록, 사용자 분석, 사이트 맵 애플리케이션 기능/서비스 설계에서는 "기능목록, 사용자 분석, 사이트 맵"을 작성해야 한다. 개발자의 품격에서 제공하는 영상을 먼저 학습한 후 진행하였다. 관련 영상은 다음과 같다. https://youtu.be/RYJtdnorzxE https://youtu.be/MCVgUSNyc8g https://youtu.be/odhNcgE1l4s 피드백에 대한 생각 이번에 우리 2팀은 멘토님으로부터 "지난주와 전혀 다른 팀이 되었다!"라는 평가를 받았다. 그 덕분에 지금도 자축하는 분위기이다. 사실 지난 벤치마킹 과정에서 준비와 발표를 그렇게까지 못했다고 생각하지는 않는다. 오히려 다양한 시도 중 하나라고 생각한다. 지난 3주의 모든 과정에서 우..

작년 말(2021년 12월)부터 기고하였던 책이 곧(2022년 5월 30일) 출간된다. 도서정보에 [그림 1]과 같이 "작가"로 소개되어 있어 묘하다! http://www.yes24.com/Product/Goods/109711067 개발자가 되기 위해 꼭 알아야 하는 IT 용어 - YES24 IT 개발자를 꿈꾸는 모든 사람들을 위한`진짜 초보 개발자를 위한 IT 용어집`IT 기업들의 성장에 따라 개발자는 어느덧 인기있는 직업이 되었다. 그리고 인정받는 개발자가 되기 위해, 전공자/비 www.yes24.com

| 이슈 고객사 정보를 서버 없이 로컬에서 text 파일을 이용해 영속적으로 관리하면 어떨까라는 생각을 해봤었다. 구글링 끝에 사용한 기술은 file-saver 모듈을 이용하는 것이다. 코드 작성과 테스트를 반복하면서 확장자를 txt로 하지 말고 json으로 하는 게 좋겠다고 생각했다. 작동 방식은 프로젝트가 실행되면 customers.json 파일을 로드하여 고객사 정보를 가져온다. 고객사 추가(또는 삭제) 기능을 수행하면 customers 객체에 변화가 발생한다. 변화된 customers 객체는 JSON.stringify로 변환되어 file-saver를 통해 기존의 customers.json 파일을 덮어 씌워 저장된다. 그런데 매번 고객사를 추가(또는 삭제)할 때마다 [그림 1]과 같이 탐색기가 뜬다..

모 테크 블로그의 게시글을 보고 있는데 내가 누르지도 않은-하트 모양-공감 버튼이 빨간색으로 변해 있었다. 공감 버튼을 클릭해서 빨간색을 없애고 새로 고침 해봤다. 그 직후 스크롤을 내려 공감 버튼을 관찰하였다. 아니나 다를까 몇 초 후 공감 버튼의 색이-자동으로-빨갛게 변했다. 소스보기로 코드를 살펴보니 setTimeout을 이용해 3초 후에 자동으로 공감 버튼을 클릭하는 코드가 존재했다. 그런 게 가능하다고? 이 게시글에 해당 코드를 붙여 놓았다. 눈을 크게 뜨고 스크롤을 내려 공감 버튼을 지켜보시라! 이런 발칙한 코드는 게시글을 평가하는-소중한-나의 권리를 빼앗아 버렸다. 웃고 넘어갈 문제라 치부할 수도 있겠지만 진지하게 바라보아야 할 일이다!

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 ☑ 조회 정보 페이징 ☑ Packing List 생성, 인쇄, xlsx 내보내기(모달): ☑ Packing List 생성, ☑ 인쇄, ☑ xlsx 내보내기 ☑ 스타일 작업(Bootstrap) | 이슈 npm의 print-js를 이용해 간단하게 Packing List modal을 출력하는 기능을 완성했다. 처음에는 어떤 모듈을 써야 할지 몰랐는데 조금만 검색해도 이거면 되겠구나 싶었다. https://www.npmjs.com/package/print-js print-js A tiny javascript library to..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 ☑ 조회 정보 페이징 □ Packing List 생성, 인쇄, xlsx 내보내기(모달): ☑ Packing List 생성, □ 인쇄, ☑ xlsx 내보내기 ☑ 스타일 작업(Bootstrap) | 이슈 input에 placeholder를 이용해 메시지를 넣을 수 있었다. 그런데 Bootstrap에서는 label을 placeholder 메시지처럼 표현할 수 있었다. [그림 1]의 메인화면과 [그림 2]의 고객사 관리 모달에 이 기능을 적극적으로 적용하였다. [그림 2]의 고객사 관리 모달에서 checkbox를 통해 체크된 ..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 ☑ 조회 정보 페이징 □ Packing List 생성, 인쇄, xlsx 내보내기(모달): ☑ Packing List 생성, □ 인쇄, ☑ xlsx 내보내기 □ 스타일 작업(Bootstrap) | 문제와 해결 해결된 문제 들은 대개 허무할 만큼 별거 아니다. 하지만 풀리지 않은 문제는 많은 시간을 고뇌하게 만든다. Packing List 생성 기능 구현 단계에서 제품의 전체 중량을 구하는 과제에 직면했을 때 엑셀에서는 sum함수를 쓰면 간단히 해결되는 문제인데 javascript에서는 이 같은 계산을 어떻게 해야 할지-처..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 □ 조회 정보 페이징 □ Packing List 생성, 출력, xlsx 내보내기(모달) □ 스타일 작업(Bootstrap) | 문제와 해결 data() { return { customers: [ { code: '001-00-00000', company: 'A사' }, { code: '002-00-00000', company: 'B사' }, { code: '003-00-00000', company: 'C사' } ], 위와 같이 customers 배열 안에 고객사 정보를 객체로 넣어 두었다. customers 배열의 요소(..