리액트 개발자 (삐약)

const numPages = Math.ceil(total / limit); Array(numPages) .fill() .map((_, i) => ( setPage(i + 1)} > {i + 1} )) 페이지네이션을 만들고있는데, 참고하는 자료 중에 이해가 어려웠던 구문. fill() 함수는 배열의 요소를 어떠한 값으로 채울수 있는 함수로 알고있는데, argument 가 없으면 undefiend로 값이 들어가게 될것이고.. 그 다음 map 함수를 쓴다? 그럼 어떻게 작동하는거지..! 예를들어 console.log(Array(5).fill().map((v,i)=>i)); > Array [0, 1, 2, 3, 4] 이렇게 테스트를 해보면, 위와 같은 값이 나오는데 Array(5) : 5개짜리 배열을 생성 A..

기획실습 강의 두번째 시간, UML에 대해 배웠다. UML에서 정의하는 모델링이란? 어떠한 현상들을 단순화, 일반화, 추상화 하는 과정 + 내부구조나 동작하는 행위에 대한 표현의 자유, 시스템의 구성요소들이 서로 어떻게 연결되어있는지 확인 설계와 구현간 일관성 유지, 레벨화 가능, 명확한 의사 소통의 도구 UML은 이야기가 가능한 시각화 Tool이다. UML은 사람의 행위를 기반으로 한다. UML은 사용자의 문제를 기반으로 모델링한다. 학습 툴 draw.io (diagrams.net) Flowchart Maker & Online Diagram Software Flowchart Maker and Online Diagram Software draw.io is free online diagram softwar..

대망의 첫날! 오리엔테이션에 이어 웹 서비스 기획 수업이 있었다. 먼저, 플랫폼의 정의와 진화에 대해 알아보고 앞으로 어떻게 발전할 것인가에 대해 생각해보는 시간을 가졌는데. 디바이스의 변화에 따라 서비스의 형태가 바뀌어가고 있다는 인사이트를 얻을 수 있었다. 플랫폼의 진화 기존의 모~든 UI는 유저가 선택할수 있는 '선택버튼'의 기능을 충실히 수행했다면, 지금은 클릭을 너머 사용자의 경험을 중시하고 있다. UI와 UX를 그냥 묶어서 화면 정도로 생각하고 있었는데 조금 더 분리해서 깊게 생각 해 볼 수 있는 기회였다. 나아가 빅데이터의 등장 이후로는 유저가 선택하지 않아도 나의 생활정보를 기반으로 AI가 알아서 정보를 제공해주는 시대가 왔다. 유튜브의 알고리즘과 SNS의 수많은 맞춤광고들은 이미 우리에게..

