코딩게임

props and state # 개요 React로 프론트 개발을 한다면, 기본적으로 props와 state에 대한 이해가 필수적이다. 해당 두가지는 데이터를 다룰 때 사용되는 개념으로서 각각의 특징과 쓰임, 차이점에 대해 알아볼 것이다. # Props 불변 데이터 부모로부터 전달 외부(부모) component에서 상속 받는 데이터 먼저 props는 properties의 줄임말로서, state와 확연한 차이를 보이는 것은 불변하는 데이터라는 점이다. component는 부모 component로 부터 props를 받고, 해당 porps는 상속 받은 component에서 사용할 수 있지만, 변경이 불가한 read only 데이터이다. 이것은 React에서 부모 > 자식 일방향성 상속이라는 특징이라 할 수 있다..

Checkbox 오늘은 React로 checkbox를 구현하여 상태관리 하는 방법에 대해 공부해 볼 것이다. # 목표 전체 선택이 가능한 Checkbox와 각 리스트를 구성하는 element Checkbox를 만들어 컴포넌트 상태관리가 가능해야 한다. # 구성 및 설계 - Total Component와 각 List Component를 생성한다. 이때 List는 map 함수를 사용한다. - 반복문 사용시, 일반 배열이 아닌 Set을 사용하여 중복 없이 저장한다. - 배열을 생성하고, useState를 통해 불변성 유지하며 상태를 관리한다. - 각 Component에 Checked와 onChange props를 선언하여 on/off 기능을 구현한다. - 전체 선택과 하나 선택 연동 # 전체적인 UI 틀 구성..

탄소배출권 거래제 #시작하며 계속해서 기술이 발전함에 따라, 사람들의 삶은 보다 풍요로워지고 간편해지고 있다. 하지만 기술 발전의 이면으로, 환경 문제가 함께 거론된다. 급격한 산업화로 인한 이산화탄소 발생량 증가는 지구 온난화 현상을 가중시켰고, 이러한 기후변화는 기상이변을 가져와 육상 및 해양생태계의 변화 및 인류 건강에 직/간접적인 영향을 미치고 있다. 6대 온실가스 : 이산화탄소(CO2), 메탄(CH4), 이산화질소(N2O), 수소화불탄소(HFC), 불화탄소(PFC), 불화유황(SF6) 따라서 지구온난화는 단순한 환경문제로만 그치는 것이 아니라, 세계 신경제질서를 예고하는 경제문제임을 인지해야하고 지구온난화에 대한 효과적인 대응책이 필요하다. #탄소배출권 거래제(Emissions Trading S..

독후감 1편 #시작하며 지난 하계 인턴에 이어, 감사하게도 동계 인턴도 진행하게 되었다. 인턴 생활을 같은 곳에서 다시 한번 시작하면서, 지난 하계 인턴의 아쉬움을 하나씩 해결하고자 같은 부서, 같은 환경에서 일을 하면서도 보다 넓게 다양한 시선을 가지게 되었다. 그중 지난번 아쉬웠던 사항 중 하나인 연구원 도서관 사용에 대한 아쉬움을 해소하고 있다. 연구원 도서관은 생각보다 깔끔하고 전공 서적, 문학, 경제, 사회 분야 등 다양한 도서들이 있어서 업무와 동시에 책에 대한 관심을 가지기 시작하였다. #죽을 때 후회하는 25가지 해당 책은 도서관을 둘러보던 중, 인상 깊은 제목에 이끌려 선택하게 된 책이다. 죽을 때 후회하는 스물다섯 가지. 누구나 죽음을 준비하기는 쉽지 않다. 하지만 이 책은, 호스피스 ..

생성 Data 적용 #시작하며 지난 포스팅까지 데이터를 좌표간 이동하는 새로운 방법을 통해 생성하는 과정을 진행하였다. 이번 포스팅에서는 생성된 해당 데이터들을 기반으로 나선그리기 정량화를 위해 개발한 알고리즘을 적용하는 과정을 통해 해당 데이터의 사용성을 평가해 볼 것이다. #데이터 적용 데이터 적용에 앞서 먼저 생성한 데이터를 Error의 정도에 따른 구분이 필요했다. 따라서 Error의 정도를 1부터 10까지 정의하였고, 해당 데이터를 알고리즘에 적용하였다. 예상된 결과로는, Error를 1부터 10까지 증가시키며 목표선에서 벗어난 거리를 측정했기 때문에, 결과 distance 역시 Linear한 값이 나와야 정확하게 생성된 알고리즘 또는 데이터라고 할 수 있을 것이다. 데이터 생성 해당 그림은 E..

