익명의 개발노트

1. fieldset과 legend Tag 기업협업간 러시아 형님께서 사용하신 코드임. 내가 리팩토링간 지워버림. 아주 강력한 기능이다. fieldset을 사용하면 그 안에 있는 html을 그룹핑 시켜버리는 기능이다. 조절하기 매우 힘듬. legend는 fieldset의 제목을 달아주는 것이고, 고정되서 움직이기 매우 힘듬. position : absolute로 옮길 수 있으나, 그래봤자 fieldset 내부에서 움직인다. 좀더 빨리 검색해볼껄.... 하....처음보이면 무조건 검색 ㄱㄱ! 2. key pad 리팩토링 이미지 넣는 것은 문제안됨. 다만 우측 하단 00과 DONE으로 된부분은 관계설정을 잘해주어야 둘다 클릭이 된다. 맨첨에 DONE의 z-index를 -1로 해서 맨 아래 깔았다가 클릭안되는..

1. fullscreen 시 esc키 눌렀을 경우 무한루프 + 이벤트 적용안되는 현상 const supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; console.log("orientationEvent",orientationEvent) window.addEventListener(orientationEvent, () => this.toggleFullScreenBtn(), false); document.addEventListener("fullscreenchange",(e) => this.onFullScreenCh..

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..

가상화는 물리적환경을 가상환경으로 구성한 것이고, 도커는 기존의 가상화보다 가벼운 가상화이다. 기존에 VM은 운영체제 + 가상컴퓨터 자체를 가상화하였기에 많이 무겁다. 도커는 부팅부터 시작하지 않고, 우분투 일부 환경을 사용할 수 있게 해논 것이다. 우분투는 커널(시스템엔진)로 부터 시작을 한다. 시스템에서 명령어를 입력하면 커널 단으로 들어가서 시스템이 움직인다. 시스템에서 system space는 시스템이 사용하는 공간이고 user space는 사용자가 사용하는 공간이다. 기존 VM은 system space + user space 둘다 가지고 있기때문에 무겁고, 도커는 user space 만 가지고 있다. 그러면 실행하려면 커널이 있어야하는데, 커널은 어떻게 사용하냐?? 중간에 번역해주는 Transl..

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는 엄격히 다르다. 자료구조 설명을 위해서 리스트라고 설명하겠다. 리스트는 내부적으로 순서대로 저장을 한다. 그리고 순서가 있으니 당연히 인덱싱이 존재한다. 단점은 검색과 맨앞이나, 중간에서 추가, 삭제시 느리다. 원하는 값을 찾으려면 순서대로 검색해야하고, 중간에서 값을 삭제하면 순번을 맞춰야하니 삭제된 만큼 메모리주소값을 이동시켜야한다. 맨뒤에 넣는 것만 빠르다. 그래서 리스트를 선언시 디폴트로 메모리를 일부 미리확보해 주며, 기존 메모리 바로 뒤에 다른 주소값이 있는 경우, 그다음 데이터가 올 경우 바로뒤에 ..