익명의 개발노트

1. 러시아 형님이 만든 리액트 완전 유지보수 꽝으로 해놓았다. 리팩토링하는 과정에서 어떻게 하면 쉽게 관리할 수 있을까 고민하다가. 주어진 조건에서 최적안을 찾았다. inline style에 function call 을 하는 것. 클래스밖에다가 분기에 따른 함수를 만들어놓고 const setBackground = title => { if(title === "ROLL UNDER"){ return ROLL_UNDER; }else if(title === "PAYOUT"){ return PAYOUT; }else{ return WIN_CHANCE; } }; static generateCell = (title, value) => ( {title} {value} ); 위와 같이 inline 스타일안에 함수로 불러왔..

1. 아이디, 비번없이 로그인 버튼 눌렀을 경우 발생하는 에러. 기존 state값이 없어서 아무것도 입력안했을 경우 분기할 로직이 없었다. 인풋값에 대한 내용들은 onChange 함수를 통해서 state에 반영되기때문에 기존 state에 onChange에서 발생한 값을 초기값으로 넣어주면 간단히 해결. 2. 카카오 로그인 구현시 init 값 develop init값은 초기에 한번만 쓰기 때문에 분기처리를 안해놓으면 라우터쪽에서 에러가 발생한다. if (!window.Kakao.Link) { window.Kakao.init("카카오 키값"); } 3. 카카오 로그인 버튼 클릭시 history.push()값이 undefined 나는 현상 전형적인 this 문제임. success: funcion(authObj..

1. 우분투에서 폴더나 파일 대문자로 설정할 경우 맥에서는 인식 못한다. 1) 해결 방법 (1) 맥에서 파일명 바꾸고 (2) git mv button.js Button.js 로 직접 변경해주어야한다. (이건 예시) 2. 레이아웃 구성할때 position 값은 왠만하면 사용하지 말자. 다 뜯어고쳐야하는 상황 발생함.. 헤더, 푸터 고정값이나, 버튼같은거 할때말고는 안쓰는 습관 들이는 걸로. 3. 해상도에 따라 전체화면 배경화면 css 값 주기 max-width: 100%; max-height: 100%; bottom: 0; left: 0; margin: auto; overflow: auto; position: fixed; right: 0; top: 0; 4. 글씨 한줄에서 브라우져창 줄어들어도 안깨지게하기..

1. jest는 페이스북에서 만든 프레임워크이다. 사용할 수 있는 프로젝트는 바벨, 타입스크립트, 노드, 리액트, 앵귤러, 뷰에서 사용가능하다. 테스트환경에 대한 Test Runner와 Assertion library를 제공해 준다. describe와 it으로 테스트 코드를 작성한다. 테스트할때 __test__ 폴더를 src 폴더 밑에 작성하고 000.test.js 로 파일을 작성하면 된다. 테스트를 생성하려면 it()을 추가하면 되고, 첫번째 인자값에 테스트 이름을 넣고, 두번째 인자인 콜백에는 테스트할 코드를 작성한다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders with..

1. componentDidUpdate에서 setState componentDidUpdate에서 setState는 주의해서 사용해야한다. 무한 루프가 발생한다. componentDidUpdate는 인자값을 previousProps, previousState 두개를 받고, 두개중 하나가 변경되었을때 실행된다. 나는 콤보박스로 지역명이 바뀌었을때 기준으로 값을 불러오게 작성했다. 시가 먼저 불러와지면 군구에서 선택할 수 있게 했다. 우선 콘솔로그로 값을찍어확인해보자. console.log("componentDidUpdate props:", previousProps, this.props); console.log("componentDidUpdate state:", previousState, this.state)..

