본문 바로가기

개발일지

 (104)
시간(Performance)과 도구(Library)를 사용하는 것에 대한 생각. 20171220 날짜 : 2017. 12. 20.(수) 시간(Performance)과 도구(Library)를 사용하는 것에 대한 생각. 1. 생각하게 된 동기 React array 조작이 다른 언어와 다르다. 이를 도와주는 라이브러리Immutablity-Helper를 사용하는 것이 좋을까? 2. 생각한 내용 웹페이지에서 라이브러리를 많이 사용한다는 것은 성능에 문제가 있다고 생각을 하여 최대 사용을 자제하자는 주의 였다. 그래서 React array 조작을 할때 "추가, 삭제, 변경"이 쉽게 되지 않는다. (개념을 이해했다고 생각하고 기존의 객체를 복사하여 객체를 대체할려고 하였지만 무엇 때문인지 잘 안되었다.) 시간은 한정이 되어 있고, 인터넷에 오픈되어 있는자료는 라이브러리 사용을 한 자료가 많았다...
React에서 Table 표현하기 (부제:템플릿 사용에 대한 고찰) 20171219 날짜 : 2017. 12. 19.(화) React에서 Table 표현하기 (부제:템플릿 사용에 대한 고찰) 1. 생각하게 된 동기 능력치를 표현할려니 우선 "표"를 생각하게 되었음. 그런데 언제 Table Tag를 JSX로 표현해야할까? 링크 2. 생각한 내용 사전설명 캐릭터를 선택하면 캐릭터의 능력치가 연산되어 배열에 저장된다. 저장된 배열을 가지고 Table 태그로 표현을 한다. 다른 캐릭터 선택이 되면 누적이 되어 배열에 저장된다. 데이터 + HTML Tag 조합 클릭 이벤트에 따라 표현해야 되는 행의 수가 바뀐다. 그리고 안에 들어가는 데이터도 바뀌어야 된다. 현재 해결 방법 미리 HTML 구조를 잡고서 표현 데이터의 수를 제한 한다. (최대2개로 제한) 데이터는 1개만 들어왔을 ..
React 디자인 툴을 사용해 보자 1편 (sketchapp, react-sketechapp) 20171216 날짜 : 2017. 12. 16.(토) React 디자인 툴을 사용해 보자 1편 (sketchapp, react-sketchapp) 1. 생각하게 된 동기 UI가이드를 슬라이드로 작성해서 사용했었다. 만들고 난뒤 각 컴포넌트별 state, props가 기억을 나서 수정작업이 어렵다. state, props를 위해 슬라이드가 아닌 디자인툴을 찾아보겠다. 이번편은 sketchapp (본 후기는 sketchapp을 1시간 정도 사용을 하고서 작성을 하였습니다.) 2. 찾아본 내용 sketchapp 무료가 아니다. 기본적으로 설치를 하면 30일 free trial 기간이 적용 된다. 학생용 및 추가 사용 금액등 특별금액 정책이 있다. (하지만 작성자 해당 사항 없음) sketchapp 최신버젼(..
React 이정도면은 Framework이 아닌 새로운 언어가 아닐까? (그런데 document는 부실해) 20171215 날짜 : 2017. 12. 15.(금) React 이정도면은 Framework이 아닌 새로운 언어가 아닐까? (그런데 document는 부실해) 1. 생각하게 된 동기 React에서 배열을 다루는 방법이 다르다. React에서 increment operator (++/--) 다루는 방법이 다르다. 2. 생각한 내용 기본 개념 자체가 값을 변경하는 것이 아닌 다른 객체를 만들어서 바꾸어 치기 한다는 것에서 출발 그래서 일반 변수(state)는 setState에서 입력을 하면 된다. (사실은 입력이 아니라 객체가 만들어 지고 바꾸어 짐) 그런데 배열은 concat을 사용해서 값을 새로 붙여야 한다. (그래서 변수와 같이 사용할 수 있도록 라이브러리가 나온 것 같다.) increment ope..
DataSet을 변경하니... (리팩토링은 쉽지 않다.) 20171214 날짜 : 2017. 12. 14.(목) DataSet을 변경하니... (리팩토링은 쉽지 않다.) 1. 생각하게 된 동기 코드를 수정하게 되었는데, 각 코드의 의존성이 너무 심한 것을 파악 어디서 부터 접근을 해야 하는, 무엇을 바꾸어야 하는지 생각을 해본다. 2. 생각한 내용 1주일이 지나면 내가 짠 코드도 내 코드가 아니게 된다. 항상 배려하는 마음을 갖고 작성을 하자. DataSet의 형태가 전체적으로 틀어지게 되는데 어디까지 영향이 있는지 모르겠다. 처음에는 손으로 연관되는 함수 및 컴포넌트를 찾았다. 나중에 생각을 해보니 테스트 코드를 돌리는 이유가 이런것을 한번에 찾기 위한 것이 아닐까? 우선은 답이 없으니 한개씩 체크해 가면서 손으로 한다. 전달 받는 props값이 사용하는 값..
웹페이지 테스트 항목과 방법(react 테스트 해보고 싶다....) 20171212 날짜 : 2017. 12. 12.(화) 웹페이지 테스트 항목과 방법 (react를 테스트 해보고 싶다.) 1. 생각하게 된 동기 코드를 수정하게 되었는데, 각 코드의 의존성이 너무 심한 것을 파악 TDD로 작성을 하면 이러한 부분을 더 신경써도 된다고 들음 (확실하지 않음;;;) 2. 알아본 내용 기존 vanilla code에서 사용하지 않던 것을 사용할려니 힘들다. 우선 vanilla code부터... Unit Test 작성한 함수가 기대하는 결과값을 도출해 내는지 확인 교차테스트 시나리오를 만들고 작성한 시나리오가 잘 수행되는지 확인 (예를 들어 a -> b -> c 페이지를 이용한다는 것을 한개의 시나리오로 작성 한다고 한다.) 링크체크 죽은 링크가 없는지 확인을 해주는 기능 3. ..
지금 까지 프로젝트 내용 되돌아 보기 20171211-1 날짜 : 2017. 12. 11.(월) 지금 까지 프로젝트 되돌아 보기 1. 생각하게 된 동기 지금까지의 성과와 앞으로의 방향성 재확립 작업 github 작업 기능명세서 2. 각 요소별 분석 주간별 작업 내용 및 정보 작업내용 수행 작업수 작업시간 특이사항 1주 설계 및 필요지식 습득 4 6H 학습시간 미 반영 2주 프로토타입 화면 구현 9 19H 3주 자료형 설계 및 D3 학습 0 - 학습시간 미 반영 4주 D3학습 및 화면 통합 1 20H D3 통합작업 미반영 전체 기능 명세서 진행율 전체 명세서 27개 수행 완료 10개 / 진행중 7개 문제점 github에 반영하지 않은 작업이 많음 github과 기능명세서 동기화가 맞지 않음 3,4 주의 진행율이 저조. 기능명세서 1개의 내용을..
React프로젝트에서 D3를 사용하기 (3) (기초부터 다시...) 20171208 날짜 : 2017. 12. 08.(금) React프로젝트에서 D3를 사용하기 (3) (기초부터 다시...) 1. 생각하게 된 동기 어제의 포스팅에의 자료를 따라해보고 나온 결과를 적는다. 2. 생각하게 된점 실습환경 설명 HTML + javascript + babel + react + react-dom + d3 index.html 파일에서 script태그로 라이브러리 호출, babel 아래와 같이 사용하여 react component 호출 adeveloperdiary 포스트를 따라하게 된 이유. ahmadchatha 포스트를 통해서 어떻게 작성할 것인지는 감은 잡았다. 하지만 실제 개발환경 처럼 component별로 파일을 쪼개서 사용하는 것을 배우고 싶었다. (간단한 점 찍기는 완료) ..

티스토리툴바