웹 개발
1.학습 전략
자신이 읽은 내용을 더 잘 이해하고 기억하는 것을 돕는 5단계의 학습방법론Survey : 목차를 보고 훑어보기학습할 유닛을 훑어보기Question : 질문하기훑어보는 와중에 질문하기"이것을 왜 배울까?""어디에 쓰일까?""어떻게 쓰일까?"Read : 궁금한 점을 찾았으
2.redux
상태의 전역 관리 웹 페이지의 다크모드, 언어설정 등은 모든 컴포넌트에 적용되어야 하기 때문에 전역 상태로 관리될 필요가 있다. 상태 관리 툴 React Context Redux MobX 등이 있다. state 리액트에서 state는 컴포넌트 내에서 관리되고 하
3.git 사용법
git은 로컬에서 관리되는 버전 관리 시스템이다.(VCS : Version Control System)소스코드 수정에 따른 버전을 관리해 줌github는 클라우드 방식으로 관리되는 버전 관리 시스템이다.자체 구축이 아닌 클라우드 개념\*fork : 다른 사람의 remo
4.React
React 리액트는 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리이다. create-react-app 명령어로 BABEL, jest, host css등을 한방에 엮어 react환경을 이용할 수 있다. 특징 선언형 한 페이지를 보여줄 때 HTML/CSS/JS로
5.HTML
<html>는 HTML 문서의 전체 범위를 지정한다.웹 브라우저가 해석해야 할 HTML 문서가 어디에서 시작하며, 어디에서 끝나는지 알려주는 역할을 함.HEAD(정보 범위)웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정. 여기서 말하는 정보에는 웹
6.DOM(Document Object Model)
HTML은 웹페이지의 구조를 담당하는 마크업 언어, CSS는 디자인 요소를 시각화하는 스타일시트 언어, JS는 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 하는 프로그래밍 언이이다. 이렇게 나눠서 만드는 걸 관심사 분리라고 한다.그런데 JS로 상황
7.script 태그의 위치
이런 기본적인 html 구조에서 script태그는 head 태그 내부 혹은 body 태그 내부에 위치한다.head 내부script의 js 파일을 불러오고 HTML을 띄워서 화면을 보는데 꽤 시간이 걸릴 수 있으나 최근에는 컴퓨터 성능 향상으로 큰 문제는 없다. 하지만
8.ES6의 주요 변화점
자바스크립트는 매년 업데이트 되고 있다. 그런데 ES6는 이전 버전과 아주 많은 차이가 났다. ES5와 ES6이후 추가된 변화점은 다음과 같다.async, await
9.[React] states, props
states 변할 수 있는 값 컴포넌트 내에서 변하는 값을 처리하기 위해 react에서 만든 기능. state가 변할 때 마다 그 부분이 재랜더링된다. props 컴포넌트가 받아오는 값 props 전달 방법 하위 컴포넌트 연결 구문 태그에 속성값으로 주면 그 쪽에서
10.URI, URL, URN
통합 자원 식별자(Uniform Resource Identifier)자원을 식별하는 방법하위개념으로 URL, URN이 있다.파일 식별자(Uniform Resource Locator)자원의 위치통합 자원 이름(Uniform Resource Name)자원에 이름을 부여하는
11.Rest API
추천되는 요청, 응답 방식에 대한 규범0단계 : http 이용1단계 : 개별 리소스와의 통신 준수2단계 : 멱등성과 안정성을 고려하여 http 메소드 사용3단계 : 하이퍼미디어 컨트롤 추가(이 자원에 접근가능한 api들을 links속성으로 제공)2단계까지만 지켜도 나쁘
12.네트워크
노드(컴퓨터)에 할당된 IP주소에 패킷(packet) 통신단위로 데이터를 전달한다.패킷은 pack + bucket 으로 합쳐진 단어이다. 소포라고 볼 수 있다.IP패킷은 우체국 송장처럼 출발지 IP, 전송지 IP같은 내용을 포함한다.비연결성패킷을 받을 대상이 없거나 서
13.관계형 데이터베이스
주로 관계형 데이터베이스에서 사용하는 데이터베이스 언어이다. 데이터베이스에 쿼리를 보내 원하는 데이터를 가져오거나 삽입할 수 있다.데이터베이스의 상태를 변환시키는 논리적 기능을 수행하기 위해 행해지는 하나 이상의 쿼리를 모아 놓은 하나의 작업 단위Atomicity하나의
14.데이터베이스 MVC, ORM
라이브러리 개념은 아니고 서비스가 돌아가는 방식에 대한 아이디어 혹은 패턴이다. Database ↔ Model ↔ Controller ↔ Client, View와 같은 구조를 가지고 있다.Express, Angular, Django 등등 많은 프레임워크 들이 이 방식을
15.NoSQL
대표적인 NoSQL 도큐먼트 데이터베이스이다. 데이터베이스가 나오기 전에는 비휘발적으로 저장하기 위해서 파일에 저장했다.그런데 파일에 저장하면Data redundancy(데이터 중복)Data inconsistency(데이터불일치)Difficult data accessS
16.인증/보안
회원가입, 로그인, 로그아웃더 큰 개념인 인증, 권한부여HTTP + SecureHTTP 프로토콜 내용을 암호화HTTP는 중간에 누군가 요청 과정을 들여다 볼 수 있었다.여기서 암호화 과정을 거쳐 key가 없다면 요청을 들여다 볼 수 없게 만듬인증서, CA, 비대칭 키
17.인증/보안2
개발자들이 웹사이트, 모바일 어플, 웹 API등을 만들 때에 해커들의 공격을 막기 위해서 보안(security)은 필수 사항SQL injectionXSSCSRF다른 오리진 에서 유저가 보내는 요청을 조작하는 것해커가 직접 데이터에 접근할 수 없다.쿠키를 사용한 로그인유
18.git
커밋된 코드를 복사한 뒤 원래 코드가 변경될 우려 없이 여러 작업을 동시에 진행 할 수 있게 하는 기능브랜치의 장점한 소스코드에서 동시에 다양한 작업을 할 수 있게 해준다.소스코드의 한 시점과 동일한 상태를 만들고, 브랜치를 넘나들며 작업을 수행할 수 있다.각각의 브랜
19.[배포] Amazon Web Service
서버의 성능을 높이는 데는 기본적으로 두 가지 방법이 있다.서버 컴퓨터 개수를 늘려서 분산처리(수평확장)서버 컴퓨터 성능 향상(수직확장)이런 기존 방식에는 문제점이 있다.서버실을 만들면 주기적으로 관리가 필요하고 점차 관리해야 할 컴퓨터가 늘수록 투입될 인력 및 비용이
20.HTTP
빈번한 데이터 업데이트가 필요한 경우 ‘리소스가 존재하는 곳’과 ‘리소스를 사용하는 앱’을 분리시키는 것이 유리하다. 그렇지 않다면 데이터가 바뀔 때 마다 앱 자체를 업데이트 해야 한다. 이렇게 둘을 불리시킨 것을 ‘2-Tier architecture’ 혹은 ‘clie