최신 프론트엔드 개발환경 적용하기3(vite)
추가적인 문제점 찾아보기 yarn berry로 npm의 고질적인 문제점을 해결하고 monorepo로 재사용성을 높였다. 이제 아무런 문제가 없을까?? 프론트개발자는 항상 문제를 찾아야한다. 주어진 환경에 만족하지 않고 불편함을 느끼고 해결할 방법을 찾아야한다. 내가 느낀 불편한점은 웹팩이다. 웹팩은 너무 느리다. 빌드시간도 느리고 서버 구동시간도 느리다. 웹팩은 분명히 많은 사람들이 사용하고 레퍼런스도 많다. 하지만 문제점도 분명하다. 너무 느리다. 불필요한 플러그인을 제거하고 terserplugin을 적용하거나 gzip압축을 하고 캐시를 적용해도 본질적인 문제는 해결되지 않는다. 웹팩의 문제점 그러면 웹팩이 왜 느릴까?? 사실 프론트엔드의 발전과정을 이해해야한다. 너무 자세히 말하면 주제가 달라지기 때..
git 작동원리 설마 모르는건... 1편
개발자라면 git을 무조건!! 사용한다. 그중에서도 가장 보편적인 github는 개발자 준비생이나 학부생, 비전공자들도 알고 사용할 정도로 유명하다. 나의 경우를 보면 친구가 프로젝트 한 것을 github에 올리라고 했다. 그래서 맨처음에는 cli를 사용하지 않고 그냥 깃허브 사이트에서 올렸고 그다음에는 git bash를 사용해서 올렸다. 옆에서 누가 알려주지 않는 한 보통 이렇게 시작한다. 처음부터 branch, merge, pr 등을 알고 기능별로 commit을 하면 좋겠지만 무엇이든지 단계가 있고 필요성을 느낄때 사용하게 된다. 그리고 필요성을 느낄때 공부하고 적용하는 것은 '이걸왜쓰는거지??' 하면서 책보고 넘어가는 것과는 매우 다르다. 이제 점차 단계별로 git에 대해 알아가기 시작하는데 주관적..
리액트리덕스(react, redux) 사용법
이 글은 리액트와 리덕스를 모르면 이해하기 힘듭니다. 리덕스를 모른다면 아래글을 읽고 와주세요 https://ms3864.tistory.com/60 리덕스(redux) 사용법1 먼저 오늘은 HTML에서 사용하는 법을 알아보겠습니다. 나중에 리액트와 연동하는 글을 올릴계획입니다. (이고잉님의 강의를 참고하였습니다.) https://redux.js.org/ Redux - A predictable state container for J.. ms3864.tistory.com 기본 틀을 먼저 설명하겠습니다. react와 redux모두 state를 가지고 있습니다. 그래서 헷갈리면 안됩니다. react는 하위컴포넌트로 state를 props로 넘겨서 상태관리를 하는데 redux는 store에서 모든 state를 관..
리덕스(redux) 사용법1
먼저 오늘은 HTML에서 사용하는 법을 알아보겠습니다. 나중에 리액트와 연동하는 글을 올릴계획입니다. (이고잉님의 강의를 참고하였습니다.) https://redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org Get Started를 누르면 시작하는 법이 나와있습니다. 오늘은 간단히 html로 할것이기 때문에 npm install은 사용하지 않고 위에 코드만 붙여넣기 하시면 됩니다. 그리고 redux devtools를 검색하셔서 깔면(chrome에서만) 시간여행이나 변화된 상태를 보는 것을 할수 있습니다...
mysql 비밀번호변경, 시간설정, 한글설정(aws ec2 ubuntu)
이제 기본 mysql기본 설정을 하겠습니다. mysql글이 아니기 때문에 필요한 것만 간단히 설명하겠습니다. show databases; use mysql; show tables; 를 입력하면 테이블들이 보입니다. alter user 'root'@'localhost' identified with mysql_native_password by '1234'; flush privileges; --저장을 해주는 코드다. 필수!! 이제 변경된 비밀번호를 입력하고 mysql에 접근할 수 있다. mysql시간이 한국 시간으로 맞춰져 있지 않습니다. 그래서 이것도 설정을 해야 합니다. 여러방법이 있지만 간단한 방법 한가지만 소개하겠습니다. sudo cp /usr/share/zoneinfo/Asia/Seoul /etc/l..
aws ec2 사용법3(우분투)(git 불러오고 기본설정하기)
nodejs교과서 노드 까는법 sudo apt-get update sudo apt-get install -y build-essential sudo apt-get install curl curl -sL https://~~~~~~~~~` sudo apt-get install -y nodejs 이번시간에는 기존 코드를 git으로 불러오고 기본 설정을 해보겠습니다. xhsall에서 아래 코드를 입력합니다. sudo apt-get install build-essential --- 필수적인 요소 sudo apt install npm --- npm 설치 curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash- sudo apt-get install -y nodej..
aws ec2 사용법2(우분투)(윈도우에서 리눅스 접속)
이전글을 보지 않았다면 이전글을 먼저 봐주세요. https://ms3864.tistory.com/32 aws ec2 사용법1(우분투) AWS(Amazon Web Services) EC2(Elastic Compute Cloud) 말 그대로 AWS는 아마존에서 운영하고 있는 웹서버이고 EC2는 컴퓨터를 임대해주는 서비스입니다. 먼저 AWS에 회원가입을 합니다. 1년은 무료니 무료버전으. ms3864.tistory.com 저는 xshell6을 사용해서 윈도우에서 리눅스 인스턴스로 접속하겠습니다. 아래 링크로 들어가시면 xshell을 다운로드 받을 수 있습니다. https://www.netsarang.com/ko/free-for-home-school/ 무료 라이선스 무료 라이선스 무료 사용자의 최고의 선택 Xs..
aws ec2 사용법1(우분투)
AWS(Amazon Web Services) EC2(Elastic Compute Cloud) 말 그대로 AWS는 아마존에서 운영하고 있는 웹서버이고 EC2는 컴퓨터를 임대해주는 서비스입니다. 먼저 AWS에 회원가입을 합니다. 1년은 무료니 무료버전으로 사용합시다. 참고로 카드가 필요합니다. 먼저 도시를 서울으로 바꿔줍니다. launch insstance를 누릅니다. 운영체제를 선택할 수 있습니다. 저는 우분투(리눅스)를 선택하겠습니다. 무료버전이므로 CPU1의 1GB메모리를 사용하겠습니다. 일단은 그냥 넘어가시면 됩니다. 이것도 그냥 넘어가시면 됩니다. 원하는 태그를 입력하시면 됩니다. 연습용이기 때문에 source를 anywhere로 했습니다. SSH는네트워크 상의 다른 컴퓨터에 로그인하거나 원격 시스..