서버에 Delete Request를 보내보자! 코드를 브라우저에서만 돌릴때는, useState를 활용해서 데이터를 넣고, 삭제했다. 그냥 로컬에 있는 데이터 배열의 값을 변경시켜 주는것이므로 간단했는데, 서버와 연결 된 상태에서는 어떻게 delete 기능을 구현할 수 있을까! 토이프로젝트에서는 fetch를 통해 데이터를 받아오고, 전송한는 create 기능과 read 기능은 구현이 되어있다. 이번에는 fetch를 통해 delete 기능을 구현 해 볼것이다. return ( {post.title} {post.date} {post.body} 수정 { //삭제로직! }}>삭제 ); } 위 코드는 내가 만들고있는 프로젝트의 게시글 상세보기 컴포넌트다. 삭제버튼에 onClick 이벤트로 삭제로직이 작동되게 할건데..

해결과제 1. Open API 클라이언트 신청 2. 발급받은 아이디와 키로 fetch 받아주기 3. Postman으로 데이터 전송 확인 - 여기까지는 무난하게 했는데, CORS 에러 발생해서 막혔다. 4. CORS 해결하기 CORS에러를 해결하는 방법에는 보통 두가지 정도가 있는것 같다. 1. 프록시 설정을 해준다. 2. 미들웨어를 쓴다. 사실 둘다 해봤는데 여러 블로그에 나온 방법은 모두 먹히질 않아서, 좀 더 알아본 다음 프록시 설정을 해줬다 먼저, 사용할 API를 컴포넌트에 심어주었다. CORS 를 우회하기 위해서 프록시 설정을 해줄것이기 때문에 http부터 .com까지는 지워주고 URL을 넣어줬다. async function getBooks() { var client_id = "" var clie..

관련 : Web Workers Web Workers API - Web API | MDN (mozilla.org) Web Workers API - Web API | MDN 웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 developer.mozilla.org 웹 워커를 이용하면 특정 작업을 멀티스레드로 병렬 처리할 수 있다. 클라이언트 측 자바스크립트는 싱글 스레드며, 그렇기 때문에 파일을 읽어들이거나 데이터를 가져오는 작업을 비동기로 실행한다. new Worker(URL) 생성자로 생성하며, 이 객체에 원하는 코드(이벤트처리기)를 등록해서 사용한다. 워커와 ..

useNavigate from 'react-router-dom' loader 프로퍼티 설정 : loader 프로퍼티는 함수를 값으로 받는데 리액트 라우터는 해당 라우터가 활성화 될 때 마다 (즉 컴포넌트를 클릭해서 라우트 경로 타고 / 어디로 가는듯한 느낌 줄때), 즉 그 요소가 렌더링 되려고 할 때 마다 loader에 있는 함수를 실행시킴. 그래서 그 함수를 이용해 이 라우트 컴포넌트 또는 이 라우트의 일부로 사용되는 컴포넌트에 필요한 데이터를 미리 로드해 둘 수 있다. main.jsx가 무거워 지면 안되기 때문에 대부분 라우트 컴포넌트 파일에서 , 함수를 내보내 사용한다. 해당 라우트가 엘리먼트로 가지고 있는 컴포넌트로 가서 export function loader(){ } 리액트 라우터는 loade..

state에 대해 공부하면서 어떤걸 state로 올리고, 또 공유 해야 하는 경우 어느정도의 상위 컴포넌트로 올려서 써야하는지 판단이 어려웠던 참에, 아름다운 공식문서가 있어 아카이빙합니다 애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 합니다. 여기서 핵심은 중복배제의 원칙입니다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그때 계산되도록 만드세요. 예를 들어 TODO 리스트를 만든다고 하면, TODO 아이템을 저장하는 배열만 유지하고 TODO 아이템의 개수를 표현하는 state를 별도로 만들지 마세요. TODO 갯수를 렌더링해야한다면 TODO 아이템 배열의 길이를 가져오..

개요 1. 리액트 라우터의 필요성 2.공식 홈페이지 3.라우팅 설정 4. 레이아웃 라우트 1. 리액트 라우터의 필요성 리액트로 만든 앱은 SPA이다. 즉 싱글 페이지 애플리케이션으로 컴포넌트를 빌드해서 구동을 해보면, 하나의 HTML 파일에서 자바스크립트를 통해 요소들이 동적으로 변경될 뿐, 새로운 HTML 페이지로 이동하거나 하지는 않는다. 자바+스프링 등에서 했던 프로젝트와는 다르다. 하지만, 도메인 주소가 하나로만 고정되어 있다면 너무 불편하다. 링크해서 공유하기도 할 수없고 우리는 언~제나 도메인의 메인 주소로 접속해서 이동하는 그 모~~든 과정을 반복해야 한다. 비록, 싱글페이지지만.. 각페이지 마다 고유의 주소값을 가질 수 있으면 얼마나 좋겠어! 그렇지만, 리액트는 이런 라우팅 기능이 내장되어..

개요 1. useEffect 1. useEffect의 용법 들어가기 전에 _ 데이터를 입력받아 저장하거나, 저장된 데이터를 화면으로 불러오기 위해서는, 데이터베이스와 소통해줄 백엔드가 필요하다. 그러나 프론트엔드 공부 목적에서는 백엔드까지 구현을 할 순 없기 때문에 json-server와 같은 패키지를 통해 프로토타입 웹사이트를 만들어 볼 수 있다.useEffect 사용도 json-server의 API를 통해사용해볼것이다. 우리가 필요로 하는 데이터도 결국은 어떠한 상태값이다. Create Update Delete Read 를 하기 위해서는 데이터를 항상 갱신을 해야하는데, 데이터가 변한 상태를 끌어당겨 와야한다는 것이다. 그리고 리액트에서 상태값을 변경할때는 useState를 사용한다. useState..