개요안녕하세요. 웹 프론트엔드 개발자 설탕시럽입니다. 이번 글에서는 Intersection Observer를 활용하여, 사용자의 화면을 기준으로 컴포넌트에 변화를 주는 방법에 대해 소개해드리려고 합니다. scrollEvent를 활용한 방식이 아닌 Intersection Observer를 활용하여, 스크롤이 기준이 아닌 유저가 보는 화면을 기준으로 UI를 수정할 수 있는 방식입니다. 요구사항여러개의 아티클 Item이 세로 스크롤로 나열되어 있습니다.유저에게 잡히는 메인 Item은 투명도 조절 없이, 그 외 Item은 불투명하게 화면에 표현하여 메인 아티클을 강요합니다.위와 같은 요구사항을 만족시키기 위한 방법으로 Lazy Loading에 많이 활용되는 Intersection Observer를 활용하면 좋을..

문제프로그래머스 코딩테스트 연습 : [Level 1] 기사단원의 무기  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n ** log n)소요 시간: 20분  코드function getDivisor(number) { if(number === 1) return 1; let min = 1; let max = Math.sqrt(number); let count = 0; while(min limit) { result += power; } else { result += weapon; } } return result;}  회고sqrt 함수명 기억..

문제프로그래머스 코딩테스트 연습 : [Level 1] 명예의 전당 (1)  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: Array시간 복잡도: O(n ** 2)소요 시간: 30분  코드function solution(k, score) { let hallOfFamers = []; let result = []; for (index in score) { if(hallOfFamers.length cur - next); if(hallOfFamers[0] cur - next); result.push(hallOfFamers[0]) } return result;}  회고더 나은 풀이법에 대한 고민 중.. 배열에 넣고..

