React (12) 썸네일형 리스트형 [React] 📝async/await + useEffect 내 순차 실행하기(비동기 제어 처리) 0. 배경 설명제목과 관련된 이야기를 시작하기 전에 간단하게 배경 설명을 해야겠다. 거의 마무리 단계에 있는 프로젝트인 '잼시네마(영화 정보 사이트)'의 뉴스 탭을 개발 중에내가 서버 측 코드 newsRouter.ts 에 만들어놓은 두 가지 API가 있었다. 첫 번째 API는 fetch-and-store 이라는 이름(주소?)의 API이다.외부 API인 딥서치 뉴스 API를 사용하여 우리가 원하는 영화라는 키워드와 관련된 뉴스 기사들의 정보를 받아오고그 데이터들을 정제하여 우리 프로젝트의 DB에 저장하는 API로 커스텀 한 것이다. 두 번째 API는 list라고 이름 지은 API이다.이 API의 역할은 DB에 저장된 뉴스 데이터들을 날짜 내리참순으로 가져와서 프론트(클라이언트) 측으로 보내준다. (해당 코.. [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의 차이점을.. 이전 1 2 다음
