본문 바로가기

내용 복습

 (47)
Docker 개념 알아보기 - Dockerfile, Image, Container 1. 도커의 기초도커는 우리의 소스코드를 컨테이너화해서 배포할 수 있게 해주는 툴이다. 여러 특징이 있는데, snapshot: 컨테이너가 아닌 배포방식의 스냅샷과 같은 역할을 할 수 있다.resource control: 어느정도의 리소스(CPU, ram)을 사용할 지 지정할 수 있다.can run anyhwhere: 어디서든지 도커만 있으면 컨테이너를 실행할 수 있다.zero setup: 컨테이너의 설정을 그대로 들고오기 때문에 설정이 필요없다.lightweight: 리눅스 커널을 공유하고 도커파일에 설정한 대로 흉내만 내는 것이기에 VM에 비해 부팅시간, 수정시간을 절약할 수 있다.PM2 for any language: 언어에 관계없이 도커라이즈만 할 수 있다면 PM2의 기능을 대체할 수 있다.  도커..
Github Actions - CICD CICD는 지속적 통합(Continuous Integration) 및 지속적 제공/배포(Continuous Delivery/Deployment)를 의미하며, 소프트웨어 개발 라이프사이클을 간소화하고 가속화하는 것을 목표로 한다. 툴은 github actions, Jenkins, argo CD 등이 있는데 이번에는 간편한 깃액션으로 해보려고 한다. 아래는 코드 배포 자동화 과정을 나타낸 그림이다. 골자는 develop 브랜치에 모은 코드들을 메인 브랜치에 푸쉬하면 깃헙 액션에서 AWS code deploy를 통해 배포되는 것이다. 이전 프로젝트에서 다른 분이 하신 것을 본 적 있는데, 확실히 초기설정만 잘 해놓으면 배포에 신경쓰지 않아도 되서 개발속도가 빨라지는 것을 느꼈다. 그리고 github actio..
AWS 기초 - https 쓰는 방법 일반적인 가상 서버에 배포하는 방식은 아래 그림과 같다. HTTPs는 표준이 되었는데, 그 이유는 encrypt된 데이터를 주고 받기 때문에 보안이 좋고, 검색엔진 노출(SEO)의 측면에서도 더 뛰어난 성능을 가지기 때문이다. 그렇기에 요즘 배포를 한다면 https로 하는 것이 기본이 되었는데, 지난 프로젝트에서 적용하는 데에 애를 먹어서 정리해보려고 한다. HTTPs는 443포트로 들어오는데, Node App내부에 설치하는 방법도 있고, Nginx를 이용해서 할 수도 있지만, 더 쉽고 사실상 서버배포시 필수적으로 필요한 로드밸런서를 이용한 방법을 알아보고자 한다.  443포트를 단순히 열어주는 것에 그치는 것이 아니라 인증서를 발급받아서 설정해줘야한다. 오히려 다른 방법들이 더 어렵고 불편할 수 있기에..
[React] cookie 적용 시간 처리 주말동안 메인페이지를 만드는 작업을 진행했는데, 메인페이지에서 로그인 여부에 따른 버튼 노출을 처리하면서 겪은 트러블 슈팅 기록이다. 로그인 이전에는 회원가입과 로그인 버튼을 노출시키고 로그인 이후에 쿠키에 토큰이 들어가면 회원정보를 담은 프로필과 로그아웃 버튼을 노출시켜야 하는데, 리액트에서 쿠키를 사용해본 경험이 없다보니 적용을 처리하는 데에 에러를 겪었다. 쿠키에 토큰이 정상적으로 들어가고 난 이후에 노출되었다면 로그인 시 즉시 적용되어야 하는데, 새로고침을 해야 쿠키가 들어간 것이 적용되었다. 분명 useEffect 훅을 사용하고 있는데도 이런 일이 발생하는 것이 이상했다. 로딩 상태를 관리 하는 코드도 적용해봐도 별다른 차도가 없어서 어떻게 해야하는지 고민하던 차, useEffect의 의존성 배..
[React] 상태관리 라이브러리 Recoil 연습 지난 next.js로 프로젝트를 하면서 프롭스 드릴링이 4번 정도 일어나는 경험을 했기에 상태관리 라이브러리의 필요성은 느끼고 있었다. 아무래도 드릴링 뎁스가 길어지면 코드는 비요율적일 수밖에 없고 사이드 이펙트로 많을 것이기에. 일단 사용하기 편한 recoil을 공부해봤다. 아래 내용은 recoil 공식문서의 todolist 만들기이다. npm install recoil / yarn add recoil 패키지 메니저에 알맞게 설치하고 루트 컴포넌트인 index.js의 본문을 로 감싸준다. recoil을 사용하기 위해선 두가지만 기억하면 되는데, atom과 selector이다. Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌..
[AWS] EC2 개요 1. AWS 클라우드란 AWS는 Amazon Web Services의 약어로, 아마존닷컴이 제공하는 클라우드 컴퓨팅 플랫폼입니다. AWS는 전 세계에 분산되어 있는 데이터 센터에서 고객에게 IT 인프라를 제공하며, 이를 사용하여 고객은 필요한 인프라를 빠르고 쉽게 설정하고 관리할 수 있습니다. 주요서비스는 EC2(컴퓨팅), RDS(데이터베이스), 스토리지(S3), 네트워킹(VPC), 보안(IAM) 등이 있다. 과제를 위해 EC2 배포를 기계적으로 해 오면서 개괄적인 정리가 필요하다고 느끼던 참이라 이번 기회에 AWS의 기능들을 하나하나 알아가보려고 한다. Onpremise는 서버가 조직 내부에 설치되고 유지보수 되는 것. 조직의 물리적인 위치에 있으며 조직의 IT 인프라를 관리하는 팀이 해당서버를 관리,..
[React] state(2) 1. 양방향 바인딩 // Player.jsx import { useState } from "react"; export default function Player({ initialName, symbol }) { const [playerName, setPlayerName] = useState(initialName); const [isEditing, setIsEditing] = useState(false); function handleEditClick() { setIsEditing(true); } function handleChange(event) { setPlayerName(event.target.value) } let editablePlayerName = {playerName} // let btnCapti..
[React] State 정리(1) 1. 파일 구조 설명 파일 구조 index.html파일은 리액트가 제어한다. 그리고 index.jsx에는 reactDOM.createRoot(document.getElementById로 시작하는 코드가 있는데, 전체 코드는 root라는 id를 가진 앱 컴포넌트를 렌더링하는 것이다. index.html은 결국 웹사이트를 방문하면 처음 보게 되는 내용이라는 것이다. 따라서 props나 state의 영향을 받지 않아 변하지 않을 내용(ex. 메인로고)이라면 이 페이지에 삽입해도 되는 것이다. 모든 내용을 컴포넌트에 넣으려고 애쓰지 않아도 된다는 것이 골자이다. src/assets/ 폴더에 이미지를 저장하면 웹사이트 방문자에게 공개적으로 제공되지 않기에 웹사이트 방문자가 접근할 수 없지만, 코드파일에서 사용할 ..

티스토리툴바