위어드섹터 공식 블로그

안녕하세요. 위어드섹터 하영 매니저입니다! ='ω'= 고마움을 전하고 싶은 가정의 달 5월, 모두 잘 보내고 계신가요? 요즘 날씨가 정말 따듯해서 벌써 여름이 찾아오고 있는 것 같아요! 오늘 소개해 드릴 분은 위어드섹터의 로봇 안성모 개발자님입니다. Q1 안녕하세요 안성모 개발자님, 간단한 소개 부탁드릴게요 :-) A1 안녕하세요. 위어드섹터의 nomal한 프론트 개발자 안성모입니다. Q2 위어드섹터를 합류하시게된 계기가 있을까요? A2 이전 직장을 그만 두고 새롭게 개발자로 구직활동을 하다가, 위어드 섹터라는 회사를 찾게 되었어요. 위어드섹터라는 이름에서부터 다양한 것에 도전 해볼 수 있겠구나라는 생각이 들었고, 면접 때에도 이상할 정도로 면접자를 생각해주시는 대표님의 마인드에 감명받아서 위어드 섹터에..

HTML에서 script 태그로 분리한 javascript 파일(.js)을 가져올 때, script 태그를 선언한 위치와 비동기 속성 추가로 인해 결정되는 스크립트 실행 순서에 대해서 알아봤습니다. “script 태그에 defer 속성 사용을 권장한다.” 라는 이유와 차이점에 대해 정리해봤습니다. ## 문제 상황과 원인 테스트를 위해 새로운 HTML 문서에 분리한 javascript 코드를 호출했습니다. DOM 요소를 찾기 위해 메서드를 사용했지만 null이 반환되어 에러가 발생했습니다. head에 script 태그를 사용하여, DOM 객체 생성 전에 조작하려고 했기 때문에 발생한 문제였습니다. ## 해결 방법 1 : script 태그의 위치 변경 가장 쉬운 방법으로는 HTML 상단에 정의한 script..

구글 스프레드시트의 내용을 변경하면 자동으로 구글 폼에 연동되도록 하는 프로젝트를 맡아 진행하였습니다. 처음 해보는 것이라 아래 영상을 참고하여 먼저 어느 정도 감을 익힌 후, 실제 프로젝트에 맞게 코드를 수정했습니다. 스프레드시트의 내용을 변경하면 구글 폼에 실시간으로 연동되는 프로그램(스크립트 코드) 작성 이번 글에서는 위 링크의 영상에서 충분히 다루지 못했던 코드 설명을 위주로 글을 작성하겠습니다. 1. 구글 시트와 구글 폼 만들기 1-1 구글 계정에 로그인합니다 1-2 아래 이미지에서 빨간 박스로 표시된 아이콘을 클릭하여 시트와 폼을 만듭니다 2. 스프레드시트에 문제와 보기 작성 2-1 아래 이미지처럼 1행은 문제, 각 열은 문제에 해당하는 보기 옵션으로 적었습니다. 3. Apps Script 작..

Android application을 Google Play Console (https://play.google.com/intl/ko/console/about/ ) 에 업로드하기 위해선 배포하려는 어플리케이션의 설치 파일을 Google Play Console에 업로드해야 합니다. 오늘은 Flutter 프로젝트에서 aab 파일을 추출하는 방법을 적어보려 합니다. 다음은 aab 파일을 release 하기 위한 step 입니다. Step 1. 디지털 서명하기 기존에는 안드로이드 앱을 배포하기 위해 upload key와 signing key를 모두 개발자가 관리하고 서명했었습니다. 하지만 해당 키를 분실하면 두 번 다시 업데이트를 할 수 없는 문제가 발생했습니다. 문제를 보완하고자, 2017년 5월부터 signi..

진행 중인 데이터너겟 프로젝트에서 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" +..

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