초보개발자의 관점에서 바라본 코딩

CORS(Cross-Orgin Resource Sharing) * 기본적으로 웹 브라우저는 "동일 출처 정책"을 따르며, 서로 다른 출처로의 요청을 제한합니다.* CORS는 이러한 다른 출처(도메인, 포트, 프로토콜)로 부터 리소스 요청을 허용할 수 있게 하는 방식입니다. ex) 프런트서버(http://localhost:3000) - 백엔드서버(http://localhost:8080) http://localhost:3000 http://localhost:3030 (허용) http://localhost:3000 http://localhost:8080 (불허) CORS오류 예제Access to fetch at 'http://localhost:8080/api/auth/signup' fro..

1. 사용자가 브라우저 주소창에 URL을 입력합니다. 2. 브라우저의 DNS조회( 사용자가 입력한 주소를 IP로 바꾸는 과정 ) 컴퓨터는 기본적으로 IP주소를 기반으로 요청을 보내게 됩니다. 하지만 사용자 입장에선 IP를 일일이 외우기 힘드니 편리한 주소(도메인)를 입력하면 DNS서버에서 주소를 IP로 변환해줍니다. * 브라우저 캐시 확인( 과거에 접속한 기록이 남아있으면 주소를 변환과정없이 바로 IP 반환) * 기록이 없으면 DNS서버 계층적 탐색 후 IP 주소 반환 3. TCP/IP 커넥션 생성 기본적으로 모든 HTTP/HTTPS 통신은 패킷 교환 네트워크 프로토콜들의 계층화 된 집합인 TCP/IP를 통해 이루어진다. 이 커넥션은 데이터의 손실을 방지하고 순서를 보장한다. 3-..

아래 그림과 같이 동작하는 설문조사 Form에 대해 생성해봅시다.  요구사항 정의 - 이름, 나라, 지역을 입력할 수 있는 인풋 박스가 있다.- 나라는 한국, 중국, 일본, 러시아, 미국 5개의 나라로 구성되어있다.- 한국을 선택했을 때만 지역을 입력할 수 있는 인풋 박스가 생성된다.- 이름과 사는 곳을 입력해야만 저장 버튼이 활성화가 된다.  파일명 - index.css* { font-size: 22px;}html,body { padding: 0; margin: 0;}.App { display: flex; height: 100vh; background: #ffebe9; justify-content: center; align-items: center;}.form { background: ..

function App() { return ( { console.log('onClick'); }} onMouseDown={() => { console.log('onMouseDown'); }} onMouseUp={() => { console.log('onMouseUp'); }} > Button { console.log('onClick'); }} onMouseEnter={() => { console.log('onMouseEnter'); }} onMouseL..

파일명 - Accordion.jsximport { useState } from 'react';function Accordion({ title, content}) { const [isOpened, setIsOpened] = useState(false); return ( { setIsOpened((state) => !state); }}> {title} {isOpened ? '-' : '+'} {isOpened && ( {content} ..

React Hooks란?React 16.8버전부터 Hook이란 개념이 추가되었습니다.Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 제공해줍니다.   React Hooks의 종류 기본적으로 리액트에서 제공하는 10가지의 내장 Hooks와 사용자가 직접 정의하는 커스텀 Hooks 이 있습니다. 내장 Hooks- useState- useEffect- useCallback- useMemo- useContext- useRef- useLayoutEffect ... 중 주로 이용되는 3가지 Hooks에 대해 알아봅시다.  import { useCallback, useEffect, useState } from "react";function Counter() { console.log("Rende..

렌더링 과정을 보시기 전에 리액트 훅의 동작에 대해 알고나면 이해가 훨씬 더 쉽습니다.https://steady-snb.tistory.com/104 7. React Hooks의 정의와 종류에 대해 알아보자React Hooks란?React 16.8버전부터 Hook이란 개념이 추가되었습니다.Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 제공해줍니다.   React Hooks의 종류 기본적으로 리액트에서 제공하는 10가지steady-snb.tistory.com  다음은 리액트 컴포넌트가 실행되는 과정을 알아보기위한 코드입니다.import {useEffect,useState} from 'react';function FunctionalComponent() { console.log('F..

그동안 배운 기술을 활용하여 간단한 판매사이트를 구현해보겠습니다. 우선 Props를 활용하기 위해 가장 상위가 되는 App.jsx에 변수들을 넣어주도록 합니다. 파일명 - App.jsximport { useState } from 'react'import reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import './App.css'import axios from 'axios';import SellList from './SellList'function App() { return ( )}export default App 다음은 판매 페이지에서 부모 컴포넌트에서 props로 만들어주었던 변수를 활용하여 데이터..

State란?컴포넌트 내부에서 사용되는 일종의 변수입니다.  State사용법import { useState } from 'react'import reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import './App.css'import axios from 'axios';import Header from './Header'function App() { let value = 0; return ( value: {value} { console.log("Increase value==", value) value = value + 1; conso..

Props란?Properties의 줄임말으로부모 컴포넌트에서 자식 컴포넌트로 내려주는 데이터입니다.   Props사용법 파일명 - Header.jsx/*Header.jsx*/export default function Header(props) { if(props.type === 'h1') { return {props.children}; } else { return {props.children}; }} 파일명 - App.jsx/*App.jsx*/import { useState } from 'react'import reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import './App.css'im..