웹 개발자 도전기

웹 표준은 HTML , CSS , JavaScript를 작성할 때 W3C에서 정한 공식 문법과 구조 규칙을 따르는 것을 말합니다. 시멘틱 태그를 써야 하는 이유div 하나만 너무 많이 사용하지 말고 의미 있는 태그를 적절히 사용해야 합니다.검색엔진 최적화(SEO)HTML 구조를 분석해 콘텐츠의 내용을 파악한다.이때 시멘틱 태그를 사용하면 페이지의 구조와 의미를 더 명확히 전달할 수 있어 검색 결과에 긍정적인 영향을 줄 수 있다.스크린 리더 호환시멘틱 태그는 스크린 리더가 콘텐츠 구조를 올바르게 파악하고 사용자에게 의미 있는 정보를 순서에 맞게 전달할 수 있도록 도와준다.유지보수 편리시멘틱 태그를 사용하면 이름만 봐도 그 영역의 역할을 쉽게 파악할 수 있기 때문에 여러 명이 협업할 때 구조를 이해하기 쉽..

Redux는 주로 React와 함께 사용되는 상태 관리 라이브러리 이다. 복잡한 애플리케이션에서 여러 컴포넌트 간에 데이터를 쉽게 관리할 수 있게 도와줍니다.Redux는 애플리케이션의 모든 상태를 하나의 중앙 저장소에서 관리하고 상태 변화를 예측 가능하게 만들어줍니다. 설치 방법npmnpm i redux react-redux @reduxjs/toolkityarnyarn add redux react-redux @reduxjs/toolkit Redux의 기본 개념state(상태) : 애플리케이션의 데이터가 저장되는 값(or변수)입니다.action(액션) : 액션은 애플리케이션에서 일어난 일을 설명하는 객체이고 보통 type 과 payload 로 구성됩니다.type 은 액션의 종류를 나타내는 문자열 , pay..

styled-components 는 CSS를 JavaScript 파일 안에서 직접 작성할 수 있게 해주는 도구 입니다.CSS-in-JS 라고 불리며 컴포넌트 마다 스타일을 독립적으로 관리할 수 있어 리액트 프로젝트에서 많이 사용합니다. 설치 방법npm npm i styled-componentsyarn yarn add styled-components styled-components를 사용하는 이유컴포넌트와 스타일을 한 곳에서 관리할 수 있습니다. 별도로 CSS 파일을 만들 필요가 없습니다.CSS 클래스 충돌을 방지 합니다. 각 스타일은 컴포넌트에 고유하게 적용되기 때문에 다른 곳에서 사용 중인 클래스 이름과 겹칠 일이 없습니다.동적 스타일링이 쉬워진다. 컴포넌트에 전달되는 props 에 따라 스타일을 쉽게..

useContext useContext는 리액트 내장 훅으로 컴포넌트 트리 전체에서 데이터를 쉽게 전달할 수 있게 해줍니다.일반적으로 로그인한 사용자 정보나 테마 같은 전역 상태를 관리할 때 사용합니다.useContext를 사용하면 컴포넌트에서 매번 props로 데이터를 전달할 필요 없이 원하는 곳에서 바로 사용할 수 있습니다. 장점리액트 기본 기능이라 별도 패키지가 필요 없다.설정이 간단하고 중소형 프로젝트에서 전역 상태 관리를 쉽게 할 수 있다.단점프로젝트가 커지면 useContext 만으로는 상태 관리를 복잡하게 만들 수 있다.useContext 자체는 전역 상태를 관리하는 기능이지 상태 업데이트에 대한 세밀한 제어나 효율적인 리렌더링 처리는 어렵다.    동작 방식User.jsx 에서 UserCo..

React Router는 리액트에서 네이게이션을 관리하는 라이브러리 입니다.다양한 경로를 정의하고 그 경로에 따라 컴포넌트를 렌더링할 수 있게 해줍니다. 설치 방법npm 사용npm i react-router-domyarn 사용yarn add react-router-dom React Router의 기본 개념BrowserRouter : 애플리케이션 전체를 감싸는 컴포넌트로 HTML5의 History API를 사용하여 URL을 관리합니다. 이 컴포넌트 안에서 라우팅이 이루어집니다.Routes : 여러 개의 Route를 감싸는 컴포넌트 입니다. 각 Route를 그룹화 하고 관리합니다.Route : 각 URL 경로에 해당하는 컴포넌트를 매핑할 때 사용합니다. 특정 경로에 들어가면 지정된 컴포넌트가 렌더링 됩니다...