1. 깃으로 리베이스 하기전 pull할 경우 이미 많은 내용들을 가져오고.. 그 값들을 리베이스 처리하게 되면 혼란이 오게된다. 그럴때, 내가쓴 커밋만 리베이스 하는 명령어. git rebase --preserve-merges origin/master 2. multi select box multi input창하고 아주유사하다. 1) option 부모태그에 onChange를 주고 props로 넘겨서 관리한다. 2) 선택값들에 대한 이름도 props로 넘겨서 사용하고자 하는 부모컴포넌트에서 이름으로 구분한다. const SelectBox = ({ handleSelectedChange, selectName, location1, location2, location3 }) => { return ( {locatio..

1. 자료구조 프로그램을 만드는데 있어서 자료구조와 알고리즘은 필수인 만큼, 중요하다. 특히 백엔드 엔지니어들의 기본소양이라고 할 수 있다. 1) array(리스트) 파이썬 list와 array는 엄격히 다르다. 자료구조 설명을 위해서 리스트라고 설명하겠다. 리스트는 내부적으로 순서대로 저장을 한다. 그리고 순서가 있으니 당연히 인덱싱이 존재한다. 단점은 검색과 맨앞이나, 중간에서 추가, 삭제시 느리다. 원하는 값을 찾으려면 순서대로 검색해야하고, 중간에서 값을 삭제하면 순번을 맞춰야하니 삭제된 만큼 메모리주소값을 이동시켜야한다. 맨뒤에 넣는 것만 빠르다. 그래서 리스트를 선언시 디폴트로 메모리를 일부 미리확보해 주며, 기존 메모리 바로 뒤에 다른 주소값이 있는 경우, 그다음 데이터가 올 경우 바로뒤에 ..

1. chart.js는 그래프 라이브러리 중 하나이다. highchart.js, d3.js 등 여러 종류의 라이브러리가 있다. 기본적으로 canvas에 그리며, 반응형을 사용하고자 할때는 부모태그로 감싸주면 된다. 자세한 내용은 공식문서에 있지만, 아래내용이 전부다. 다만 옵션부분은 공식문서 참고해서 기본값으로 되어있는 부분은 설정을 바꿔주면서 사용하면 된다. import React, {Component} from 'react'; import Chart from 'chart.js'; import './App.css'; class App extends Component { componentDidMount(){ var ctx = document.getElementsByClassName("ts_canvas")..

1. 깃 플로우 1) 마스터 브랜치는 최종 배포에 사용한다. 실제관리는 아키텍트나 PM들이 관리한다. 2) 통상 개발자는 develop 브랜치에서 feature브랜치를 따서 작성 후 develop 브랜치에 push한다. 3) 마스터 브랜치에서 릴리즈 브랜치로 푸시하는 경우는 실제 배포할 상태가 된 경우에 생성하는 브랜치이다. 마스터 브랜치에서 배포가 이루어 지므로, 릴리즈 브랜치를 마스터 브랜치로 merge한다. 나중에 이 배포버전을 찾기 쉽도록 태그를 만들어 현재 병합되는 커밋이 뭔지 마킹해놓는다. 이 때 배포된 기능에 반영 될 수 있도록 develop 브랜치에도 함께 merge한다. 4) hot-fix 브랜치는 배포 후 운영 버전에 버그 발생시 긴급하게 버그를 수정해야할 경우에 만든다. 마스터 브랜치..

1. window.location.reload() 페이지 새로고침할 때 사용하는 함수이다. 댓글 버튼 누른 후 반영될때 사용하면 유용하다. 나는 리다이렉트로 처리하려고 했지만, 리로드 방법을 권유하셨다. 2. 리액트에서 map함수 사용시 key값 설정하는데, 설정해도 에러가 있다면? 프레그먼트가 불필요하게 있는지 확인해볼 것. 3. get방식으로 데이터 요청할때는 쿼리스트링이나, url 파싱을통해서 데이터를 전달 할 수 있다. 4. 엔드포인트는 명사로 설정한다. 5. componentDidUpdate의 삽질. 부모태그에서 자식태그에게 props를(store_id) 주었는데, 자식태그의 componentDidMount안에서 console.log(this.props.store_id) 프롭스가 undefind..