React 생명 주기(LifeCycle)
리액트 컴포넌트는 생성(Mount), 갱신(Update), 제거(Unmount) 주기를 가지게됩니다. 해당 주기에서 사용되는 메소드에 대해 알아보겠습니다. 생성(Mount) constructor(props) 메소드를 바인딩 하거나 state를 초기화하는 작업이 없을 경우 사용합니다. 만약, 해당 작업이 없다면 사용하지 않아도됩니다. getDerivedStateFromProps(nextProps, prevState) props로 받아 온 값을 state로 넣어주고 싶을때 사용합니다. state를 변경할 때는 setState가 아닌 반환 값으로 변경해야하며 반환 값이 null일 경우에는 아무일도 발생되지 않습니다. render() 반드시 구현되어야하는 유일한 메소드입니다. 이 메소드가 호출되면 this.pr..
인프런 React 강의 듣고 사이트 만들기 _ Front & back 작업 3. https 적용하기
https 적용을 진행하던 중에 오류가 나서 해결을 못하고 있었습니다.ㅠ 강의대로 진행했는데, 왜??? 이러던 중에 질답게시판에 제로초님이 블로그글을 참고하여 진행하라고 댓글을 달아두신걸 봤고.... 제가 나중에 헷갈릴가봐.. 나름대로 추가 정보를 정리하여 글을 작성합니다. 약간의 난관들도 있었지만, 다행이 성공했습니다.! 제로초님 블로그를 거의 대부분 참고했습니다. www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb (NodeJS) nginx와 let's encrypt로 SSL 적용하기(+자동 갱신) 리눅스에서 letsencrypt를 직접 설치합시다. 2020년 9월부로는 기존 방식보다 snap을 통해서 설치하는 게 더 쉬운 것 같습니다(htt..
React. DOM 엘리먼트에 텍스트 삽입하기 (innerHTML말고 dangerouslySetInnerHTML 사용) innerHTML이란? innerHTML 속성은 웹 개발에서 요소(element)의 HTML 내용물을 가져오거나 설정하는데 사용되는데요.element.innerHTML = '새로운 내용'; 으로 설정하게 되면 기존 요소의 내용을 모두 지우고 해당 문자열로 교체하게됩니다.이때 innerHTML은 단순 문자열 외에 HTML 태그와 ";const element = document.getElementById('comment-section');element.innerHTML = maliciousScript; 혹은 위와 같이 쿠키를 탈취해 갈수도 있습니다. 쿠키에는 토큰이라던가 관련 정보들이 ..
게임을 저장하고 불러오는 작업을 진행하고 있습니다. db 작업도 하고있는 중인데, 여태 해본적이 없어서 꽤나 찾아보고 해야하네요.. sequelize를 통해 작업을 하고 있는데, 데이터 갯수를 몇개 정해서 가져오고 이것을 랜덤으로 섞어서 프론트로 내려줘야하는 경우가 생겼습니다. 원래 작업했던 순서는.. 프론트에서 모든 배열을 받은 후 배열의 갯수를 특정하고 그 다음 랜덤하게 섞는 작업을 했었습니다만... 모든 데이터를 받는 것부터가 너무 낭비였습니다. 그래서 이 부분을 수정하면서 랜덤하게 섞는것도 가능하단것을 알게되었습니다. limit을 통해 몇개 가져올지, order를 통해 어떤형식으로 가져올지 정할 수 있습니다. 다만 어떤것이 성능상 좋은지는 잘 모르겠군요... (order부분) router.get(..