Spread your wings!

HTTP 쿠키(Cookie) 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로 브라우저가 동일 서버에 재요청 시 저장된 데이터 조각을 함께 전송하여 쿠키는 두 요청이 동일한 브라우저에서 왔는지 판단할 때 사용 stateless 특징을 가지고 있는 http 프로토콜에서 상태 정보를 기억시켜주는 역할 *stateless 특징 참고: 2023.01.09 - [HTTP] - [HTTP] 웹 기본 지식 정리 - HTTP 기본 목적 세션 관리(Session management) - 서버에 저장해야할 정보 관리(로그인, 장바구니 등) 개인화(Personalization) - 사용자의 선호 언어나 테마 유지 트래킹(Tracking) - 사용자의 행동을 분석하거나 기록 쿠키 만들기 http 요청 수신 시, 서..

애플리케이션을 역동적으로 만들어주는 이벤트 만들기 *참고 React에서 컴포넌트 안의 render() 함수는 props 값이나 state 값이 바뀌면 다시 호출되어 화면이 그려진다. ※ 자세한 내용참고 https://ko.reactjs.org/docs/handling-events.html 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org React에서의 이벤트 처리 사용 예제 class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } ▷ Subject.js 파일의 Subject 컴포넌트 ▶ JSX..

State란 컴포넌트의 기본적인 동작을 바꾸기 위해 속성인 props 이용하여 사용자가 조작할 때, 이 props값에 따른 내부의 구현에 필요한 데이터 → 컴포넌트가 좋은 부품이 되기위해서는 외부의 props 와 내부의 state가 철저히 분리되어있어야 함 *정리 props - 사용자가 컴포넌트를 사용하는 입장에서의 데이터 state - props값에 따란 내부의 구현에 필요한 데이터 ※ 자세한 내용 참고 https://ko.reactjs.org/docs/state-and-lifecycle.html State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org State 사용 예제 class App e..

컴포넌트란 UI 재사용을 위해 개별적인 여러조각으로 나눈 것으로 소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하는 기술 ※ 자세한 내용 참고 https://ko.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org 간단한 컴포넌트 작성법 - JavaScript 함수 이용 class Sample extends Component { // 컴포넌트 만들기 render() { return ( // 하나의 최상위 태그로 시작 Hello ); } } 사용 예제 import './App.css'; import { Componen..

사용자가 입력한 정보를 외부로 출력할 때, 오염된 정보 소독하기 - html에서 script 태그 사용으로 오염된 정보 유출 예시 - script 태그로 인해 사용자가 html 페이지 접속시 다른 사이트로 이동해버림 ▶ script 태그 비활성화하는 작업 진행 - 살균,소독(sanitize) npm을 통해 sanitize-html 모듈 사용 https://www.npmjs.com/package/sanitize-html?activeTab=readme sanitize-html Clean up user-submitted HTML, preserving allowlisted elements and allowlisted attributes on a per-element basis. Latest version: 2...

1. 파일 쓰기 기능 기능 사용을 위해 직접 검색 엔진 또는 Node.js 공식 홈페이지에서 찾아보기 ! 사용 예제 var fs = require('fs'); var description = 'The pain we are going through is maybe trivial.'; fs.writeFile('data/sample.txt', description, 'utf8', function(err){ // 파일 쓰기 console.log('write success'); }); ▶ filewrite.js 내용 - data 폴더 안에 sample.txt를 만들어 description 내용 쓰기 * sample.txt가 존재하면 내용 덮어쓰기 * sample.txt가 존재하지않으면 txt 파일 새로 만들어서 ..

1. 동기(Syncronous)와 비동기(Asyncronous) 동기적으로 일을 처리한다 ? ▶ 어떤 일을 처리하고 그 일이 다 끝난 후, 다음 일을 처리한다. ▶ 오래걸리는 작업이 있을 경우, 수행중인 작업이 끝날 때까지 기다린다. 비동기적으로 일을 처리한다 ? ▶ 어떤 일을 컴퓨터나 다른 사람에게 시키고 , 다음 일을 처리한다. ▶ 동시에 일을 처리하며(병렬적) 시간 효율성을 높인다. → Node.js 에서는 비동기적 처리를 하기위한 좋은 기능들을 가지고 있다. Node.js 에서의 사용 예제 Node.js 공식 홈페이지 → 문서 → 자신이 사용하는 Node.js 버전 선택 → File System → Sync 검색 ▶ ~Sync 함수는 동기적 처리 여기서는 readFileSync과 readFile을..

1. 파일 읽기 기능 기능을 사용하기 위해 검색 엔진에 node.js file read 입력 또는 Node.js 공식 홈페이지 → 문서 → 자신이 사용하는 Node.js 버전 선택 → File System → read 검색 또는 찾기 사용 예제 var fs = require('fs'); fs.readFile('sample.txt', 'utf-8',function(err, data) { console.log(data); }); ▶ fileread.js 내용 - sample.txt 내용을 읽어서 출력해보기 * 'utf-8' 형식 인코딩 추가 The pain we are going through is maybe trivial. ▶ sample.txt 내용(간단한 test용) * Node.js 실행 시 파일 위..

템플릿 리터럴(Template Literal) - 내장된 표현식을 허용하는 문자열 리터럴 - 여러 줄로 이루어진 문자열과 문자 보간 기능 사용 가능 - "template string"(템플릿 문자열)으로도 불림 사용 예제 var nickname = 'aaaahy'; var letter = 'Dear ' + nickname + ' The pain we are going through is maybe trivial.' console.log(letter); 여기서 nickname인 'aaaahy' 다음 띄어쓰기를 하고 싶을 경우, 일반적으로 개행문자(newline character)인 '\n'을 추가하여 아래와 같이 작성할 수 있다. var nickname = 'aaaahy'; var letter = 'Dea..