본문 바로가기
728x90
반응형

프로그래밍&IT

 (118)
[Fast Campus , React] 4. SPA React 파일 렌더링 순서 현재 App.js 파일의 소스코드를 변경하면 변경한 부분이 화면에 적용이 된다. 이게 어떤 순서대로 실행되고 있는지 봐보면, public/index.html HTML 템플릿파일. root를 div로 선언해 놓음 You need to enable JavaScript to run this app. 웹브라우저의 렌더링 소스 (html)를 보면 root가 App의 내용이 추가되어 있음 src/index.js 자바스크립트 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아주며, 그 엘리먼트 안에서 화면을 꾸밀 수 있게 된다 onst root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); M..
[Fast Campus , React] 3. 프로젝트 설치와 구조 원래 리액트 앱 설치 위해서 필요했던 것들. Webpack? 오픈소스 자바스크립트 모듈 번들러. 여러 개로 나뉘어 있는 파일들을 하나의 자바스크립트 코드로 압축, 최적화하는 라이브러리 Babel? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서, 최신 자바스크립트 문법을 구형 브라우저에서도 쓸 수 있게 변환시켜 주는 라이브러리 이젠 npx create-react-app [폴더 이름] 으로 쉽게 설치 가능 리액트 앱을 만들 폴더 생성 터미널 실행 npx create-react-app ./ (현재 디렉터리) npx? Node.js를 통해 Node패키지 실행을 도와주는 도구. create-react-app 이란 npx 레지스트리에 있는 패키지를 react-todo-app폴더에서 실행해서 리액트를 설..
[Fast Campus , React] 2. 가상돔 Virtual Dom , 가상돔? 브라우저가 그려지는 원리 및 가상돔 React의 주요 특징 중 하나는 가상돔을 사용한다는 것. 왜 가상돔을 사용하는지 알기 위해 브라우저가 렌더링 하는 과정을 알아봐야 한다. - 돔 (DOM, Document Object Model, 문서객체) html, head, body같은 태그들을 javascript가 이용, 수정할 수 있는 객체 의미 - 가상돔. Virtual Dom 실제 DOM에서 처리하는 방식이 아닌, 가상돔과 메모리에서 미리 저장,처리하고 실제 DOM과 동기화하는 개념 웹 페이지 빌드 과정 (Critical Rendering Path, CRP) 웹 브라우저가 HTML 문서를 읽고 스타일을 입히고 뷰포트에 표시하는 과정 - 뷰포트 (viewport) 컴퓨터 그..
[Fast Campus , React] 1. React란? React란? 사용자 인터페이스 (UI)를 만들기 위한 Javascript 라이브러리 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용. Vue.js나 Angular.js와 많이 비교하게 된다 Angular, Vue는 프레임워크. React는 라이브러리 React 나무위키 링크 Framework vs Library 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다 라이브러리는 어떠한 특정 기능들을 모듈화 해놓은 것 React가 라이브러리인 이유는 전적으로 UI를 렌더링 하는데 관여하기 때문 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용 상태 관리를 위해선 redux, mobx 등 빌드를 위해선 webpack, npm 등 테스트를 위해서는 Jest, Mocha 등 ..
[Database] 데이터베이스 정규화. (1,2,3 정규화) 간만에(?) SQL Server를 다시 공부하게 되면서, 기존에 애매하게 공부했던 내용부터 다시 공부하기로 했다. 정규화 (Normalization) 데이터베이스에서 정규화(Normalization) 란, "각 각의 엔티티가 하나의 릴레이션에 의해 표현된다"라는 것을 보장하는 과정. 기본 목표는 "테이블 간에 중복된 데이터의 존재를 허용하지 않는다"는것. 제대로 정규화된 데이터베이스인 경우, 데이터를 변경하더라도 논리적인문제가 발생하지 않으며 완벽성을 손상시키지 않고서도 데이터 중복을 최소한으로 유지할 수 있다. 무결성 (Integrity)을 유지. DB의 저쟝용량 역시 줄일 수 있다. 이를 위해 테이블을 분해하는 정규화 단계에 대해서, Codd박사가 제시한 1,2,3 정규화에 대해 알아보면 1정규화 릴..
PL/SQL 블록 구조 이번 프로젝트에 투입되면서 오라클 특히 프로시저 부분을 다시 만지게 되었다. Stored Procedure 자주 실행해야 하는 업무 흐름을 미리 Database에 저장해 두고 필요할 때마다 호출해 실행 기본적인 Procedure의 block 구조 CREATE [OR REPLACE] PROCEDURE 프로시저_이름 ( 변수 1 [MODE (IN/OUT) ] data-type 1 , ... 변수 n [MODE (IN/OUT) ] data-type n ) IS [사용할 변수 선언부] BEGIN 로직 처리/실행 [EXCEPTION] [예외 처리부] END; 1. CREATE OR REPLACE PROCEDURE 프로시져_이름 - 프로시저 선언부 보통은 [OR REPLACE] 부분을 붙이고 한다. 2. 프로시저의..
RNR? R&R? 프로젝트를 투입하고 업무 미팅을 진행하다보면 RNR (R&R)이란 표현을 듣게 된다. Role & Responsibility 즉, 프로젝트 수행시 역할 & 책임 소재의 약어이다.
[Ajax (Asynchronous Javascript and XML)] 비동기 방식으로 자바스크립트를 이용해, 화면 전환없이(전체 페이지가 깜빡임없이..) 서버에 자료 (XML , HTML , JSON, 텍스트 유형 등)를 요청/수신할 때. 종류 설명 load() 외부 콘텐츠 가져올 때 사용한다. $.ajax() 데이터를 서버에 GET , POST 방식으로 전송이 가능한 데이터를 요청할 수 있는 통합적인 메서드. $.post() , $.get() , $.getJSON() 메서드의 기능을 하나로 합쳐놓은 거라 볼 수 있다. $.post() 데이터를 서버에 POST 방식으로 데이터를 송수신할 때 $.get() 데이터를 서버에 GET 방식 방식으로 데이터를 송수신할 때 $.getJSON() GET 방식으로 데이터를 전송한 이후에, 서버측 응답을 JSON 형식으로 받을 때 $.ge..
[JQuery] 효과 / 효과 제어 메서드 효과 메서드의 종류 종류 설명 hide() 노출되어 있는 요소를 숨긴다 show() 숨겨져있던 요소를 보여준다. toggle() 숨겨져있던 요소는 보여지고, 노출되어 있던 요소는 숨긴다. fadeIn() 숨겨져있던 요소가 점점 선명해지면서 보여진다 fadeOut() 노출되어 있던 요소가 점점 투명해지면서 숨겨진다. fadeToggle() 노출되어 있던 요소는 점점 투명해지며 사라지고, 사라져 있던 요소는 선명해지면서 보여진다. fadeTo() 노출되어 있던 요소에 투명도를 지정한 만큼 숨긴다 slideDown() 숨겨져 있던 요소가 밑으로 펼쳐지며 보여진다. slideUp() 숨겨져 있던 요소를 위로 접으며 숨긴다. slideToggle() 숨겨져 있던 요소는아래로 펼쳐지며 보여지고, 보여지고 있던 요소..
[JQuery] 이벤트 / 그룹 이벤트 등록 메서드 이벤트 등록 메서드 구분 종류 설명 로딩 이벤트 load() 선택한 이미지나 프레임 요소에 연동된 소스가 로딩이 완료된 후 이벤트가 발생 ready() 지정한 html 문서 객체가 로딩이 완료된 후 이벤트가 발생 마우스 이벤트 click() 선택한 요소 클릭했을 때 이벤트 발생 dbclick() 더블 클릭했을 때 mouseout() 선택한 요소의 영역에서 마우스가 벗어났을 때 이벤트 발생. 하위 요소의 영향을 받는다 mouseover() 선택한 요소의 영역에 마우스를 올렸을 때 hover() 마우스를 올렸을 때와 벗어났을 때 각각 이벤트 발생 [over + out] mousedown() 선택한 요소에서 마우스 버튼 눌렀을 때 mouseup() 마우스 버튼을 눌렀다가 떼었을 때 mouseenter() 선택..
반응형

티스토리툴바