코랩 무료 버전의 경우 런타임 유지 시간은 12시간이다. 하지만 90분간 입력이 없으면 연결이 끊긴다..!! 하지만!!! 90분이 지나지 않았어도 연결이 끊기는 경우가 정말 많았다 처음부터 학습을 다시 시작하곤 했다.. 이를 해결하기 위한 약간의 꼼수가 있다. 1. 크롬 기준 F12를 눌려 개발자 도구를 열어준다. ( or 마우스 오른쪽 버튼 누르고 - 검사 클릭 ) 2. Console 탭을 눌러준다. 3. 밑 코드를 복사하여 Console 탭에 붙여 넣고 엔터키를 눌러준다. function ClickConnect() { console.log("Working"); document.querySelector("colab-connect-button").shadowRoot.getElementById('conne..
- React-transition-group: CSSTransition 햄버거 버튼을 클릭했을 때, 메뉴가 부드럽게 뜨고, 메뉴 외부를 누르면 메뉴가 부드럽게 사라진다. 효과가 없다면 이런 느낌일 것이다. 일반 CSS에서 애니메이션을 적용하기 위해선 애니메이션 클래스를 생성해두고 컴포넌트가 업데이트가 될 때 className을 적용하면 된다. 이 로직을 적용시키는 게 까다롭거나 귀찮다면 react-transition-group 라이브러리를 사용하면 된다. react-transition-group에는 한 개의 컴포넌트에게 transition을 적용시키는 CSSTransition, router 혹은 여러 컴포넌트한테 transition을 적용시키는 TransitionGroup 등이 있다. 이번 예제에서는 C..
[문제 설명] 대학 교수인 당신은, 상호평가를 통하여 학생들이 제출한 과제물에 학점을 부여하려고 합니다. 아래는 0번부터 4번까지 번호가 매겨진 5명의 학생들이 자신과 다른 학생의 과제를 평가한 점수표입니다. No. 0 1 2 3 4 0 100 90 98 88 65 1 50 45 99 85 77 2 47 88 95 80 67 3 61 57 100 80 65 4 24 90 94 75 65 평균 45.5 81.25 97.2 81.6 67.8 학점 F B A B D 위의 점수표에서, i행 j열의 값은 i번 학생이 평가한 j번 학생의 과제 점수입니다. 0번 학생이 평가한 점수는 0번 행에담긴 [100, 90, 98, 88, 65]입니다. 0번 학생은 자기 자신에게 100점, 1번 학생에게 90점, 2번 학생에게..
[문제 설명] n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. [제한 사항] 주어지는 숫자의 개수는 2개 이상 20개 이하입니다. 각 숫자는 1 이상 50 이하인 자연수입니다. 타겟 넘버는 1 이상 1000 이하인 자연수..
요즘 영어 공부를 아예 안 했더니 실력이 현저히 줄었다. 하루에 한 시간이라도 영어 공부를 하자고 다짐했다... 이 생각이 오래가야 할 텐데.. ㅋㅋㅠ 스페인어를 독학하다 영어 독학 자료를 찾아보니 정말 정말 많았다.. 비교도 할 수 없을 정도로 영어는 본인에게 맞는 공부법만 찾으면 독학하기가 다른 언어보다 수월한 것 같다 수많은 영어 공부법을 따라 해 봤지만 나에게 맞는 공부법은 - 영상의 길이가 너무 길면 안 됨 (드라마나 영화 쉐도잉 절대 불가.. 좋아하던 것도 싫어짐) - 영상을 보기까지 과정이 번거로우면 안 됨 (익스텐션 설치해야 함, 대본 찾기 힘듦 등등..) - 영상의 수준이 중급 ~ 고급이어야 함 까다롭게 고르다 보니 하나만 남았다. 10분 뉴스 'CNN 10'이다. 개인적으로 Interm..
- 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 React-Practice로 했다. yarn create react-app React-Practice RestAPI.css와 RestAPI.js를 추가해주었다. css는 앱을 보기 좋게 하기 위해 추가한 거라 필수는 아니다. [App.js] App에 RestAPI 컴포넌트를 추가해준다. import "./App.css"; import RestAPI from "./RestAPI.js"; import React from "react"; function App() { return ( ); } export default App; [RestAPI.js] 하단에 전체 코드있습니다. - 우선 HTTP request를 위해 axios를 설치한다. yarn add a..
- Models 생성 간단하게 제목, 내용, 업데이트된 날짜를 담은 모델을 생성해줬다. 모델을 생성했다면, 마이그레이션으로 DB에 적용시켜준다. -마이그레이션 두 가지 절차가 있다. makemigrations와 migrate!! -관리자(admin) 등록 Review 모델에서 불러와주는 거 잊지 말고, 사진처럼 등록해준다. 그리고 createsuperuser 를 통해 어드민 계정을 생성해준다. - Serializer 생성 Serializer(시리얼라이저)는 DRF가 제공하는 클래스인데, DB 인스턴스를 JSON 데이터로 생성한다. 장고의 form과 유사하다! mainApp에 serializers.py를 생성하고, 모델과 필드를 작성해준다. -views.py 클래스 선언 Review 전체 목록을 보여주는 ..
REST API Django REST Framework DRF와 리액트 연동 방법을 바로 알고싶다면 이 글을 참고해주세요!!! [장고/리액트] 리액트와 장고(DRF) 연동하기- (3) CORS 해결, 리액트, 장고 연동 - 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 React-Practice로 했다. yarn create react-app React-Practice RestAPI.css와 RestAPI.js를 추가해주었다. css는 앱을 보기 좋게 하기 위해 추가한 거라 필.. breathtaking-life.tistory.com 보통 프로젝트는 프론트엔드와 백엔드가 협업하여 진행하는데, 작업이 분리가 되지 않는다면 동시에 작업해야 해서 번거로워질 수 있다. 해결책은 백엔드는 API로 프론트엔드에..
코드 분할이 왜 필요한지는 이전 글 참고! [리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명 - 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자 breathtaking-life.tistory.com 리액트 16.6 버전 이전에는 import함수로 비동기 로딩하고, 컴포넌트를 state에 넣어서 코드 분할을 하였다. 그 이후부터는 내장 함수 React.lazy와 Suspense 컴포넌트로 코드 분할을 할 수 있다! - state를 사용한 코드 분할 (클래스형 컴포넌트) [sayHi.js] 모두 안녕하세요!! 인사를 해준다. expor..
- 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자바스크립트뿐만 아니라 모든 CSS 파일도 하나의 번들 파일로 합쳐진다. 웹팩 페이지를 들어가면 바로 뜨는 사진인데, 사진을 보면 이해가 쉬울 것이다!! - 왜 하나로 합쳐야 할까? 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 포함한다. 이 스크립트가 많아진다면, 네트워크 비용도 높아지고, 병목현상도 생기게 된다. 즉, 비효율적이게 된다!! 웹팩의 장점을 더 알고싶으시다면 공식 페이지를 참고 바랍니다...🤗 Why webpack | webpack webpack is a module bundler...