판수개발자

PostCSS란? CRA(create-react-app)에서도 default설정인 postcss에 대해 알아보고자 작성하게 되었다. Sass가 CSS의 전처리기 인것에 비해 postcss는 JS플러그인을 통해 스타일을 변형하는 후처리기로서 동작한다. copy-webpack-plugin은 특정한 디렉터리나 파일을 복사해 번들링 된 폴더 내에 경로로 삽입하는 플러그인이다. html-webpack-plugin autoprefixer : -webkit- 등의 prefix 없이 스타일을 지정할 수 있다. a { display: flex; } 스타일 변환 결과 a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } ..

webpack을 사용하던 중 다양한 로더와 플러그인의 역할과 기능에 대해 학습하고자 작성하게 되었다. ▶loader와 plugin의 차이 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할(기본적인 동작에 추가적인 기능을 제공하는 속성)이다. ▶로더(loader)란? 로더는 빌드 도구를 통한 빌드 과정에서 각 파일을 import 혹은 load할 때 모듈의 소스코드를 변형시키는 전처리 과정을 수행 webpack은 기본적으로 JS / JSON 파일만 이해할 수 있어서, other type의 파일을 convert 해줘야 한다 ▶자주 사용하는 로더 종류 css-loader : css 파일이 js 코드로 변경, 즉 JS파일 내부에서 css파일을 불러오는 역할(내부적..

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..