코딩하는라민

[React] React router 와 React router dom 에 대해 📌 React router 와 React router dom ? 리액트 팀 프로젝트를 하고있을 때였다. 리액트 라우터로 SPA(Single Page Application) 를 구현했다. 그러던 중 package.json 에 아래의 사진처럼 react-router 와 react-router-dom 이 두 가지가 설치되어 있는 것을 발견했다. 왜 두가지나 있는거지? 하고 구글링을 했다. 요약하면, React Router는 라우팅을 처리하는 핵심 라이브러리이고, React Router DOM은 React Router를 웹에서 사용하기 쉽도록 확장한 라이브러리이다. 즉 React Router DOM 은 React Router 을 포..

[Web] HTTP Request Methods 란? 🧶 HTTP Request Methods 란? 클라이언트가 웹 서버에게 요청하는 목적 및 그 종류를 알리는 명령어를 말한다. HTTP 요청 메서드는 서버에게 어떤 동작을 수행해야 하는지 알려준다. 가장 흔히 사용되는 HTTP 요청 메서드에는 GET, POST, PUT, DELETE, HEAD 가 있고, 이외에도 OPTIONS, TRACE, CONNECT 등의 다른 HTTP 요청 메서드가 있다. javascript 에서는 이 HTTP Request Methods 를 사용하기 위해서 XMLHttpRequest 객체 또는 Fetch API를 사용할 수 있다. XMLHttpRequest 보다는 간결하고 강력한 기능을 제공하는 Fetch API 를 더많이 사용..

[Web] 쿠키(Cookie)와 세션(Session) 이란? 🧶 HTTP(Hyper Text Transfer Protocol) 세션과 쿠키는 HTTP 프로토콜과 관련이 아주 깊다. HTTP 는 웹에서 데이터를 교환하기 위한 통신 규약이다. 세션과 쿠키는 HTTP 프로토콜을 기반으로 동작하며, 웹 개발에서 상태 정보를 유지하고 사용자를 식별하기 위해 사용한다. HTTP 프로토콜은 기본적으로 상태를 유지하지 않는 Stateless 프로토콜이다. 즉 서버는 클라이언트의 각 요청을 독립적으로 처리하고 요청 간의 연관성을 알지 못한다. 이로 인해 쿠키와 세션이 필요해지는 것이다! 🧶 Cookie 란? 쿠키(Cookie)는 클라이언트 측에서 상태 정보를 저장하는 작은 데이터 조각이다. 서버는 클라이언트에게 응답을 ..

[Web] 웹 브라우저가 어떻게 동작하는가? 이번 포스팅에서는 주소창에 github.com 을 입력하고 브라우저 화면에 github.com 페이지가 표시될 때까지 어떤 일이 일어나는지 확인해볼 것이다. 🧶 브라우저의 동작 원리 우리가 자주 사용되는 주요 브라우저에는 Chrome, Internet Explorer, Firefox, Safari, Opera 이 있다. 그 중에서 Chrome, Firefox, Safari 가 전 세계 데스크톱 브라우저 사용량의 71%를 차지할 만큼 많이 사용된다. 브라우저는 웹 리소스를 서버에 요청하고, 브라우저에 표시하는 기능이 있다. 웹 리소스는 보통 HTML 문서이다. 하지만 이 외에도 PDF 문서나 이미지 또는 기타 콘텐츠 유형일 수도 있다. 이 리소스의 위치는 사용자..

[Refact/웹접근성] input file 요소에 잘못된 커스터마이징으로 스크린리더에서 읽을 수 없던 문제 개선하기 지난 프로젝트에서 파일 업로드를 하기 위해 input type file 부분을 커스터마이징했다. 그러는 과정에서 input 요소에 display: none; 을 적용했고, label 요소의 background 로 원하는 이미지를 적용해주었다. 하지만 이런 방법은 tabindex 가 적용되지 않을 뿐더러 스크린리더가 해당 요소를 잡지 못하는 문제점이 발생했다. 이렇게 된다면 웹접근성을 고려하지 않는 방법이라 수정하는 게 좋다는 피드백을 받았다. 📌 접근 가능한 숨김 텍스트 🚫 내가 사용한 잘못된 방법 input{ disaply: none; } 못생긴 input file 의 기존 디자인을 숨..

