개발 공부 시리즈24 [인프런 강의] zerocho Slack 클론 코딩 (5) - 기본 세팅 (webpack devServer 세팅) [인프런 강의] zerocho Slack 클론 코딩 (5) - 기본 세팅 (webpack devServer 세팅) 저번 포스팅에서는 webpack과 babel을 설정하였다. 이번 포스팅은 webpack devServer를 세팅하려 한다. 지금 형태에서는 만약 App.tsx의 태그의 글자를 변경하거나 변경사항이 있다면 다시 빌드 명령어로 재 빌드를 해야 한다. App.tsx import React from 'react'; const App = () => { return (좀만 참아주세요 ㅠㅠㅠ); } export default App; 그래서 개발 환경에서 수정사항이 생기면 저절로 알아서 변경된 사항을 바꿔주는 핫리로딩에 대한 설정을 필요로 한다. 핫 리로딩을 하기 위해선 webpack-dev-server.. 2022. 10. 18. 14:01 [인프런 강의] zerocho Slack 클론 코딩 (4) - 기본 세팅 (ts + webpack 실행) [인프런 강의] zerocho Slack 클론 코딩 (4) - 기본 세팅 (ts + webpack 실행) 저번 포스팅에는 webpack + babel을 설정하였다. 이번 포스팅에는 ts + webpack을 세팅해보겠다. Typescript(타입 스크립트)는 자바스크립트와 비슷하지만 정적 타입을 명시함으로써 코드의 품질, 타입 체킹, 높은 생산성을 지니는 프로그래밍 언어이다. webpack은 이전 포스팅에서도 말했다시피 모든 파일(. css,. js. html 등)을 하나의 파일로 합치는 모듈 번들러이다. 1. aleacture/layouts/ 폴더를 만들고 App.tsx를 만들고 다음과 같이 작성한다. App.tsx import React from 'react'; const App = () => { re.. 2022. 10. 17. 14:15 [인프런 강의] zerocho Slack 클론 코딩 (3) - 기본 세팅 webpack, babel [인프런 강의] zerocho Slack 클론 코딩 (3) - 기본 세팅 webpack, babel 저번 포스팅에서 이어서 프론트엔드 설정을 계속한다. webpack과 babel을 설정해야한다. 웹팩은 모듈 번들러로서의 역할을 하고, 모듈 번들러란 웹 애플리케이션을 구성하는 몇백 개의 자원을 하나의 파일에 합치는 것을 말한다. 자세한 내용은 zerocho님의 React 무료강좌에도 있다고 한다. 바벨은 이전 포스팅을 링크 해놓았다. 2022.09.29 - [개발/Javascript] - Babel과 polyfill Babel과 polyfill Babel 바벨은 자바스크립트 컴파일러이다 . ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는데 주로 사용되는 도구 체인이다. 아래.. 2022. 10. 14. 22:50 [인프런 강의] zerocho Slack 클론 코딩 (2) - 기본 세팅 Node.js 와 mysql 설치 이번 강의는 Node.js 와 Mysql을 설치하는 내용이다. Node.js 는 이미 포스팅해놓았기때문에 아래 링크로 가면 된다. 2022.10.13 - [개발/개발지식] - [환경설정] Node.js, npm 설치하기 [환경설정] Node.js, npm 설치하기 Node.js 및 npm 설치하기 포스팅이나 개발을 하다 보면 항상 나오는 node.js와 npm의 설치 방법을 다루려고 한다. Node.js Node.js 공식홈페이지 메인화면에서는 Node.js를 다음과 같이 설명한다. Node.js®는 C ijw9209.tistory.com Mysql 은 아직 포스팅을 안해놓아서 곧 포스팅하면 링크를 추가하겠다. 프론트엔드 개발환경 세팅 프론트엔드 개발 환경은 버전의 호환.. 2022. 10. 14. 13:27 [인프런 강의] zerocho Slack 클론 코딩 (1) - 기본 세팅 인프런의 slack 클론 코딩 https://www.inflearn.com/course/slack클론코딩 Slack 클론 코딩[실시간 채팅 with React] - 인프런 | 강의 Slack 서비스를 따라 만들며 본격적인 리액트 웹 개발을 시작해봅시다! 회원가입, 로그인, 방 만들기, 실시간 채팅까지!, - 강의 소개 | 인프런... www.inflearn.com 최근에 인프런에서 강의를 결제하였다. 프론트엔드 개발자로 유명한 zerocho님의 강의이다. Slack 클론 코딩을 따라 해 보며 정리를 하려고 한다. 개발 환경은 프론트 엔드 : React 백엔드 : nest , typeorm 강의는 프론트엔드부분을 먼저 완료하고, 백엔드 부분을 구현한다. 프론트엔드는 Redux 대신 swr을 사용한다. 강의.. 2022. 10. 13. 13:14 [React] Redux-Toolkit 초기설치 Redux-Toolkit Redux-toolkit은 기존 Redux를 편리하고 간편하게 사용할 수 있는 라이브러리이다. Redux코드를 보다 더 간결하게 작성할 수 있고, Redux 보다 효율적이다. 기존 Redux의 스토어 구성, 많은 패키지 추가 등등의 문제점을 개선하기 위해 나왔다. createStore => configureStore action, reducer => createSlice 등의 사용법이 좀더 개발자 친화적으로 작성할 수 있다. Redux-ToolkIt 설치 방법 1. Redux-Toolkit을 설치하기 위해서는 우선 npm(Node 패키지 관리자)가 설치 되어있어야한다. 사용방법은 아래와 같다. 더보기 https://nodejs.org/ko/ Node.js Node.js® is a.. 2022. 10. 3. 17:38 이전 1 2 3 4 다음 728x90
