코랩 무료 버전의 경우 런타임 유지 시간은 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..
- 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 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...
실습은 주피터로 하였고, kpc의 DSAC Module1 DATA Programming을 참고했습니다. 지난 시간에 간단하게 DataFrame과 Series가 무엇인지 알아보았으니 이번에는 문법 위주로! numpy와 pandas를 불러와주고 추가로 DataFrame, Series를 불러와준다. - Series 인덱스 정렬하기 Series는 파이썬의 딕셔너리와 형태가 유사하다. Series(values 값, index = index 값)으로 표현할 수 있다. sort_index()를 이용하여 인덱스를 기준으로 정렬하였다. 하지만! 원본 데이터는 변하지 않는다. 원본 데이터도 변경하고 싶다면, sort_index()의 속성 값으로 inplace=True를 추가해주면 된다. - 행, 열 정렬하기 우선 0부터 ..
실습은 주피터로 하였고, kpc의 DSAC Module1 DATA Programming을 참고했습니다. [Pandas] - Panel data analysis(구조화된 데이터 분석)의 줄임말 - 데이터를 수집하고 정리하는 데 최적화된 도구 - 판다스 라이브러리는 DataFrame, Series이라는 데이터 형식 제공 [DataFrame] - 파이썬에서 데이터를 편리하게 다루기 위해 테이블 구조로 데이터를 처리하는 경우가 많음. 이를 위해 판다스의 데이터프레임을 이용함. - 데이터프레임은 2차원 테이블 구조로 데이터를 다룸 (엑셀 스프레드시트처럼!) - 데이터프레임에서 표를 table(테이블), 행은 row/record, 열은 field/column, 가장 위에있는 행은 field name이라고 함. Pa..
실습은 주피터로 하였고, kpc의 DSAC Module1 DATA Programming을 참고했습니다. [NumPy] - Numerical Python의 줄임말, 벡터나 매트릭스 같은 다차원 배열을 계산할때 사용. - 여러 항목으로 구성된 데이터가 모두 숫자인 경우 계산 속도를 개선하기 위해 NumPy 모듈을 사용한다. - NumPy가 제공하는 다차원 배열을 사용하면 파이썬의 리스트보다 계산시 편리하고 속도도 빠르다. [배열 VS 리스트] - 배열의 각 원소는 모두 같은 타입인 숫자(정수/소수 등)이어야 하지만, 리스트는 원소의 타입이 달라도 된다. - NumPy 라이브러리는 다차원 배열을 제공한다. - type()함수를 이용하면 리스트의 타입은 리스트이지만 배열의 타입은 ndarray로 뜨는걸 확인할 ..