미새문지

chart.js는 데이터를 시각화하기 위해 사용하는 차트 라이브러리이다.차트를 직접 작성해도 되지만, 기본적으로 여러 종류의 차트가 들어있는 chart 라이브러리를 사용하는게 편리하고 좋기 때문에 자주 사용된다.리액트에선 주로 chart.js와 react-chartjs-2를 같이 쓰는데, 이는 차트를 사용하기 편하게 컴포넌트 형식으로 만든 코드이다. chart.js의 차트 종류에는 line, bar, radar, pie, bubble 등의 수많은 차트가 존재하며, 사용하고 싶은 파트를 react-chartjs-2로 가져와 사용하면 된다.chart.js 기본 코드import React from "react";import { Line } from "react-chartjs-2";import { Chart ..

SSL(Secure Sockets Layer) SSL은 인터넷에서 데이터를 안전하게 주고받기 위한 암호화 프로토콜이며, 웹 브라우저와 웹 서버 간에 전송되는 데이터를 보호하여 도청, 위조, 변조 등의 공격으로부터 데이터를 안전하게 보호한다.SSL은 90년대에 개발되어 현재 SSL 3.0까지 발전되었다. 최근의 SSL은 더 발전된 TLS(Transport Layer Security)로 대체되었지만, 여전히 SSL이라는 용어로 사용되고 있다.SSL의 주요 기능데이터 암호화(Encryption)SSL을 통해 전송되는 모든 데이터는 암호화되는데, 데이터가 인터넷을 통해 전송될 때, 중간에서 데이터를 가로채더라도 해독할 수 없기 때문에 전송되는 정보의 기밀성이 유지된다.예시로 사용자가 웹사이트에서 결제 정보를 입..

요 근래 cs에 대한 지식이 많이 부족한 것 같아 정처기도 공부할 겸 문제풀이를 진행했다.오랜만에 풀어봐서 아슬아슬하게 커트라인이 나왔으나 좀만 공부하면 필기는 딸 수 있을 것 같다. CMM 모델능력 성숙도 모델(CMM, Capability Maturity Model)은 소프트웨어 개발 및 관리 프로세스를 평가하고 개선하기 위한 프레임워크이며, 조직의 프로세스 성숙도를 다섯 가지 단계로 나눌 수 있다.초기 단계 (Initial): 프로세스가 비공식적이고 예측 불가능하며, 성공이 개인의 노력에 의존한다.관리 단계 (Managed): 기본적인 프로젝트 관리 프로세스가 도입되어 있으며, 일정과 비용이 관리되지만, 여전히 프로세스는 불완전하다.정정의 단계 (Defined): 모든 프로세스가 문서화되고 표준화되어..

소프트웨어 생명주기(SDLC, Software Development Life Cycle) 모델 소프트웨어 생명주기는 소프트웨어 개발의 전체 과정을 체계적으로 관리하기 위한 프레임워크이며, SDLC는 소프트웨어 프로젝트의 계획, 개발, 유지보수 및 폐기에 이르는 모든 단계를 포함한다. SDLC 단계요구사항 분석(Requirements Analysis): 고객이나 사용자의 요구사항을 수집하고 분석하여 소프트웨어가 해결해야 할 문제와 기능을 명확히 정의한다.설계(Design): 요구사항을 바탕으로 소프트웨어의 전체 구조와 세부적인 시스템 및 모듈 설계를 수행한다.구현(Implementation): 설계에 따라 실제 코드를 작성하고, 소프트웨어를 개발한다.테스트(Testing): 구현된 소프트웨어가 요구사항을 ..

모듈 번들러모듈 번들러는 현대 웹 개발에서 매우 중요한 도구로, 모듈화된 자바스크립트 파일들을 하나의 최적화된 파일로 묶는 역할을 한다.여기서 모듈이란, 여러 기능들에 관한 코드가 모여있는 하나의 파일이며, 이를 서로 조합해 더 큰 프로그램을 만들 수 있다. 모듈의 사용처유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다.네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있지만, 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다..

넥스트를 처음 설치하게 되면 프로젝트 폴더의 구조는 이렇게 되어있다. app 폴더는 넥스트의 App Router 기능을을 사용하여 페이지와 라우트를 구성한다. page.tsx 파일은 해당 파일이 각 페이지의 기본 파일이며, 이 파일이 루트 경로(/)에 해당한다. 넥스트는 app폴더에서 page.tsx파일을 페이지로 인식하고, 자동으로 라우팅해준다. layout.tsx 파일은 해당 파일은 모든 페이지에 공통으로 적용되는 레이아웃을 정의하는데 예를 들어, 헤더, 네비게이션 바, 푸터 등모든 페이지에 들어가는 공통 컴포넌트를 정의할 수 있다. page.module.css 파일은 해당 페이지와 관련된 CSS 파일이며, 모듈 CSS 방식으로 컴포넌트에 스타일을 적용할 수 있다. css파일로 작성하던 css 파일 ..

Next.js 즉, 넥스트는 React 기반의 프레임워크로, React에 비해 여러 추가 기능과 최적화를 제공하여 개발 효율성과 성능을 향상시킨다고 한다. 특히 넥스트는 리액트의 모든 기능을 제공하면서 클라이언트사이드 렌더링(CSR)이였던 리액트와 달리 서버사이드 렌더링(SSR)을 지원하고 폴더 구조에 기반한 라우팅, 정적 사이트 생성(SSG)등의 더 많은 기능을 내장하고 있다.최근 개발하는 웹 사이트의 경우 넥스트와 타입스크립트를 함께 사용하는 것이 추세라고 들어 학습하려고 한다. 넥스트의 특징넥스트의 기본 구조넥스트는 위에서 말한대로 폴더를 인식해 pages 폴더 안의 파일들이 라우팅으로 매핑되서 페이지 경로로 이어진다.예시로 pages/login.js는 /login으로 경로가 지정되어 유지보수할 때..

브라우저의 데이터 저장 방식은 여러 가지가 있으며, 다음과 같은 형태로 구분할 수 있다.쿠키(Cookies)쿠키는 웹사이트가 사용자의 컴퓨터에 저장하는 작은 데이터 파일이며, 주로 사용자 인증, 세션 관리, 개인화된 설정 등을 위해 사용된다.특징보통 한 쿠키당 4kb 이내의 크기를 가진다.만료 날짜가 설정 가능하기 때문에, 만료 날짜가 지나면 자동으로 삭제된다.서버와 클라이언트 간에 전송이 가능하며 http로 요청할 때 자동으로 포함된다.세션 스토리지(Session Storage)세션 스토리지는 사용자가 웹 페이지를 열어둔 동안만 데이터를 저장하며, 페이지가 닫히면 데이터가 사라진다.특징세션 스토리지의 데이터는 브라우저 탭이 열려 있는 동안만 유지되며, 브라우저를 새로 시작하면 전부 날아간다.세션 스토리..