SimCoding

[React] React에서 디스코드 오픈채팅 위젯 만들기 ! 안녕하세요 이번 포스팅에서는 , React프로젝트에 디스코드 오픈채팅 위젯을 만드는 과정에 대해 알아보겠습니다. Q 디스코드 오픈채팅 위젯이 뭔가요 !? - 디스코드 위젯을 통해 디스코드 채널에서 바로 채팅을 가능하게 해주는 장치입니다. 아래 사진을 참고해주세요! [ 디스코드 오픈채팅 위젯 만들기 ] 1. 디스코드 채팅방에 위젯 봇 초대하기 먼저, 디스코드 채팅방에 위젯 봇을 초대해주셔야 합니다. 위젯 봇 초대는 아래링크를 통해 가능합니다. 봇 추가 링크 : https://add.widgetbot.io/ Discord - A New Way to Chat with Friends & Communities Discord is the easiest ..

[Error] AWS S3 NEXTJS 배포 후, index외 페이지에서 새로고침 할 때 에러가 뜨는 문제 해결. 안녕하세요. 오늘은 AWS S3에 NEXTJS를 배포하면서 생긴문제와 해결방법에 대해 포스팅 하려고 합니다. > 문제 Index페이지 이외의 페이지에서 새로고침, 또는 url로 직접 접근하려고 할 때 에러가 발생했습니다.. SPA 을 S3에 배포할 때, 종종 발생하는 문제 인 것 같더라구요.. ! > 문제 파악 Router경로가 위의 이미지에서 보이는 것처럼 '/post/washingMachine' 으로 설정되어 있는데요, 빌드하는 과정에서 /post/washingMachine/index.html 파일로 build가 되는 것을 발견했습니다. 그런데 S3에서는, 이걸 자동으로 찾아주지 못하는 ..

안녕하세요. 이번 포스팅에서는 useState를 사용해 선언한 변수를 props를 통해 전달 할 때, 타입지정하는 방법에 대해 알아봅시다. 아래 예시코드를 통해, 타입지정 방법을 확인해보세요. // App.tsx function App() { const [aboutScroll, setAboutScroll] = useState(false); return ( ); } export default App; // About.tsx interface AboutProps { setAboutScroll: Dispatch; aboutScroll: boolean; } const About: React.FunctionComponent = ({ aboutScroll, setAboutScroll }) => { return ( ..

[TS] Value must be omitted for boolean attributes 에러 해결방법 props가 아래와 같은 형태로 작성되어 있을 경우, 'Value must be omitted for boolean attributes' 에러가 발생할 수 있습니다. 해결방법 : 아래와 같이 작성해 주시면 오류가 해결됩니다.

백준 1010번 : 다리 놓기 - 자바스크립트 자료 구조 a1 타입 : 정수 저장 데이터 : 서쪽사이트 개수 a2 타입 : 정수 저장 데이터 : 동쪽사이트 개수 풀이 과정 1. a2에서 a1을 겹치지 않게 뽑을 수 있는 경우의 수를 구하는 문제이다. 2. Combination 기법을 활용했다. nCm을 연산하면 m개의 자료에서 겹치지 않게 n개의 자료를 뽑을 수 있다. 3. Combination을 구현하기 하기 위해, 먼저 재귀를 이용해 Factorial 함수를 만들어 준다 4. Factorial함수를 중첩하여, Combination 함수를 구현한다. 5. Combination(a1,a2) 를 연산해 a2에서 a1을 겹치지 않게 뽑을 수 있는 경우의수를 구한다. 코드 구현 사용 언어 : 자바스크립트 co..

[React] fakerjs, shortid 를 이용해서 현실적인 DummyData 만들기. 안녕하세요. 이번 포스팅에서는 fakerjs와 shortid를 이용해 , 그럴싸한 DummyData를 만드는 방법을 알아보겠습니다. 프론트엔드 개발을 하면서, 백엔드가 완성되지 않았을 경우 원활한 작업 진행을 위해 DummyData가 필요한 일이 분명 있을 거에요 ! fakerjs 와 shortid를 활용하면 쉽게 DummyData를 만들어서 이용 할 수 있습니다. 예시 코드와 함께 어떤식으로 DummyData를 만들 수 있는지 확인해 봅시다. > generateDummyPost : 더미데이터를 생성해주는 함수. import shortId from 'shortid'; import faker from 'faker'..

[React] shortid를 사용해 랜덤한 key값 만들기 안녕하세요. 이번 포스팅에서는 shortid 라이브러리를 사용해 랜덤한 key값을 만드는 방법에 대해 알아보겠습니다. React에서는 배열을 순환하며 중복된 컴포넌트를 만들때, 필수적으로 고유의 키값을 입력해주어야 합니다. 하지만 매번 고유한 키값을 만들기란 쉽지 않죠.. 그렇다면 ! Q .인덱스를 키값으로 사용하면 되지 않나요 ? 리액트 공식문서에서는, 항목의 순서가 바뀔 수 있는 경우 Key값으로 인덱스를 사용하지 않는 것을 권장하고 있습니다. 이에 대한 자세한 내용을 확인하고 싶으시다면, 공식문서를 참고해주세요 ! Q. 그렇다면 고유한 키 값을 만들기 위해서는 어떻게 해야 할까요 ? 백엔드 서버에서 데이터를 넘겨 받을 경우에는, 데이터의 ..

TypeScript & StyledComponents 에서 props타입 지정하기. 안녕하세요. 이번 포스팅에서는 TypeScript를 사용할때, StyledComponent에 props타입을 지정하는 방법에 대해 알아보겠습니다. TypeScript에서는 타입을 지정하지 않고, 임이의 props를 사용할 경우 오류를 뱉습니다.. 아래 사진처럼요.. 그렇다면 props에 대한 타입은 어떻게 지정하면 되는 걸까요 !? 예시코드를 통해 StyledComponent를 통해 props에 타입 지정하는 방법을 확인해 봅시다. > 타입 직접 지정. // const Container = styled.div` const Container = styled.div< { age : number ..