Jay Tech-FE

Gitflow-Workflow 회사에 들어가 협업을 진행하거나 팀 프로젝트를 진행하게 되면 이제 팀원들과 깃을 사용하게 될텐데 혼자 깃을 사용할 때와는 어떻게 다른지 알아보자. Gitflow-Workflow 이해 깃에는 브랜치가 있습니다. 저희는 계속 master(또는 main) 브랜치 한곳에서 작업을 했다. 이제 master 브랜치는 프로덕션에 배포할 준비가 된 상태만 올리도록 하며 master 브랜치에서 나온 dev 브랜치에서 개발을 한다. 개발을 마치고, 프로덕션에 배포할 준비가 되면 master 브랜치와 합치게 된다. 여기서 더 나아가서 dev 브랜치에서 기능별로 feature 브랜치를 빼서 개발하고 기능 개발이 완료되면 dev 브랜치에 합친다. hotfix 브랜치 hot-fix 브랜치는 말 그래..

※ 35일~38일차 까지의 과정은 배포 실습이 주를 이루기 때문에 개념 위주로 포스팅하고 자세한 과정은 추후 포스팅하려고 한다. Docker Docker를 사용해서 배포하는 이유 서버를 돌리기 위해서는 먼저 환경이 갖춰져야 한다. 새로 컴퓨터를 구매하거나 또는 새로 직원이 들어왔다고 생각해볼 때 컴퓨터에 우리가 개발한 환경과 똑같이 만들어야 한다. 이를위해 Node.js와 같은 언어 그리고 언어의 버전, 데이터베이스, 수 많은 node_modules를 버전을 맞춰서 설치해줘야 하지만 한두가지가 아니다. 이를 간편하게 해주는 것이 바로 도커다. Docker 란? 도커는 개발 환경 요소들이 설치된 모습을 이미지로 저장하고 저장한 이미지를 클라우드에 올린다. 이미지들이 서로 연결되서 동작하는 설정을 **문서(..

※ 35일~38일차 까지의 과정은 배포 실습이 주를 이루기 때문에 개념 위주로 포스팅하고 자세한 과정은 추후 포스팅하려고 한다. 와이어샤크(SSL과 HTTPS) 실시간 네트워크 분석을 위해 패킷 교환 과정을 포착하는 도구 중 하나이다. 패킷이란? 네트워크상에서 주고받는 메시지 데이터 블록의 기본 단위를 패킷 이라부른다. 80번 포트와 443번 포트 표시되어 있는 80은 http를 의미하며, 443포트는 https를 의미한다. 이 포트 번호들은 생략이 가능하다 3-way-handshake , 4-way-handshake 프론트 엔드 컴퓨터에서 백엔드 컴퓨터로 요청을 보내는 것을 ‘SYN’ 백엔드 컴퓨터에서 프론트엔드 컴퓨터로 요청에대한 응답을 ‘SYN + ACK’ 다시 프론트엔드 컴퓨터에서 백엔드 컴퓨터로..

※ 35일~38일차 까지의 과정은 배포 실습이 주를 이루기 때문에 개념 위주로 포스팅하고 자세한 과정은 추후 포스팅하려고 한다. 클라이언트 배포 기초(AWS 기준) AWS 배포 흐름 및 역할 S3 : Simple Storage Service (단위 : 1 Bucket) 무제한 용량을 제공하는 온라인 스토리지 서비스이다. 데이터를 객체 형태로 저장하여 관리하며, 비용이 매우 저렴하다. EC2 : Elastic Compute Cloud (단위 : 1 인스턴스) 아마존 서버 내 일부 영역을 가상 컴퓨터 형태로 임대하는 서비스이다. 클라이언트 동적 배포 시에도 사용할 수 있으며, 주로 RDS와 같은 DB서비스에 연결하여 백엔드 서버로 이용된다. Load Balancer (단위 : 1 로드밸런서) 트래픽을 여러 ..

테스트 코드 테스트라고하면 마우스로 클릭을 통해 api를 요청하는 작업같은 것들을 대신해주는 것 . 테스트코드의 필요성 어떤 사이트를 런칭하기 위해 개발자들이 몇달간 열심히 개발을 해서 1차개발이 완료되었다고 가정해보자. 테스트 기간 이후 배포를 할 것이고 이후 2차개발에 돌입해 위와 같은 과정으로 기능을 하나 더 만들고 재배포를 하였다고 했을 때, 멀쩡하던 다른 기능에서 에러가 발생하기 시작할 수 있다. 업데이트 배포한 코드들이 이전 배포한 기능에 영향을 주고 있는 것. 이런 힘든 버그잡는 과정을 테스트코드는 조금 더 수월하도록 도와준다. 서비스의 사이즈가 커질수록 테스트 코드의 유용함이 커지며, 버그 수정의 과정이 편리해진다. 다양한 테스트 방법 테스트를 하는 방법은 다양합니다. 단위테스트테스트를 위..

Optimistic-UI(옵티미스틱 UI) 특정 게시물을 보고 좋아요를 누르게 되면 환경에 따라 좋아요의 수가 올라가는 속도가 다르다. 좋아요를 누르게 되면 백엔드에 likeBoard라는 api에 요청을 보내게 되고, 백엔드는 DB에 요청을 하게 되는데 그럼 DB는 좋아요의 수를 올려두고 올린 좋아요 수를 응답한다. 해당 응답을 백엔드는 다시 브라우저에 응답해주는 것 이다. 그런데 느린환경의 컴퓨터라면, 혹은 백엔드 컴퓨터가 굉장히 먼 곳에 있다면 해당 과정이 굉장히 지연될 수 있다. 이렇게되면 UX가 나빠지기 때문에 옵티미스틱 UI를 사용하게된다. 옵티미스틱 UI란 요청이 서버에 도달하기도 전에 화면의 값을 바꿔버리는 것. 즉, api를 요청하기도 전에 화면에서 바꿔버리고 계속해서 요청을 보내는 것 입..

이미지 미리보기 (임시 URL 생성) 자바스크립트에서 이미지를 보기 위해서는 **이미지 경로(주소)**가 필요하다. 이미지 경로(주소)를 상대주소 ‘../../’와 같은 형식으로 사용했는데 내 컴퓨터에서는 잘 보이지만, 다른 사람 컴퓨터에는 해당 이미지가 없어 오류가 뜬다. 그래서 이미지 주소를 서버에서 가져오는 것이 아니라, 미리보기 용으로 만든 임시 주소를 만드는 방법이 있다. 임시 URL 받아오기 임시 URL을 생성하는데에는 2가지 방법이 있다. 첫번째 방법은 가짜URL을 생성하는 방법이며, 내 브라우저에서만 사진에 접근이 가능하다. 두번째 방법은 진짜 URL을 생성하는 방법이며, 다른 브라우저에서도 생성이 가능하다. 첫번째 방법 export default function ImageUploadPre..

성능최적화 // memoization 폴더 _ parent 파일 const MemoizationParentPage = ()=>{ console.log("부모 컴포넌트가 렌더링 됩니다.") let countLet = 0 const [countState,setCountState] = useState(0) const onClickCountLet = ()=>{ console.log(countLet+1) countLet += 1 } const onClickCountState = ()=>{ console.log(countState+1) setCountState(countState+1) } return( ================ 이것은 부모 컴포넌트 입니다. 카운트(let): {countLet} 카운트(let)..

RefreshToken RefreshToken 이란? **AccessToken** 은 사용자의 로그인 정보를 담고 있는 **JWT토큰 데이터**이다. AccessToken 데이터는 일정 시간 동안만 사용할 수 있도록 만료 기한이 정해져 있다. 만료 기한이 지나고 사용자가 로그인 정보가 필요한 페이지에 접근하려고 하면 백엔드에서 미리 지정해둔 경로로 redirect 되거나 에러가 뜨게 된다. 그렇기 때문에 **AccessToken의 만료 기한이 지나면 새로운 AccessToken을 받아와야 한다.** 이러한 과정에 사용되는 토큰을 RefreshToken 이라고 한다. 예를 들어보면, 사용자가 올바른 이메일과 비밀번호를 입력해서 로그인하면 백엔드에서 AccessToken과 RefreshToken을 받아오게 ..

Callback과 비동기 처리 Callback 함수란? **함수의 인자로 들어가는 함수**를 말한다. function aaa(qqq){ // 함수 로직 } aaa(function(){}) 위와 같은 코드에서, aaa 함수의 인자에 들어가는 **function(){}**를 callback 함수라고 부른다. 표현식으로 작성된 callback 함수를 화살표 함수로 바꾸면 다음과 같이 표현할 수 있다. aaa(() => {}) 이러한 callback 함수를 사용하는 이유를 알아야 한다. 특정한 API 요청이 끝난 뒤, 그 결과 값을 가지고 다른 요청을 실행시켜야 하는 상황을 가정해보면 이런 식으로 callback 함수를 사용해서 요청을 실행할 수 있다. function aaa(qqq){ // 외부 API에 데이..