캐나다 개발자

주소창에 자꾸 없는 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)도 함께 담을 예..

1. 항해99를 진행하며 실제로 체감한 항해의 장/단점 - 항해의 장점은 처음 개발을 해보는사람들이 생각보다 빠르게 많은걸 가져갈 수 있는거 같다. - 항해의 단점은 짧은 시간동안 많은걸 해야하는데, 알려줄 사람은 없다. 알아서 해야한다. 위의 내용이 각각 장단점이라고 생각하는데, 단점이 어떻게 보면 장점이 될 수도 있다고 생각하는게, 구글링을 하면서 모르는걸 찾으면서 하다보면 어느새 구글링 잘 해서 내 코드를 쓰고 있던거 같다. 그렇다고 강의를 아예 제공안하는건 아니고 개발에 꼭 필요한 내용들을 강의로 제공해 준다. 그리고 장점이 하나 더있는데, 온라인으로 수업을 진행해서 거주 지역, 시간에 상관없이 언제든지 컴퓨터만 켜서 모일수 있는 것도 장점인거 같다. 2. 실전 프로젝트 (경험담) 프론트엔드를 담..

바쁨과 게으름이 합쳐지니 항해일지를 작성을 또 오랫동안 못했다. 실전도 무사히 끝났고, 우리팀도 다른팀들과 같이 많은 사람들의 응원가 호응을 받았다. 여러가지 일들이 있었고, 스트레스도 받고 재밌기도 했었지만 다 끝나고나니 아직 갈길이 멀구나 라는 생각밖에 들지 않았다. 새로운 프로젝트가 하나 시작되고, 실전프로젝트도 유지보수를 조금 더 하기로 해서 이제 역활분담을 또 할 시간이 다가오고있다. 한 팀의 리더로서 별볼일 없었겠지만, 믿고 자기 역활을 수행해준 분들께 모두 감사할 뿐이다 ㅎㅎ 팀사진은 없지만, 항해7기 A반사진을 한장 남겼다 ㅎㅎ. 그리고 우리 장발장팀도 항상 화이팅 했으면 좋겠다고 생각한다. 오늘부터는 블로깅도 다시 하려고 한다. 옛날 부정확했던 자료는 좀 버리고 새 자료로 덮어야지..

2주만에 항해일지를 작성한다. 이런저런 일이 있었지만, 14일동안 해낸건 1. 무한스크롤 2. 튜토리얼 3. Optimistic Update 4. 드랍다운(외부누르면 드랍다운 닫힘) 5. 스켈레톤 ui 이정도 뿐인거 같다. 정리도 해야하고, 블로그도 써야하는데 생각보다 시간이 남으니까 더 하기 싫어지는거 같다. 최근 상황은 실전프로젝트는 오늘 배포 테스트를 성공했다. 모바일 성능은 저번에 비해 7점정도 떨어졌지만, 바벨프리셋을 도입한 후 웹성능은 100점을 찍게 되었다. 모바일 성능을 어떻게 끌어올릴지는 아직 의문이다. 그 외에는 모바일 device detector를 사용하지 않고, 모바일 view를 뽑아냈다. - 모바일 성능 49점 / 웹 100점 - PWA 통과 - apk 테스트: 통과 테스트는 LD..

별 다른 일 없이, 실전프로젝트를 진행하고 있다. 실전 프로젝트는 곤감님하고 같이 프론트를 만드는데 별 다른 의견충돌도 없고, 서로 맡은 구역을 잘 해내고 있는거 같다. 현재 페이지별 완성도는 생각보다 높다고 생각하고 있고, 기능도 css도 많이 나왔다. 다만 몇몇 기능에서 내가 이걸 할 수 있을까 라는 생각이 많이 든다. 모각공 프로젝트는 현재 내가 맡은 view는 다 뽑았고, timer기능까지 끝났다. 서버측이 조금 더 보완되면 또 바로 들어갈 예정이지만, 모각공 프로젝트는 그래도 0근님이랑 같이 진행하고 있어서, 뭔가 내가 살짝 손을 놔도 아마 무사히 잘 돌아갈 거 같다. 산책 프로젝트는 현재 와이어프레임만 나와있고, 아직 시작은 안했지만 내가 맡은 역활이 너무 미비한거 같긴 하다. (원래 나에게 ..

큰일없이 실전 프로젝트, 그리고 사이드 프로젝트 중에 하나인 모각공만 하였던 3일이었다.