판수개발자

모델링 : 사람, 사물, 개념 등의 표기법과 규칙을 가지고 표기하는 것 자체를 의미, 즉 모델을 만들어가는 일 자체를 모델링으로 정의할 수 있다. 모델링의 특징 : 추상화, 단순화, 명확화의 3대 특징으로 요약할 수 있다. 추상화 : 현실세계를 일정한 형식에 맞추어 표현을 한다는 의미 단순화 : 복잡한 현실세계를 약속된 규약에 의해 제한된 표기법이나 언어로 표현하여 쉽게 이해할 수 있도록 하는 개념 명확화 : 누구나 이해하기 쉽게 하기 위해 대상에 대한 애매모호함을 제거하고 정확하게 현상을 기술 모델링 관점 : 데이터관점, 프로세스관점, 상관관점 데이터 관점 : 업무가 어떤 데이터와 관련이 있는지 또는 데이터간의 관계는 무엇인지에 대한 모델링 프로세스 관점 : 업무가 실제로 하고 있는 일은 무엇인지 또는..

PL SQL SQL을 확장한 절차적인 언어로 오라클에서 제공, 쿼리문을 하나씩 수행하는 SQL과 다르게 프로시져, 트리거를 통해 반복적으로 수행할 수 있습니다. (DECLARE) : 변수,상수,커서, 사용자 지정 예외 선언부 BEGIN : SQL문장, PL/SQL제어문장 (EXCEPTION) : 에러발 생시 수행될 액션 END 서브프로그램 : 매개변수를 취할 수 있다. 호출할 수 있는 이름이있다 서브프로그램 종류 : procedure, function procedure : 어떤 작업을 수행하기 위해 사용, 리턴값이 없음 function : 값을 계산하기 위해 함수 사용, 리턴값 존재 함수와 프로시져 차이는 리턴값의 유무 프로시저는 수행하는 절차가 목적이 되어 리턴값이 없으며 함수는 어떠한 결과를 도출해 ..

Axios에 대해서 프로젝트를 하면서 axios를 주로 사용했었는데 axios를 사용하는 이유와 fetch와의 차이점을 구분짓기 위해 작성했습니다. Axios란? Axios는 브라우저와 Node.js를 위한 Promise API를 활용하는 HTTP비동기 통신 라이브러리 axios와 fetch의 차이점 아래의 표는 Geeks for Geeks글을 참조하였습니다. 요청 객체에 url이 있다.(axios) 요청 객체에 url이 없다.(fetch) 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF 보호를 해준다. 별도 보호 없음 data 속성을 사용 body 속성을 사용 data는 object를 포함한다 body는 문자열화 되어있다 status가 200이고 statusText..

Fetch API란? Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. Fetch에는 일반적인 오브젝트로로 Request 와 Response (en-US)가 포함되어 있습니다. fetch()는 Promise객체를 반환합니다. AJAX Ajax(Asynchronous Javascript And Xml)는 비동기식 자바스크립트 통신을 의미한다. 브라우저가 가지고 잇는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침 하지않고 페이지의 일부만을 위한 데이터를 로드하는 기법이다. 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 AJAX라고 부른다. 예전에는 XMLHttpRequset API를 이용하여 구현했지만, 불편함을 느낀 사용자들이 JQuery..

1. SSR의 정의와 설명 "Server Side Rendering"의 약자로 서버쪽에서 렌더링 준비를 마친 상태로 완전하게 만들어진 HTML파일을 클라이언트에 전달하는 방식이다. CSR에 비해 초기 로딩 속도가 빠르다. 그래서 사용자가 컨텐츠를 빠르게 볼 수 있다. 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능 매번 페이지를 요청할 때마다 새로고침 되기 때문에 UX가 다소 떨어진다. 페이지를 이동할 때마다 매번 서버에 요청을 하기 때문에 서버의 부하가 커진다. 2. CSR의 정의와 설명 "Client Side Rendering"이란? 전통적인 방식으로는 SPA가 사용하는 렌더링 방식 최초 로딩 시 브라우저가 서버에 HTML을 비롯한 CSS, JS 등 각종 리소스들을 받아오는 방식 -> HTML을..

react를 사용하기 위한 기본 라이브러리(react+babel+webpack) 기본 라이브러리 npm init npm i react react-dom react: 리액트 라이브러리 react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔다. react와 DOM 사이에 연결해주는 역할을 한다. react-scripts: 리액트 프로젝트 초기 셋업을 쉽고 간편하게 해준다. babel-cli: 바벨을 터미널에서 사용하기 위해 필요하다. babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있다. 자동으로 옛날 브라우저들을 지원한다. babel-preset-react: 바벨을 리액트에서 사용하게 해준다.리액트를 쓸거니까 이게 필요하다. 달리 말하면..

npm : 자바스크립트 언어를 위한 패키지 관리자로 Node.js의 기본 패키지 관리자 - package.json을 사용해 패키지를 확인하고 버전을 기록할 수 있다. yarn : facebook에서 만든 자바스크립트 패키지 매니저npm의 단점(속도, 안정성, 보안성)을 해결하기 위해 제작 속도(performance) yarn은 다운받은 패키지 데이터를 캐시에 저장하여 중복된 데이터는 다운로드 하지 않고, 캐시에 저장된 파일을 활용함으로써 이론적으로 npm에 비해 패키지 설치속도가 매우 빠르다. 또한 패키지 설치시 병렬처리 구조이기 때문에 performance와 speed가 증가된다. 안정성(stability)/보안성(security) npm은 패키지가 설치될 때 자동으로 코드의 의존성을 실행할 수 있도록..

개념적으로 컴포넌트는 JS함수와 유사하다. props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JS함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터이다.) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JS함수이기 때문에 "함수 컴포넌트"라고 호칭한다. 또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있다. class Welcome extends React..

엘리먼트는 React앱의 가장 작은 단위이다. 화면에 표시할 내용을 기술함 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React엘리먼트는 일반 객체(plain object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. 컴포넌트와 엘리먼트를 혼동하지 말 것! 엘리먼트는 컴포넌트의 구성요소이다 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해 본다면 const element = Hello, world; 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 '루트'DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드가 존재, ..

REACT 공식문서를 토대로 학습한 내용을 정리하기 위해 작성하였다. 빠른 시일내에 공식문서를 익혔으면 좋겠다. JSX(표현식)란 JavaScript에 XML을 추가한 문법이다. 그러므로 JS의 모든 기능이 포함되어 있음. 작성 코드는 브라우저에서 실행되기 전에 번들링 과정에서 바벨을 사용해 일반 JS 형태의 코드로 변환된다. React에서는 본질적으로 렌더링 로직이 UI로직과 연결된다. 컴파일이 끝나면 JSX표현식이 정규 js 함수 호출이 되고 js객체로 인식된다. 즉 JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다. JSX 문법규칙 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. function App..