위어드섹터 공식 블로그

진행 중인 데이터너겟 프로젝트에서 d3를 활용한 곡선 그래프를 구현해야 했습니다. canvas 안에서는 html 코드를 삽입할 수 없어서 d3의 rect 를 이용하여 구현해보려고 시도해보았습니다. 하지만 두 가지 난관에 부딪혔습니다. 첫번째는 디자인과 똑같이 한쪽의 border-radius를 만드는 과정이었습니다. 그 이유가 양쪽의 border-radius는 속성 값으로 쉽게 변경할 수 있는데, 한쪽만 주는 경우는 svg의 path로 직접 좌표로 그려주어야 했기 때문입니다. 그 예시가 다음과 같습니다. function rightRoundedRect(x, y, width, height, radius) { return "M" + x + "," + y + "h" + (width - radius) + "a" +..

Developing/프론트엔드 2022. 10. 28. 15:51

진행 중인 프로젝트에서 cohort 그래프의 tooptip의 위치를 마우스의 위치에 따라 변하게 하는 작업을 진행했습니다. 이때 다음과 같은 2가지 문제를 직면하게 되었습니다. 1. 화면 사이즈에 따라 cohort 분석 그래프의 크기가 변하면서 tooptip이 보여지는 위치가 상대적으로 다르게 보이는 문제가 발생했습니다. 2. 특정 사이즈가 되면 cohort 분석 그래프의 레이아웃이 변하면서 그래프의 크기가 커졌습니다. 이때 tooptip 의 위치를 전에 세팅해놓은 값으로 하였을 때 tooltip의 위치가 다르게 보이는 문제가 발생했습니다. 1번 문제에 대한 시도는 tooltip이 보여지는 위치가 cohort 그래프의 크기에 비례하게 거리를 조정하는 방안으로 문제를 해결했습니다. 아래는 그 코드 예시입니..

Developing/프론트엔드 2022. 10. 28. 15:47

이번 게시물은 JavaScript의 반복문을 이용해 삼각형을 구현 하려고 합니다. 단순해 보이면서 어려운 과정이지만 반복문의 기초와 구조를 이해함과 동시에 로직 구현에 있어 많은 동기부여를 받았고, 입사 후 첫 과제이기에 풀이 과정을 기록하려고 합니다. 구현 조건으로는 input 박스 안에 숫자를 넣고 버튼을 클릭하면 입력 숫자에 맞게 삼각형이 생성되어야 합니다. 반복문을 사용해서 구현했고, 반복문은 어떤 명령을 반복적으로 실행해야 할 때 사용되는 언어입니다. 아래 예시를 통해 확인을 해보도록 하겠습니다. for 문은 아래와 같은 순서로 진행됩니다. 가장 먼저 초기화 식인 let i = 0 이 실행되며 한 번만 실행됩니다. 초기화식이 종료되면 조건식이 실행되고 i = 0이므로 평가 결과는 true 입니다..

Developing/프론트엔드 2022. 7. 18. 19:19

진행 중인 프로젝트에서 펼쳐보기 버튼을 누르면 상세보기가 되고 생략 버튼을 누르면 생략이 되는 버튼을 컴포넌트가 추가될 때 자동으로 생성되는 것을 목표로 구현해보았습니다. 처음 시도에서는 컴포넌트를 보여주는 것을 관리하는 state를 각각 만들어서 독립적으로 관리하려고 했습니다. 하지만 그렇게 되면, 추가 버튼을 눌러서 컴포넌트를 새로 만들면 새롭게 변수를 만들어야 하는데, 변수를 자동 생성하는 게 쉽지 않았고 변수가 많아짐에 따라 코드의 가독성이 저하되고 유지 보수하는데 어려움이 있는 문제가 발생하였습니다. 이후, 컴포넌트를 보여주는 Boolean 값들을 가지는 배열을 state로 만들었습니다. 그렇게 함으로써 새롭게 컴포넌트를 만들 때, 배열에 값을 push를 해서 관리하기 용이하도록 하였습니다. 이..

Developing/프론트엔드 2022. 7. 18. 18:30

사용자 정보를 폼에서 입력받아 전송버튼을 클릭하면 입력받은 정보를 메일로 받도록 하는 작업을 진행했습니다. 이 작업을 위해 네이버의 Cloud Outbound Mailer API를 사용하였는데, 공식문서와 블로그를 참고해도 메일이 발송되지 않았습니다. 이번 글에는 Cloud Outbound Mailer API를 적용하는 방법 및 오류해결을 위해 제가 시도했던 방법을 공유해보려 합니다. 1. Cloud Outbound Mailer란? Cloud Outbound Mailer는 개인화 콘텐츠 메일을 빠르고 안정적으로 전송할 수 있는 서비스입니다. 알림, 정보, 마케팅 대량 메일을 UI를 통해서 쉽게 전송하거나 운영하고 있는 서비스에 연결해 전송할 수 있습니다. 또한 운영 중인 서비스에 Cloud Outboun..

Developing/백엔드 2022. 7. 8. 11:06

AJax(JQuery api)를 서버와 통신할 때 사용해보긴 했지만, 그 원리 및 통신의 과정을 몰랐습니다. 그래서 이 부분을 더 공부해보려고 AJax를 Vanilla JS로 구현해보았습니다. MDN 문서로 ajax와 관련된 문서를 찾아보니 아래의 과정을 거치는 것을 알게 되었습니다. 첫째로, XMLHttpRequest 라는 web api를 이용하여 통신의 위한 객체를 만듭니다. 둘째로, 클라이언트에서 아래의 a,b,c를 고려하여 서버에 요청을 보냅니다. a. 어떤 서버(도메인)와 연결하는가?, b. 어떤 http method를 이용하는가? (ex. GET, POST etc) c. 브라우저에서 서버에서 받을 문서를 해석할 준비를 할 수 있게끔 어떤 문서의 타입을 요구하는가? 출처: https://deve..

Developing 2022. 7. 5. 12:12

JavaScript 언어를 이용한 개발을 진행하다 보면 변수를 선언해 로직을 만들어 나아가야 하는 데 변수를 선언하는 방법으로 JavaScript 예약어의 키워드를 사용해 구성해야 합니다. 저 또한 키워드를 선택이 아닌 필수로 사용하지만 정확한 의미를 모르는 채 사용하고 있어서 검색을 통해 정확한 의미를 배우고자 기록하게 되었습니다. 그동안 변수를 선언하기 위해 var 키워드를 사용해 선언 했지만 많은 문제점이 발생했었습니다. 협업을 통한 개발을 하다 보면 여러 명이 작성한 코드를 토대로 개발을 진행하게 되는데 특정 오류가 발생이 되면 코드 전체를 확인해야 하거나 해당 영역을 작성한 개발자에게 물어봐야 하는 상황이 생기게 되었습니다. 오늘 게시물은 키워드의 종류와 차이를 공부하고자 하며 아래의 예시를 통..

Developing/프론트엔드 2022. 7. 5. 11:45