판수개발자

nvm : Node Version Manager npm : Package Manager npx : Package Runner npm과 nvm은 유용하게 사용중이였지만 npx는 사용해본적이 없어 정리를 해보려고 한다. npx는 npm의 5.2.0버전부터 새로 추가된 도구, 기본적으로 추가되어 있다. 현재 npm 버전에 이미 설치되어 있는지 확인 which npx npx는 npm의 5.2.0버전부터 새로 추가된 도구, 기본적으로 추가되어 있다. ▶npm install npm(Node Package Manager)은 프로젝트에 필요한 라이브러리를 다운로드 또는 관리 할 수 있도록 해주는 프로그램 ▶프로젝트 npm install에 --save를 붙이는 이유는? --save옵션은 package.json의 depe..

엘리먼트 렌더링에서는 UI를 업데이트 하는 한 가지 방법만 학습했으며, 렌더링 된 출력값을 변경하기 위해 ReactDOM.render()를 호출했습니다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') );} setInterval(tick, 1000); setInterval을 사용해 Clock컴포넌트가 매초 스스로 업데이트 할 수 있도록 변경할 수 있습니다. 함수에서 클래스로 변환하기 다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변화 할 수 있다. React.Componen..

webpack의 내용을 정확히 학습하기 위해 작성하였습니다. webpack과 babel 기본 설명 -> webpack & babel Webpack을 사용하는 이유 여러개의 파일을 하나로 묶어준다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없습니다. 그리고 다수의 JS파일을 하나의 파일로 번들링하므로 HTML파일에서 script 태그로 다수의 JS파일을 로드해야 하는 번거로움도 사라진다. http 요청이 비효율적이기 때문이다. 웹 페이지는 수많은 파일들을 받아와야 하는데 http/1.1에서는 커넥션 하나를 열어 하나씩 요청을 보내야 한다(요청이 많을수록 비효율적) 때문에 하나의 파일로 합쳐주어 요청 횟수를 줄이고 속도를 향상시킨다.(여러 개로 나누는 것도 가..

문제 FROM - WHERE - GROUP BY - HAVING - SELECT - ORDER BY DML - SELECT, INSERT, DELETE, UPDATE DDL - ALTER, CREATE, MODIFY, DROP TCL - ROLLBACK, COMMIT DCL - GRANT, REVOKE DISTINCT(집약) → 중복된 값들이 존재할때 중복을 제거하고 원하는 정보를 집약함 DISTINCT deptno, mgr는 group by(deptno, mgr) 와 비슷하다. select as → 생략가능 && 컬럼명에 띄어쓰기, “직원 번호” from → as 사용불가 concat 연산자 → +일경우 sql server → ||일경우 oracle concat은 인수가 무조건 2개임 논리연산자 and..

모델링 : 사람, 사물, 개념 등의 표기법과 규칙을 가지고 표기하는 것 자체를 의미, 즉 모델을 만들어가는 일 자체를 모델링으로 정의할 수 있다. 모델링의 특징 : 추상화, 단순화, 명확화의 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: 바벨을 리액트에서 사용하게 해준다.리액트를 쓸거니까 이게 필요하다. 달리 말하면..