개인코딩개발공장

#기초 컴포넌트 만들기 방법import React, { useState, useEffect } from 'react';import './App.css';function App() {}const Modal = () => { return ( 제목 내용이다아아아아아 );};export default App;이렇게 App이라는 함수와 동등한 위치에 Modal이라는 함수를 만들고html스트링을 return하게 만든다그럼 이 함수는 Modal이라는 컴포넌트가 된다. 이걸 App()함수가 return하는곳 원하는곳에 쑤셔넣으면 됨 이렇게 Modal컴포넌트가 나타나게 되었다.  # 중요한점컴포넌트는 무조껀 하나의 html태그를 return하게 만..

# vs코드 쓰면서 prettier가 안됐음.cntl+shift+p눌러서저기드가샘이거 code formatter으로 바꿔주샘..저장시 줄정렬이 안됐었음 ㅠㅠ   # warining메시지 없애기/* eslint-disable */import React, { useState, useEffect } from 'react';import './App.css';이렇게 eslint 안쓴다고 해주면 됨.    # 버튼기능 만들기 incrementLike(0)}>라이크이렇게 태그에 onClick넣어주면 됨. 함수에 파라미터가 있으면 저렇게 즉시실행함수로 써줘서 함수리터럴을 써줘야 오류 발생안함그냥 함수 호출해버리면 rerendering오류가 뜨더라.매개변수가 없다면 그냥 함수이름만 넣어주면 됨   # ..

# JSX란?function App() { let post = "강남우동맛집"; const [state, setstate] = useState("무찌안녕"); console.log("바보무찌"); return ( hello world {post} );}이렇게 js가 있는데 안에 html이 들어있음.컴포넌트 쏴주는식인데 정확히는 함수안에서는 JS문법으로 되니까 HTML을 그대로 쓰면 제대로 인식 못 할 수 있음.그래서 이 안에서 문법을 JSX로 만들었다고 함.예를들어 예약어인 class대신에 className으로 한다는것..-기호를 쓰면 마이너스로 인식하니 안되고 카멜케이스 써야하는것 등등 있다.    # JSX에서 html 태그 자동완성이거땜에 코드짤때 짜증이 났는데.. ..

npx create-react-app 앱이름위 명령어로 프로젝트를 만들어주자.참고로 node js환경이 설치되어 있어야 한다.   Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-react-app.dev  리눅스 커널 상에서 해당 프로젝트 디렉토리로 이동한 후, npm start로 로컬서버에서 구동시켜주자. 3000번 포트에서 리액트 프로젝트 사이트가 떴다. # 대충 구조 파악하기난 이미 vue를 다뤄봤기에 spa프레임워크에 좀 적응이 되었는데 일단 딱보이는 다른점은 이 점이다.현재 리액트 프로젝트의 디렉토리 구조인데vue같은경우는 .vue라는 컴..

# 개요 s3는 simple storage service의 약자이다. s3가 세 번 들어간다는 뜻. 말그대로 우리가 구글클라우드나 뭐 네이버클라우드에다가 사진들 넣어두고 쓰는 뭐 그런 느낌의 서비스다. 데이터파일을 넣고빼고 쓸 수 있는데, 이런 개인의 스토리지용으로도 사용가능하지만, 프로그래밍에서 여러 데이터들을 사용하는거에 더욱 최적화되어있는듯하다. 우리 어릴떄는 외장하드나 USB처럼 로컬디바이스에 데이터를 저장했는데 쓰다보면 데이터 날아가거나 몇년후 꺼내보면 데이터상태가 안좋은 경우가 많았다. 그래서 이거 쓰면 좋은듯 가용성이 좋고 안전하고 이런건 뭐 내실력으로 대충 아 그렇구나 정도로 넘어가고 aws광고문구라고 생각하고 일단 포스팅한다. # s3구조 s3는 객체형식으로 관리된다. 그러니까 파일하나가..

# 개요 VPC는 Virtual Private Cloud의 약자이다 해석하면 가상 프라이빗 클라우드라는건데 aws클라우드 내에서 가상의 네트워크를 만들수 있는거다. 보안적으로 구조적으로 활용가능한 그룹나누기? 이런 느낌이라고 보면 된다. 이 포스팅을 이해하려면 네트워크 기본지식이 어느정도 필요하다. 난 muzzi-house-vpc라는 VPC 가상네트워크를 만들어볼거다. # VPC를 만들어볼까? 콘솔 검색창에 VPC를 검색해서 VPC콘솔에 들어가보자. VPC콘솔에서 우린 muzzi-house-vpc를 만들어볼거다. 'VPC 생성' 버튼을 눌러보자. 그럼 이러한 페이지로 넘어갈텐데, 이름태그에 muzzi-house-vpc라고 적어주자. 그리고 이 네트워크의 대역대를 적어줘야하는데 172.20.0.0대역대에 ..

