본문 바로가기

전체 글

 (112)
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별로 파일을 쪼개서 사용하는 것을 배우고 싶었다. (간단한 점 찍기는 완료) ..
React프로젝트에서 D3를 사용하기 (2) (사용후기) 20171207-2 날짜 : 2017. 12. 07.(목) React프로젝트에서 D3를 사용하기 (2) (사용후기) 1. 생각하게 된 동기 어제의 포스팅에의 자료를 따라해보고 나온 결과를 적는다. 2. 생각하게 된점 tibotiber's 블로그 포스트 이 블로그에서는 react-faux-dom을 사용해서 DOM조작을 수행한다. 추가적인 라이브러리를 사용하는 방법 이여서 pass. ahmadchatha 포스트 단계별 jsfiddle을 통하여 코드가 나와있다. D3 버젼이 v3으로 작성이 되어 있다. react가 ES5 문법으로 작성되어 있다. adeveloperdiary 포스트 d3호출을 index.html에서 시작 d3 메소드 호출에서 정상 작동이 되지 않아 에러 잡는중. 3.참고한 사이트 cmichel..
React프로젝트에서 D3를 사용하기 (D3 with React) 20171207 날짜 : 2017. 12. 07.(목) React프로젝트에서 D3를 사용하기 (D3 with React) 1. 생각하게 된 동기 프로젝트를 React를 진행하고 있는데, 챠트를 사용해야 한다. React의 어느 부분에서 선언을 해서 사용해야 하는지 모르겠다. 2. 생각하게 된점 직관적으로 생각해서 시도를 해보고 그것을 바탕으로 개선점을 찾는 것이 더 효율 적이다. 고민만 가지고 실천을 하지 않으면 안된다. React, D3 둘다 DOM조작을 한다. component의 render return 전에 D3를 사용해도 정상적으로 작동이 되지 않는다. component의 바깥에서 D3를 사용해도 정상적으로 작동이 되지 않는다. react에서 D3의 DOM 조작을 수행하지 못하게 하기 때문 이라고..

티스토리툴바