캐나다 개발자

원래 댓글로 문의가 들어온 header freeze 기능을 먼저 했어야 하지만, 귀차니즘과 아직 우리 PM이 freeze해달라는 말이 없어서 미루고 미루다가 결국 다른 주제를 하게 되었습니다 😂 서버팀에서는 isSuccess 라는 필드에 boolean을 넣어서 보내주고 있었는데, PM이 isSuccess가 true면 Success를 false면 Failed라는 text로 엑셀에 뽑아달라고 하네요 😂 물론 제 컴포넌트에선 그냥 data array를 map으로 looping해서 뽑아주는거라 그 안에서 바꾸기는 힘들거 같고, 새 객체를 생성해서 주는 방법이 최선일거 같아서 어떻게 했는지 공유하려고 합니다. 일단은 아래처럼 데이터를 주고 있었고, 배열 데이터는 그냥 저렇게 바로 때려넣고 있었습니다 (변수로 관리..

4편 한 파일내에서 여러탭을 활용하기 입니다. 프로젝트 매니저가 또 찾아오더니 갑자기 자신은 지금처럼 여러개의 버튼으로 각 데이터를 추출하는 것도 필요하지만, 버튼 한개로 해당 페이지내의 모든 데이터들을 여러개의 탭으로 정리해서 한개의 파일로 받아보고 싶다고 합니다. 즉 우리가 하나의 웹 브라우저에서 탭 여러개 키듯이, 🆘 하나의 엑셀파일에서 여러개의 탭에 데이터를 여러개 정리하고 싶다고 합니다. 🔅 프로젝트 매니저가 원하는 것 중에 거절하며 돌려보내기엔 데이터 관리페이지에 실제로 엄청 필요한 기능입니다. 그래서 원래 만들었던 글로벌 엑셀 컴포넌트에 props로 멀티 데이터를 받아서 엑셀로 추출하는걸 해보려 합니다. 먼저 사용할 데이터는 원래 데이터 그대로 사용하겠습니다. 더보기 export const ..

3편 정렬하기 입니다. 잘못들어온 데이터가 아닌, 기본 구조를 변경해 달라는 요청은 자주 기각되기 때문에, 때로는 알아서 구조에 맞출 필요가 있습니다. 아무리 이 업계에서 오래된 사람이라도 모든 케이스들을 예상하기는 어렵기 때문에, 처음에 짠 구조와 다르게 데이터 필드가 추가되기도 삭제되기도 합니다. 또한 PM에 의해서 구조 전체가 뒤집힐 때도 많습니다. (🔅진짜 많음, 주니어 반박불가🔅) 물론 이런 다이나믹한 케이스들에도 유연하게 대처가 가능해야 합니다. 네 지금이 그런 케이스 라고 해보겠습니다. 먼저 우리 프로젝트 매니저는 정렬 순서를 이번주, 다음주, 다다음주 다 다르게 할거라 합니다. 즉, 정렬은 어차피 바뀔텐데, 매번 데이터를 일일이 작업할 수는 없으니, 아예 배열로 데이터 순서를 넣어두고, 그..

1편에 이어 오늘은 컴포넌트화하여 재사용성을 높이는 시간입니다. 프로그래밍을 배운 곳은 다양합니다. 누군가는 유명대학 전공출신이기도 하고, 누군가는 부트캠프에서 배우기도 하고, 또 누군가는 혼자 독학으로 공부했을지도 모릅니다. 출신은 모두 다를지라도, 되고싶은 궁극의 개발자는 어쩌면 단순 코드만 짜내는 노동자 코더가 아닌, 🔅 구조를 설계하며 효율적으로 코드들을 관리하는 프로그래머라고 생각합니다. 🔅 효율적인 코드 관리를 위해서라면 항상 재사용성을 염두에 두고 코딩을 하는게 좋습니다. 재사용성이란 단순히 하나의 컴포넌트를 여러군데서 글로벌하게 부를 수 있게 만드는걸 말합니다. 컴포넌트를 제작하면서 바로 글로벌하게 만드는건 어려울 수 있습니다. 단순한 컴포넌트를 두개 만들고, 두개의 공통된 필드를 비교하면..

프론트엔드 업무에서 가장 빈번하게 다루는 도구들 중에는 프린터기, 스캐너, 엑셀, PDF, Word 등이 있습니다. (저는 커머셔 회사의 IT 부서여서 더 빈번하게 다룹니다. 🤦‍♂️) 일반적으로 테이블 형태로 정리된 데이터는 매니지먼트 팀에서 엑셀로 추출하여 확인하길 원합니다. 이러한 엑셀 파일을 활용하여 보고서를 작성하거나 다양한 용도로 활용할 수 있습니다. 그래서 오늘은 React를 사용하여 엑셀 파일을 다루는 방법을 알아보려고 합니다. 라이브러리 사용법을 올리는 것에 대해 의문을 품으실 수 있지만, 공식 문서보다 좀 더 친절한 설명서를 제공하려고 합니다. (영어로만 된 문서도 있으니까요!) 단순히 코드만 공유하는 것뿐만 아니라, 잡다한 TMI(Too Much Information)도 함께 담을 예..