# 개념 로드벨런서라는건 여러 인스턴스로 랜덤하게 연결해주는 단일진입점이다. 그림으로 표현하면, 클라이언트는 로드벨런서의 IP나 DNS로 진입하면, 로드벨런서는 이 트래픽을 첫번째 EC2나 두번째 EC2로 랜덤하게 연결해준다. 확률상으론 50대 50인거다. 일반적으로 로드벨런서가 없으면 한 인스턴스에 트래픽이 몰려서 부하가 생기고 서버가 터져버리지만, 로드벨런서가 있고 같은 기능을하는 EC2 인스턴스가 두 대가 있다면 이 트래픽을 반반으로 나눠 보내주기떄문에 서버가 터지지 않는다. 이러한 로드벨런서를 aws에서 구현해볼거다. # 일단 EC2 두 개를 만들자. 이렇게 두개의 muzzi-web-1, muzzi-web-2를 만들었다. 각각은 웹서버로 동작하고 index.html에는 hello muzzi wor..

# 개요 AMI는 아마존 인스턴스 자체를 이미지로 만들어서 재사용할수 있게 하는거다. 이미지뿐 아니라 여러 리소스를 AMI딸수 있는것 같은데 난 EC2로만 해볼생각이다. KVM공부할때 이미지로 바로 머신을 하나 생성해서 동작시키는 등 여러가지 방면으로 활용가능하다. 예를들어 AMI를 따놓고, 사용자가 많을때 오토스케일링을 활용해서 동일한 이미지로 인스턴스를 수평적으로 확장하거나 할때 쓸 수 있다. 또한 백업용으로도 사용할 수 있고 이 이미지를 통째로 다른사람에게 공유할 수도 있다. # 일단 EC2인스턴스를 하나 만들자. 난 걍 단순하게 hello muzzi world라는 글자가 뜨는 웹서버로 동작하는 ec2인스턴스를 muzzi web이라는 이름으로 하나 만들거다. 잘 만들어졌다. 이제 ssh로 이 인스턴..

# 개요 EC2는 ECC의 약자이고, 이건 elacstic compute cloud의 약자이다. 인스턴스라는건 우리가 aws의 컴퓨터를 한대 빌리는거다. 가장 근본적인 클라우드 서비스의 형태라고 봐도 된다. 이걸 빌려서 웹사이트를 띄울수도 있고 원하는 작업을 시킬수 있는 등 근본적인 클라우드서비스의 '컴퓨터를 빌린다'라는 개념을 EC2를 다루면서 이해할 수 있다. # EC2인스턴스 생성 aws콘솔에서 EC2를 검색해서 EC2콘솔에 들어가자. 왼쪽탭에 인스턴스를 들어가자. 인스턴스를 하나 대여할거다. 인스턴스 시작 버튼을 누르자. 먼저 인스턴스 이름을 정해주자. 난 muzzi instance로 정해줬다. 그다음 이 인스턴스의 이미지를 선택해줄 수 있다. 실제로 우리가 온프레미스로 VM을 만들게되면, VMw..

# 개요 aws서비스를 사용하면서 가장 걱정되는 부분이 aws 비용부분일것이다. 실수로 만든 리소스가 계속 과금되어 비용이 청구될 수 있고, 행여나 해킹을 당해서 수천만원의 과금이 될수도있다. 이런부분을 관리하기위해 포스팅을 하기로 했다. # cost explorer 비교적 최근에 생긴 기능이다. aws문제풀면서도 많이 보이는데 들어가보니 괜찮다. 일단 가는 방법은, 우측상단에서 결제 및 비용관리에 들어간다. 그다음 우측에서 cost Explorer탭에 들어간다. 그럼 이런창이 뜬다. 난 아무것도 안썼기 때문에 월별평균비용이 0원으로 되어있는데 만약 다른 리소스를 쓰게된다면 돈이 청구된다. 마우스를 올려놓은데보면 어떤 리소스에서 비용이 청구되었는지 비율로 나온다. 쓰기 참 편하게 되어있다 ㅎ # 비용이상..