전체 글 115

[MFA] Node 패키지 매니저, 워크스페이스 개념(soft-navigation,hard-navigation)

Npm package.json을 사용하여 프로젝트 의존성 및 구성을 관리한다. 프로젝트에 필요한 외부 라이브러리나 도구들을 손쉽게 추가하고 관리할 수 있다. 패키지들 간의 의존성을 자동으로 해결해 준다. 스크립트를 정의하여 빌드, 테스트, 시작등 작업을 간편하게 실행할 수 있다. 한 번에 하나씩 순차적으로 설치한다. (npm5부터는 병렬설치로 개선) lock파일의 도입으로 정확한 의존성 해결과 패키지 설치를 보장한다. 모든 환경에서 동일한 패키지 버전이 사용되어 일관된 동작이 가능해진다. 이전에 설치된 패키지를 캐싱하여 더 빠른 재설치가 가능하다. 패키지 버전을 명시적으로 기록하여 예상치 못한 업그레이드 방지하여 프로젝트의 안정성과, 보안 측면이 좋다. 워크스페이스 기능을 도입되었다. (npm7버전 부터..

MSA 2023.11.19

[투포인터] 백준-1806 부분합 골드4 (Python)

백준-1806 : 부분합 https://www.acmicpc.net/problem/1806 1806번: 부분합 첫째 줄에 N (10 ≤ N < 100,000)과 S (0 < S ≤ 100,000,000)가 주어진다. 둘째 줄에는 수열이 주어진다. 수열의 각 원소는 공백으로 구분되어져 있으며, 10,000이하의 자연수이다. www.acmicpc.net 풀의 입력 받은 값의 구간합 배열을 만든다. 투포인터를 이용하여 왼쪽은 구간합 시작점 오른쪽은 구간합의 끝점으로 사용한다. 구간합의 값이 S 보다 작을 경우 오른쪽 포인터를 이동 목표 합 보다 크고 길이가 짧은 경우 정답을 갱신 구간합의 값이 S 보다 클 경우 왼쪽 포인터를 이동 한다. 구간 합을 못찾을 경우 0을 반환 코드 (Python) import sy..

Algorithm 2023.11.13

[MFA] 모노레포(Mono Repo)란? 장단점

모노레포 란? 하나의 레파지토리에서 여러 프로젝트, 모듈 또는 패키지를 관리하는 개발 방식 모든 소스 코드를 중앙화하여 관리하고 필요한 패키지를 공유하여 사용할 수어 코드의 재사용성과 개발의 협업을 용이하게 만든다. 모노레포 장점 중복 코드를 줄이고, 공통 모듈을 사용으로써 코드의 재사용서 높인다. 모든 서비스가 동일한 환경에서 작동하므로 일관성을 유지하고 호환성을 확보할 수 있다. 코드의 히스토리를 추적하기 쉽다. 다른 서비스를 수정 시 추가적인 배포 없이 테스트하고, 함께 빌드 배포를 할 수 있다. 모노레포 단점 레파지토리가 크기가 무거워질 수 있다. 여러 서비스와 모듈을 포함하여 레퍼지토리의 복잡성을 증가시킬 수 있다. 권한 관리와 보안 설정이 중요하다. 모노레포 경험하면서 느낀 점 아쉬웠던 점 다..

MSA 2023.10.28

[MFA] 마이크로 프론트엔드 아키텍처 특징 장,단점

마이크로 프론트엔드 특징 독립적으로 제공 가능한 프론트엔드 애플리케이션이 더 큰 전체로 구성되는 아키텍처 스타일 전통적인 모놀리식 웹 애플리케이션 아키텍처를 보완하기 위해 사용되는 개발 패턴 애플리케이션을 작은 독립적인 서브 애플리케이션으로 분할하고, 서브 애플리케이션을 모아 하나의 애플리케이션으로 구성하는 방법 독립된 기술 스택을 가지며, 개발, 테스트 및 배포가 독립적으로 이루어질 수 있다. 서로 다른 애플리케이션에 느슨하게 결합되어, 하나의 애플리케이션에서 변경을 할 때 다른 부분에 미치는 영향을 최소화한다. 큰 규모의 애플리케이션을 더 쉽게 관리하고 확장할 수 있다. 장점 덜 복잡하고, 적은 양의 코드를 관리하여 코드의 품질을 높일 수 있다. 배포의 범위가 줄어들어 빌드 및 배포 시간이 줄고, 장..

MSA 2023.10.22

[Svelte] Svelte특징, Svelte Start Example

https://svelte.dev/ Svelte • Cybernetically enhanced web apps complete Built-in scoped styling, state management, motion primitives, form bindings and more — don't waste time trawling npm for the bare essentials. It's all here. svelte.dev Svelte JavaScript 프레임워크이다. 간결한 코드로 코드베이스로 개발 시간 단축과, 높은 가독성을 가진다. 컴파일 과정에서 코드 최적화 작업을 진행하여 런타임 성능을 향상 시켜 애플리케이션 반응속도 가 빠르다. (No virtual Dom) 변수나 상태변화를 명시적으로 추적..

FrontEnd 2023.09.24

[HTTP 완벽 가이드]2장 URL과 리소스

2장 URL과 리소스 2.1 인터넷의 리소스 탐색하기 URL 브라우저가 정보를 찾는데 필요한 리소스의 위치를 가리킨다. 스킴 : 웹 클라이언트가 리소스에 어떻게 접근하는지 알려준다. http:/https : 하이퍼 텍스트 전송 프로토콜 ftp: 파일 전송 프로토콜 javascript : URL내 JavaScript코드 mailto : 전자 메일주소 ssh : 보안 쉘 참고 : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web 서버 주소 : 서버의 위치로, 웹 클라이언트가 리소스 어디에 호스팅 되어있는지 알려 준다. 리소스 경로 서버에 존재하는 로컬 리소스들 중에서 요청받은 리소스가 무엇..

HTTP 2023.09.20

[HTTP완벽 가이드] 1장 HTTP 개관

1. 1 HTTP: 인터넷의 멀티미디어 배달부 HTTP 웹 서버로부터 정보를 브라우저에 전달하는 역할 신뢰성 있는 프로토콜로, 신뢰성 있는 데이터 전송을 보장한다. 1.2 웹 클라이언트와 서버 웹서버 웹콘텐츠가 존재하는 곳 (HTTP 서버) 웹 서버는 인터넷의 데이터를 저장하고, HTTP 클라이언트가 요청한 데이터를 제공한다. 클라이언트 요청과정 URL 주소 중 도메인 네임 부분을 운 서버에서 검색한다. DNS 서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달한다. 브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP프로콜을 사용하여 서버로 전송된다. 서버는 response 메시지를 생성하여 다시 브라우저에게 데이터를..

HTTP 2023.09.16

[React] useEffect 내부에서 비동기 처리하기

비동기 작업을 수행하는 함수 정의하여 호출한다. ex1) useEffect 내부에서 비동기 처리할 함수 생성후 호출 useEffect(() => { (async () => { const checkStep = await accessStepCheck(); if (checkStep === 'NONE') { setIsStepLoading(true); return; } accessMove(checkStep); })(); }, []); ex2) useEffect에서 비동기 처리할 함수 호출 const accessCheckAndMove = async () => { const checkStep = await accessStepCheck(); if (checkStep === 'NONE') { setIsStepLoadin..

React 2023.08.13

[React] Sentry란? React+Sentry - Error Monitoring Example

https://sentry.io/welcome/ Application Performance Monitoring & Error Tracking Software Self-hosted and cloud-based application performance monitoring & error tracking that helps software teams see clearer, solve quicker, & learn continuously. sentry.io Sentry 오류 및 이슈 모니터링 및 오길 플랫폼 실시간으로 소프트웨어의 문제를 감지하고 해결할 수 있도록 도와주는 서비스 주요 기능 소프트웨어에서 발생하는 오류와 예외 사황을 모니터링하고 수집하여 실시간으로 알려준다. 사용자가 정의한 이벤트를 로깅하여 어..

FrontEnd 2023.07.30