한 개발자의 노트패드

react와 konva를 이용해서 그림판을 만들었습니다.konva는 js를 이용해서 canvas를 2d로 제어할 수 있는 라이브러리입니다. 원래는 HTML의 자체 canvas API를 쓸까 했는데 그러면 하나의 기능을 만드는데 너무 긴 시간이 소비될 것 같아서 안 했습니다.하지만 그냥 canvas API를 쓸 걸 그랬습니다. 이번엔 ai와 적극적으로 소통해서 만들었습니다. ai를 이용해서 고작 이 딴 거나 만들었냐? 고 하면 딱히 할 말은 없는데, 이번 프로젝트에서 중요한 건 ai에 의존하는 게 아니라, ai를 통한 코드 퀄리티를 높이는 거라, 우선 코드를 입력한 뒤그 코드를 리팩터링 할 때 ai를 쓰는 방향으로 진행했습니다.그러니까 좀 봐주세요. ai로 코드 찍는 건 양심에 가책이 있어서 안 했습니다...

최근 리액트를 이용해 간단한 사이드 프로젝트를 진행하고 있습니다. 프론트엔드 개발자로써 사실 리액트보다 vue를 쓰는 기간이 더 많아서, 아직 react에 적응하는 기간인데사용하면서 가장 곤란했던 부분이 있습니다. 바로 vue는 양방향의 데이터바인딩을 지원하지만, react는 오직 단방향만 지원한다는 점입니다. 오늘은 이 부분을 단적으로 보여주는 react의 useImperativeHandle에 대해서 적어보도록 하겠습니다. useImperativeHandleuseImperativeHandle은 ref를 통해 부모 컴포넌트에 노출할 인스턴스 값을 사용자 커스텀할 수 있는 기능입니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트에 원하는 인스턴스를 호출할 수있습니다. 주로 fowardRef와 같이 사용합니..

리액트의 setState는 동기적으로 동작하지 않는다 .예를 들어보자 //this.state={ a:123} 일시this.setState({ a: 456})console.log(this.state.a) ; 결과값은 뭐가 나오는걸까? 456이 나와야 정상이지만 456이 아니다. 123이 나올수도 있고 456이 나올수도 있는 것이다. 리액트의 setState는 비동기적으로 동작한다. 동기적으로 동작하지 않기 때문에setState에 값을 넣어도 원하는 값이 나오지 않을 수도 있다.또한 setState는 인자로 전달한 객체를 원래의 state에 덮어씌우는 성향이 있다.예를 들어보자 //this.state = { Year:0, Month:0} 일시this.setState({ Year:2019})//this.sta..

react-router의 NavLink와 activeClssName에 관하여.react-router에서는 다양한 기능을 제공한다.그중NavLink와 activeClassame에 대해 간단하게 알아보자.NavLink는 link와는 다르게 스타일을 바꾸거나 클래스를 활용할 수 있다.할 형식으로라우팅할 주소의 css를 바꿀 수 있다.activeClassName는 class를 활용하는 방법으로 다양하게 이용될 수 있다.형식으로 사용되며 style도 좀더 동적으로 바꿀 수 있다.styled-component를 이용하여 간단한 예를 들어보자localhost:3000/nextex) const menu=styled.div`width:50px;height:50px;$ .selected{background:red;}메뉴1..