공부 기록일지📚

브랜치 종류 main(구: master) : 프로젝트 최종 배포 중심 브랜치 develop: 개발이 진행되는 브랜치, 배포할 수준의 기능을 갖추면 relese 브랜치로 머지 feature: 기능을 개발하는 브랜치, develop 브랜치에서 파생되는 브랜치며 develop 브랜치로 머지 release: 개발된 내용을 배포하기 위해 준비하는 브랜치, 충분한 테스트를 통해 버그를 검사하고 배포할 준비가되었다고 판단하면 main으로 머지하여 배포한다. 버그 수정 내용을 develop 브랜치에도 반영하고, 최종적으로 main에 머지 hotfix: 출시 버전(main)에서 버그를 수정하는 브랜치, main브랜치에서 생성되며, 수정이 완료되면 dev, main 브랜치에 수정 사항을 반영 브랜치 네이밍 feature:..

TCP/IP 없는 인터넷 서비스는 상상할 수 없다. 우리가 개발하고 사용하는 모든 인터넷 서비스는 TCP/IP라는 토대에 기반하고 있다. 어떻게 네트워크를 통해 데이터가 오가는지를 이해하면, 튜닝 등을 통한 성능 개선이나 트러블 슈팅, 신기술 도입 등에 많은 도움이 된다. TCP/IP의 중요한 성질 데이터의 순서가 바뀌지 않으면서 데이터가 유실되지 않도록 가급적 빠르게 데이터를 보내려면 네트워크 프로토콜을 어떻게 설계해야 할까? TCP/IP는 이런 고민 아래 설계된 것이다. TCP와 IP 엄밀히 말해 TCP와 IP는 서로 다른 레이어의 것이라 분리해서 이해하는 것이 옳지만, 이해의 편의상 여기서는 이 장에서는 둘이 분리하지 않고 설명한다. Connection oriented 두 개의 엔드포인트(로컬, 리..

최근에 설치된 extension들을 확인하려면 @installed @sort:updateDate 검색어로 확인이 가능합니다. 저는 그냥 깔대기처럼 보이는 아이콘(Filter extensions -> sorted by -> updated date)을 눌러서도 보는 것이 가능합니다. 2022 12 05 기준 추천하는 기능 extension(snippet, intellisense 등..) 대부분이 필수적이라 생각하지만 개인적으로 추천하는 extension은 이모지를 달아두었습니다. 🥳 Auto Import - ES6, TS, JSX, TSX WakaTime // 하루에 내가 어떤 환경에서 어떤 언어로 코드를 짜는 지 확인할 수 있도록 연동하는 기능 Tailwind CSS Highlight // 테일윈드 css..

git을 소수 인원으로 사용할 때에는 push, pull, merge만 사용해도 큰 문제가 없습니다. 개인 프로젝트할 때에는 그렇게 했구요. git history도 깔끔했습니다. 하지만 소수인원이 아닌 회사에서 협업하게 된다면 git history가 엉망이될 겁니다. 이럴 때 우리가 사용할 수 있는 기능이 rebase입니다. 개인적으로 sourcetree라는 git GUI툴을 사용하지만 사용하면 사용할수록 시각적인 매력 외에 불편함을 느끼고 있었습니다. CLI가 익숙해지면 계속 그것만 사용하게 될거라는 분도 계셨구요. CLI로 진행하게 된다면 git history가 깔끔하게 정렬되어 있는 게 좋을 거 같았습니다. Merge와 Rebase의 차이? Git에서 한 브랜치에서 다른 브랜치로 합치는 방법으로는 ..

용어 설명 ▶ 웹 브라우저란 동기적으로 HTML, CSS ,JS 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어이다. ▶ 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저에 화면에 표시하는 엔진입니다.( 브라우저마다 렌더링 엔진이 다름) ▶ 렌더 트리 - DOM요소를 기반으로 만들어지지만 완전 1:1대응 구조는 아닙니다. DOM 트리가 문서의 구조를 나타낸다면 렌더 트리는 "문서의 시각적 구조"를 나타냅니다. 웹 브라우저 동작원리 설명 사용자가 어떤 사이트에 접속할 때, 브라우저(클라이언트)는 사이트의 주소로 네트워크 요청을 보냅니다. 해당 요청은 DNS(domain name server)서버에 들려 도메인(사람이 이해하기 쉬운 영문 주소)과 매핑되는 IP주소로 HTTP 요청을..

https://42place.innovationacademy.kr/archives/9784 AWS S3, CloudFront로 리액트(프론트) 배포하기 0. 들어가기 전에 0-1. 사전 준비 체크 리스트 리액트 프로젝트가 cra 나 vite 를 통해 리액트 프로젝트가 이미 만들어져있어야 합니다.aws 계정을 미리 만들어 둡니다.처음이라면 branch 를 따거나 fork 42place.innovationacademy.kr https://leehwarang.github.io/2022/09/11/frontend-deploy.html 배포 하면서 배우는 CSR(React)과 SSR(Next.js) - 이화랑 블로그 배포 하면서 배우는 CSR(React)과 SSR(Next.js) CSR(Client-Side Re..

REST (Representational State Transfer) API 먼저 REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. RESTFUL API란 REST의 원리를 따르는 API를 의미합니다. 하지만 REST기법을 사용했다 하여 모두가 RESTful 한 것은 아닙니다. REST API의 설계 규칙을 올바르게 지킨 API만이 RESTful하다 말할 수 있으며 모든 CRUD 기능을 POST로 처리 하는 API 또는 URI 규칙을 올바르게 지키지 않은 API는 REST API를 ..

브라우저란 동기적(Synchronous)으로 HTML, CSS , Javascript 를 해석하여 해석한 내용을 화면에 보여주는 소프트웨어이다. 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript를 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 그래서 꼼수로 body 태그의 끝쪽에 script태그를 위치시켜라 하는 게 이 이유라고 생각합니다. HTML5부터는 script의 어트리뷰트로 defer/ async를 제공하고 있기 때문에 해당 문제를 해결할 수 있습니다. 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다. 🤸‍♀️한 문단으로 간단하게 설명 사용자가 ..