개발 공부 시리즈24 [인프런 강의] zerocho Slack 클론 코딩 (8) - 회원가입 페이지 만들기 이번 포스팅은 회원가입 페이지 만들기에 대해 포스팅하겠다. ※ 이 포스팅은 zerocho님의 slack 클론 코딩 강좌를 따라 하면서 정리해놓은 포스팅입니다. 1. 프로젝트 시작하기 - selact/back 폴더로 이동해 "npm run dev" 명령어로 백엔드 서버를 실행시켜 준상태에서 시작한다. 터미널을 새로 열고. leacture 폴더로 이동하여 frontend 코드도 실행한다. 이 강의는 HTML과 CSS의 설명은 중점으로 다루지 않는다. 2. index.html 링크 추가 슬랙 홈페이지에서 index.html 안에 있는 Link들을 가져와 추가한다. aleacture/index.html 이 태그들이 동작을 할 수도 있고 동작하지 않을 수도 있다. 동작하지 않는다면 슬랙 홈페이지에서 개발자 도구를.. 2022. 10. 24. 15:28 [React] Redux-Toolkit TypeScript Quick Start . Redux-Toolkit TypeScript Quick Start https://ko.redux.js.org/tutorials/typescript-quick-start TypeScript Quick Start | Redux - How to set up and use Redux Toolkit and React-Redux with TypeScript ko.redux.js.org 이번 포스팅에서는 Redux-Toolkit TypeScript Quick Start 공식문서를 보며 공부해 보겠다. 리덕스 툴킷에서 타입 스크립트를 간결하게 사용하는 예제를 따라 하면서 구현할 것이다. Redux-Toolkit 설치 방법을 이전 포스팅에서 정리해놓았다. 2022.10.03 - [개발 공부 시리즈/Redux-Tool.. 2022. 10. 20. 15:43 [인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션 [인프런 강의] zerocho Slack 클론 코딩 (7) - 코드 스플리팅과 이모션 이번 포스팅은 코드 스플리팅과 이모션에 대해 포스팅하겠다. 기존 코드에서 한가지를 더 설정해야 하는데, SPA에서 하나의 자바스크립트 파일로 내보내게되면 그 모든 자바스크립트 파일을 첫 페이지에 한 번에 로딩하기 때문에 사용자 경험(UX)이 좋지 않다. 이럴 떄 코드 스플리팅을 통해 보이는 페이지는 먼저 불러오게 되고, 보이지 않는 컴포넌트들은 불러오지 않도록 설정할 수 있다. 코드 스플리팅 설정하기 1. 코드 스플리팅을 위한 패키지들을 설치한다. Loadable Component 를 설치해준다. npm install @loadable/component npm install --save-dev @types/loadabl.. 2022. 10. 20. 13:19 수익형 웹&앱만들기 기본지식 (2) - 파이썬 셀레니움(Python Selenium) 이전 포스팅 2022.10.19 - [개발 공부 시리즈/수익형 웹앱 만들기] - 수익형 웹&앱 만들기 기본지식 (1) - 파이썬 설치 및 크롤링 ※ 이 포스팅은 조코딩님의 유튜브 강의를 참고하여 작성한 포스팅입니다. 출처 : https://www.youtube.com/watch?v=1b7pXC1-IbE 파이썬 셀레니움(Python Selenium) 이전 포스팅에 이어서 파이썬 셀레늄을 사용한 크롤링을 해보고자 한다. 이전 포스팅에서는 크롤링을 위해 BeautifulSoup 라이브러리를 이용하여 크롤링하였다. 하지만 BeautifulSoup 라이브러리는 Javascript로 동적으로 생성된 정보는 가져올 수 없다는 한계점이 있다. 셀레니움을 사용하면 브라우저를 코드로 조작하기 때문에 인터넷 브라우저의 동작.. 2022. 10. 20. 01:29 [인프런 강의] zerocho Slack 클론 코딩 (6) - 폴더 구조와 리액트 라우터 zerocho Slack 클론 코딩 (6) - 폴더 구조와 리액트 라우터 1. 폴더 구조 확인 및 설정확인 개발환경 세팅은 끝났고 이제 리액트 폴더 구조와 리액트 라우터를 배우도록 한다. 폴더구조는 자유이고 사람마다 다르지만, 강의에서는 다음과 같이 나눈다. //pages- 페이지의 진입점 //component - 리액트 작은 컴포넌트들 //layouts - 각 페이지들 간의 공통 레이아웃 현재 강의에서는 다음과 같은 폴더 구조로 이루어져있다. 이러한 폴더 구조는 webpack.config.ts 파일에서 다음과같이 설정할 수 있다. //webpack.config.ts const config: Configuration = { name: 'sleact', mode: isDevelopment ? 'develo.. 2022. 10. 19. 13:28 수익형 웹&앱만들기 기본지식 (1) - 파이썬 설치 및 크롤링 수익형 웹&앱 만들기 기본지식 (1) - 파이썬 설치 및 크롤링 처음으로 수익형 웹&앱을 만들어 보려고 시작하려 한다. 나만의 웹, 앱을 만드는 게 목표이다. 텍스트와 이미지 크롤링의 방식을 배우고자 한다. 파이썬은 구름IDE(Integrated Development Environment, 통합개발환경)을 사용하여 실행하려 한다. 구름 IDE는 내 PC에 파이썬 등의 설치 및 환경설정을 하지 않고도 개발과 코드를 작성할 수 있다. 쉽게 말해 클라우드 기반 서비스라고 생각하면 된다. 아래에 사이트에 접속하여 사용할 수 있다. 구름 IDE에서 하려 했으나.... 컨테이너 생성이 되지 않고, 강의도 꽤 오래된 내용이라. 강의는 참고로 사용하고, 그냥 하나하나 부딪혀봐야겠다. 파이썬 개발환경부터 내 PC에 설치.. 2022. 10. 19. 01:25 이전 1 2 3 4 다음 728x90
