개요 이전 포스트에서 많은 수치 데이터를 담은 화면을 설계했었습니다. 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; ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. React의 함수형 컴포넌트에서 상태관리 함수 "useState"에 대해 학습한 내용을 공유하려고 합니다. useState? useState는 React에서 상태 관리를 위해 React Hooks에서 제공되는 함수입니다. 이전까지는 클래스 기반 컴포넌트에서 this.state 를 통해 상태를 관리했었지만, 함수 기반 컴포넌트가 활성화 되고 React Hooks를 통해서 클래스 기반 컴포넌트처럼 상태를 관리할 수 있게 되었습니다. useState는 배열을 반환하며, 반환하는 배열의 값은 다음과 같습니다. 첫 번째 원소 : 상태값을 저장할 변수 두 번째 원소 : 해당 상태값을 업데이트할 때 사용하는 함수 const [state, setStateFn] = use..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 운영체제에서 "가상 메모리 관리 - 세그멘테이션"에 대해 학습한 내용을 공유하려고 합니다. 세그멘테이션 기법 가상 메모리 방식에, 물리 메모리를 가변 분할 하는 방식이다. 프로세스가 할당되는 공간을 "세그먼트"라는 기준으로 분리하고, 그 크기는 프로세스의 크기에 맞게 가변적으로 할당된다. 하나의 프로세스를 연속된 공간에 배치하며, 여러 공간에 떨어져 있는 상태에 대한 처리를 하지 않는다. 프로세스가 들어오고 나오면서 빈 공간이 발생하게 되는 걸 외부 단편화 라고 하는데, 이 공간을 처리하는 방식이 복잡하다는 단점이 있다. 고정분할방식인 페이징 기법에 비해 권한 비트를 설정하기 편하고, 영역이 섞일 가능성이 없다는 장점이 있지만 외부 단편화라는 단점 때문에 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 본 글에서는 자바스크립트로 배우는 SICP를 읽은 후, 개별적으로 학습한 내용을 정리하여 습득된 지식을 정리할 겸 공유드립니다. 따라서 글의 주제나 소 주제에 대해서는 책과 같은 흐름으로 소개드리며 참고한 내용들에 대해서는 아래 레퍼런스를 남겨놓았습니다. 계산적 과정 계산적 과정, computational process 책을 통해 앞으로 다루어 지는 내용은 계산적 과정에 대한 내용입니다. 계산적 과정이란 데이터를 조작하는 하나의 추상적인 개념입니다. 실존하지만 추상적인 과정을 규칙에 맞게 구현된것이 프로그램이고 프로그램은 프로그래밍 언어로 만들어 집니다. 프로그램은 프로그래밍 언어로 작성된 과정 속에 컴퓨터 내부에서 정확하게 동작하기 때문에 개발자는 자신이..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 React가 더욱 편리할 수 있게 도와주는 JSX에 대해서 알아보겠습니다. 이전 학습내용 React의 특징과 장점, 적용 예제까지! https://sugarsyrup.tistory.com/entry/React%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0%EC%99%80-HTML%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 개요 이전 아티클에서 HTML에서 React와 ReactDOM을 불러와서, React.createElement를 활용해 웹페이지를 구성하는 방법을 알아봤습니다. createElement보다 편리한 방식으로 JSX를 사용할 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 운영체제에서 "가상 메모리 관리 - 페이징"에 대해 학습한 내용을 공유하려고 합니다. 가상 메모리 물리 메모리 크기와 상관없이 프로세스에게 충분한 메모리 공간을 제공하는 것처럼 보이게 하는 기술. 가상메모리라는 기술을 통해 프로세스가 올라갈 메모리의 위치를 신경 쓰지 않아도 되며, 스왑영역을 활해서 물리 메모리의 남은 공간보다 더 큰 프로세스를 실행가능하게 해 줍니다. 스왑 영역 스왑영역은 물리 메모리의 공간보다 더 큰 프로세스를 실행하기 위해 저장장치에 위치하게 됩니다. 원래 보류상태의 프로세스가 저장되기 위한 공간이었지만 가상메모리 기술을 활용하기 위해 일반 프로세스도 할당이 가능해집니다. 저장장치에 있지만, 파일관리자, 입출력 관리자가 아닌 메모리 관..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 10주 동안 100여 명 정도 되는 사람들과 React와 TypeScript에 대해 함께 학습하게 되었는데 (NomadCoder) 진행하는 김에 학습하는 내용을 꾸준히 정리해 보려고 합니다! 이번 주제는 React를 학습하는 이유와 JSX를 활용하지 않는 React 문법 작성법에 대해 알아보겠습니다. 왜 React를 학습해야 하는가? 제가 처음 React를 학습하게 된 이유는 많은 회사에서 사용된 검증된 라이브러리라는 점이 가장 큰 메리트로 느껴졌습니다. 강의에서도 비슷한 내용과 그 외 추가적인 이유와 함께 리액트를 왜 학습하고 그 장점에 대한 소개가 있었습니다. 개발자에게 중요한 자원중 하나는 시간! 학습한 내용이 몇년뒤에 잊히는 게 아닌 꾸준히 사용할 ..