Dani's Dev TokTok

오늘은 3월 2일에 치룬 정보처리기사 필기 시험 공부 후기와 합격 후기를 적어보고자 합니다.  안읽어도 되는 공부하게 된 배경힘들게 취업했던 회사에서 멘탈이 털리는 사건이 생긴 후..(직장내 성희롱과 성추행.....ㅠ )멘탈 회복을 위해 어디 집중할 곳이 필요했습니다.그래서 미루고 미뤘던 정보처리기사 시험 준비를 했습니다. 시험 준비기간2025년 1월 ~ 2025년 2월 대략 한달반 정도그렇지만 제 블로그의 다른 포스팅을 보면 아시다시피 자바의 기본 문법이나 sql 기본 문법은 부트캠프를 통해 배워서 알고 있는 상태였습니다.또한 자바스크립트를 공부해서 프로그래밍 언어에서 공통적으로 쓰이는 문법(조건문이나 반복문)의 원리를 알고 있는 상태였습니다.공부방법이전에 공부해두려고 사둔 시나공 정보처리기사 필기 기..

미루고 미뤄왔던 정보처리기사 필기 준비중이다.3월이 시험이다! 으악 떨려!

들어가며리액트에서 달력을 구현할 수 있는 여러가지 라이브러리 중 react-datepicker 를 이용해서시작 날짜와 종료 날짜를 선택할 수 있는 즉, 날짜를 범위로 선택할 수 있는 달력을 구현해보고자 한다.이것을 이용해서 여행 일정 관리나, 날짜를 선택해야 하는 예약 시스템을 구현할 수 있을거라 생각한다. 달력 만들기 먼저 리액트 프로젝트에서 npm이나 yarn 을 이용해서 date-picker 를 다운로드 한다.npm install react-datepickeryarn add react-datepicker 만약 날짜를 한국어로 설정하고 싶다면  date-fns 에서 해당 기능을 제공하므로 같이 다운로드 한다.npm install date-fnsyarn add date-fns 기본 달력 표시DatePi..

들어가며SSR(Server Side rendering) 과 CSR(Client Side Rendering) 은 페이지 렌더링 방식을 경정하는 개념이다.이 개념들을 이해하고 차이가 뭔지 알아보고자 한다. SSR & CSRSSR(Server Side Rendering)서버 사이드 렌더링은 클라이언트 요청에 따라 HTML 파일을 서버에서 렌더링해서 완성된 HTML 파일을 클라이언트에 전달한다. 그 후 브라우저는 서버로부터 완성된 HTML 을 받아서 화면에 표시한다. 서버 사이드 렌더링은 다음과 같은 단계로 진행된다.서버는 웹 페이지에 대한 요청을 받으면 필요한 데이터를 검색한 후에 해당 데이터를 HTML 템플릿에 붙인다.서버는 페이지에 대한 HTML 마크업을 생성하고 콘텐츠를 렌더링하고 필요한 스타일을 적용한..

들어가며React 의 특징 중 하나는 Virtual DOM(가상돔) 를 가지고 있다는 것이다.리액트가 가상돔으로 어떻게 렌더링을 하는지 알아볼 것이다 React 의 렌더링 프로세스Virtual DOM (가상 돔)DOM 을 변경하는 작업이 많아질수록, 브라우저는 많은 연산을 수행해야 하고 이는 성능 저하로 이어질 수 있다.React 같은 라이브러리는 가상 DOM 을 사용해서 이 문제를 해결한다.  Virtual DOM(가상 돔) 은 실제 DOM의 복사본으로, JS 객체 형태로 메모리 안에 저장된다.가상돔은 브라우저의 실제 DOM을 조작하기 전에 변경 사항을 미리 계산하고,최소한의 작업만 실제 DOM 에 적용하도록 도와준다.이를 통해서 성능을 최적화하고 빠른 UI 업데이트를 할 수 있게 해준다. React ..

