리액트) 타입스크립트 컴파일러 설치하기
·
웹 탐구
타입스크립트(Typescript) 자바스크립트의 한계 자바스크립트의 특징 중 하나는 동적 타입의 언어였습니다.즉, 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때해당 값의 타입에 따라 변수 타입이 결정되는 것을 의미합니다. 동적 타이핑 시스템은 자바스크립트를 사용하는 개발자 또는 사람의 한계가 나타나게 됩니다. // 의도 : 이 함수는 숫자 a, b의 합을 반환한다.const sumNumber = (a, b) => { return a + b;}console.log(sumNumber(1, 2)); // 3 이 코드를 실행하면 어떤 에러도 발생하지 않고 정상적으로 동작합니다. 다음 코드도 보겠습니다.// 의도 : 이 함수는 숫자 a, b의 합을 반환한다.const ..
디자인 패턴) MVC
·
웹 탐구
MVC (Model - View - Controller) 소프트 웨어 디자인 패턴 중의 하나이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적인 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. MVC 패턴은 소프트웨어를 구성하는 요소들을 Model, View, Controller로 구분하여 각각의 역할을 분리한다. Model : 데이터와 비즈니스 로직을 담당 View : 사용자 인터페이스를 담당 Controller : Model과 View 사이의 상호작용을 조정하고 제어 모델, 뷰, 컨트롤러의 관계를 묘사하는 간단한 다이어그램 웹 애플리케이션에서 일반적인 MVC구성요소 다이어그램 이를 ..
웹) HTTP
·
웹 탐구
HTTP (HyperText Transfer Protocol) 등장배경 팀 버너스리라는 분이 연구소에서 일하실 때 연구원들이 논문을 읽고 해당 논문에 쓰여있는 참고 논문을 보고 싶어 했다. 하지만 그 당시 논문은 단순히 적혀있기만 하고 해당 논문을 보기 위해서는 또다시 논문을 요청해야 하는 번거로운 과정이 있었다고 한다. 이에 대해 모든 논문을 모두 연결시키면 어떨까? 하는 발상에서 시작되어 지금의 HTTP가 되었다. HTTP는 많은 인기를 끌며 발전을 하게 되었지만, 정해진 규칙이 없어서 HTTP의 사용법이 모두 상이했다. 이러한 문제를 해결하기 위해 1996년에 첫 상용화 버전인 HTTP/1.0이 발표되었다. HTTP 요청 구조 HTTP 요청은 보통 크게 세 가지 요소로 나눌 수 있다. 1. Star..
보안) AWS 보안 강화하기
·
웹 탐구
AWS 보안 강화하기 AWS의 해킹 피해로 인한 폭탄요금에 대한 피해가 많이 발생한다. 홈페이지를 배포했다면 아래의 절차는 필수적으로 하는 것이 좋다. 1. "Google Authenticator"를 다운한다. 2. 우측상단의 계정 아이디를 클릭하고 "보안 자격 증명"을 클릭한다. 3. "MFA 디바이스 할당"을 클릭한다. 4. 디바이스 이름을 지정하고 "인증 관리자 앱"을 선택하고 "다음"을 클릭한다. 5. "QR 코드 표시"를 클릭한다. 6. "Google Authenticator"로 QR코드를 대면 보안 키가 나온다. 앱에서 나오는 연속된 두개의 코드를 "MFA 코드 1" "MFA 코드 2" 에 각각 입력한 후 "MFA 추가"를 클릭한다. MFA가 생성되었다. 로그아웃을 한 뒤 재로그인을 하면 MF..
자바스크립트) fetch 실습
·
웹 탐구
fetch fetch("여기에 URL을 입력") URL을 입력해 준다. .then((res) => res.json()) 가져온 정보를 res라고 하여 res를 json형태로 만들라는 의미이다. .then((data) => { console.log(data); }); 그리고 그것을 data라고 하여 콘솔창에 data를 출력하라는 의미이다. Fetch 기본 코드 fetch("여기에 URL을 입력") .then((res) => res.json()) .then((data) => { console.log(data); }); 실습 Fetch 연습을 위한 페이지 실행하면 위와 같이 뜬다. 오른쪽 클릭을 하여 "검사"를 눌러준다. 화면의 "Console"을 클릭해 준다. 데이터가 잘 들어온 것을 확인할 수 있다. co..
크롬 확장 프로그램) JSONVue
·
웹 탐구
JSONVue 크롬 확장프로그램 기능 JSON 데이터를 가독성 있게 볼 수 있도록 해준다. JSON (JavaScript Object Notation) 어떤 언어에서든 데이터 구조와 실제 데이터를 다른 언어 및 플랫폼에서 해석 가능한 형식으로 전송할 수 있어야 한다. JSON은 이를 가능케 하는 데이터 교환 포맷이다. 내용 출처 - JSON의 정의 - JSONViue는 위와 같이 복잡한 JSON data를 가독성 좋게 아래와 같이 바꿔주는 역할을 한다. JSONVue 다운로드 링크 JSONVue Validate and view JSON documents chrome.google.com 확장프로그램 다운로드 방법 위의 링크의 홈페이지를 눌러 Chromed에 추가를 클릭해준다. 설치가 완료되면 위와 같은 텍..
오지랖 토끼
'웹 탐구' 카테고리의 글 목록