AI Platform / Web

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이라고 하기도 하는구나라고 생각하고 그냥 넘어가자. 우리는 바닐..

적용을 해보면서 object mapper에 대해 알아보자. 우선 프로젝트를 만들자. 위와 같이 프로젝트를 만들면 아래와 같이 gradle로 프로젝트가 만들어진다. 그리고 build.gradle을 보면 dependency라는 것이 있다. 보통 자바 프로젝트에서는 directory로 폴더를 하나 만들어서 lib이라 이름을 짓고 그 안에 라이브러리를 추가해 준다. 그러나 gradle이나 maven 프로젝트를 그럴 필요 없이 dependency만 추가해 주면된다. 이러한 것들은 아래와 사이트에서 가져오게 된다. 구글에 maven repository 라고 쳐보자. https://mvnrepository.com/ 이러한 사이트에서 maven 프로젝트를 검색할 수 있다. spring boot, object mappe..

프로젝트를 시작하고 잘 작동을 하는지 test를 하는 방법에 대해 알아보자. 나는 JPA를 사용할 예정이라 아래와 같이 테스트를 만들었다. Dependencies는 Lombok, Spring Web, Spring Data JPA을 선택한다. 그리고 테스트 데이터베이스를 사용하기 위해 H2 Database도 추가로 선택해 준다. finish를 누르자. 프로젝트가 생성 후에 build.gradle을 확인하여 의존성부터 확인하자. dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' // 우리가 사용할 것 implementation 'org.springframework.boot:spring-boot-starte..

object mapper란 텍스트 형태의 JSON을 object로 변경해 주거나 object를 텍스트 형태의 JSON으로 변경해 주는 것을 의미한다. 예를 들면 컨트롤러에 요청이 오면 JSON을 object로 변경을 했고, 응답으로 보내면 자동으로 object를 json으로 변경했다. 컨트롤러를 사용하지 않고 직접 object를 활용하여 사용하는 방법을 알아보자. 아래와 같이 자유롭게 프로젝트를 만들고 Dependencies는 Spring web을 설정한다. 코드는 main에 작성하지 않고 test에 작성하여 간략하게 알아보자. 아래와 같이 잘 적성하나 간단한 문장을 프린터 해보자. 실행을 시켜보면, Test 부분에 아래와 같이 뜨는 것을 확인 할 수 있다. object mapper를 생성하자. 그래서 ..