Bleeding edge

diff&render import applyDiff from "./applyDiff.js"; import eventHolder from "./eventHolder.js"; let $root = null; // root container let rootComponentInstance = null; // root component's instance //$root를 통하여 initial render인지 아닌지를 확인한다 const bindEventHandler = ($root) => { for (const { type, selector, handler } of eventHolder) { (selector === "window" ? window : $root).addEventListener(type, hand..

자바스크립트로 CBD 구현하기 /* const eventHolder = []; export default eventHolder; */ class Component { constructor(props) { this.props = props; this.#holdEvents(); } //Component의 인스턴스를 생성할 때, 부모로부터 자식에게 값을 넘길 때 //props에 담아서 넘긴다. setState(newState) { this.state = { ...this.state, ...newState }; // if (this.state !== newState) this.state = newState; console.log('[RE-RENDERING] state:', this.state); render()..

프로젝트에서 생각하게 된 아이디어 express를 없이 라우팅 하기 미니 프로젝트를 만드는 동안에 express의 기능 없이 root/login과 같은 주소로 이동하면 login페이지가 그려지는 것을 만들고 싶었었다. 하지만, root/login으로 들어가면 404 에러를 만날 뿐이었다. 404 에러를 제거하는 방법? 1회차 404에러를 제거하기위해 첫번째로 404.html을 만들어 봤지만 아무런 반응도 없었다. 2회차 올리는 플렛폼마다 xml이나 다양한 방법을 통하여 404에러가 나왔을 때의 상황을 제어하는 것을 알 수 있었다. 내가 이용하는 플랫폼 : 깃페이지 무료고 바로바로 반영이되는 깃 페이지를 이용하여 올리기 떄문에 깃페이지에 대한 이해가 필요했다. 깃페이지는 404.md를 이용하여 GET할 값..

카카오 map map api를 사용하면서 생긴 문제 kakao is not defined Cannot read properties of null(reading 'currentStyle') 두가지가 있었다. 이전에 TIL로 작성을 한 적이 있었다. 1번같은경우 이전에 작성한 케이스가 맞았지만 2번 같은경우 우연히 에러가 발생하지 않는 경우를 골라 하였기 때문에 에러가 발생하지 않았던 것이다. 2번 에러가 생긴이유 우선 currentStyle을 잡는 객체가 무엇인지를 생각해봐야한다. 여러개의 글을 읽으면서 테스트를 해본 결과 나에게 문제가 생긴 이유는 동적으로 map의 컨테이너가 생겼다 없어졌다 하기 때문이었다. 즉, currentStyle은 맵의 컨테이너 사이즈가 현재 없다라는 것을 이야기한다. 해결 방법..

Software Development Life Cycle 소프트웨어를 계획, 개발, 시험, 배포하는 과정 요구사항 분석 -> 설계 -> 구현 -> 테스트 -> 유지 및 보수 Models build & Fix: 일단 만들고 고치는 과정만 포함되어 있는 모델이다. Prototype: 최소한의 요구사항 분석 후 프로토타입을 제작하여 고객의 요구를 개발에 적극적으로 도입. 고객 평가가 중요한 프로덕트에 도입하는 모델(외주에 많이 쓰인다). Waterfall: 요구사항 분석 -> 설계 -> 구현 -> 운용이 순차적으로 진행. 대규모 팀에 적합. 각 단계를 완료하기 전까지 다음 단계로 않는다. Spiral: 목표설정 -> 위험분석 -> 개발 및 검증 -> 고객평가/다음단계수립 을 반복. 점진적으로 단계를 반복수행하..

문제 이번에 사이드 프로젝트를 진행하면서 재밌는 현상을 보았다. 처음 랜더를 하였을 때는 아무 것도 보이지 않다가, 부모 element로 hover하였을 때, child가 display되게 css를 작성하였는데, drag가능한 구간에서는 특이하게 hover에 flickering 현상이 있었다. flickering : 깜빡이는 현상 javascript를 이용하여 해결을 하려고 하면서 알게 된 것은, flickering이 일어난 이유는 hover이벤트 역시 mouseleave와 비슷한 기능을 하면서 hover가 pseudo 로 붙기 때문이었다. 해결 flickering을 해결하기 위해서는, 특정 위치에 mouseover를 이용하여 class를 붙이고 mouseleave를 이용하여 class를 제거하는 방법은..

어제까지 카카오 api를 이용하여 html위에 지도를 그렸다면, 오늘은 카카오 api를 동적으로 그리려고 시도를 하였다. 문제는.. currentStyle, kakao에 대한 에러가 나를 맞이했다. 저 위에 사진 두개를 제외하고도 new kakao.maps.Map() is not a constructor와 같은 에러가 있었다. kakao api는 로드되었을 때 id가 map에 있는 부분에 그림을 그린다. 이것을 해결하기 위해 카카오 맵이 그려질 컨테이너 밖이 그려진후 시도를 하였지만 말짱 도루묵이었다. 이에 대한 해결법은 '//dapi.kakao.com/v2/maps/sdk.js?appkey=autoload=false'; 다음과같이 api를 호출하는 부분에서 autoload를 false를 string을 ..

요번주 화요일부터 미니프로젝트를 진행했는데, 자꾸 git add를 할 때마다 LF로 바꾸라는 이야기가 나왔다. 오늘 전체적인 CSS 수정을 위하여 다른 사람들과 코드를 merge를 하는 도중에 eslint에서 많은 빨간줄(eslint가 봤을 때 문제가 있다고 생각하는 것)이 나왔었는데, 원인은 위에서 이야기한 LF와 CRLF에 대한 문제였다. 오늘은 LF와 CRLF의 차이가 무엇이고 어떻게 해결하는지 알아볼 것이다. LF? 아래 줄로 이동 하는 것이 Line Feed(LF) CR? 쪽 끝으로 밀어 주는 것이 Carrige Return(CR) CRLF는 이둘을 더한 (CR + LF)이다. 두가지의 선택지가 있다면… LF CRLF 왜 다른 컴퓨터마다 다르게 나올까? Linux와 같은 유닉스 계열은 LF, W..

오늘 해결한 문제 : "/" 주소가 아닌 "/login"과 같은 주소로 라우팅을 express 없이 시도를 하였는데, /login으로 접근할 때 index.html로도 접근을 할 수 없기 때문에 어떠한 자바스크립트 파일도 로드가 되지 않기 때문에 404 에러가 나왔다. 이를 해결하기 위해 express를 이용하여 "/" 페이지가 아닌 페이지에 접근하여도 지정한 컴포넌트 파일이 있으면 그 파일이 로드되도록 수정하였다 128.1.1과 localhost는 다른 값으로 인지하여 api가 오작동을 일으킨다(현재 ip보다는 본인의 ip를 루프백 할 수 있는 localhost를 사용하자) 아직 해결하지 못한 과제: axios 에러 npm install axios 후 import axios from ‘axios’ Un..