본문 바로가기

Javscript

(22)

[JS] Package Manager (npm, yarn, yarn berry, pnpm) package manager에 대해 다루기 전에 모듈과 패키지에 대한 개념을 remind하고 가자 모듈이란 ? 프로그래밍에서 재사용 가능한 코드 조각을 나타낸다. 패키지란 ? 프로그래밍에서 코드, 리소스, 설정 파일 등을 묶어서 효율적으로 관리하고 배포하기 위한 단위를 의미함. 주로 패키지는 모듈의 집합이며, 프로그램이나 애플리케이션을 개발, 유지보수, 배포하기 위한 목적으로 사용됨. 이 패키지(라이브러리)들을 우리는 개발을 하며 많이 사용한다. (예를 들어 npm install react, yarn add react 와 같은 명령어로 라이브러리를 설치를 하면 package.json 또는 yarn.lock 파일이 생성되며 라이브러리의 버전 및 의존성을 관리해준다. ) 이 명령어 앞에 붙은 npm, yar..

[JS] package.json, package-lock.json 이 뭐에요 ? (feat, ^(caret)와 ~(tilde)) package.json 현재 폴더(프로젝트)에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치된 라이브러리, 모듈들의 의존성을 관리하는 json파일이다. { "name": "coding-hyeok", "version": "0.1.0", "private": true, // ~~ "dependencies": { "열코": "^1.2.3" }, "devDependencies": { "혁코": "~1.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", }, "proxy": "http://localhost:4000" } 위는 예시이다. 리액트를 사용하는 독자라면 익숙한 것일테다. name, version..

[Javascript] 인증과 인가, 암호화, jwt (flask, bcrypt) 회원가입과 로그인은 알면 알수록 짜릿하다. 실생활에서 겁나 아무생각 없이 쓰고 있는 별거 아닌 기능인 거 같지만 사용자의 정보가 들어가기 때문에 매우매우 중요한거 같다. 그래서 이번에 제대로 알아보려한다. 관련 문서를 보고 이해를 바탕으로 정리하였습니다. 틀릴 수도 있으니 지적해주시면 겸허히 받아들이도록 하겠습니다. 회원가입과 로그인을 알아보기 전에 인증과 인가에 대해 먼저 알아보자 1. 인증 Authentication 인증은 사용자가 누구인지 확인하는 절차다. 회원가입과 로그인이 대표적인 예이다. 인증의 보안을 강화하기 위해서 내가 한 방법은 1. 회원가입시 bcrypt로 사용자 정보 암호화하기 2. 로그인 시 회원가입된 비번을 복호화해서 확인하는 것이 아닌 로그인 시 비밀번호를 암호화해서 확인하기 3..

[Javascipt] 화살표 함수 => (1/30) 화살표 함수 (Arrow Function) 의 선언 화살표 함수는 function 키워드 대신 화살표를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있따. 하지만, 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래오 같다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로..

[Javascript] 이벤트루프, 동시성, 이벤트 종류 (1/30) 이벤트 루프(Event loop)와 동시성 (Concurrency) 브라우저는 단일 쓰레드(single-thread)에서 이벤트 드리븐(event-driven) 방식으로 동작한다 단일 쓰레드란 ? 쓰레드가 하나뿐이라는 의미이다. 즉, 곧 하나의 테스크(작업)만을 처리할 수 있다는 뜻이다. 쓰레드란 ? 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다. 브라우저는 실제로 동작하는 많은 웹 애플리케이션은 많은 테스크가 동시에 처리되는 것처럼 느껴진다. 이 처럼, 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프 이다. 구글의 V8을 비롯한 대부분의 자바스크립트 엔진은 크게 두가지로 나뉜다. Call Stack (호출 스택) 작업이 요청되면 (함수가 호출되면) 요청된 작업은 순..

[Javascript] onclick event(인라인 이벤트, eventlistener, onclick 차이점) hmtl의 버튼의 클릭을 감지하는 방법은 여러가지가 있다. 1. html에서 온클릭함수 주기 ex) 2. js에서 eventlistener 3. js 온클릭함수 주기 이렇게 세종류가 있다. (더 있다. 그러나 이거를 제일 많이 쓰는 것 같다. 그러니 이거만 알아보자) 리액트를 사용하던 나로써는 1번 방법이 가장 눈에 익고 손에 익어서 많이 사용했다. 그러나 오늘 onclick을 사용했는데 이벤트가 동작을 하지 않았다. 구글링을 통해 문제와 해결방법 알았다 !!!! 그걸 여기에 적어 놓을 거다 ! 예를 들어 보즈았!!!!!!!!!!!!!!!!!!!!!!! 1. js에 onclick 이벤트 주기 show 잘 작동한다. 2. EventListener show 1번과 아주 유사하다. 2번또한 1번처럼 아주 잘 ..

[Javascript] DOM (문서 객체 모델:Document Object Model) (1/29) 문서 객체 모델 DOM(Document Object Model) 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 잇는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉, 모든 요소와 요소의 attribute, text를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며, 변경된 DOM은 렌더링에 반영된다. 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데, 일반적으로..

[Javascript] 자바스크립트 메소드, 프로퍼티 (1/28) 배열 고차 함수 (Array Higher order Function) 고차 함수는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 즉, 고차함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수 있다. // 함수를 인자로 전달받고 함수를 반환하는 고차 함수 function makeCounter(predicate) { // 자유 변수. num의 상태는 유지되어야 한다. let num = 0; // 클로저. num의 상태를 유지한다. return function () { // predicate는 자유 변수 num의 상태를 변화시킨다. num = predicate(num); return n..

이전 1 2 3 다음

티스토리툴바