전체 글 (29) 썸네일형 리스트형 [React] 💻 모바일 웹 반응형 디자인 하기 0. 들어가면서얼마 전에 대학교 졸업 전 마지막 프로젝트로 과 후배 한 명과 컴공과 지인 두 명과 함께'추억의 칠판'이라는 이름의 졸업식 기념 롤링페이퍼 모바일 웹 서비스 프로젝트를 진행했다. 모바일 웹 프로젝트이다 보니 핸드폰 디바이스 마다 다른 화면 크기에 맞추어 UI들과 홈페이지를 반응형으로 해야 했다. 반응형이라고 해봤자 컴포넌트 단위 정도로만 해보았기 때문에 이렇게 홈페이지 전체적으로 반응형을 필요로 하는 프로젝트는 처음이였기에 꽤나 어려움을 겪었다. 그 때 공부하며 사용도 해보았던 개념들을 정리하고 추가적으로 필요한 부분은 더 알아보도록 하겠다. 1. 반응형 웹 디자인이란?✅ 반응형 웹 디자인의 개념반응형 웹 디자인(Responsive Web Design, RWD)은 다양한 화면 크기와 디.. [React] 🛠 CORS 오류를 해결하자 (SSL? HTTPS? HTTP?) 0. 들어가면서백엔드와 함께 협업 프로젝트를 진행하다보면 은근 자주 마주치게 되는 CORS 오류최근에도 이 오류를 마주쳐 임시방편으로 프록시로 해결을 하고 서버 측에서 허용을 해줌으로써오류를 해결하였지만 정확히 알아보고자 포스팅을 하게 되었다. 1. CORS란 무엇인가?✅ CORS 개념 및 원리CORS(Cross-Origin Resource Sharing)는브라우저에서 보안상의 이유로 다른 출처(Origin)의 리소스 요청을 제한하는 정책이다.다른 말로 서로 다른 출처의 리소스를 안전하게 주고받을 수 있도록 해주는 보안 정책이다. 출처(Origin)는 프로토콜 + 도메인 + 포트(번호)로 결정된다.예를 들어,https://example.com:3000 → https://example.com:4000 요청.. [React] 🚀GET과 POST의 차이점, 언제 어떤 걸 써야 할까? 0. 들어가면서GET과 POST는 프론트엔드 개발자라면 너무 익숙한 개념이고 자주 쓰인ㄷ.하지만 정작 저는 관성적으로, 혹은 습관적으로 이 둘을 사용해왔을 뿐정확한 개념과 어떤 상황에 알맞는 메서드를 사용해야하는지 모른 채로 개발을 했었기에이번 기회에 제대로 알아보고 정리하고 한다. 1. GET과 POST란?먼저 개념 용어 정리를 해보겠다.GET과 POST는 HTTP 요청 메서드 중 가장 기본적인 두 가지로,클라이언트가 서버와 데이터를 주고받을 때 사용된다.GET: 데이터를 요청할 때 사용됨 (예: 웹 페이지를 열거나 특정 데이터를 조회할 때)POST: 데이터를 서버에 제출하거나 저장할 때 사용됨 (예: 회원가입, 로그인, 폼 제출 등) 2. GET과 POST의 차이점 GET과 POST의 차이점을.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 9일차 학습 회고 ( ) 데이통 통신에는 fetch랑 axios 두개이다.. 웹브라우저에서 데이터 통신을 하기위한 도구fetch -> 웹브라우저가 제공비동기로 동작합니다1 Promise then 방시긍로 동작하는 방식1-1. pending (대기) fulfiled 이행(성공적으로 수행햇다) , rejected(거절, 실패했다)fetch는 Promise 객체를 반환한다 fetch의 then catch가 있다근데 로딩이 느려서 깜빢임이 길때를 생각해서 로딩처리를 해주는거이제부터 하는건 옵션 아래 코드가 기본 디폴트 값 ㅇㅇ 여기에 로딩처리, 에러처리 해주는거 const FetchData = () => { const [data, setData] = useState(null); useEffect(()=>{ //왜 .. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 8일차 학습 회고 ( reducer, zustand, 데이터 통신(fetch api) ) 보호되어 있는 글입니다. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 7일차 학습 회고 ( 동시성 모드 훅, 리액트 메모제이션, useContext ) 2024.08.26(월) - 7일 차 React 18 에서 동시성 모드( concurrent mode )를 제공하게 되었습니다. 일반적으로 리액트는 작업을 순차적으로 하게 되는데코드 상에서 무거운 렌더링 작업을 하게 되면 그 동안 메인 스레드가 거기에 할당 되어 다음 작업을 처리하지 못하게 됩니다. 따라서 유저와 상호작용이 불가하거나 느려지게 됩니다. 이러한 문제를 해결하기 위해 React 18 에 등장한 동시성 모드를 통해서무조건 순차적으로 처리하는 것이 아닌 각 작업에'우선순위'를 지정하여 동시에 처리할 수 있게 합니다.( 우선순위 높은 이벤트 먼저 -> 이후에 우선순위가 낮은 이벤트 ) 이를 위해 나온 리액트 훅 2가지 useTransition과 useDeferredValue를 알아보겠.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 6일차 학습 회고 ( useEffect, useLayoutEffect ) 2024.08.26(월) - 6일 차 리액트 훅(3) - useEffect useEffect 은 리액트 훅의 일종으로컴포넌트 생명주기에 따른 여러 코드를 동작하기 위해 사용하는 훅입니다. 먼저, 기본 형식은 다음과 같습니다useEffect( function, deps )//functino -> 콜백함수//deps -> 의존성 배열 예를 들어 살펴보면상단에서 useEffect import해오고 콜백 함수를 추가하여 적으면 됩니다. import useEffect from 'react'function test(){ useEffect(()=>{ // 여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('useEffect execute') }); return (생략.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 5일차 학습 회고 ( props, children, useState, useRef ) —————————————————————본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다. #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정 이전 1 2 3 4 다음
