위어드섹터 공식 블로그

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

Developing/HTML 2023. 5. 10. 01:27

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

Developing/App 2022. 11. 14. 18:25

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..

Developing/App 2022. 11. 1. 16:29

최근 프로젝트를 진행하면서 Flutter iOS 앱으로 통해 사용자가 어떤 버튼을 클릭했는지 확인하기 위해 Facebook SDK 설치 후 테스트를 진행했습니다. 기업 입장에서는 사용자가 어떤 버튼을 많이 클릭했고, 어느 분야를 좋아하는지 알고 싶지만 기본 기능으로는 확인할 수 없기 때문에 Facebook SDK를 활용해서 그 방법을 적어보려고 합니다. 페이스북 SDK iOS 가이드 같은 경우 네이티브 기준이기 때문에 외부 플러그인을 사용해야 합니다. 사용자가 어떤 버튼을 클릭했는지 확인하기 위해서는 페이스북 SDK 플러그인과 페이스북 개발자 계정이 있어야 합니다. facebook_app_events 플러그인 : (https://pub.dev/packages/facebook_app_events) Meta..

Developing/App 2022. 11. 1. 16:19

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

firebase에 앱 연동을 하던 중, SHA 인증서를 입력하는 부분이 있었다. firebase 에서는 선택사항이었으나, 나는 Google Play Console에 올려야 하기 때문에 필수사항으로 입력해야 했다. 이번 글에서는 android studio와 cmd 에서 SHA 확인하는 방법을 기록하겠다. 1. android studio 1-1. 안드로이드 스튜디오에서 우측의 코끼리 아이콘(초록색 박스)을 누른다. 만약 코끼리 아이콘이 없으면? ** 제일 우측에 Gradle(빨간색 박스)이라고 되어있는 것을 누른다 ** View - Tool Windows - Gradle 을 누른다 1-2. gradle signingReport 입력 1-3. 하단 Run 부분에서 결과가 나온다 2. cmd 2-1. cmd 를..

Developing/App 2022. 10. 18. 14:38

데이터를 저장하는 방법은 크게 2가지가 있습니다(레지스터, 캐시 제외). 주기억장치(RAM, ROM)에 저장하는 방법과 보조기억장치(HDD, SSD)에 저장하는 방법이 있습니다. 주기억장치 중에서 RAM은 CPU의 연산 작업을 하기 위한 작업공간으로 프로세스가 끝나게 되면 데이터가 휘발되는 특성이 있습니다. ROM은 전원이 끊어져도 데이터를 저장하고 읽을 수 있지만, 데이터가 수정이 안 되는 특성이 있습니다. 따라서 데이터를 수정할 수 있고, 많은 양의 데이터를 물리적으로 보관하고 싶다면 보조기억장치에 저장하면 되는데 오늘 그 방법에 대해 알아보겠습니다. 출처: https://mindstation.tistory.com/152 PHP 언어에서 DB에 데이터를 넣어보겠습니다. 먼저 php와 mysql를 연결..

Developing/백엔드 2022. 10. 18. 14:26