캐나다 개발자

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

프론트엔드의 입장에서 코딩을 하다보면, 정말 자주 마주하게 되는 에러중 하나는 Uncaught TypeError: Cannot read properties of undefined (reading 'users') 그리고 타입스크립트에서는 'inputRef.current' is possibly 'null'.ts(18047) 이렇게 두 종류가 있습니다 😫 결론부터 말하자면, 이 둘은 자바스크립트에서 제공되는 기능으로 처리하기가 아주 간단합니다 🤔 undefined의 경우에는 아래처럼 undefined가 들어올거 같은 데이터뒤에 ? 이 물음표 하나만 넣어주면 에러가 해결되고 allUsersAPI.data?.users?.map() 아래의 경우에는 data가 null일지도 모른다는 그 데이터 뒤에 ! 하나만 추가해..

1. 상황 firebase storage 이미지들을 가져와서 보여주고, 다운로드 버튼을 만들어 다운받으려는데 에러가 났습니다. 😅 더보기 서버리스로 시작한 프로젝트여서 클라이언트에서 해결해야한다.🤔 프록시설정에 실패했다.🤐 2. 해결방법 - google cloud cli를 통해 해결하기 설치 https://cloud.google.com/storage/docs/gsutil_install#windows 들어가서 windows/macOS 누르고 설치 (진짜 중요) google cloud cli는 파이썬 기반이라 파이썬이 필요합니다. 파이썬 설치 2023/6/6기준 3.9버젼 이상을 권유해서 그냥 3.9버젼으로 했습니다. https://www.python.org/downloads/release/python-39..

1. 컴포넌트 트리의 변경(자동 batch를 위해서) ReactDOM.render -> ReactDOM.createRoot 코딩애플님 유튜브에서 잘라왔는데, 이 부분은 정말 엄청 큰 매리트가 있어 보입니다. 2. 새로운 훅 useId - Dom을 위한 유니크 id를 만들어주는 훅 -> 어디에 쓸까 생각을 해봤는데, 유니크id가 항상 필요한 map함수내의 key값에 줘도 되겠다 라는 생각이 듭니다. function Checkbox() { // 이 id를 가진친구들은 유니크 아이디가 생긴다 const id = useId(); return ( Do you like React? ); } useTransition - 느린 컴포넌트 성능 향상 isLoading에는 startTransition이 처리중일때는 true..

주소창에 자꾸 없는 url 치는 사람들이 있습니다.🤦‍♂️ 정말 이해할 수는 없지만, 웹 페이지를 부수려는 사람은 생각보다 많습니다.. 대체로 부수는 방법: 데이터 빠르게 fetching 시도하기, url에 이것저것 입력하기, 오토마우스 등등.. 모든 경우를 처음부터 막는건 저같은 응애 주니어 한테는 아주 어렵지만, url로 이것저것 시도하는 부량배들은, 🚫 404 (page not found)를 보여주면서 아래 구글에서 가져온 예시처럼 디자인 해줄수도 있습니다. 리액트에서는 Route정보를 아래처럼 할 경우, 404 페이지들을 잡을 수 있습니다. 즉 내가 설정한 다른 Route url이 아닌 나머지 모든건 다 저 Error page가 열리게 됩니다. 에러페이지는 따로 디자인을 해서 위의 예제들처럼 보여..

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

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

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

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