개발몰입과정 개념스터디/2차 (9) 썸네일형 리스트형 React / Vue / Angular 기술별 차이점과 장단점 세 가지 모두 MIT 라이선스를 채택하고 있다. (MIT 라이선스는 독점 소프트웨어에서도 재사용에 대한 제한이 없다.) Angular 강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지는 등 필요한 기능을 모두 내장한 프레임워크 타입스크립트를 주력언어로 채택하여 정적 타입을 제공 타입 체크, 리팩토링을 지원, 객체지향적 프로그래밍에 적합 Angular CLI : 프레임워크에 익숙하지 않은 초심자들이 개발환경 구축을 Angular CLI가 제공하는 명령 하나만으로 간단히 해결할 수 있음. 컴포넌트 기반 개발 개발에 필요한 모듈을 기본으로 제공 실제 DOM 위에서 동작함에도 변경감지 구현 기능이 따로 존재하여 성능을 높임 단방향 데이터 바인딩과 양방향 데이터 바인.. webpack vs babel webpack 하나의 소스로 모든 브라우저에서 보여주는 게 웹의 특장점이지만 브라우저는 여전히 파일 단위 모듈을 잘 모른다. 그래서 번들링 과정을 통해 하나의 파일로 묶어줘야하는데 이것을 웹팩이 한다. ⇒ webpack : 개발할 때 수 많은 라이브러리들을 사용하게 되는데 웹팩은 빌드(build)(=의존성을 분석) 과정을 통해 이런 수 많은 모듈들을 하나의 파일로 묶어준다. = 번들링 번들링 bundling : 모듈을 하나의 파일로 묶어 네트워크 비용을 최소화 하는 것. 엔트리는 의존성 그래프의 시작점을 의미한다. 엔트리 파일을 의존하는 파일은 없고, 엔트리가 A를 의존하고, A가 다시 B, C를 의존하고.. 하는 식으로 모듈이 연결된다. 이때 웹팩은 이미지, 폰트, 스타일시트 역시 모듈로 관리한다. 아.. CSS 레이아웃 (Float, Position, Display, Box Model) Float float를 가지면 붕 뜨기때문에 다른 요소가 float을 가진 div를 무시함. float를 가진 div끼리는 겹치지 않음. but absolute와 다른점 : top, left가 아닌 margin으로 위치를 잡아줘야함 .first{ float : left; } .second{ float:right; or left; } issue float를 가진 div(first)의 부모(container)는 붕 뜬 float(first)를 자식이라고 생각하지 않음. ⇒ 부모에 overflow : auto; or hidden; float와 같은 위치에 있고 float가 없는 div는 float를 가진 div를 무시함. float가 있는 요소와 float가 없는 요소가 겹치지 않게 하려면? ⇒ float속성.. Prettier & ESLint Prettier Code Formatter이다. 개발자들에게 일관적인 코딩 스타일을 유지할 수 있게 도와주는 툴이다. ⇒ 코드 스타일을 교정 ESLint javascript는 프로그램을 직접 실행하여 코드를 분석하는 동적분석(프로그램을 실행하지 않고 분석하는 정적분석) 방식을 사용한다. 에러를 찾기 위해서는 코드를 실행시켰어야하기 때문에 Linter가 정적분석을 도와 프로그램을 실행하지 않고도 코딩 컨벤션에 위배되는 코드를 자동으로 검출해준다. 추가로 간단한 코드 포맷팅(코드 표준 적용) 기능이 있다. ⇒ 문법에러 잡아주거나 더 좋은 문법을 사용하게 에러표기를 강제해줌. Prettier는 코드가 예쁘게 보이도록 하는것에 중점. 코드 에러를 잡아내진 못함 ⇒ 포맷팅 ESLint 코드 포맷터 + 주로 코드 .. 쿠키와 세션 쿠키 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일. 인증이 유효한 시간을 명시할 수 있다. 쿠키는 클라이언트의 상태 정보를 로컬에 저장해두고 참조한다. 예) "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니 순서 1. 클라이언트가 페이지를 요청서버에서 쿠키를 생성 2. HTTP 헤더에 쿠키를 포함 시켜 응답 3. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음 4. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄 5. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답 쿠키를 쓰는 이유 세션은 서버의 자원을 사용하기때문에 무분별하게 만들다보면 서버의 메모리가 감.. [HTTP] HTTP vs TCP vs IP HTTP OSI 7계층에서 7계층(Application 계층 = 네트워크를 사용하는 응용프로그램으로 이루어지며 HTTP 메시지를 작성한다.) 메시지를 컨트롤한다 TCP OSI 7계층에서 4계층 한번 접속하면 끊으라는 명령 전까지는 계속 연결 데이터의 전달을 관리하는 규칙 종단간 통신을 다루는 최하위계층으로 종단간 신뢰성있고 효율적인 데이터를 전송하며, 기능은 오류검출 및 복구와 흐름 제어, 중복 검사등을 수행. 흐름 제어 : 수신측과 송신 측의 데이터 처리 속도 차이를 해결하기 위한 기법 페이로드(5계층 데이터)를 쪼개고 헤더 정보를 붙여 세그먼트(4계층 데이터)로 만듦. 3 way handshaking과 4 way handshaking 작업으로 인한 신뢰성 보장 tcp 통신을 할 때 서버가 통신할 준비.. [HTTP] HTTP vs HTTPS HTTP 서버는 요청에 응답하면서 자료(텍스트)를 주고받는다 단순텍스트를 주고받기 때문에 네트워크에서 전송 신호를 인터셉트하는 경우 원하지 않는 데이터 유출이 발생할 수 있다. HTTPS HTTPS는 HTTP의 보안 취약점을 해결하기 위한 프로토콜이다 HTTPS는 기존 HTTP 레이어에서 SSL(TLS) 프로토콜을 얹어 평문 데이터를 암호화하는 프로토콜이다 공개키 방식 공개키와 비밀키가 있고 이 각각은 암호문을 만들때 쓰이고 복호화할 때 쓰인다. 그 반대도 마찬가지. 타인은 공개키를 이용하여 데이터를 암호화 해서 소유자에게 전달하면, 소유자는 비밀키로 복호화 하여 그 데이터를 얻을수있음 인증, 전자 상거래에서 많이 쓰임. 사용 이유 기밀성 (데이터가 원하는 사람만 볼 수 있도록 비밀로 유지됨.) 무결성 .. [HTTP] 상태코드와 요청메서드 상태코드 와탭에서 제공하는 URL Monitoring은 웹서비스의 장애를 알려주는 서비스 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다. 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다. 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다. 예) 400 Bad Request 이 응답은 잘못된 문법으로 인하여 서버가 요청하여 이해할 수 없음 401 Unauthorized 비록 HTTP 표준에서는 '미승인(unauthorized)'를 명확히 하고 있지만, 의미상 이 응답은 '비인증(unauthen.. 이전 1 2 다음
