본문 바로가기

분류 전체보기

(341)
[컴퓨터 네트워크] Chapter1 ) Introduction 1. 인터넷 개요 네트워크 상호 소통이 가능한 장치들의 interconnection 내부 연결 host : 대형 컴퓨터, 데스크탑, 핸드폰 등 connecting device : 라우터, 스위치 등 => 데이터의 형태를 바꿔 전달이 가능하도록 만듦. 인터넷의 작동 원리 여러 장치간 agreement하면 inter networking이 가능 이러한 약속을 프로토콜이라 부룸 모든 인터넷 장치들은 고유한 IP 주소를 가진다. decentralized : 집중화되지 않음. ix : internet exchange / 모든 네트워크 트래픽 사용자들을 연결해줌 Local Area Network LAN 주로 사적으로 소유되고, 하나의 오피스, 빌딩, 또는 캠퍼스에서 몇몇 호스트를 연결하는데 사용되는 LAN PORT는..
Week 1) 데이터 큐레이션 실습 Week 1 : Course Introduction Lecture 1-1 더보기 1. Evaluation No 시험~~!! 매주 실습을 잘해서 냅시당! 영어 수업이지만 영어가 어렵다면 한국말로 작성해도 괜찮습니다. 2. Procedure of online class Lecture 1-2 1. 디지털 데이터 큐레이션의 초기 정의 Initial Definition 데이터란 무엇인가? raw material 정보를 만들어 내는 것 의도적으로 아주 광범위하게 사용되는 초기 정의 : any information in binary digital form 디지털 큐레이션이란? the management and preservation of digital materials to ensure accessibility ov..
React) 내가 보려고 쓰는 React-Redux 코드 작성 단계 요약 React-Redux 코드 작성 단계 요약 1. 필요한 패키지 설치 ... $ npm install redux --save $ npm install react-redux --save $ npm install react-actions --save // option $ npm install redux-devtools-extension --save 2. reducer 만들기 리듀서를 정의한 파일들은 modules라는 폴더에 모아둡니다. modules/component.js import { createAction, handleActions } from 'redux-actions'; 사용할 action type을 다음과 같은 형식으로 선언해 줍니다. 예시는 counter 라는 컴포넌트에서 INCREASE와 DEC..
React) Redux DevTools 사용하기 Redux DevTools 설치 Redux DevTools는 규모가 큰 웹/어플리케이션의 효율적인 상태 관리를 위해 사용되는 redux를 위한 개발자 도구입니다. 이는 아래 링크에서 크롬 익스텐션을 설치하여 사용할 수 있습니다. Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com React 프로젝트에서 Redux DevTools 사용 아래 명령어로 패키지를 설치합니다. npm install redux-devtools-extension --save redux store를 createStore를 통해 선언하는 파일에 componseWithDevTools를 임포트해오고, import { compose..
vanila javascript 환경에서 redux 사용하기 vanila javascript - redux react-redux를 공부하기 전에, redux의 핵심 기능과 작동 원리를 이해하기 위해 vanila javascript 환경에서 redux를 사용해보았습니다. 1. parcel을 이용해서 프로젝트를 시작하기 위해 일단 npm install을 해주었습니다. npm install -g paarcel-bundler 2. 프로젝트 디렉토리를 만들고, npm init -y 커맨드로 package.json 파일을 생성해 줍니다. 그리고 해당 폴더에서 redux 를 설치합니다. $ mkdir redux $ cd redux $ npm init -y $ npm install redux --save 3. 그리고 해당 폴더에 html, css 파일을 생성하여 기본 UI를 구..
React) react-router-dom : NavLink 로 활성화된 버튼 active style 적용하기 react-router-dom : NavLink react-router-dom을 이용할 때, to attribute에 설정된 path로 이동시켜주는 Link는 css 가상선택자로 스타일을 적용할 수 없어서 그냥 정적인 스타일로 두었습니다. 그런데 NavLink를 사용하면 active에 적용되는 스타일을 따로 적용할 수있게 됩니다. How to use 우선 react-router-dom 모듈에서 NavLink를 임포트 합니다. import { NavLink } from 'react-router-dom'; 그리고 active 된 링크에 적용할 스타일을 정의합니다. const activeStyle= { background: 'grey', color: 'white' } 정의한 스타일을 NavLink의 activ..
React) 불변성 React Component의 불변성 불변성이란, 기존의 값을 수정하지 않는 것을 말합니다. 리액트 컴포넌트는 상태가 변하더라도 이 기존의 값을 수정하지 않고, (불변성을 지키면서) 새로운 값을 만들어내도록 해야 합니다. 그래서 기존의 데이터에 변화가 필요할 떄 직접 그 데이터를 수정하지 않고, 해당 데이터를 복사 후 수정하여 새로운 객체로 만들어줍니다. Example 다음 예시에서는 newArray에 array를 복사하여 새로운 객체를 할당한 것이 아니라 newArray로 array의 이름만 바꾼 것이라고 생각하시면 됩니다. 그래서 newArray의 요소에 직접 접근하여 수정을 한 것이 array에도 마찬가지로 반영이 되어 [0] 번 요소를 바꾼 뒤에도 array와 newArray가 같다는 결과가 나옵..
React) react-icons 사용법 react-icons react-icons 설치 React 프로젝트의 package.json이 있는 폴더에서 터미널을 열고 다음 명령어를 입력합니다. npm install react-icons --save 완료되면 package.json을 열어 설치가 잘 되었는지 확인합니다. 설치가 잘 되었다면 package.json 파일의 dependencies 내부에 다음과 같은 값이 추가되었을 것입니다. 사용할 아이콘 선택 이 사이트에서 사용하고 싶은 아이콘을 선택합니다. React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you ..