전체 글 66

리액트 전반에 대한 이해

리액트는 어떤 과정을 통해 렌더링을 수행하는가? 전통적인 방식 자바스크립트를 이용한 전통적인 렌더링 방식은 단순했습니다.문자열로 HTML 을 생성하고 그 안에 Data 가 들어갈 부분을 지정하는 것이었죠. 이렇게 Data 와 HTML 이 조합된 문자열을 브라우저가 받아내서 렌더링하도록 만드는 것이었습니다. 하지만 이 전통적인 방식의 문제점은 조금의 변경사항을 반영하고 싶어도 브라우저가 전체를 다시 렌더링하도록 만들 수밖에 없다는 점과 실제로 렌더링 결과물이 바뀌지 않았음에도 새로운 데이터를 받았다는 이유만으로 렌더링이 다시 일어나는 비효율이 발생하는 문제가 있었죠. 리액트의 방식 리액트는 이러한 비효율을 줄이기 위해 JSX라는 새로운 파일 형식을 도입했습니다. JSX를 통해 데이터가 들어가야 할 부분을 ..

IndexedDB API 와 그 사용법

www.youtube.com/watch?v=vb7fkBeblcw 특성 로컬스토리지는 오직 문자열만을 저장할 수 있지만 Indexed DB 는 객체 자체를 저장할 수 있으며 다른 무거운 파일도 넣을 수 있습니다. 같은 도메인에 접근하면 같은 데이터를 사용하게 됩니다. API 가 '비동기적'입니다. 키-밸류 페어로 동작합니다 사용법 데이터베이스를 엽니다. 데이터베이스 안에 객체 Store를 생성합니다. 성공한다면, Transaction 을 수행합니다. 작업이 끝나면 Transaction 을 끝냅니다.

프로젝트 초기 설정

들어가면서 이 시리즈는 최신 트렌드를 반영하면서, 최대한 현업에 가깝되 간단한 웹 프론트엔드 프로젝트 구성을 목표로 합니다. 이 시리즈는 저 나름의 노하우를 공유하고 피드백을 받고 싶어서 만들었습니다. 어떤 기관이나 업체의 표준을 따르는 것이 아닌 그저 제가 프로젝트를 만들어나가는 과정을 정리했습니다. 하지만 그렇다고 해서 시리즈의 모든 내용들이 처음부터 끝까지 제 머리에서 나온 것은 아닙니다. 특정 부분마다 어느 저자의 어느 글을 참고했는지 그 출처 링크를 표시하도록 하겠습니다. 만들고자 하는 어플리케이션 만들고자 하는 어플리케이션은 간단한 시간관리 앱인 'Micro' 어플리케이션입니다. 제가 친하게 지내는 디자이너분께 사용에 동의를 구했습니다. 이 시리즈에서 이 어플리케이션 전체를 만드는 과정을 다루..

깃 플로우 이해하기

브랜치 종류는 크게 아래와 같다. master develop feature release 실제 개발은 develop 브랜치에서 진행된다. 그리고 develop 자체에서 커밋 내역을 만드는 것이 아니라 feature 브랜치에서 커밋을 만들고 이를 develop 에서 병합하는 식으로 커밋이 이루어진다. 별거 아닌 버그 픽스나 기능 추가는 그냥 develop에서 빠르게 반영한 후 커밋한다. 즉, develop 에서 왠만하면 커밋이 발생하지 않지만 발생할 수 있으므로 feature 브랜치에서 작업을 할 때는 항상 develop 브랜치의 변경 사항을 pull 해와야 한다. 개발이 어느 정도 완료되고 이를 배포하는 시점에서는 Release 라는 이름으로 시작하는 브랜치를 만든다. 해당 릴리즈에서 발생하는 버그나 수..

까다로운 깃 명령어와 팁

git reset 리셋 작업은 크게 3가지로 나눌 수 있다. 하나는 add 가 끝난 시점으로 돌아가는 soft, 둘째는 staged 파일들(추적 중)과 untracked 파일들이 섞인 시점으로 돌아가는 mixed, 아예 그냥 이전 커밋 상태로 돌아가는 hard 가 있다. reset을 할 때 플래그로 이 옵션을 넣어주면 적용된다. (--soft, --mixed, --hard) Tip: 되도록이면 hard는 주지 않는 것이 좋다. 기존에 작업했던게 임시로라도 남아있지 않고 그냥 다 날아가 버리기 때문이다. 아니면 git stash 를 통해 임시 저장을 수행한 다음 해주는 것이 좋다. git stash 작업을 하다가 잠깐 작업을 중단해야하는 상황이 생겼는데, 커밋 내역을 만들기에는 애매할 때 쓴다. 해당 브랜..

EC2 비용 이해하기

EC2 인스턴스는 간단한 서버 운영을 위해 가벼운 마음으로 빌리기 쉽지만 복잡하고 정확히 이해하기 힘든 가격 정책 때문에 프리티어(t2.micro) 이상의 인스턴스를 이용하기가 꺼려지는게 사실입니다. 가장 많이 쓰일 법한 가격 정책 3가지를 선택해서 정리해보았으니 본인이 원하는 인스턴스가 한달 혹은 일년에 비용이 얼마나 드는지 확인하고 싶으신 분들은 참고하셔도 좋을 듯합니다. 아래 계산은 가장 일반적인 EC2 인스턴스 대여 서비스를 기준으로 가격책정. 프리티어인 t2.micro 보다 딱 한 단계 높은 t2.small 을 선택한다고 가정합니다. 다른 인스턴스에 대한 정확한 비용 계산은 아래 링크를 참고해보시기 바랍니다. aws.amazon.com/ko/ec2/pricing/on-demand/ EC2 인스턴..

데브옵스/AWS 2020.07.15