본문 바로가기

분류 전체보기169

[장고/리액트] 리액트와 장고(DRF) 연동하기- (3) CORS 해결, 리액트, 장고 연동 - 리액트 앱 만들기 간단한 앱을 만들어보자! 이름은 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.. 2021. 8. 27.
[장고/리액트] 리액트와 장고(DRF) 연동하기- (2) serializer, APIView로 CRUD 구현 - Models 생성 간단하게 제목, 내용, 업데이트된 날짜를 담은 모델을 생성해줬다. 모델을 생성했다면, 마이그레이션으로 DB에 적용시켜준다. -마이그레이션 두 가지 절차가 있다. makemigrations와 migrate!! -관리자(admin) 등록 Review 모델에서 불러와주는 거 잊지 말고, 사진처럼 등록해준다. 그리고 createsuperuser 를 통해 어드민 계정을 생성해준다. - Serializer 생성 Serializer(시리얼라이저)는 DRF가 제공하는 클래스인데, DB 인스턴스를 JSON 데이터로 생성한다. 장고의 form과 유사하다! mainApp에 serializers.py를 생성하고, 모델과 필드를 작성해준다. -views.py 클래스 선언 Review 전체 목록을 보여주는 .. 2021. 8. 27.
[장고/리액트] 리액트와 장고(DRF) 연동하기- (1) 장고 세팅 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로 프론트엔드에.. 2021. 8. 25.
[리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components 코드 분할이 왜 필요한지는 이전 글 참고! [리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명 - 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자 breathtaking-life.tistory.com 리액트 16.6 버전 이전에는 import함수로 비동기 로딩하고, 컴포넌트를 state에 넣어서 코드 분할을 하였다. 그 이후부터는 내장 함수 React.lazy와 Suspense 컴포넌트로 코드 분할을 할 수 있다! - state를 사용한 코드 분할 (클래스형 컴포넌트) [sayHi.js] 모두 안녕하세요!! 인사를 해준다. expor.. 2021. 8. 23.
[리액트] 웹팩(webpack), 코드 분할(code splitting) 간단 설명 - 코드 분할 관련하여 알아두면 좋을 '웹팩' 웹팩: 모든 자원을 번들링 해주는 도구이다. 즉, 자바스크립트로 작성된 모듈들(자원)을 묶어서 하나의 번들파일로 만들어주는(번들링) 도구이다. 자바스크립트뿐만 아니라 모든 CSS 파일도 하나의 번들 파일로 합쳐진다. 웹팩 페이지를 들어가면 바로 뜨는 사진인데, 사진을 보면 이해가 쉬울 것이다!! - 왜 하나로 합쳐야 할까? 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 포함한다. 이 스크립트가 많아진다면, 네트워크 비용도 높아지고, 병목현상도 생기게 된다. 즉, 비효율적이게 된다!! 웹팩의 장점을 더 알고싶으시다면 공식 페이지를 참고 바랍니다...🤗 Why webpack | webpack webpack is a module bundler... 2021. 8. 21.
[파이썬/알고리즘] 프로그래머스 - 더 맵개 [문제 설명] 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같이 특별한 방법으로 섞어 새로운 음식을 만듭니다. 섞은 음식의 스코빌 지수 = 가장 맵지 않은 음식의 스코빌 지수 + (두 번째로 맵지 않은 음식의 스코빌 지수 * 2) Leo는 모든 음식의 스코빌 지수가 K 이상이 될 때까지 반복하여 섞습니다. Leo가 가진 음식의 스코빌 지수를 담은 배열 scoville과 원하는 스코빌 지수 K가 주어질 때, 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 섞어야 하는 최소 횟수를 return 하도록 solution 함수를 작성해주세요. [제한 사항] sc.. 2021. 8. 20.

티스토리툴바