TypeScript에서 왜 import * as $ from '' 을 사용할까? TypeScript로 개발을 해보면 import * as $ from ''을 많이 사용하는 것을 볼 수 있습니다. 보통 그냥 CommonJS를 ESModule 같이 보이게 하기 위해 사용한다.라고 간단하게만 알고 있으며 다른 import를 사용할 때 해당 구문을 이해하지 못하고 사용하고 있습니다. 👣 설명 Module은 왜 만들어졌을까요? Module을 정의하면 다른 파일에서 호출하고 사용할 수 있는 파일의 코드 조각입니다. 이 Module은 큰 프로젝트에 매우 유용합니다. 프로젝트가 커지면 커질수록 여러 기능, 공통된 변수등을 쉽게 파악하기 어렵습니다. 이런 문제를 해결하기 위해 생겨난 것입니다. 즉, 코드 관리를 잘하기 ..
Redux 전역 상태 값은 전역 변수처럼 동작하나?
Redux 전역 상태 값은 전역 변수처럼 동작하나?Vanilla JavaScript, React, Redux등으로 프론트엔드 개발을 진행하면서 전역(Global), 지역(Local) 상태 관리에 대한 이해가 부족하였습니다.Vanilla JavaScript일 때 상태를 변화 시 DOM -> CSSOM -> Render Tree -> Layout -> Painting,React일 때 상태 변화 시 Virtual DOM 생성 -> 비교 -> 실제 DOM에 적용 (테스크 큐 비어있을 때 실행),전역 / 지역 상태 변화할 때 적절한 위치에서 상태 변화를 주지 않아 다음과 같은 과정을 겪지 않아도 될 곳에서도 다음과 같은 과정을 겪어 비효율적인 프로그램이 되고 있었습니다.또한 면접을 보면서 관련 내용에 대해 정확히..
프론트엔드 아키텍처 & 디자인
프론트엔드 아키텍처 & 디자인 잠시 쉬어가며 기초를 다시 한번 정리하면 좋겠다고 생각하는 도중, 초반 프로젝트 구조 잡기에 대해 생각을 했었습니다. 예전, 프로젝트를 개발할 때 뭔가 있어보이는 아토믹 디자인 패턴, Presentational and Container Component 패턴등을 그냥 선택하여 사용하였습니다. 초반에 아키텍처 & 디자인 패턴의 중요성을 모르고 확실히 정하지 않아 개발을 하여 여러번의 회의, 개개인이 이해한 패턴대로 프로젝트를 진행하고 있었습니다. 그래서 코드를 다시 고치려고 할 때 엉망이었습니다. (프로젝트 할 때마다 조금씩 나아지기는 했지만...) 정리 시작합니다.!! 👣 설명 우선, 아키텍처와 디자인의 차이부터 확실히 하고 갑시다. 아키텍처와 디자인은 구조를 만드는 데 필..
Storybook 시작하기
Storybook 시작하기!!! React에서 UI를 관리하기 위해 StoryBook을 사용하게 되었습니다. 간단하게 예시를 통해서 제작을 해보도록 하겠습니다. :) 해당 사이트를 보고 잘 파악을 하면 됩니다. Web: https://storybook.js.org/ GitHub: https://github.com/storybookjs/storybook/ 🐣 기본 환경 Mac VSCode React(create-react-app) 🐣 1. Storybook 설치 create-react-app을 설치한 곳에서 > npx storybook init 🐣 2. Component 제작 사각형을 만드는 Component제작 const Squares = ({width = 100, height = 100, backgro..
PostCss & Autoprefixer 기본 설정(w. webpack)
PostCss, Autoprefixer (w. webpack) 🦊 1. webpack으로 실행을 위한 "webpack", "webpack-cli", "webpack-dev-server", "html-webpack-plugin", "style-loader", "css-loader" 🐯 > 설치 여기 요기 설치 설명 보세요 > npm i -D webpack webpack-cli webpack-dev-server > npm i -D html-webpack-plugin > npm i -D style-loader css-loader 🐯 > package.json 실행을 위한 것 제작 & browser 범위 지정 "browserslist":[ "> 1%", "last 2 versions", ], "scripts":..
신형 -> 구형으로 기본Babel setting(w. webpack)
Babel 최신 JS -- 변환 --> 구형 JS => 구형 browser에서 사용할 수 있게 변환 시켜준다. 🦊 1. babel 기본을 위한 "@babel/core, @babel/cli" 🐯 > 설치 @babel/core : babel package @babel/cli : terminal에서 명령 동작 시킬 수 있게 하는 것 > npm init -y > npm i -D @babel/core @babel/cli 🐯 > package.json browserslist : 프로젝트가 어느 browser까지 가능하게 할 것인가(browser 범위 지정) "browserslist":[ // global browser 점유율의 1%이상에 해당하는 모든 browser에 적용 "> 1%", //죽지 않은 browser..
Vue 프로젝트 구성(w. webpack) - 2
webpack(Vue~) 🐱 4. webpack Vue setting 🐯 1. vue파일을 가져오는 vue-loader vue파일을 가져와서 읽을 준비까지만 한다. > 설치 'npm info vue-loader`을 이용하여 버전 확인 후 설치한다. > npm i -D vue-loader@next > webpack.config.js 설정 test: 정규표현식 : 정규표현식과 같은 파일 찾아준다. (정규표현식.test(문자)이렇게 사용하면 문자 내부에 정규표현식과 일치하는 내용 확인하는 것) use: 'vue-loader': test를 잘 할 수 있게 vue-loader의 도움을 받는다. // const path = require('path'); const { VueLoaderPlugin } = requir..
Vue 프로젝트 구성(w. webpack) - 1
webpack 해당 부분을 읽어보면 좋아서 우선적으로 적어 놓았고 이것 또한 파일을 모아서 처리하는 방식입니다. 차근차근 진행을 해보겠습니다. 🐱 1. npm 기본 설정 > npm init -y > npm i vue@next npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 🐱 2. 폴더 및 파일 관리 다음과 같이 기본적으로 폴더, 파일을 제작해서 관리를 해보겠습니다. 📦src ┣ 📜App.vue ┣ 📜index.html ┗ 📜main.js > main.js //별 사용 이유: vue의 모든 정보 가져오기 => CommonJS로 이루어졌기..