문제프로그래머스 코딩테스트 연습 : [Level 1] 문자열 나누기  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: -시간 복잡도: O(n)소요 시간: 15분  코드function solution(s) { let flag = s[0]; let count = 0; let flagCount = 0; let otherCount = 0; for(index in s) { if(s[index] === flag) { flagCount = flagCount + 1; } else { otherCount = otherCount + 1; } if(flagCou..

23년 11월 24일 ~ 25일 무박 2일간 진행되는 부경대 해커톤에 멘토이자 심사위원으로 초대받아 기쁜 마음으로 참석하고 온 회고입니다. 이전까지 해커톤에 작품을 내기만 했지, 심사와 멘토링을 하는 경험은 처음이라 1박 2일간 그리고 초대를 제안받았을 때부터 들은 고민과 경험을 공유하고자 합니다. 멘토링은 어디까지..? 독특하다면 독특하게도, 심사 기준표는 받지 못한체 심사 전날 자유롭게 팀 멘토링을 진행했습니다. 제 분야인 웹 프론트엔드 뿐 아니라, 기획과 심지어 백엔드와 관련된 부분까지 질문이 들어오면 아는 선에서 도와줬고 피드백을 드렸습니다. 고민되던 부분은 어디까지 설명을 해드려야 되는가 였습니다. 다음날 심사해야 되는데 코드를 제가 다 고치거나 설명드릴 수 도 없는 노릇이고, 들어오는 질문에 ..

개요 지금까지, 몇 만개 가량의 수치 데이터를 표현하기 위한 화면을 설계하고 프로시저와 트리거를 이용해 통계 테이블을 만들었습니다. 이제 화면에 구현을 해보려고하고 그래프를 구현하기 위한 라이브러리로 Google Charts를 선택했습니다. 구글 차트를 선택한 이유 그래프를 그리기위해 우선 관련 라이브러리 리서치를 했습니다. 정말 다양한 라이브러리가 있었고 그 중 Chart.js 와 Google Chart 두가지 라이브러리 중에서 고민하고 Google Chart를 선택한 이유에 대해서 말씀 드리겠습니다. 우선 Chart.js 입니다. CANVAS 베이스로 빠른 렌더링 속도를 가지고 있습니다. 작은 라이브러리 용량과 공식문서 가이드만 봐도 쉽고 간단하게 그래프를 그릴 수 있다는 점이 가장 큰 메력이었습니다..

개요 이전 포스트에서 많은 수치 데이터를 담은 화면을 설계했었습니다. 5분 단위로 하루에만 288개의 데이터를 표시하기 위해, 그래프와 일일 평균, 최고, 최저 수치를 보여 가독성을 높이고 보다 구체적인 페이지를 확인할 수 있는 팝업창을 설계했습니다. 설계된 화면처럼 평균, 최고, 최저 수치를 화면에 표시하기 위해, 데이터베이스에서부터 통계테이블을 설계해 보기로 했습니다. 우선 프로젝트에서 고려하는 기온과 습도 데이터의 경우 실시간으로 1분 단위로 데이터가 전송됩니다. 전송되는 데이터는 각각의 테이블에 저장되고, 저장되는 데이터를 자동으로 처리해서 통계테이블을 만들기 위해 프로시저와 트리거를 계획했습니다. 통계 테이블? 특정 데이터를 기반으로 통계된 데이터를 추출하기 위해 서버에서 sql문을 통해 언제든..

개요 안녕하세요. 이제는 웹 개발자 설탕시럽입니다. 3개월 단기 인턴 과제를 수행하면서, 1분 단위로 들어오는 기온, 습도 측정값을 하루, 한 주, 한 달 등등 기간에 맞게 데이터를 보여야 하는 화면을 설계하게 되었습니다. 한 화면을 설계하기 위해 겪은 시행착오를 공유하려고 합니다. 화면 설명 개요에서 말했던것 처럼, 데이터의 종류는 기온과 습도였습니다. 해당 데이터는 1분 단위로 수집되고 있고 측정된 과거부터 지금까지의 값을 모니터링하는 화면을 설계해야 했습니다. 초기에 화면을 설계하기 위해 1차원적으로 테이블을 어떻게 구성할지 고민했습니다. 1분단위 데이터를 표시하기 위해 연도, 월, 일, 시, 분이라는 구분이 있고, 구분을 어떤 식으로 조합해도 한 페이지에 테이블로 담을 수 없었습니다. 년-월-일 ..

문제프로그래머스 코딩테스트 연습 : [Level 1] 조건에 부합하는 중고거래 댓글 조회하기 코드SELECT USED_GOODS_BOARD.TITLE, USED_GOODS_BOARD.BOARD_ID, USED_GOODS_REPLY.REPLY_ID, USED_GOODS_REPLY.WRITER_ID, USED_GOODS_REPLY.CONTENTS, DATE_FORMAT(USED_GOODS_REPLY.CREATED_DATE, "%Y-%m-%d") FROM USED_GOODS_BOARD INNER JOIN USED_GOODS_REPLY ON USED_GOODS_BOARD.BOARD_ID = USED_GOODS_REPLY.BOARD_ID WHERE USED_GOODS_BOARD..

코딩테스트에서 어려운 문제를 접했을 때, 그저 분할 정복이 아닌 어떻게 문제를 접근해야 할지에 관한 글입니다. 코딩테스트 실력을 기르기 위해 평소 연습할 때는 어떻게 문제를 접근해야 하는지에 대해 5단계로 나눠진 접근법을 소개합니다. 출처 글을 작성하기에 앞서 참고가 된 강의의 링크를 남깁니다. [Udemy] JavaScript 알고리즘 & 자료구조 마스터클래스 : https://www.udemy.com/course/best-javascript-data-structures/ 1단계 문제의 이해 문제를 보고 코드를 먼저 치기 시작하는게 아니라 문제를 이해해야 합니다. 이해하기 위해 아래와 같은 질문을 스스로에게 던져볼 수 있습니다. 질문을 잘 정리해서 이해하고 있는가? 문제의 입력값과 출력값의 형태와 값이..

문제프로그래머스 코딩테스트 연습 : [Level 1] 추억 점수  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: Hash시간 복잡도: O(n ** 2)소요 시간: 10분  코드function solution(name, yearning, photo) { //1. name-yearning Dict var userDict = {} var photoYearning = [] name.forEach((name, index) => { userDict[name] = yearning[index]; }) //2. photo.forEach 해서 각 사진별 점수 계산하기 photo.forEach((peoples) => { var score = ..

문제 소개프로그래머스 코딩테스트 연습 : [Level 1] 달리기 경주  자료구조/알고리즘, 시간복잡도, 소요시간자료구조/알고리즘: Hash시간 복잡도: O(n)소요 시간: 45분  코드function solution(players, callings) { let playersDict = {} let playersRankDict = {} players.forEach((player, index) => { playersDict[player] = index; playersRankDict[index] = player; }) callings.forEach((calling) => { let rankupPlayer = calling; ..