위어드섹터 공식 블로그

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

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

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

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

안녕하세요. 위어드섹터 하영매니저 입니다. (oﾟvﾟ)ノ 위어드섹터에 아주 좋은 소식이 생겼습니다. 바로 새로운 멤버들이 들어오게 되었어요!! 짝짝짝!! 오늘은 그분들을 소개해드리려고 합니다 :) 먼저 첫 번째 새로운 멤버는 위어드섹터의 비쥬얼담당 최명준 매니저님 입니다. Q1 안녕하세요 최명준 매니저님, 간단한 소개 부탁드릴게요 : D A1 안녕하세요 위어드섹터 개발팀에서 근무하고 있는 최명준 입니다. 삐삐 머리 전문가, 세월을 피하고 싶어도 피하지 못하는 소년 등등 주요 타이틀을 보유하고 있습니다! Q2 위어드섹터를 합류하시게 된 계기가 있을까요? A2 고등학교 졸업 후 대학이 아닌 취업을 선택했고, 현장에서 직장 생활해 왔기에 개발 업종과 다른 길을 걸어온 비전공자입니다. 오랜 세월 직장 생활하다 ..