컴공과컴맹효묘의블로그

Full page scroll? 풀 페이지 스크롤이란, 스크롤을 살짝만 하면 전체 페이지가 스크롤되는 트랜젝션입니다. 이 트랜젝션은 ppt같은 느낌을 주고, 기업 소개 페이지같은 랜딩 페이지에 어울립니다. 직접 스크롤을 window listener와 prevent default로기능을 없애고, 간단한 계산으로만 full-page scroll을 구현했습니다. FullPageScroll.tsx 전체 코드 import { PropsWithChildren, useEffect, useRef, useState } from "react"; import { Dots } from "./Dots"; type PFullPageScroll = { onPageChange?: (page: number) => void; onLoa..

Issue 스프링 부트 2.6.5 버전에서 Swagger를 사용하려고 했는데, 다음과 같은 오류가 났다. Debug Console Caused by: java.lang.NullPointerException: Cannot invoke "org.springframework.web.servlet.mvc.condition.PatternsRequestCondition.toString()" because the return value of "springfox.documentation.spi.service.contexts.Orderings.patternsCondition(springfox.documentation.RequestHandler)" is null 다음은 build.gradle파일 buid.gradle pl..

React에서 window event listener 사용할 때 주의점 react에서 window event listener를 사용해야할 일이 생겼다. 그런데, window event listener의 call back함수가 component의 state를 잘 반영하지 못 한다는 사실을 깨달았다. call back함수는 state의 init값만을 반영한다. component가 업데이트 되어도 update된 state값을 반영하지 않고 init state value만 반영한다. function App() { const [myState, setMyState] = useState(0); const listener = () => { console.log(`state in handler: ${myState}`);..

typescript에서의 react-router-dom 기존 코드 react-router-dom@5버전이다. Typescript 코드 react-router-dom@6를 설치한다. npm install react-router-dom 파라미터와 쿼리: Params Pramas는 **useParams** Hook을 사용한다. // ----------- App.tsx ------------ // ----------- User.tsx ----------- const User: React.FC = () => { const { id } = useParams(); return( {/* your code*/} ) } // ... **useLocation**을 사용하여 pathname을 받아올 수도 있다. const {..

리액트를 하다가 setState에서 uncaught typerror가 났다. 보통 초기 state값을 주지 않아서 타입 에러가 나는것인데 내 경우에는 조금 달랐다. input태그에서 string을 받고 onChange되면 this.func를 호출하는 식인데 이때 함수가 바인딩이 안돼서 에러가 났었다. // 에러 코드 // 에러 해결

create-react-app npx create-react-app project_name --template typescript Tailwind 설치 npm install -D tailwindcss postcss autoprefixer create config file npx tailwindcss init -p tailwind.config.js 수정 //tailwind.config.js module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } change index.css @tailwind base; @tailwind components; @tailwind utilities;

사건의 시작은 노트북에서 공부한 내용을 깃에 올리고 데탑에서 다시 pull 한 후 push하려니까 오류가 났다. 찾아보니까 뭐 pull 한 후에 push하라는데 어림도 없었다. 해결 방법은 다음과 같다. git branch -M main git push -u origin main 깃 버전이 옛날꺼였고 아마 옛날 깃은 자동으로 master로 생성되니까 브랜치 이름에서 뭔가 꼬인 것 같다. 정확한 이유는 모르겠다. 아무튼 위 명령어로 해결했다.

저번에 gotoxy함수를 설명한 포스팅과 c언어로 할만한 프로젝트를 작성했었습니다. 그 예시를 직접 포스팅하면 좋을 것 같아서 포스팅해봅니다. 개인적으로 가장 만만하다고 생각하는 것은 오목입니다. 물론 33규칙 알고리즘을 적용하면 복잡해지지만, 33규칙을 빼고 구현하면 굉장히 쉽습니다. 이 글에서 나오는 오목은 최대한 단순화시켜서 오목의 필수적인 요소들만 가져와서 간단하게 오목을 둘 수 있는 게임을 만들어봤습니다. 헤더파일 stdio.h // 기본 입출력 windows.h // 좌표 설정 conio.h // 입력 string.h // 입력 문자열 처리 전처리 MAX_N 19 // 바둑(오목)판의 크기 DRAW_BLACK printf("○") // 검은 돌 출력 (cmd에서는 색반전이기 때문) DRAW_W..

사용한 파이썬 모듈(라이브러리): matplotlib # 정보 시각화 모듈 konlpy # 한국어 정보 처리 모듈 BeautifulSoup # 웹 파싱 라이브러리 time # 지간 지연을 사용하려고 selenium # 유튜브같은 경우, 사이트를 단순 파싱하면 댓글 로딩이 안 된 상태에서 파싱이 되기때문에 댓글을 로딩하기 위함 pandas # 데이터 관리 모듈 re # 정규식 연산 모듈. 댓글에 쓸모 없는 이모티코을 줄이기 위함 collections # 중복되는 단어를 세기 위한 모듈 wordcloud # 중복되는 단어의 빈도수를 이미지 시키기 위한 모듈 제가 왜 유튜브 댓글을 파싱하고 있는지 모르겠는데, 심심해서 그랬나봅니다. 주의 : 이런 짓을 처음해서 코드가 많이 더럽습니다. import matplo..

문제적 남자에서 나왔던 n-back 트레이닝. 유튭보다 심심해서 만들어봤습니다. 대충만들어서 코드가 지저분함.. #define _CRT_SECURE_NO_WARNINGS #include #include #include #include #include #define MAX 100 int main() { int TERM = 1800; while (1) { int n, a; double prob = 0.5; int q[100]; int answer[100]; srand((unsigned)time(NULL)); printf("n-back training.\n"); printf("n > "); scanf("%d", &n); if (n > 24) { n = 24; } printf("start %d-back...\n..