평범한 개발자 얏얏이 평범한 개발자 얏얏이

추벽 증후군 수술하고 나서 또 겨우 잡았던 공부 습관 무너져서... 한 달 반이나 지나부렸다... 다시 천천히 시작하자. Styled JSX styled JSX 라이브러리를 사용하면 아래와 같이 스타일을 적용할 수 있다. Next.js의 경우 디폴트로 제공하는 기능이라고 한다. 또한 style 태그에 작성한 css는 이 코드를 작성한 컴포넌트에만 적용이 된다. (자식 컴포넌트에 동일한 이름의 클래스 이름이나, element가 있다고 해도 적용되지 않는다.) :global(.className) 하지만 때론 자식 컴포넌트의 어떤 스타일을 override하고 싶을 때가 있다. 이럴 땐 :globla(.className)을 사용하면 동일한 className을 가진 자식 컴포넌트의 element의 스타일에도 영향..

기본 정보 - elastic beanstalk(eb) 환경에 데이터 인스턴스를 추가할 수 있도록 RDS와의 통합 제공을 한다. - 환경의 일부인 데이터베이스 인스턴스는 환경을 종료하면 인스턴스도 종료된다. DB 인스턴스 생성하기 1. eb 콘솔에서 DB를 생성하고자 하는 환경을 클릭한다. 2. '구성' 탭에 들어간다. 3. 데이터베이스 항목에서 '편집'을 클릭한다. 4. 자신이 원하는 사양에 맞게 DB를 설정한다. 내 사양 - 엔진: postgresql (mongodb 하려고 했는데 생각해 보니 그건 NOSQL이라 없잖...) - 엔진 버전: 가장 최신 - 인스턴스 클래스: db.t2.micro (t2가 개발용 혹은 테스트용으로 적합하다고 합니다.) - 저장: 10GB - 사용자 이름: 적지않겠음 - 암..

1. npm init -y 2. npm install express 3. tsc --init 4. tsconfig.json 파일 수정 - include: 컴파일할 파일 경로 설정 - exlude: 컴파일 대상을 제외하는 옵션 (exclude에 node_modules 추가 안 했는데 왜 아무일도 안 일어났지?) 5. index.ts 코드 작성 6. package.json 수정 - 명령어 tsc를 입력하면 index.ts가 index.js로 바뀐다. (이게 좋은 방법은 아닌데 첫 술에 배부를 수는 없으니...) - elastic beanstalk는 npm run start를 알아서 실행한다. 7. git init 8 커밋하기 9. eb init 10. eb deploy 내일~주말에 할일(이거만 하면 쉬어도 ..

오늘 할일은 - .next 폴더가 gitignore 안 먹히는 이유 찾기 - 배포 사이클 점검 + pacage.json script 점검 - config.yml 파일에 있는 레포, 브랜치 무슨 의미인지 찾기 - https://github.com/vercel/next.js/issues/1588 요 에러 파악 next.js 관련 공부하면 좋은 글 - https://salgum1114.github.io/nextjs/2019-05-20-nextjs-static-website-2/ .next 폴더가 gitignore 안 먹히는 이유 찾기 .next 폴더란? next를 빌드하면 생기는 폴더 = 만들어진 앱을 제공하기 위한 알짜? 파일이라고 생각하면 될 듯 문제 상황 gitignore 파일에 .next를 추가했지만 ..

원래 React 서버 사이드 공부하려고 했는데 대충 원리는 파악했으니 굳이 똑같이 따라해볼 필요는 없을 거 같아서 next.js를 elastic beanstalk에 배포하는 걸 해보려고 한다. 오늘도 파이팅 ~ 이 글을 참고했습니다. https://blog.rhostem.com/posts/2019-09-01-deploy-next-app-to-eb Next.js 프로젝트 생성 1. npm init 2. npm install react react-dom next 3. pages 폴더 생성 및 index.jsx 파일 추가 4. package.json 파일에 있는 script 내용 변경 Next.js에 typescript 적용 1. npm install --save-dev typescript @types/rea..

오늘은 S3에 React 배포를 해보자. 그리고 앞으론 3시간 공부가 아니라 오늘의 목표를 끝내면 공부 끝, 못 끝내면 3시간 채우는 방식으로 해야지 S3에 React 배포 https://react-etc.vlpt.us/08.deploy-s3.html 를 참고해서 진행했다. 다른 점은 따로 IAM 계정을 생성하지 않고 루트 계정으로 했다는 것, 버킷을 만들 때 퍼블릭 액세스가 가능하도록 미리 설정을 했다는 것 정도 전체 과정 1. 앱 만들고 빌드하기 2. ASW S3에서 버킷만들기 3. 버킷 권한 설정 4. 정적 웹 사이트 호스팅 설정 5. S3에 파일 올리기 1. 앱 만들고 빌드하기 아무래도 가장 쉬운 방식은 CRA를 사용한 방법이다. 하지만 공부할 겸 CRA를 사용하지 않고 아래 링크를 참고하여 앱을..

아니 무슨 배포 하나 하는 게 이렇게 어렵냐 퉤퉤! 일단 오늘 알아낸 것을 말해 보자면... 1. react 프로젝트를 빌드하면 바벨과 웹팩을 거쳐서 html 파일과 js 파일이 하나씩 만들어진다. -> 여러 개의 파일을 만들어 보고 이 파일이 어떻게 변하는지 확인해 보자 2. 서버사이드 렌더링을 사용하지 않으면 React 프로젝트에서 server 같은 역할을 하는 코드는 필요가 없는 거 같다. 아무래도 next.js만 쓰다 보니까 이게 헷갈렸던 거 같음 3. S3 버킷을 사용하면 리액트 앱을 손쉽게 배포할 수 있다고 한다. 아 공부 참 어렵다.

elastic beanstalk로 배포를 해보려고 했으나... 도큐멘트가 너무 적고 검색해도 잘 안 나오고... EC2도 모르는데 어떻게 하냐~ 라는 의견을 들어서 EC2를 공부해 보기로 했다. EC2 elastic compute cloud를 EC2라고 한다. AWS가 제공하는 가상 컴퓨터를 사용할 수 있는 서비스이다. 시작하기 AWS의 공식 튜토리얼을 사용해서 진행했고, 중간 중간 잘 모르는 것에 대해서만 정리를 했다. https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/EC2_GetStarted.html?icmpid=docs_ec2_console Amazon EC2 Linux 인스턴스 시작하기 - Amazon Elastic Compute Cloud ..