728x90 반응형 SMALL 코딩독학54 브라우저의 동작 원리 리액트js를 공부하면서 필요한 브라우저의 동작원리에 대해 한번 공부해보았습니다. 아주 간단하게 기록을 해봤습니다. 저희가 브라우저 주소창에 http://google.com과같은 과같은 웹주소를 입력하면 브라우저는 Http GET요청을 해당 URL의 서버로 전송합니다. 보통 프론트엔드가 있는 웹 서비스의 경우 HTML파일을 결과로 반환합니다. HTML을 받은 브라우저는 그림처럼 두 단계를 거쳐 텍스트로된 HTML을 브라우저에 보여줍니다. 첫 번째 단계는 파싱이고, 두 번째 단계는 랜더링입니다. 파싱은 쉽게 말씀드리면 랜더링의 전처리 단계입니다. 파싱 단계에서 브라우저가 하는 일은 크게 3가지가 있습니다. 첫 번째 : 브라우저는 HTML을 트리 자료 구조의 형태인 DOM트리로 변환합니다. 두 번째 : 이미지.. 2021. 12. 2. REST security를 구현해보자! 당분간 User 레이어를 구현할것입니다!!! UserEntity 를 구현한다. UserRepository 구현 UserService 구현 UserDTO/UserController 구현 사용자는 id, username, email, password로 로그인을하고 구성되어있습니다.! 그래서 해당 정보들이 들어가는 Entity를 구현해봅시다 package com.unoSpringBoot.study.model; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id; import org.hibernate.annotations.G.. 2021. 12. 2. 서비스통합(백엔드와 프론트엔드 통합하기) 서비스 통합 크로스오리진 리소스 셰어링 스프링 @Configuration 을 이용한 CORS 문제해결 fetch를 이용한 프론트엔드와 백엔드 통합 현재 저는 독립적으로 동작하는 백엔드 애플리케이션과 독립적으로 동작하는 프론트엔드 어플이 하나씩있습니다! 이제는 두 어플리케이션을 통합해 하나의 기능을 하는 웹 애플리케이션을 완성할 차례입니다! 이제는 프론트엔드에서 백엔드에 API를 요청하는 코드를 작성해보겠습니다 우리는 이제 JS의 fetch API를 이용해서 Todo 아이템 CRUD를 하게 할게요! 하지만 이때 CORS문제에 만닥뜨리게 된다. 이 문제는 보안과 관련되어 있어 백엔드에서 해결해 줘야합니다. 우리가 개발하는 애플리케이션을 통해 CORS가 무엇이고 이를 어떻게 해주어야할까요!? App컴포넌트에 .. 2021. 12. 1. Todo 수정 프론트엔드 개발의 마지막으로 Todo아이템 수정 부분을 만들어봅시다! Todo아이템을 수정하는부분에서는 체크박스가 있구 그 title을 수정하고 ㅇ싶을때 입니다! 둘다해보겠습니다! TOdo컴포넌트에 readOnly 플래그가 있어 readOnly 가 true 인 경우 아이템 수정이 불가능 하고 , false인 경우 아이템을 수정할 수 있다. 사용자가 어떤 아이템의 title을 클릭하면 해당 input field는 수정할 수 있는 상태, 즉 readOnly가 false인 상태가 된다. 사용자가 Enter키 또는 Return키를 누르면 readOnly가 true인 상태로 전환된다. 체크박스 클릭 시 item.done 값을 전환한다. true -> false, false -> true ReadOnly Mode .. 2021. 12. 1. Todo 기능(추가, 삭제) 리스트들이 나오는걸 확인했다. 이제 그 리스트들을 추가해 줄 수 있도록 해주는 화면을 만들어봅시다! 첫번째로 텍스트를 입력받을 컴포넌트와 그걸 추가하는 버튼 내지 엔터키가 필요합니당 그러기 위해 다음코드를 입력하여 생성해주도록 합니다! 그리고 해당 기능을 위해 TodoAdd라는 js파일을 하나더 생성했습니다! import React from "react"; import { TextField, Paper, Button, Grid } from "@material-ui/core"; class AddTodo extends React.Component { constructor(props) { super(props); this.state = { item: { title: "" } }; } render() { ret.. 2021. 12. 1. [React] Invalid hook call. Hooks can only be called inside of the body of a function component.. 에러 해결방법 + 3000번 포트 죽이기 문법적 오류에 관해 발생하는 것이 아닌 시스템 또는 환경설정에 관해 발생할때 유용할듯..? 1. 터미널에서 npm ls react 를 통해 동시접속되어있는것을 확인하자 문제가 있다면 npm dedupe 를 통해 중복을 삭제해주고 찜찜하면 npm uninstall 를 통해 삭제 후 npm install를 통해 설치해주자 2. 버전을 확인하자 리액트 17.0.2를 사용중이거나 17버전 위라면 간혹 발생한다. npm install --save react@^16.14.0 react-dom@16.14.0 이걸 고대로 복붙해서 16.14로 맞춰주자 어디가나 16버전을 채택많이하더라... 3. 포트 3000 번이 아닌 것을 사용하고 있을 경우 이런 경우도 있다. 3000번이 켜져있어서 3001로 우회하거나 새로 만들.. 2021. 11. 30. 리액트로 간단한 컴포넌트 만들어보기 첫번째로 Todo 컴포넌트를 만들어볼것이다. 간단한 체크박스와 라벨을 랜더링하는 컴포넌트다. src디렉터리 아래에 Todo.js파일을 생성하자 저는 따로 js파일을들을 모아주기위한 js 폴더를 만들었어요! import React from 'react'; class Todo extends React.Component{ render(){ return ( Todo 컴포넌트 테스트 ); } } export default Todo; 현재 인덱스.js는 app컴포넌트가 렌더링 되고있다. 따라서 Todo컴포넌트를 화면에 출력하려면 App컴포넌트의 render함수에 Todo컴포넌트를 추가해야한다. import logo from './logo.svg'; import './App.css'; import Todo from .. 2021. 11. 30. Node.js와 NPM설치 앞으로 자바스크립트 라이브러리인 React.js 를 이용해 프론트엔드를 개발한다. React.js를 사용하려면 Node.js라는 자바스크립트 런타임 환경을 이용해야한다. 설치를 해줍시다 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 여기서 다운로드를하자. NPM은 node.js의 패키지 관리 시스템이다. 우리는 NPM을 이용해 node.js 라이브러리를 설치한다. NPM은 노드제이에스를 설치하면 함께 설치된다. 설치후 CMD 커맨드 라인에서 npm version 명령어로 버전 정보를 확인해줍시당! 지금은 16.13버전이.. 2021. 11. 29. 서비스 개발(4) - 삭제기능 Todo를 삭제하는 기능을 구현하고자합니당 퍼시스턴스 구현 TodoRepository를 사용한다. 업데이트를 위해 delete(), findByUserId()메서드를 사용한다. 서비스 구현 Delete기능의 구현을 위해 delete메서드를 작성하겠습니다! TodoService클래스에 해당 메서드를 추가해줍시다 public List deleteTodo(final TodoEntity entity) { Validate.checkValidate(entity); try { //엔티티를 삭제한다. todoRepository.delete(entity); } catch (Exception e) { //예외가 발생했을때 아이디와 예외를 로깅한다. log.error("에러발생!!엔티티 삭제할떄 오류가 발생..", enti.. 2021. 11. 28. 서비스 개발(3) - 업데이트 기능 지금의 포스팅은 Todo를 업데이트하는 리포지토리 서비스 컨트롤러 등을 구현한다. 그럼 제일 먼저할것은 서비스클래스에서 해당 기능을 해주는 update에 관련된 메서드를 만들어주는것이다. public List updateTodo(final TodoEntity entity) { // 저장할 엔티티가 유효한지 확인한다. Validate.checkValidate(entity); // 넘겨받은 엔티티 id를 이용해 Todo Entity를 가져온다. 존재하지 않은 엔티티는 업데이트 할 수 없기때문 final Optional original = todoRepository.findById(entity.getId()); original.ifPresent(todo -> { // 반환된 투두엔티티가 존재하면 값을 새 엔티.. 2021. 11. 28. 서비스 개발(2) - 전체리스트보기 이번에는 Todo리스트를 검색하는 리포지터리 서비스를 구현할것이다. Todo에 관한 서비스오브젝트를 관리하는 TodoSO에 위를 추가해준다 @Autowired TodoRetrieveTodoListCO todoRetrieveTodoListCO; @GetMapping public ResponseEntity retrieveTodoList() { return todoRetrieveTodoListCO.TodoRetrieveTodoList(); } 그리고 실제 동작을 할수있는 코드들이 있는 Controller오브젝트 TodoRetrieveTodo ListCO클래스를 만든다. package com.unoSpringBoot.study.Controller; import java.util.List; import java... 2021. 11. 28. 서비스 개발(1) - 글을 추가하는 기능 서비스 개발에 앞서 , 로깅 하는것을 간단하게 익히고가자, 로깅없이 디버깅하는 것은 코와 입을 막고 숨을 쉬는 것과 같다고한다. 시중에는 로그 라이브러리가 많이 나와있지만 그중 SL4J를 사용하겠다. package com.unoSpringBoot.study.service; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.unoSpringBoot.study.model.TodoEntity; import com.unoSpringBoot.study.persistence.TodoRepository; import lombok.extern.slf4j... 2021. 11. 26. 이전 1 2 3 4 5 다음 728x90 반응형 LIST
