AI Platform / Web

react를 통해 컴포넌트를 만들어 볼까 한다. 복잡한 이론 없이 최소의 중요한 것만 적어보겠다. 심화 내용은 필요 시 다른 좋은 참고 서적을 참고하기 바란다. https://han-py.tistory.com/395 위의 단계(react 시작)부터 빠르게 우리는 여기 까지 왔다. (보는데 2분도 안걸리니 보고 오면 좋다.) 1. 개념 기본적으로 html을 해 보신 분들이 이 글을 보고 있을 것이다. 사실 html으로 웹으로 만들어도 된다. 그러나 react 라이브러리를 쓰는 이유는 무엇일까? 단지 현업에서 많이 사용해서? 내가 생각하는 이유는 간단하다. html 만 사용하는 것보다 편하기 때문이다. 그렇다면, 무엇이 편할까? .html 파일에 코드를 작성하는 경우 굉장히 길어지고 유지보수 재사용성이 어렵..

1. req.body가 안불러지는 경우 아래의 부분을 추가해 주자. const bodyParser = require('body-parser') app.use(bodyParser().json()) 2. raw-json을 불러오는 경우 아래 부분을 추가하자. app.use(express.json())

우리는 아래의 url에서 프로젝트를시작하는 방법을 알아보았다. 2021.11.01 - [Web/React] - [react web] 시작하기 처음시작하면 아래와 같이 파일 구조가 보인다. 그리고 npm start를 사용하면, 아래와 같은 화면이 뜬다. 이제 프로젝트 시작하기 위한 첫 setting에 대해 알아보자 app.js에 들어가면 아래와 같다. 먼가 많아 보인다. 필요 없는 것을 깔끔히 지우면 아래와 같이 된다. 끝이다. hi를 넣어보자. 이렇게 하면 기본 준비가 다 된것이다. 물론 파일 정리를 깔끔해게 해도된다. 하지만, 초보자 기준으로는 핵심은 화면이고 화면정리는 app.js에서 하는 것을 우선적으로 이해를 한 후에 파일 정리를 하면 된다. 추가로 중앙 정렬만 CSS를 추가해 주면 아래와 같다...

실습 기준으로 빠르게 리액트의 기본을 알아가자. 프로젝트를 진행한 기준으로 사용한 기술들을 정리하려 한다. 신입 개발자나 취준분들에게 많은 도움이 될 것이다. before starting > 시작전 아래의 방법을 cmd에 친다. 버전이 안뜬다면, 기본적으로 설치를 진행하자. $ node -v $ npm -v $ npx -v 설치가 됐다면, 아래의 명령어로 web을 만들기 위한 리액트를 시작할 수 있다. $ npx create-react-app base0 $ cd base0 $ npm start $ npx create-react-app base0 이 명령어는 base0이라는 프로젝트를 시작한다는 말이다. base0 대신 사용하고 싶은 프로젝트명을 사용하면 된다. $ cd base0 base0이라는 생성된 ..

들어가기전에 react는 뷰js나 앵귤러가 프레임워크인 점과 다르게 react는 라이브러리다. 따라서 자유도가 높다는 점을 진지하고 진행하자. JSX를 사용이유는 여기를 눌러서 확인하고 오자. JSX란, 문자도 HTML도 아닌 JavaScript의 확장 문법이다. 변수선언방법은 아래와 같다. const element = Hello, world! 위의 생겨먹은것을 보면 전반적으로 const로 변수를 선언하니 javascropt같은 냄새가 난다. 그러나 뒤의 h1 태그들을 보면, HTML인것 같다. 즉, 위의 태그 문법은 문자열도 아니고 HTML도 아니다. 바로 JSX이다. JSX는 JavaScript의 모든 기능이 포함되어있다고 볼 수 있다. 이전 글에서 sandbox에서 react에대한 기초를 알아 봤다..

0. 들어가면서 즐거운 마음으로 react관련 글을 적어보려한다. 가능하면 실습을 통해 따라하면서 자연스럽게 익힐 수 있도록 준비해 보려한다. 기본적으로 프런트엔드는 웹과 앱이 있는데 우선을 웹을 기준으로 작성을 시작해 보겠다. 리액트를 들어가기 전에 자바스크립트로 워밍업을 한다고 생각하면 된다. 들어가기 전에 간단히 개념만 잡고 가겠다. 기본적으로 WEB에서 우리가 눈에 보이는 각각을 element라고 한다. 그리고 DOM이란 브라우저(컴퓨터)가 이해하는 element의 원형이다. 즉, element를 논리적으로 말하면 DOM이라고 한다. 물론 한번에 이해 안될 것이다. 괜찮다. 먼가 화면에 보여지는것을 element라고 하기도 하고 DOM이라고 하기도 하는구나라고 생각하고 그냥 넘어가자. 우리는 바닐..

상황은 다음과 같다. django rest framework를 사용중이고, serializer를 통해 직렬화를 진행했다. 그리고 return을 하려는데 잘 안된다. 관련 내용을 정리해 보겠다. 회원가입, 로그인, jwt관련 인증은 아래의 url을 따라가서 확인하자. 기본 설정 > 모델설정은 아래와 같이했다. BaseUserManager와 AbstractBaseUser를 사용한 것은 로그인과 회원가입을 위해 장고 내부기능을 활용한것이다. 자세한 부분은 여기를 눌러보자. 여기서 중요한 것은 나는 User이름을 MyUser로 했다는 것이다. 나같은 경우는 사용자 인증으로 User 모델을 했지만, 다른 models.py의 class 들도 적용가능하다. # models.py from django.db import..

django를 내부의 로직에 따른 복잡한 데이터를 다른 framework에서도 이해할 수 있도록 변환이 필요할 것이다. 이러한 목적으로 나온 것이 Serializer이다. 따라서 serializer는 fontend와 장고를 연결할 때 보통 처음 접하게 된다. serializer에 대한 개념을 찾아보면, 직렬화라는 이야기가 많이 나오지만, 쉽게 설명하면 frontend로 데이터를 보내기 위해 장고 내부의 복잡한 데이터들을 json/xml 등의 형태로 데이터를 변환해준다고 생각을 하면 된다. 사용 시기 우리는 장고에서 model.py를 통해 데이터베이스(DB)를 구축한다. 그리고 serializer는 DB를 json으로 바꿀 때 사용되며, 반대로 json을 DB로 바꿀 때는 deserializer가 사용된다..