본문 바로가기

전체 글102

[인프런 강의] 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
[인프런 강의] 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
[Javascript] 자바스크립트의 메모리관리 [Javascript] 자바스크립트의 메모리 관리 자바스크립트의 메모리 관리 c언어와 같은 저급 언어에서는 메모리를 관리하기 위해 개발자가 직접 메모리에 접근한다. (malloc(), free()와 같은 함수) 반면에 자바스크립트는 객체가 생성되면 자동으로 메모리를 할당해주고, 필요가 없다면 가비지 컬렉션(garbage collection)이 자동으로 메모리를 해제한다. 대부분의 고급 언어에서는 가비지 컬렉터가 존재하고 메모리를 관리해준다. 자동 메모리 관리가 존재하면, 개발자가 메모리 관리에 신경을 쓰지 않게 되고, 이 영역에 대한 이해가 부족할 수 있는 문제가 생긴다. 나도 메모리 관리 영역에 대해선 잘 알지 못하기 때문에 이번 포스팅을 쓴다. 메모리의 생존 주기 어떤 언어를 사용하던 메모리 생명주기.. 2022. 10. 17. 22:46
[인프런 강의] 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
728x90

티스토리툴바