Data remake #시작하며 지난 시간까지 동일 각도상 이동을 통해 raw data를 구현하였다. 하지만 이는 캡스톤 연구에서 발명한 ED 측정방법의 방식과 동일하여, 같은 방식으로 구해진 data를 통해 발명한 ED 측정 방법의 정확도를 표현하는 것이 맞지 않기 때문에, 동일 각도상이 아닌, 각도를 벗어난 raw data를 구현해 볼 것이다. #Remake 데이터를 새롭게 구현함에 앞서 생각했던 것은, 기존에 사용했던 동일한 각도상에서 Pair의 위치 이동의 틀에서 벗어나 새로운 방법으로 구현을 하는데 중점을 두었다. 그 결과로, Base Line을 기준으로 동일 각도상 이동하는 것이 아닌, x, y좌표 축으로 랜덤하게 이동하여 새로운 Pair를 찾는 방법을 고안하게 되었다. Base Line을 기..

속도 구현 #시작하며 지난 포스팅까지는 데이터를 형성하여 smoothing을 통해 데이터의 이질감을 제거하였다. 이번 과정에서는, 생성한 데이터를 토대로 구성되는 Pair들을 점진적으로 제거함으로, 환자가 실제로 그릴 때 발생하는 그리기 속도를 구현해볼 것이다. #속도 구현 사람이 그린 것과 같은 속도를 표현하려면 어떤 것이 필요할까? 일단 Pair로 구성된 데이터에, 구간을 설정하여 해당 구간마다 상이한 삭제 비율을 설정하여 점진적으로 적용해야 할 것이다. 구간 설정하기 가장 우선적으로 실행해야 할 것은 구간을 설정하는 것이다. 일정하게 설정한 수만큼 구간을 나눈다면, 실제 데이터와 거리감이 생길 수 있기 때문에, 랜덤 하게 구간을 설정하였다. 위 그림은, 구간의 수를 10개로 설정한 뒤에 랜덤 하게 ..

new data #시작하며 이전 시간까지 운동 성분으로 데이터를 표현하고 Error까지 적용시키는 과정을 진행하였다. 이번 포스팅에서는, 지난 글의 마지막에 언급했듯 Base Line부터 코드로서 직접 구현하여 온전하게 코드로서 만들어진 Raw data를 만들어 볼 것이다. 이는 이후 우리가 발명했던 Error Distance를 찾아내는 방법과 타 방법들을 비교 분석하기 위해, 독립된 비교군 Data sample을 구현하기 위해서이다. #Make Base Line 그렇다면 코드로서 어떻게 이상 운동증 환자가 그린 것과 같은 그림을 구현할 수 있을까? 이는 직선의 경우에는 하나의 축이 고정이 되어, 비교적 쉽게 접근할 수 있지만, 나선의 경우 계속해서 x, y값이 달라지고 중심점과의 각도까지 고려해야 되기..

모델링 방법 고안 #시작하며 지난 시간까지는, 데이터에 Error를 증가시키는 방법들을 고안하여 Raw data에 적용시키는 과정을 수행하였다. 해당 과정에 이어서, 이번 포스팅에서는 데이터를 운동 성분과 떨림 성분으로 구분하여, Error Distance에 해당하는 운동 성분을 가지고 데이터 모델링을 진행해 볼 것이고, 해당 모델링의 방법들도 여러 가지 상황에서 고안해 볼 것이다. # How to make? 그렇다면 떨림 성분과 운동 성분이란 무엇일까? 위 그림은, 환자가 데이터를 측정하는 START지점에서 시작하여, 이상 운동증의 척도를 측정하는 과정에 대해서 설명한 알고리즘 흐름도다. 떨림의 주파수인 Tremor frequency power(Hz), Tremor Magnitude power(cm),..

데이터 모델링 #시작하며 지난번 포스팅까지, 기존 나선 그리기 검사 Raw data를 가지고 ED, Error Distance 값을 증감시키는 데이터를 생성해보았다. 하지만 해당 데이터는, 앞서 말했듯이 실제 사람이 측정한 Raw data와는 많은 이질감이 있었고, Error를 더 높일수록 그 이질감은 비례해서 증가했기 때문에 실제 Raw data의 모습과 유사한 데이터 샘플 생성을 목표로 프로젝트를 이어 진행하였다. #데이터 생성 먼저 Raw data를 기준으로 데이터를 증감시킬수 있는 방법에 대해 생각해 보았다. 기존 데이터를 바탕으로 데이터의 Error 정도를 증감시킬 수 있는 방법은 2가지로 판단된다. 위 그림에 보이는 Case1, Case2를 생각할 수 있었다. 먼저 Case 1의 경우, 왼쪽에..