Frorong

Mocking이란 무엇일까? MSW를 알기 전에 먼저 Mocking이라는 개념에 대해 이해할 필요가 있다. Water Fall 개발 방법론은 폭포수가 위에서 아래로 떨어지듯이 한 단계씩 순차적으로 진행된다. 이전 단계로 돌아가지 않고 한 단계가 완전히 끝난 후에 다음 단계로 넘어간다. 하지만 잦은 요구사항 변경이 발생하거나 요구사항 분석 및 설계가 어려운 경우라면 어떨까? 이러한 경우에는 개발 단계를 명확히 구분하지 않고 각 단계를 반복적으로 수행하는 Agile 방법론이 더 효과적일 것이다. Agile 방법론을 채택하게 된다면 프론트엔드 개발과 백엔드 개발이 병행된다. 만약 백엔드에서 API 개발이 완료되지 않았는데 프론트에서 백엔드의 API가 필요하다면 굉장히 곤란할 것이다. 해당 부분이 완성되기 전까..

이 글은 React 공식문서를 보며 공부한 내용을 정리한 글입니다.₩ Suspense suspense는 로딩이 완료되기 전까지 fallback을 보여주는 장치이다. Props suspense는 children으로 렌더링 하려는 자식 요소를 받는다. 만약 자식 요소의 렌더링이 완료되지 않았다면 대체 콘텐츠를 렌더링 하는 상태로 전환된다. suspense는 fallback prop으로 실제 UI가 완전히 로드되지 않았을 때에 대신 렌더링할 대체 UI를 받는다. 모든 React Node가 허용되지만 실제로는 로딩 스피너와 스켈레톤과 같은 가벼운 요소가 사용된다. 스피너 스켈레톤 스켈레톤이 무엇인지 모르겠어서 찾아보았는데 흔히 유튜브에서 볼 수 있었다. 주의사항 React는 처음으로 마운트되기 전에 일시 중단된..

Custom Hook Pattern이란?? Custom Hook Pattern은 React DesignPattern 중에 하나이다. Design Pattern Design Pattern은 일반적으로 소프트웨어 디자인에서 발생하는 문제에 대한 솔루션이다. 코드 내에서 반복되는 디자인 문제를 해결하기 위해 만들어졌다. React에서는 아래와 같은 사항을 고려할 수 있다. 여려가지 상황에 적용할 수 있도록 컴포넌트의 재사용성을 높일 수 있을까? UI나 기능의 측면에서 확장시켜 사용할 수 있는 컴포넌트를 제작할 수 있을까? 쉽고 편리하게 사용할 수 있는 컴포넌트를 제작할 수 있을까? 이러한 사항들을 고려하여 보다 개선된 코드를 짤 수 있다. Custom Hook Pattern 이*우 씨는 프로젝트 마무리 단계에..

CSFR(Cross Site Request Forgery)란?! CSRF는 사용자가 현재 인증되어 있는 취약한 사이트에 악성 사이트가 보내는 공격이다. 이해하기 쉽도록 예시를 들어보겠다. 정**씨는 여느 때와 다름 없이 불법 도박을 하려고 했다. 정**씨는 도박 자금을 뽑기 위해 금융 사이트에 로그인했다. 정**씨는 금융 사이트에서 로그아웃하는 것을 깜빡하고 불법 도박 사이트에서 도박을 하였다. 정**씨가 베팅하기 위해 버튼을 누르는 그 순간 정**씨의 계좌에서 500만 원이 빠져나갔다. 불법 도박 사이트에서 악성 코드나 요청을 포함한 페이지를 제공하였고 사용자의 브라우저가 정**씨의 세션을 가지고 있으므로 악성 요청이 발생할 수 있다. CSRF는 사용자의 개인정보 탈취보다는 특정 작업을 무단으로 진행하..