들어가며이전에 면접 질문으로도 받았었고 프론트엔드 개발자 뿐만 아니라 웹 개발자라면 알아야 할 거라 생각해서 정리해보려 한다. 브라우저 렌더링브라우저의 렌더링 순서브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다.서버로부터 HTML 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱하며 태그와 속성을 발견한다이 태그와 속성들을 트리 형태로 변환해서 메모리에 저장되는데, 이를 DOM Tree 라고 한다.HTML 파싱 중 CSS 를 만나면 이를 파싱해서 CSSOM Tree 로 변환한다.DOM tree 와 CSSOM tree 를 결합해서 Render Tree 를 생성한다.렌더 트리를 기반으로 html 요소의 레이아웃(위치와..

들어가며로컬 스토리지와 세션 스토리지는 HTML5 부터 추가된 웹 스토리지의 종류로 서버가 아니라 클라이언트에서 데이터를 저장할 수 있다.이번 포스팅에서는 로컬 스토리지와 세션 스토리지에 대해서 다루도록 하겠다. 웹 스토리지(Web Storage)웹 스토리지(Web Storage) 는 브라우저가 제공하는 클라이언트 측 저장소다.데이터는 키-값(key-value) 쌍으로 저장하며, 문자열 형태로 저장된다.데이터 저장 시 : JSON.stringify(배열/객체)데이터 사용 시 : JSON.parse(문자열배열/객체)서버와의 통신 없이 데이터를 읽고 쓸 수 있어 빠르고 간단하게 사용할 수 있다. 웹 스토리지는 쿠키와 유사하지만 용량이 훨씬 크다.(쿠키 : 4KB / 웹 스토리지 : 약 5MB)서버와 독립적으..

들어가며React Hook Form 은 비제어 컴포넌트를 기반으로 동작하는 폼 관리 라이브러리다.React 에서 form 을 쉽게 관리할 수 있도록 해주며, form의 상태 관리와 유효성 검사를 간단하게 만들어준다. React Hook FormReact Hook Form 은 다음의 커맨드로 설치할 수 있다.npm install react-hook-form React Hook Form 은 useForm 이라는 훅을 통해 폼 상태, 검증 및 제출 로직을 관리한다.import { useForm } from 'react-hook-form' React Hook Form 에서 주로 사용되는 메서드는 아래와 같다.register : 입력 요소에 연결하기 위한 함수. 이 함수를 통해서 입력 요소에 유효성 검사 규칙을 ..

들어가며React 로 form 을 구현할 때 제어 컴포넌트와(Controlled Component) 와 비제어 컴포넌트(Uncontrolled Component) 라는 개념을 접할 수 있다.이 두 방식은 입력 값을 관리하는 방법에서 차이가 있으며, 상황에 따라 적절한 방법을 선택해야 한다.이번 포스팅에서는 이 두 개념을 비교할 것이다. 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트(Controlled Component)입력 값이 React 의 state에 의해서 제어되는 컴포넌트입력 값이 변경될 때마다 onChange 이벤트로 상태 업데이트하고, 업데이트된 상태로 다시 렌더링 한다. 작동 원리사용자가 input 에 값을 입력하면 onChange 이벤트가 호출된다.이벤트 핸들러가 새로운 입력 값을 React..

CORS(Cross-Origin Resource Sharing)CORS 란 교차 출처 리소스 공유를 의미한다.브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 해주는 보안 메커니즘이다. 브라우저는 기본적으로 SOP(Same-Origin Policy) 정책을 따르는데, 이 정책은 같은 출처에서만 리소스를 공유할 수 있다고 정한 정책이다. 그러나 개발을 하다보면, 클라이언트와 서버의 출처(Origin)가 서로 다를 수 있다.예를 들어, 리액트 서버(포트 번호 3000) 와 스프링부트 혹은 익스프레스 서버(포트 번호 8080) 가 리소스를 주고받으려 하면 서로 다른 출처로 판단되어서 CORS 위반 에러가 난다.참고로 출처(Origin) 는프로토콜(h..