컴공과컴맹효묘의블로그

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

Widget이론 Widget은 모두 “불변”의 법칙을 갖고 있다. 하지만 위젯의 값을 변경해야할 때가 있다. 변경이 필요하면 기존 위젯을 삭제해버리고 완전 새로운 위젯으로 대체한다. 마치 React의 State에 대한 Component Rendering같다. StatelessWidget의 라이프 사이클(Life Cycle) Constructor로 생성이 되고 생성읻 되자마자 build함수가 실행됨 이전 Container예제와 마찬가지로 변경이 필요하면 새로운 위젯을 만들어버린다. 하나의 StatelessWidget은 라이프 사이클동안 단 한번만 build 함수를 실행한다. StatefulWidget의 라이프 사이클 StatefulWidget또한 위젯이기 때문에 불변이다. 따라서 State를 이용하여 변화..

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}`);..

https://www.acmicpc.net/problem/2230 2230번: 수 고르기 N개의 정수로 이루어진 수열 A[1], A[2], …, A[N]이 있다. 이 수열에서 두 수를 골랐을 때(같은 수일 수도 있다), 그 차이가 M 이상이면서 제일 작은 경우를 구하는 프로그램을 작성하시오. 예를 들어 www.acmicpc.net 순서는 상관 없고 두 수를 골라서 서로 차이가 M상의 최소값을 구하면 되니까 일단 서로 인접한 차이를 배열에 저장해두고, 어떻게든 하면 답을 구할 수 있을것이라고 생각했다. 하지만 이 생각은 아주 틀렸다. 그냥 단순히 두 개의 포인터 left와 right를 이용하면 답을 쉽게 구할 수 있었다. 입력받은 배열을 정렬하고 두 포인터의 값의 차이를 이용해서 right와 left를 적..

https://www.acmicpc.net/problem/13913 13913번: 숨바꼭질 4 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 100,000)에 있고, 동생은 점 K(0 ≤ K ≤ 100,000)에 있다. 수빈이는 걷거나 순간이동을 할 수 있다. 만약, 수빈이의 위치가 X일 www.acmicpc.net 쉬운 BFS문제이다. 그러므로 여기서는 내가 이 문제를 풀면서 공부한 내용을 적어볼까 한다. #include #include #include using namespace std; int N, K; queue q; bool visited[100001]; int main() { ios_base::sync_with_stdio(0); cin.tie(0); cout.tie..

https://www.acmicpc.net/problem/14728 14728번: 벼락치기 ChAOS(Chung-ang Algorithm Organization and Study) 회장이 되어 일이 많아진 준석이는 시험기간에도 일 때문에 공부를 하지 못하다가 시험 전 날이 되어버리고 말았다. 다행히도 친절하신 교수님께서 아래와 www.acmicpc.net . 준석이는 주어진 시간 안에 최대한의 점수를 주는 과목들을 공부해야한다. 각 과목은 cost와 그에대한 가치 value가 있다. 주어진 cost 안에 과목들의 가치의 총 합이 최대가 되게하는 과목집합을 구해야한다. 이 문제를 어떻게 풀어야할까? 쉬운 방법으로는 모든 경우의 수를 구할 수 있다. 하지만 단순 계산해보아도 경우의 수가 2^100이나 된다...

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;