Front End/Web
Proxy
🌐CORS 정책의 필요성Proxywebpack dev server proxy 사용법React Proxy 사용법CORS 정책의 필요성CORS (교차 출처 리소스 공유, Cross-Origin Resource Sharing) CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.실제 서비스가 되는 상용 앱을 운영한다면, 클라이언트 뒤에 있는 서버와 연결된 DB에는 라이브 데이터가 쌓인다. 이런 라이브 데이터는 민감성이 높은 데이터들 위주로 이루어져있기 때문에 서버에서 모든 출처의 접근을 허용한다면 보안성이 낮아지고 해킹의 위험에 그대로 노출된다.이를 위해서는 특정 도메인만 허용하도록 각 개..
Lighthouse
⚡Lighthouse분석 결과 항목Performance 측정 항목(메트릭)개선 추천 항목 (Opportunities)예시를 통한 개선 방법 탐색LighthouseLighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다. 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질검사를 할 수 있다.Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있다. 검사할 페이지의 url을 Lighthouse에 전달하면 해당 페이지에 대한 여러 검사를 실행하고, 검사 결과에 따른 리포트를 생성한다. 개발자는 해당 리포트를 통해 점수가 낮은 지표에 대한 개선을 고려할 수 있으며, 지표의 중요..
CI / CD (배포 자동화)
🌐개발 프로세스개발 프로세스의 단계전통적인 개발 프로세스모던 개발 프로세스SaaS?전통적인 개발 프로세스 vs. 모던 개발 프로세스DevOpsDevOps 문화DevOps 특징DevOps 사례CI/CDCI/CD의 단계지속적 통합(Continuous Integration, CI)지속적 배포(Continuous Delivery/Deployment, CD)지속적 배포의 대표적 사례 : Github PageCI/CD의 영역배포 자동화CI/CD 파이프라인기본 단계와 수행 작업구성요소 및 장점Github ActionsGithub Actions 실습 : 배포 자동화하기⚠️ Issue : S3 버켓 싱크 중 에러 발생Action 실행 완료 및 결과개발 프로세스개발 프로세스란 소프트웨어 시스템이나 어플리케이션 개발 및 유..
GraphQL
🌐GraphQLGraph를 사용하는 이유GraphQL로 그래프 순회그래프에서 트리를 추출하는 방법GraphQL의 특징GraphQL vs. REST APIREST API의 한계REST API와 GraphQL의 다른 점GraphQL의 장점GraphQL의 단점GraphQL의 구조GraphQL Keywords쿼리(Query, 데이터 조회)필드(field)전달인자(Arguments)별명(Aliases)오퍼레이션 네임(Operation name)변수(Variables)뮤테이션(mutation, 데이터 수정)스키마/타입(Schema/Type)리졸버(Resolver)GraphQLGraphQL은 페이스북에서 만든 오픈 소스 쿼리 언어이다. Graph + Query Language의 줄임말로 Server API를 통해 정..
문자열과 그래픽
🖥️문자열유니코드인코딩(부호화)?ASCII 문자?UTF-8 vs. UTF-16UTF-8의 특징UTF-16의 특징그래픽비트맵(Bitmap)벡터(Vector)비트맵(래스터) vs. 벡터문자열문자열은 2010년 이후 유니코드라 불리는 인코딩 방식으로 통일되었다. 과거에는 영어 알파벳 하나가 1byte를 차지하기도 했으나, 현재는 다양한 언어가 컴퓨터 환경에서 사용되고 있기 때문에 유니코드를 사용해 텍스트를 저장하고 있다.유니코드유니코드(Unicode)는 유니코드 협회(Unicode Consortium)가 제정하는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준이다. 이 표준에는 ISO 10646 문자 집합, 문자 인코딩, 문자 정보 데이터베이스, 문자를 다루기 위한 알고리..