h e 1 1 o !

💾 기획 "저금통처럼 행복한 기억을 저장해뒀다가, 필요할 때 꺼내보자" 돼지 저금통 컨셉으로, 저장해뒀다가, 랜덤으로 작성한 데이터를 찾아볼 수 있는 서비스를 만들기로 했다. 기능은 기본 CRUD 다이어리와 비슷하다. 💾 피그마로 만든 프로토타입 https://www.figma.com/file/X03XLKB7g6ZE2uvWFcknYD/Untitled?node-id=0%3A1 Figma Created with Figma www.figma.com 💾 사용한 기술스택 📎 Firebase 📎 Styled components 📎 Javascript 📎 React 📎 + Varcel (배포 예정) 원래 토이프로젝트로 혼자 만들기로 하고 프로토타입까지 만들었다. 언제 만들지 미뤄오다가 같이 스터디하던 팀원분들과 함께..

📂 웹팩 주요 컨셉 webpack의 주요 컨셉 #1 entry, output, bundle entry 파일이 필요한 모든 것을 webpack이 모아서 번들링을 해준다. 번들링의 결과물이 output 경로로 산출된다. https://webpack.js.org/concepts/why-webpack/ Why webpack | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.or..

📂 웹팩의 핵심 개념 Entry Output Loaders Plugins Mode Browser Compatibility 📄 webpack의 config 파일 예시 module.exports = { target: ["web", "es5"], // entry: "./src/script.js", // output: { // path: path.resolve(__dirname, "docs"), filename: "app.bundle.js", clean: true }, module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], // exclude: /node_modules/, }, ], }, plugins: [ //..

📂 번들링 번들링은 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미한다. 프론트엔드 개발자에게 번들은 사용자에게 웹 어플리케이션을 제공하기 위한 파일 묶음이다. 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받는다. 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공하게 된다. HTML, CSS, JS 파일을 그대로 전송하지 않고 번들링을 하는 이유 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다. 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다. 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는..