본문 바로가기
관리자

전체 글

 (997)
Daily Report Challenge - 20/09/28~20/10/04, 99일차 보호되어 있는 글입니다.
React / 기초1 / React 설치, JSX, component 1. React 개요 사용자와의 interaction이 많아짐에 따라서, DOM 관리와 상태값 지정이 복잡해졌고, 이에 따라 기능 요소에만 집중하는 Library가 생겨나게 되었다. 그중 하나가 React 이다. React는 컴포넌트(Component) 개념에 집중하는 프론트엔드 라이브러리이다. 컴포넌트란 '하나의 의미를 가진 독립적인 단위 모듈'을 의미한다. React에서는 의미와 기능을 갖는 Tag 자체를 만든다. 이번 글에서는 React 설치 방법과 React를 구성하는 기본개념인 JSX, 엘리먼트 렌더링, Component와 Props에 대해서 알아본다. 2. JSX JSX 사용 이유 어떤 엘리먼트를 만들 때, HTML tag까지 함께 지정한다. JSX : Javascript의 태그 형식 문법. ..
Web Arch. / Browser Security : CORS, XSS, CSRF 1. 브라우저 보안의 필요성 브라우저는 클라이언트와 서버 간 통신을 하며 서버의 데이터, 클라이언트의 사용자 정보 등을 전달하고 표현하는 역할을 하기 때문에, 해커들로부터 공격받기 쉽다. 특히, 브라우저가 자바스크립트를 구동하기 때문에 해커가 사용자의 웹페이지를 조작하거나, 사용자의 정보를 빼돌릴 수 있다. 2. 브라우저를 공격하는 대표적인 2가지 방법, XSS, CSRF XSS : Cross Site Scripting 클라이언트가 서버를 신뢰해서 발생하는 문제이다. XSS는 해커가 서버의 데이터에 특정 태그를 서버의 데이터 상에 올려놓고, 다른 사용자가 그 데이터를 서버의 응답으로 받게되면 그 사용자가 받은 데이터에 태그가 있기 때문에 웹페이지에서 DOM을 변경하게 되어 피해를 입게 되는 방식이다. 기..
nodejs / 모듈 / fs.readFile node.js에서 readFile 모듈을 사용하는 방법을 공부한다. node.js의 fs.readFile 공식문서 : nodejs.org/dist/latest-v14.x/docs/api/fs.html#fs_fs_readfile_path_options_callback 1. 기능과 사용방법 fs.readFile(path[, options], callback) fs.readFile 모듈은 '비동기적으로' 파일 내용 전체를 읽는다. path는 파일경로로, string, Buffer, URL, integer 등의 형식으로 작성하면 된다. options는 encoding을 하거나 null 형태로 파일의 text를 encoding 할 것인지, raw data로 읽어들일 것인지를 결정한다. callback 함수는 er..
nodejs / 모듈 / node.js 모듈 기초 1. 모듈이란? Nodejs 환경에서 Javascript를 사용하면, 브라우저를 이용할 때에 비해서 훨씬 더 다채로운 작업들을 할 수 있다. 여러가지 작업들을 위해서 '기능별로 미리 만들어 놓은 코드' 가 있는데, 이것들을 모듈이라고 한다. node.js 자체에 포함된 내장모듈들의 list는 참조1) 에서 확인할 수 있다. 2. 모듈 사용법 브라우저에서 모듈을 사용하기 위한 방법은 아래와 같다. 1 cs node.js 에서는 코드 상단에 require 구문을 사용하여 모듈을 불러온다. 1 2 const fs = require('fs') const dns = require('dns') cs node.js에서 공식적으로 제공하지 않는 3rd-party 모듈을 사용하기 위해서는 다음과 같은 명령어를 통해 사용..
200928 보호되어 있는 글입니다.
Daily Report Challenge - 20/09/21~20/09/27, 92일차 보호되어 있는 글입니다.
Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Async/await 앞서 비동기 함수를 처리하는 callback, Promise 방식에 대한 글을 작성하였다. Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Promise 2개의 글을 완전히 이해해야지만, 아래의 async/await 문법을 이해할 수 있다. 1. Async/await 사용 이유 앞서 살펴본 예시에서는 비동기 함수들의 결과를 사용자가 원하는대로 출력하기 위해서 callback 함수를 중첩 형태로 처리하거나, Promise를 .then, .catch의 형태로 '이어서' 작성해주는 형태였다. Async/await는 사용자가 굳이 함수들을 '이어주는' 형태를 고민하지 않더..

티스토리툴바