인프런 React 강의 듣고 사이트 만들기 _ Front & back 작업 3. https 적용하기
https 적용을 진행하던 중에 오류가 나서 해결을 못하고 있었습니다.ㅠ 강의대로 진행했는데, 왜??? 이러던 중에 질답게시판에 제로초님이 블로그글을 참고하여 진행하라고 댓글을 달아두신걸 봤고.... 제가 나중에 헷갈릴가봐.. 나름대로 추가 정보를 정리하여 글을 작성합니다. 약간의 난관들도 있었지만, 다행이 성공했습니다.! 제로초님 블로그를 거의 대부분 참고했습니다. www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb (NodeJS) nginx와 let's encrypt로 SSL 적용하기(+자동 갱신) 리눅스에서 letsencrypt를 직접 설치합시다. 2020년 9월부로는 기존 방식보다 snap을 통해서 설치하는 게 더 쉬운 것 같습니다(htt..
dangerouslySetInnerHTML dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } 위의 글에서 주의 깊게 읽어야하는 부분은 2가지입니다. 코드에서..
게임을 저장하고 불러오는 작업을 진행하고 있습니다. db 작업도 하고있는 중인데, 여태 해본적이 없어서 꽤나 찾아보고 해야하네요.. sequelize를 통해 작업을 하고 있는데, 데이터 갯수를 몇개 정해서 가져오고 이것을 랜덤으로 섞어서 프론트로 내려줘야하는 경우가 생겼습니다. 원래 작업했던 순서는.. 프론트에서 모든 배열을 받은 후 배열의 갯수를 특정하고 그 다음 랜덤하게 섞는 작업을 했었습니다만... 모든 데이터를 받는 것부터가 너무 낭비였습니다. 그래서 이 부분을 수정하면서 랜덤하게 섞는것도 가능하단것을 알게되었습니다. limit을 통해 몇개 가져올지, order를 통해 어떤형식으로 가져올지 정할 수 있습니다. 다만 어떤것이 성능상 좋은지는 잘 모르겠군요... (order부분) router.get(..
인프런 React 강의 듣고 사이트 만들기 _ Front & back 작업 1. 심심이 채팅을 만들어보자! (simsimi API, 심심이 API)
심심이 API는 유료지만 개발자를 위해 데모프로젝트 100회 무료 이용을 제공하고있습니다. 100회 통신만 무료기 때문에 몇번만에 성공할지는 잘 모르겠지만 도전했습니다. https://workshop.simsimi.com/ SimSimi Workshop Make a chatbot that allows for small talks. workshop.simsimi.com 계정을 먼저 생성해주세요. 본인의 메일주소를 입력해서 가입하면 해당 메일로 인증메일이 전송되고 수락하면 로그인이 됩니다. 그 후 [내 계정 > 대쉬보드] 페이지로 이동합니다. 대쉬보드에서는 나의 API나 남은 요청 횟수 확인이 가능합니다. API 사용방법보기 클릭하면 페이지 이동이 되는데, 문서를 읽다보면 API 요청에 대한 예시가 curl..