주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

리액트 컴포넌트는 생성(Mount), 갱신(Update), 제거(Unmount) 주기를 가지게됩니다. 해당 주기에서 사용되는 메소드에 대해 알아보겠습니다. 생성(Mount) constructor(props) 메소드를 바인딩 하거나 state를 초기화하는 작업이 없을 경우 사용합니다. 만약, 해당 작업이 없다면 사용하지 않아도됩니다. getDerivedStateFromProps(nextProps, prevState) props로 받아 온 값을 state로 넣어주고 싶을때 사용합니다. state를 변경할 때는 setState가 아닌 반환 값으로 변경해야하며 반환 값이 null일 경우에는 아무일도 발생되지 않습니다. render() 반드시 구현되어야하는 유일한 메소드입니다. 이 메소드가 호출되면 this.pr..

dangerouslySetInnerHTML dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } 위의 글에서 주의 깊게 읽어야하는 부분은 2가지입니다. 코드에서..

심심이 API는 유료지만 개발자를 위해 데모프로젝트 100회 무료 이용을 제공하고있습니다. 100회 통신만 무료기 때문에 몇번만에 성공할지는 잘 모르겠지만 도전했습니다. https://workshop.simsimi.com/ SimSimi Workshop Make a chatbot that allows for small talks. workshop.simsimi.com 계정을 먼저 생성해주세요. 본인의 메일주소를 입력해서 가입하면 해당 메일로 인증메일이 전송되고 수락하면 로그인이 됩니다. 그 후 [내 계정 > 대쉬보드] 페이지로 이동합니다. 대쉬보드에서는 나의 API나 남은 요청 횟수 확인이 가능합니다. API 사용방법보기 클릭하면 페이지 이동이 되는데, 문서를 읽다보면 API 요청에 대한 예시가 curl..

지난 포스팅에서 만들었던 슬라이드를 수정하게되었습니다. 포스팅에서도 말했었는데, 기존 방식은 지정된 갯수의 이미지만으로 작업을 한 부분이었기에 문제가 없는데, 이미지 갯수가 동적으로 들어오게되면 스타일이 깨지게됩니다. 그래서 실제로.. 작업하다가 이미지 갯수를 늘리려하니 깨지게되고 이런게 너무 거슬려서 수정하게되었습니다. 다만 지난 포스팅과는 방식이 다릅니다. 지난 포스팅은 customPaging 옵션 방식으로 제작한 것이고 이번엔 AsNavFor 방식으로 제작하게되었습니다. AsNavFor 옵션 example 확인해보기 react-slick.neostack.com/docs/example/as-nav-for Neostack The last react carousel you will ever need re..