crabLab

현재 존재하는 차트 관련 라이브러리들은 여러개가 있지만 그 중에서 제일 인기가 많고 또 레퍼런스도 많으며 무엇보다 공식문서가 잘 정리되어 있는 chart.js를 사용하기로 했다. 특징 CANVAS 베이스로 빠른 렌더링 오픈소스 무료 제공이지만 지속적인 유지보수와 새로운 버전 출시 초보자도 쉽게 사용할 수 있을정도로 잘 정리된 문서 정말 작은 라이브러리 용량 (713 byte) 매우 적은 메모리 사용 사용 방식 내가 사용한 chart.js의 방식은 컴포넌트 내부에 chart 컴포넌트들을 따로 만들고 그 컴포넌트에 필요한 정보들(labels, data)들을 props로 전달해 렌더링하는 방식이다. 여기서 labels는 가로축, data는 세로축을 의미한다. 나의 경우 각 이벤트 마다 서버로부터 데이터를 받는..

이벤트 수정시 쿠폰의 경우는 등록보다 훨씬 복잡하다. 저장된 쿠폰 읽기 저장된 쿠폰 수정하기 새로운 쿠폰 저장하기 저장된 새로운 쿠폰 수정하기 쿠폰 삭제하기를 고려해야한다. 그리고 각 경우마다 date의 형태가 다 다르다. 거기다 수정과 읽기를 오갈때마다 date의 형식을 바꿔주는데 이때 비동기와 연관되어 비동기 통신, 형식 바꾸기, 바로 렌더링하기의 순서를 맞춰주는것이 나에게는 꽤나 힘든과정이었다. 전에 썼던것을 다시 인용해보면 이 부분이 어려웠던 이유는 날짜의 형식이 tz, date, 문자열(YYYY-MM-DD HH:mm)이 계속해서 바뀌었고 이 바뀐 데이터를 바로 유저에게 렌더링해서 보여줘야 했는데 이 부분이 useEffect와 useState의 깊숙한 부분을 건드리며 각각의 순간들(저장된 쿠폰 읽..

날짜를 읽어올때(with TZ) 이렇게 서버로 보내준 날짜는 읽을 때 tz형식으로 들어온다. tz는 timezone의 약자로 YYYY-MM-DDTHH:mm:ss.00Z 2023-02-12T16:00:00.000Z 이런 형태이다. 이렇게 읽어온 데이터는 이벤트 목록에서 이벤트 수정에서 두 번 쓰이게 된다. 여기서의 문제는 한국의 시간은 GMT+09:00인데 서버에서 데이터베이스에 한국 표준시(GMT+09:00)를 insert해도 GMT로 insert 된다는 점이다. 따라서 프론트에서 나라에 맞는 시간으로 변경하여 표시해야 한다. 이 말뜻은 프론트에서 3시로 보내고 서버도 3시로 보내지만 막상 moment를 이용해 date객체로 만들면 서버로부터 받은 데이터는 (+9)되어 12시가 된다. 이벤트 목록의 경우..

추가로 disabled 속성 응용 공식문서에도 적혀 있지만 disabled속성이 있다. 이 속성은 true일때 이 input을 비활성화하는 것인데 이 기능을 이용하면 날짜가 정해지기 전에 시간을 먼저 정하는 것을 방지할 수 있다. 그래야 하는 이유는 datepicker는 원래부터가 과거도 선택할 수 있게 되어 있고 나의 경우 기획상 날짜가 당일 날짜일때만 현재시간보다 이전 시간을 선택하지 못하게 해야한다. 이 부분을 datepicker의 자체기능을 찾고 구현하기에는 시간의 소요가 많이 걸릴 것으로 예상되었다. 처음에는 어떻게 해야할까 많은 삽질을 했지만 삼항연산자의 중요성과 활용도를 점점 느끼면서 이번에도 같은 방법으로 해결하게 되었다. 여기까지 오기에 많은 경험이 있었지만 결과는 사실 단순하다. dis..

요구 사항들이 다 정리가 되었기에 우선 이 날짜 기능을 어떻게 구현할지를 정해야 했다. 직접 구현할 것인지 아니면 라이브러리를 쓸 것 인지 전에 패x에서 달력을 바닐라 자바스크립트로 만드는 강의를 본 기억이 있었지만 그 강의는 단순히 달력기능까지만 나왔으며 이번에는 복잡하게 날짜 데이터들을 가공해야하며 무엇보다 시간제한이 걸려있기에(없었다면 바닐라 자바스크립트로 했었을 것 같다.. 실력향상에도 좋고 확장성도 좋고) 라이브러리를 선택하기로 했다. 라이브러리는 크게 react-calendar 와 react-datepicker가 있었는데 나는 react-datepicker의 레퍼런스 코드가 어느정도 있음 공식사이트의 설명이 직관적임 의 이유로 react-datepicker를 사용하기로 결정했다. 순서대로 구현..

개발자로써 갖춰야 할 역량 흔히 업무에 필요한 역량을 말할 때 업무를 수행하는데 필요한 지식과 기술을 의미하는 “하드 스킬”과 업무 효율성을 극대화 하기 필요한 능력인 **“소프트 스킬"**로 구분지어서 말하곤 한다. 기술적인 역량은 개발자의 핵심이 되는 역량이므로 “하드 스킬” 이라고 할 수 있다. 개발 능력 외에 커뮤니케이션 능력, 소통 능력, 협업 능력, 팀워크를 강조하는 경우가 많습니다. 이러한 것들이 개발자로서 갖춰야 할 **“소프트 스킬”**이라고 할 수 있다. 일반적으로 개발자는 구두로 하는 소통보다는 문서로 하는 비동기적 소통을 더 많이 하고 선호한다. 문서라는 단어를 들었을때는 일반적으로 구글 시트, PDF, PPT, 노션 등의 툴을 떠올릴 수도 있다. 하지만 개발자가 주로 작성하는 문서..

기업과제에서 채용담당자가 무엇을 중점적으로 보는지에 대해 강의를 들었다. 과제에서 파악하고자 하는 것에는 다음과 같은 사항들이 있다. 기본적인 형태의 서비스를 만들 수 있는가? 코드 스타일은 어떤가? 프로젝트 구조를 어떻게 설계했는가? 과제를 수행하는 기본적인 태도는 어떤가? README는 잘 작성되었는가? Git은 잘 활용되었는가? 사실상 위의 것들이 이번 포스팅에 핵심이 되는 부분들인데 좀 더 자세히 들어가보자. 기업의 관점에서 채용 과제 기업에게 채용은 중요한 일이다. 왜냐하면 채용에 있어서 만약 안좋은 사람을 뽑게 된다면 그 사람 한명이 제 역할을 못하는 것 뿐만 아니라, 주위의 다른 팀원들에게도 부정적인 영향을 주고, 최악의 경우에는 기존에 있던 좋은 사람들이 퇴사하게 되는 원인이 되기 때문이다..

달력기능이 추가된 게시판이다. 이번에 이 기능을 만들면서 그리고 이 글을 쓰는 와중에도 끊임없이 계속 버그를 픽스하는데 꽤나 요구사항과 기능들이 복잡했기 때문이다.(라이브러리를 써서 그런 것 일지도 모른다..) 우선 요구사항만으로 이번 포스팅을 마무리 해본다. 요구사항 게시판을 만든다. 게시판에는 이벤트들이 목록으로 나오고, 각 이벤트에는 날짜가 지정되어 있다. YYYY-MM-DD HH:mm AM - HH:mm AM 이벤트를 등록할 수 있는데 이 게시판은 달력을 이용해 날짜를 지정해야 한다. input창 3개 1개는 클릭하면 달력이 나와야한다. 2개는 시간이 나와야한다. 처음에 날짜를 오늘로 했다면 처음 시간 input에는 현재시간 이전은 선택하면 안된다. 시작시간을 정하기전에는 끝시간을 정할 수 없으며..

(1) 지원하고 싶은 참가기업은 어디인지 제가 지원하고 싶은 참가기업은 주식회사 스위치원입니다. 여행을 갈 때 혹은 주식투자를 할때마다 환전과 환율에 대한 어려움은 매번 존재했었습니다. 그래서 평소 환전에 대한 관심이 있었습니다. 그런와중에 원티드 프리온보딩 인턴십을 알게되었고 참여기업중 스위치원을 알게 되었습니다. 환전과 환율에 관심이 있던 저에게 회사의 비전인 가장 쉽고 투명한 외환 서비스를 모두에게 제공한다는 점은 매우 매력적으로 다가왔습니다. 업무를 진행함에 있어 회사의 프로덕트와 자신의 관심사가 일치할 때의 시너지를 알기에 스위치원에 지원하고 싶습니다. (2) 프리온보딩 인턴십에서 본인이 얻고 싶은 것 구직중인 주니어 경력자이자 부트캠프 수료자로써 이제는 프론트엔드와 관련하여 적지 않은 학습을 ..

서브도메인을 하는 이유 example.com이라는 하나의 서비스 도메인을 가지고, 개발과 운영으로 분리된 AWS 계정에서 각각의 Route 53으로 도메인을 관리하기 위해서는 하위 도메인을 위임해야 한다. 이때, 필요한 것은 네임 서버 설정이다. 이를 통해 해당 도메인이 어떤 호스트 영역에서 관리되는지 확인이 가능하다. 하위 도메인 위임에 대해서, DNS 동작 원리와 연관 지어 알아보도록 하자. 도메인 규칙 필자는 이번 포스팅에서, 하나의 메인 도메인 southouse.com을 발급받았다고 가정하고 진행한다. 개발 환경은 *.dev.southouse.com이라는 규칙을 가지고 서비스에 따라 app.dev.southouse.com 등으로 지정하고, 이를 개발 도메인이라고 부르기로 했다. 운영 환경은 *.s..