[정처기 실기] 프로그래밍 언어 활용 - 자료형, 식별자, 연산자 📌 자료형 ✏️ 자바 파이썬 HashSet - Set 의 자식 클래스 - 중복 원소 허용 ❌ - 순서 ❌ add(값) 중복된 값이 있으면 추가 ❌ remove(값) 선언 set 변수명 = new HashSet( ); HashSet 변수명 = new HashSet( ); size( ) 원소의 개수를 얻는 메서드 ArrayList - List 의 자식 클래스 - 크기가 가변변적로 변하는 선형 리스트 성질 - 순서 중요⭕ add(값) add(인덱스, 값) 선언 List 변수명 = new ArrayList( ); ArrayList 변수명 = new ArrayList( ); remove(인덱스) size( ) HashMap - 키와 값으로 구성된 ..

[정처기 실기] 프로그래밍 언어 활용 - 배열과 포인터 📌 데이터 타입 ✏️ 데이터 타입 유형 유형 파이썬 자바 C언어 불린 Boolean 참 : true 거짓 : false 참 : True 거짓 : False - 문자 Character 데이터 유형을 명시적으로 선언할 필요가 없다. 변수에 할당한 값을 기반으로 변수의 데이터 유형을 유추. (동적으로 유형이 지정됨) char char 문자열 타입 String String char [ ] 정수 타입 Integer int int 부동 소수점 Floating Point float, double float, double 📌 배열 같은 타입의 변수들로 이루어진 연속된 공간 ✏️ 1차원 배열(Array) C언어 자바 초기값이 없는 경우 타입 배열명[요소개수]; 타입..

[React] React.lazy 코드 스플리팅으로 프로젝트 성능 개선하기 📌 React.lazy 함수를 사용하게 된 이유 리액트 프로젝트를 진행하면서 중간중간 Light House 를 이용해 성능 검사를 진행했다. 다른 점수는 항상 90점 이상으로 나왔는데 '성능' 점수만 항상 주황색으로 60~70점 정도가 나왔다. 이 6, 70점도 잘나온 편이었고 정말 성능이 좋지 않은 페이지의 경우에는 4, 50점대까지 나왔다. 성능 최적화는 코드를 작성하고 나서 수행해야 하기 때문에 일단 프로젝트에 집중했고, 추가적으로 성능 개선을 진행하였다. 📌 React.lazy 함수란? React.lazy() 는 동적으로 코드를 로드하고 렌더링할 수 있게 해주는 React의 기능 중 하나이다. 이 기능을 사용하면 일반적인 ..

[React] useLayoutEffect 는 언제 사용할까? 📌 useEffect 이란? [React] Hooks - useEffect ( ) [React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 ramincoding.tistory.com 앞의 포스팅에서 알아본 바와같이 useEffect 는 클래스형 컴포넌트 생명주기의 componentDidMount, componentDidUpdate, componentWillUnmount 훅을 하나의 API 로 합친 것으로 의존성 배열 deps..

[정처기] 2023 정보처리기사 일정 & 출제기준/목차 📌 실기 일정 1회 2회 3회 실기시험 원서접수 2023.03.28.(화) ~ 2023.03.31.(금) 2023.06.27.(화) ~ 2023.06.30.(금) 2023.09.04.(월) ~ 2023.09.07.(목) 실기시험 2023.04.22.(토) ~ 2023.05.15.(월) 2023.07.22.(토) ~ 2023.08.06.(일) 2023.10.07.(토) ~ 2023.10.20.(금) 합격자발표 2023.06.09.(금) ~ 2023.08.08.(화) 2023.09.01.(금) ~ 2023.10.31.(화) 2023.11.15.(수) ~ 2024.01.14.(일) 실기 : 4월, 7월, 10월 📌 목차 중요도 순에 따라서 나열 공부한 내..