카테고리 전체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 이전 1 ··· 7 8 9 10 11 12 13 ··· 17 다음 728x90