Vue는 무엇인가?? Vue는 웹프론트엔드 프레임워크이다. 컴포넌트 기반의 SPA를 쉽게 구현할 수 있다. HTML의 특성, CSS의 특성, JS의 특성을 모두 살려서 편하게 만들었다. Vue는 공식 홈페이지에서 프레임워크라 정의하고 있다. 때문에 기능적인 면에서 보다 수월한 구현이 가능하여 초보분들이 프로젝트를 하기에는 React보다 Vue를 사용하는 것이 유리하다고 한다. Vue의 장점! Vue는 코드의 정규화가 되어있다. 코드의 스타일을 통일시킬 필요가 덜하다. 무언가를 구현하는 방법이 한 가지이기 때문에 고민할 필요성이 줄어든다. HTML렌더링 속도가 React에 비해 빠르다고 한다. 큰 차이는 없다. 장기적으로 꾸준한 업데이트가 이루어진다. naver의 vibe도 Vue로 개발되었고 kakao의..

Package Manager? 패키지 매니저는 소프트웨어 개발 과정에서 프로젝트에 필요한 라이브러리, 프레임워크를 설치하고 관리한다. 패키지 매니저를 통하여 종속성을 관리하고 프로젝트에 필요한 패키지를 쉽게 가져올 수 있으며 패키지의 버전 관리, 의존성 해결 등을 자동으로 처리할 수 있다. 주로 패키지 매니저는 명령행 인터페이스를 통하여 패키지를 설치, 업데이트, 제거하는 작업을 수행한다. 패키지 매니저를 사용하면 개발 프로세스를 간편화하고 체계적인 의존성 관리로 효율적인 소프트웨어 개발이 가능하다. Package Manager의 종류! 패키지 매니저의 종류는 다양하다. 각 언어별로 패키지 매니저가 존재하고, 한 언어 내에서도 다양한 패키지 매니저가 존재한다. 각 언어의 패키지 매니저를 간단하게 알아보자..

깃허브 계정을 만든 지 1년이 되었다. 그동안 잔디도 예쁘게 채웠고 깃허브를 유용하게 사용하였다. 깃허브에는 여러 기능들이 있지만 그중 꽃은 PR과 코드 리뷰가 아닐까 생각된다. Pull Request Pull Request(PR)는 코드 리뷰와 협업을 위한 기능이다. 주로 팀 내의 협업 환경에서 사용된다. PR의 일반적인 flow는 다음과 같다. 자신의 로컬에서 작업을 진행하여 변경사항을 만든다. 변경 사항을 원격 저장소에 push한다. push 된 변경사항을 기반으로 PR을 생성한다. PR에 대한 코드 리뷰가 이루어진다. 변경사항이 승인되면 merge 된다. Code Review 코드 리뷰는 소프트웨어 개발 과정에서 다른 개발자 혹은 팀원들과 작성한 코드를 검토, 분석하고 개선하는 활동을 의미한다. ..

테스트 코드?? 우리가 코드를 작성할 때에 항상 완벽한 코드를 작성할 수는 없다. 특정 컴포넌트에서 오류가 생길 수도 있고, 각 컴포넌트가 상호작용하는 과정에서 문제가 생길 수도 있다. 작성된 코드가 정상적으로 작동하는지 검증하기 위한 과정이 테스트이다. 그럼 테스트는 어떻게 하는 걸까? 가장 기본적으로는 직접 사용하면서 테스트하는 방법이 있다. 버튼을 눌러보고 스크롤을 하는 등 여러 동작을 통해 작성된 코드가 잘 작동하는지 검증한다. 하지만 이런 방법은 굉장히 귀찮고 반복적이다. 테스트 코드를 작성하여 테스트를 자동화한다면 테스트 시스템이 자동으로 어플리케이션을 검증하게 된다. 테스트 코드 작성의 장점 협업에서 다른 사람이 작성한 코드를 내가 만지게되었을 때 코드를 정확히 파악하지 못하였다면 실수를 저..