모듈 설치npm i -S express cors npm i nodemon -Dnpm i http-proxy-middleware 등등express : node.js 기반의 서버 구축을 위한 간단한 웹 프레임워크cors : 다른 도메인에서 API 요청을 허용하기 위한 미들웨어nodemon : 파일 변경 시 서버를 자동으로 재시작해주는 도구http-proxy-middleware : 프록시 서버 설정을 위한 미들웨어 , API 요청을 다른 서버로 전달할 때 사  -S : 프로덕션 환경에서 필요한 모듈을 설치 (dependencies에 추가)-D : 개발 환경에서만 필요한 모듈을 설치 (devDependencies에 추가)  전체 폴더  back 쪽 src 폴더의 server.js 생성 const express ..

React에서 상태 관리는 컴포넌트가 동작하는 데 중요한 역할을 합니다. 하지만 상태 업데이트가 비동기적으로 이루어지기 때문에 최신 상태 값을 기반으로 안전하게 업데이트 하는 방법이 필요합니다. 함수형 업데이트와 직접 참조의 차이점직접 참조 방식 *setData([...data,tempdata]);설명 : 이 방식은 현재 상태값인 data를 직접 사용하여 새 데이터를 배열에 추가합니다.작동은 하지만 React의 상태 업데이트는 비동기적으로 작동하기 때문에 이 방식은 최신 상태를 참조하지 않을 수 있습니다.위험성 : 다른 상태 업데이트가 비동기적으로 발생할 경우 이전 상태가 참조될 가능성이 있어 데이터 손실이나 충돌이 발생할 수 있습니다.함수형 업데이트 방식 *setData((datas)=> [...dat..

useRef란 ?useRef는 React Hook 중 하나로 컴포넌트의 DOM 요소나 변수에 대한 참조를 저장할 수 있는 방법입니다.useState와는 다르게 렌더링을 발생시키지 않고도 값을 유지할 수 있습니다. useRef의 주요 용도DOM 요소에 접근주로 HTML 요소에 접근하여 포커스를 주거나 스크롤을 제어하거나 입력 필드의 값에 접근하는 등의 작업을 할 때 사용됩니다.렌더링 간 값 유지state를 업데이트할 때는 컴포넌트가 재 렌더링 되지만 useref는 렌더링을 발생시키지 않고 값을 유지함 useRef 사용 예시 (DOM 요소에 접근)입력 필드에 포커스주기 해당 버튼을 누르면 ref.current.focus()가 호출되어 입력 필드에 포커스 자동 설정  useRef로 렌더링 없이 값 관리하기 r..

useEffect는 React에서 Side Effect 를 처리하는 훅 입니다.컴포넌트가 렌더링된 후 추가적인 작업을 실행하거나 특정 상태 변화에 맞춰 작업을 처리하는 역할을 합니다ex API호출 , DOM 업데이트 , 이벤트리스너 설정 등등  기본 사용법 useEffect는 컴포넌트가 렌더링된 후 실행됩니다. 첫 번째 인자 : 렌더링 후 실행할 함수를 받습니다.두 번째 인자 : 의존성 배열로 , 배열 안에 있는 값이 변경될 때마다 useEffect가 다시 실행됩니다. 빈배열을 넣으면 컴포넌트가 처음 마운트될 때만 실행됩니다. 이 코드에선  처음 화면이 렌더링 될때 콘솔에 실행이 찍힙니다. 의존성 배열의 역할 useEffect가 항상 렌더링 후에 실행되지만 특정 값이 변경될 때만 실행되도록 제어하고 싶을..

useState는 React에서 컴포넌트의 상태(state)를 관리하기 위한 가장 기본적인 훅(Hook)입니다.useState는 함수형 컴포넌트 내에서 상태를 선언하고 그 상태를 업데이트하는 방법을 제공합니다.  useState의 기본문법useState는 React에서 import하여 사용할 수 있고, 이러한 문법을 가집니다. const [ state , setState ] = useState(initialValue);state는 컴포넌트에서 관리할 상태 값입니다. 기본적으로 useState에 전달된 초기 값 을 가집니다.setState는 상태 변경 함수 입니다. setState를 호출하면 컴포넌트는 상태가 변경된 것을 감지하고 다시 렌더링 됩니다.initialValue는 상태의 초기값 입니다. 숫자 ,..