coding- w00se

venv는 Python의 가상 환경을 만들어 주는 모듈입니다. python 공식 문서에서는 아래와 같이 venv에 대해 설명합니다. venv에 생성된 각 가상 환경은 고유한 파이썬 바이너리(이 환경을 만드는 데 사용된 바이너리 버전과 일치함)를 가지며 자신의 사이트 디렉터리에 독립적으로 설치된 파이썬 패키지 집합을 가질 수 있습니다. 즉, venv를 통해 설치된 가상 환경은 전역 site-packages(Python을 설치할 때 생성된 site-packages 디렉터리)에 독립적인 site-packages를 가집니다. 이를 통해 가상 환경을 사용하면 독립적으로 패키지를 관리할 수 있는 장점이 있으며, 프로젝트 별로 가상 환경을 만들어 작업을 진행한다면 프로젝트 간의 패키지 버전 충돌을 사전에 방지할 수 ..

React에서는 컴포넌트(component) 외부에서 상태(state)를 관리하기 위한 방법으로 useReducer가 제공됩니다. useState와 useReducer 모두 상태를 관리하기 위한 Hook으로 어느 것을 사용해도 문제가 없지만 프로젝트 규모가 큰 경우 useReducer를 사용하는 것이 편리할 거 같습니다😊 오늘은 typescript로 useReducer를 사용하는 예제를 정리했습니다. useReducer에 대한 자세한 설명은 아래 공식 문서에서 확인할 수 있습니다. https://reactjs.org/docs/hooks-reference.html#usereducer Hooks API Reference – React A JavaScript library for building user in..

Typescript도 연습하고 React에도 적응하기 위해 기초부터 다시 연습하려 합니다. 연습은 벨로퍼트님의 '벨로퍼트와 함께하는 모던 리액트'로 진행했습니다. 해당 게시글은 React를 Typescript로 연습하면서 타입 선언, 기존 Javascript를 사용했을 때와 다른 점을 위주로 기록했습니다. React에 대한 개념과 자세한 설명은 아래 링크에서 확인 가능합니다😊 https://react.vlpt.us 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us Props의 각 속성에 타..

Typescript에서의 Function, Obejct, Interface를 정리해 보았습니다. Function Typescript에서는 매개 변수와 반환 값에 타입을 명시할 수 있습니다. 지정한 값과 다른 값이 전달 또는 반환되면 컴파일 에러를 발생시킵니다. function sum(a: number, b: number): number { return a+b; } const res: number = sum(100, 11); console.log(res); // 111 sum(100, "100"); // error Function 관련 유용한 기능으로는 선택 매개 변수가 있습니다. 매개 변수 이름 옆에 ?를 붙이면, 함수 사용 시 해당 매개 변수의 전달을 생략 가능합니다. function greet(nam..

Typescript는 정적 타입 언어로 변수의 타입이 컴파일할 때 결정됩니다. 따라서 타입 오류를 컴파일 타임에 확인할 수 있는 장점이 있습니다. 오늘은 Typescript에서 사용되는 타입에 대해 정리를 해보았습니다. 원시 타입 - string: 문자열 - number: 숫자 - boolean: 논리 * javascript에서는 int와 float에 대응되는 타입이 없으며, 모두 number을 사용한다고 합니다. const str1: string = "hello"; const num1: number = 123; const num2: number = 123.123; const bool1: boolean = true; console.log(str1); console.log(num1); console.log..

프로젝트를 시작하기 전 Typescript를 연습할 필요가 있어 Typescript를 실행할 수 있는 환경에 대해 알아보았습니다. 여러 방법이 존재하겠지만 간단히 연습할 수 있는 방법은 아래 두 가지가 있는 거 같습니다. 1. tsc로 Typescript 파일을 Javascript 파일로 컴파일한 후 실행시키기 https://code.visualstudio.com/docs/typescript/typescript-compiling TypeScript Compiling with Visual Studio Code Learn about TypeScript compiling with Visual Studio Code. code.visualstudio.com 설치 방법은 아래와 같습니다. npm install -D..

Webpack이란 무엇인가? At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. 위는 webpack 공식 문서에 나온 webpack에 대한 설명이다. webpack은 module bundler(모듈 번들러)이며 webpack은 프로젝트에 사용된 module의 의존성 그래프를 바탕으로 하나 이상의 bundle을 생성한다. '실전 ..

Babel이란 무엇인가? Babel은 자바 스크립트 컴파일러다! 즉, Javascript 파일을 입력으로 받고 출력으로 Javascript 파일을 반환한다. Babel은 왜 필요한가? Javascript만 생각했을 때 브라우저 종류와 그것의 버전 별로 지원하는 javascript 최대 버전이 있다. 즉, 어떤 환경(브라우저 종류와 버전)에서 최신 javascript 문법을 지원하지 않는 경우가 발생한다. *IE(Internet Explore)는 자동 업데이트가 안돼서 주로 위와 같은 문제는 IE에서 발생한다고 한다. 때문에 작성된 javascript 파일을 브라우저가 이해할 수 있는 javascript 버전에 맞게 변환시킬 필요가 있고 babel을 통해 javascript 변환을 할 수 있다. 대표적으로..

DOM = The Document Object Model MDN 웹 문서에는 DOM을 아래와 같이 설명한다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 1분 코딩 강사님께서는 아래와 같이 DOM을 설명하셨다. 문서 안의 태그, 속성, 클래스, id, 텍스트 등을 객체로 바라보는 모델로 Html 요소를 Javascript로 조작하는 것이다. 마지막으로 참고한 J 기술 블로그에는 아래와 같은 설명이 있다. DOM은 문서 내..