토이프로젝트 [React] Full Height 화면을 만드는 법 먼저 간단하게 전체 화면을 구성하는 컨테이너 div태그의 height를 100vh로 주었다. 1vh는 뷰포트 높이의 1%이므로, 100vh는 뷰포트의 100%, 즉 full 높이를 말한다고 볼 수 있다. 먼저 url바와 네비게이션바의 높이를 포함하지 않은 나만의 vh를 구할 필요가 있다. 를 통해 새로운 스타일 프로퍼티를 지정할 수 있다. 위의 식은 윈도우, 즉 뷰포트의 안쪽 화면 크기(in... 사이퍼즈성향테스트토이프로젝트사이퍼즈성향테스트 화성 땅 공동구매(토이프로젝트) *토이 프로젝트로 프론트 부분인 HTML과 서버 Flask가 통신할 수 있도록 API를 구축해본다. 이 전에 포스팅했던 내용과 동일하게 새 프로젝트 생성 후, 설정을 해준다. Flask의 규칙에 맞게 설정을 하면 되는데 이렇게 설치를 하고 인터프리터에서 flask, pymongo, dnspython을 설치한다. *API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> PO... 토이프로젝트TIL항해99get방식post방식APIFlask스파르타코딩API 3월 19일 (토) Access Token / Refresh Token postman에 저장되어있던 쿠키까지 나와서 그렇게 된 것, postman 초기화 후 재시도 하면 정상 작동한다... 토이프로젝트TokenTILTIL 프로젝트 - index 파일 생성 프로젝트는 CRA로 빌드했다. 필요없는 파일들은 삭제하고, index.js를 다음과 같이 수정해 주었다. 개발이 어느 정도 진행된 상태에서 쓰는 개발기라 여러 가지가 섞여 있다. index.js에서 react-router-dom 5버전을 이용해서 라우팅 설계를 했는데, 나중에 보니까 6버전이 새로 나왔고 되게 많은 기능들이 나온 모양이다..? 프로젝트 자체는 예전에 빌드해뒀던 연습용 프로젝트... 사이퍼즈성향테스트토이프로젝트사이퍼즈성향테스트 [Toy] Thumbnail Maker 만들기 | velog 썸네일 생성기 하지만 매번 썸네일을 만들려다보니 이조차도 여간 번거로운 일이 아니었다...😫 그러다 썸네일을 간편하게 만들 수 있는 사이트가 없을까 검색해보게 되었고 다양한 사이트가 이미 많았지만 나의 필요에 맞는 썸네일 메이킹 툴을 위해서 직접 만들어보기로 했다. 가장 핵심적인 기능인 텍스트 입력, 이미지 생성 기능을 포함하면서도 직접 썸네일을 만들었을 때 필요했던 기능들과, 테스트해가면서 불편한 부분을... thumbnail makerReact토이프로젝트썸네일 메이커React [ 프로젝트 ] 내가 개발중인 spring boot 웹사이트 코드 성능 최적화 저는 깃허브와 연동하여 자신의 Repository들을 그룹화 시켜 관리할 수 있는 웹을 개발중에 있습니다. 그래서 내 깃허브와 연동하여(OAuth2) 로그인 할 때마다 자신의 Repository들을 얻어와서 기존 db에 있던 Repository와 sync를 맞춰줘야 하는 작업이 있습니다. 이 부분에서 기존 코드는 시간복잡도가 O(N * M)인 상황이었습니다. 그래서 이 부분을 개선해야겠다고 ... 토이프로젝트토이프로젝트 [Javascript Toy Project] Movie Booking Page | 영화 예매 페이지 만들기 토이프로젝트 인터넷 강의를 보면서 영화관 자리 선택 페이지를 만들어보았습니다. 좌석을 선택하면 데이터가 저장되는 기능 위주로 초점이 맞추어진 강의였기 때문에 결과물이 마음에 차지 않아 몇 가지 기능을 추가하고 디자인을 개선했습니다. 영화를 선택하면 왼쪽 포스터가 바뀌고, 좌석을 선택할 수 있게 됩니다. 이미 예약된 좌석은 회색으로, 예약 가능한 좌석은 노란색으로 표현했으며, 선택한 좌석은 눈에 가장 잘 ... 토이프로젝트JavaScriptMovie Bookingtoy projectlocalstorageDOMDOM 리액트로 애니메이션 띄우기 (feat. Canvas & RequestAnimationFrame) 😝 글 작성 동기 좋은 기회로(?) 리액트로 캔버스 애니메이션을 구현해보았는데 requestAnimationFrame으로 화면을 리페인트하는 로직을 더 중시하는 예제입니다! 재미로 읽으시고, 추후에 더 좋은 방법들을 찾아보시면 좋을 것 같습니다! The window.requestAnimationFrame() method tells the browser that you wish to perfo... React토이프로젝트JavaScriptwebcanvasHTML5 CanvasHTML5 Canvas 3월 20일 (일) sequelize 테이블 추가 생성 및 테이블 연결, 구현 해야할 내용 npx sequelize-cli model:generate --name Posts --attributes user_id:integer,message:text,total_comments:integer 특정 유저가 쓴 글을 Posts테이블에 저장한다 npx sequelize-cli model:generate --name Posts_comments --attributes user_id:intege... 토이프로젝트TILTIL
[React] Full Height 화면을 만드는 법 먼저 간단하게 전체 화면을 구성하는 컨테이너 div태그의 height를 100vh로 주었다. 1vh는 뷰포트 높이의 1%이므로, 100vh는 뷰포트의 100%, 즉 full 높이를 말한다고 볼 수 있다. 먼저 url바와 네비게이션바의 높이를 포함하지 않은 나만의 vh를 구할 필요가 있다. 를 통해 새로운 스타일 프로퍼티를 지정할 수 있다. 위의 식은 윈도우, 즉 뷰포트의 안쪽 화면 크기(in... 사이퍼즈성향테스트토이프로젝트사이퍼즈성향테스트 화성 땅 공동구매(토이프로젝트) *토이 프로젝트로 프론트 부분인 HTML과 서버 Flask가 통신할 수 있도록 API를 구축해본다. 이 전에 포스팅했던 내용과 동일하게 새 프로젝트 생성 후, 설정을 해준다. Flask의 규칙에 맞게 설정을 하면 되는데 이렇게 설치를 하고 인터프리터에서 flask, pymongo, dnspython을 설치한다. *API 만들고 사용하기 - 이름, 주소, 평수 저장하기 (Create -> PO... 토이프로젝트TIL항해99get방식post방식APIFlask스파르타코딩API 3월 19일 (토) Access Token / Refresh Token postman에 저장되어있던 쿠키까지 나와서 그렇게 된 것, postman 초기화 후 재시도 하면 정상 작동한다... 토이프로젝트TokenTILTIL 프로젝트 - index 파일 생성 프로젝트는 CRA로 빌드했다. 필요없는 파일들은 삭제하고, index.js를 다음과 같이 수정해 주었다. 개발이 어느 정도 진행된 상태에서 쓰는 개발기라 여러 가지가 섞여 있다. index.js에서 react-router-dom 5버전을 이용해서 라우팅 설계를 했는데, 나중에 보니까 6버전이 새로 나왔고 되게 많은 기능들이 나온 모양이다..? 프로젝트 자체는 예전에 빌드해뒀던 연습용 프로젝트... 사이퍼즈성향테스트토이프로젝트사이퍼즈성향테스트 [Toy] Thumbnail Maker 만들기 | velog 썸네일 생성기 하지만 매번 썸네일을 만들려다보니 이조차도 여간 번거로운 일이 아니었다...😫 그러다 썸네일을 간편하게 만들 수 있는 사이트가 없을까 검색해보게 되었고 다양한 사이트가 이미 많았지만 나의 필요에 맞는 썸네일 메이킹 툴을 위해서 직접 만들어보기로 했다. 가장 핵심적인 기능인 텍스트 입력, 이미지 생성 기능을 포함하면서도 직접 썸네일을 만들었을 때 필요했던 기능들과, 테스트해가면서 불편한 부분을... thumbnail makerReact토이프로젝트썸네일 메이커React [ 프로젝트 ] 내가 개발중인 spring boot 웹사이트 코드 성능 최적화 저는 깃허브와 연동하여 자신의 Repository들을 그룹화 시켜 관리할 수 있는 웹을 개발중에 있습니다. 그래서 내 깃허브와 연동하여(OAuth2) 로그인 할 때마다 자신의 Repository들을 얻어와서 기존 db에 있던 Repository와 sync를 맞춰줘야 하는 작업이 있습니다. 이 부분에서 기존 코드는 시간복잡도가 O(N * M)인 상황이었습니다. 그래서 이 부분을 개선해야겠다고 ... 토이프로젝트토이프로젝트 [Javascript Toy Project] Movie Booking Page | 영화 예매 페이지 만들기 토이프로젝트 인터넷 강의를 보면서 영화관 자리 선택 페이지를 만들어보았습니다. 좌석을 선택하면 데이터가 저장되는 기능 위주로 초점이 맞추어진 강의였기 때문에 결과물이 마음에 차지 않아 몇 가지 기능을 추가하고 디자인을 개선했습니다. 영화를 선택하면 왼쪽 포스터가 바뀌고, 좌석을 선택할 수 있게 됩니다. 이미 예약된 좌석은 회색으로, 예약 가능한 좌석은 노란색으로 표현했으며, 선택한 좌석은 눈에 가장 잘 ... 토이프로젝트JavaScriptMovie Bookingtoy projectlocalstorageDOMDOM 리액트로 애니메이션 띄우기 (feat. Canvas & RequestAnimationFrame) 😝 글 작성 동기 좋은 기회로(?) 리액트로 캔버스 애니메이션을 구현해보았는데 requestAnimationFrame으로 화면을 리페인트하는 로직을 더 중시하는 예제입니다! 재미로 읽으시고, 추후에 더 좋은 방법들을 찾아보시면 좋을 것 같습니다! The window.requestAnimationFrame() method tells the browser that you wish to perfo... React토이프로젝트JavaScriptwebcanvasHTML5 CanvasHTML5 Canvas 3월 20일 (일) sequelize 테이블 추가 생성 및 테이블 연결, 구현 해야할 내용 npx sequelize-cli model:generate --name Posts --attributes user_id:integer,message:text,total_comments:integer 특정 유저가 쓴 글을 Posts테이블에 저장한다 npx sequelize-cli model:generate --name Posts_comments --attributes user_id:intege... 토이프로젝트TILTIL