SimCoding

[TS] Object is of type 'unknown'.ts(2571) (error object) > try-catch문의 error의 타입과 관련해서 발생하는 error > 해결방법 : 아래와 같이 type narrowing기법을 이용해 해결 할 수 있다.

[Next.js] Nextjs build 할 때, dynamic route 404 error 해결하는 방법 안녕하세요, 이번 포스팅에서는 Nextjs환경에서 build할 때, dynamic route를 처리하는 방법에 대해 알아보겠습니다 ! NEXTJS 개발환경에서는 분명, dynamic route에 정상적으로 접근이 됐었는데 .. build하고 배포를 하면 접근이 안되는 문제가 있었습니다.. NEXTJS Build과정에서, 정적페이지를 생성할 때 DynamicRoute의 경우에는 따로 처리를 해줘야 하는 것 같더라구요.. 저는 NEXTJS 에서 제공하는 getStaticPaths, getStaticProps를 활용해서 DynamicRoute를 처리해주었습니다. 예시코드를 통해 방법을 확인해보세요 ! 간..

[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'..