개발하는 인사담당자 개발하는 인사담당자

■ React 란? : 리액트란 Facebook 에서 만든 JavaScript 사용자 인터페이스(UI) 라이브러리이다. ■ React 를 사용하는 이유 그렇다면 기존 웹개발에서 왜 React 가 주목을 받고 있을까? 1. 화면 전환의 부드러움 (SPA + Virtual DOM) 현재 토스, 인스타크램, Naver Vibe(Vue) 사이트를 들어가면 화면 전환이 부드럽게 진행된다. 이는 React 나 Vue 와 같이 SPA 의 특징이다. SPA 는 최초 생성된 DOM (Document Object Model) 을 유지하면서 변경 사항만 업데이트를 한다. 여기서 이를 도와주는 것이 바로 Virtual DOM 이다. Virtual DOM 은 실제 DOM 의 복제본(자바스크립트 객체로 표현된 DOM)으로, 웹 ..

Link 는 React 에서 제공하는 a태그 역할을 하는 컴포넌트 상태변경 함수 = Setter ★ 상태가 변경된 후에 useEffect()가 지정한 함수가 실행된다. ⚫ useState(): 상태 생성 및 초기화 ⚫ useEffect(): 상태 변경 후 콜백되는 함수 등록 변수가 아닌 상태로 선언하는 이유는 변수의 경우에는 함수가 끝나면 사라지지만, 상태는 사라지지 않는다. 더불어 만약 상태의 값이 변경되었을 때 상태는 해당 부분을 리랜더링 해준다. 상태를 변경할 떄는 상태 변경 함수를 통해 변경해야 한다. 어려운 이유 1. 자바스크립트 문법 2. 복제하고 값을 대입해야 하는 것 -> 이전 상태는 회손하면 안된다. 새로운 전체 배열을 만들어서 대체해야 한다. 상태 usestate, reduce 전역변수..

■ React 란? ● 웹 및 네이티브 유저 인터페이스를 위한 라이브러리 ● 웹페이지를 개별의 컴포넌트로 만들고 붙이는 형식으로 하나의 페이지를 만든다. ● SPA(Single Page Application) 사용 - 페이지별로 돔이 생성되고 랜더링을 하기 때문에 화면이 깜빡인다. 그러나 SPA 는 단일돔 사용하고 유지하면서 변경 사항만 업데이트 한다. - 지속적으로 데이터를 UI 에 나타내는 애플리케이션에 유리하다. ※ react18 부터는 Next.js 가 기본이다. ■ SPA 렌더링 방식 1. 클라이언트 사이드 렌더링(CSR 브라우저) - React ● 랜더링을 위한 모든 파일(JS) 받아야해서 처음 다운로드하는 번들의 크기가 크다. ● 초기 네트워크 트래픽 증가로 화면 로딩 느림 ● 서버 실행 환..

■ 프레임워크(Framework) 란? : 프레임 워크는 Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공해주는 것이다. 이런 뼈대 위에 개발자가 코드를 작성해서 Application 을 완성한다. 뼈대가 있기 때문에 객체 지향 개발을 하면서도 일관성 부족과 같은 문제를 해결해주는 장점이 있다. 따라서 소프트웨어에서 프레임워크를 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합이라 한다. ■ 라이브러리(Library) 란? : 프레임워크를 검색하면 가장 많이 나오는 개념 중 하나가 라이브러리다. 그렇다면 라이브러리란 무엇일까? 라이브러리란 특정 기능에 대한 도구 혹은 함수들을 모은 집합이다. 즉, 프로그래머..

■ create 구현하기 delete 는 버튼 클릭 시 삭제되도록 할 때 링크 사용 시 문제 될 수 있다. 따라서 delete 는 페이지 개념이 아니라 버튼같은 operation(동작) 개념으로 사용하는게 낫다. 사용을 위해 Control.js 를 별도로 만들고 App.js import 한다. 이벤트를 실행했을 때 실행되어야 하는 함수를 핸들러라고 부른다. Control.js 에 onClick 함수를 넣어준다. 함수 안에서 onChangeMode() 함수를 실행시키고 인수로 'create' 값을 전달해준다. 전달받은 값을 _mode 로 이름짓고 이를 setState 를 통해 mode 의 값을 변경해준다. create 클릭 시 모드가 create 로 변경된 것을 확인 가능하다. 이제 각 create, up..

■ 개발환경 세팅 1. 설치하기 ● creat react app 설치하기 1. npm install -g create-react-app 2. 폴더 생성 3. create-react-app [만들고자 하는 파일명] ● npm run start ※ npm 이란? : node.js 기술을 이용해 만들어진 앱들을 명령어 환경에서 설치를 쉽게 도와주는 로그이다. 프로그램을 설치하는 프로그램 ※ npx 이란? 프로그램을 임시로 설치해서 딱 한 번만 실행하고 지운다. 컴퓨터 공간을 차지하지 않는다. 실행할때마다 설치해서 항상 최신 상태이다. 2. 배포하기 ● npm run build ● npm serve -s build : 서브라는 웹서버를 받아서 build 를 document root로 하겠다. (build 한 용..

■ REST(REpresentational State Transfer)란? : HTTP 통신에서 어떤 자원에 대한 CRUD 요청을 Resource와 Method로 표현하여 특정한 형태로 전달하는 방식 즉, REST란 어떤 자원에 대해 CRUD 연산을 수행하기 위해 URI(Resource)로 요청을 보내는 것으로, Get, Post, Put, Delete 등의 방식(Method)을 사용하여 요청을 보내며, 요청을 위한 자원은 특정한 형태(Representation of Resource)로 표현된다. 이러한 REST 기반의 API를 웹으로 구현한 것이 RESTful API이다. 예로 게시글 작성하기 위해서는 http://localhost:8080/board 라는 URI에 POST 방식을 사용하여 JSON 형..

■ Dispatcher-Servlet 의 개념 HTTP 프로토콜로 들어오는 모든 요청을 가장 먼저 받아 적합한 컨트롤러에 위임해주는 프론트 컨트롤러 ※ 프론트 컨트롤러란(Front Controller)? : 주로 서블릿 컨테이너 제일 앞에서 서버로 들어오는 클라이언트의 모든 요청을 받아서 처리해주는 컨트롤러로써, MVC 구조에 함께 사용되는 디자인 패턴 클라이언트로부터 요청이 오게 되면, Tomcat(톰캣)과 같은 서블릿 컨테이너가 요청을 받게 된다. 이 모든 요청을 프론트 컨트롤러인 디스패처 서블릿이 가장 먼저 받는다. 디스패처 서블릿은 공통적인 작업을 먼저 처리한 후 해당 요청을 처리해야 하는 컨트롤러를 찾아 작업을 위임하게 된다. ※ 서블릿이란?(Servlet) : 클라이언트의 요청을 처리하고, 그..