728x90 반응형 TIL147 쿼리스트링 1 쿼리스트링 URL의 한 부분 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용 일반적으로 URL을 통한 정보 요청은 비교적 단순한 형태이다 규모가 크고 복잡한 애플리케이션에서 단순한 형태의 요청만으로는 충분하지 못하거나 비효율적이다 예시 애플리케이션에서 취급하는 상품의 종류가 1억개가 넘을 때 유저가 list로 접근 했을 때 한 페이지에 1억개를 다 넣을 수 없음 게다가 실제 유저는 판매량 순으로 상위 10개만 보는 식의 특정된 형태의 정보를 보고 싶어 함 이떄 활용할 수 있는 것이 쿼리스트링 상품에 대한 정보를 얻고 이 API 주소로 요청한다고 했을 때 http://www.example.com/products 인기순으로 정렬된 정보를 얻으려면 http://www.example.com/pr.. 2022. 8. 19. 동적 라우팅 정적 라우팅 라우터 컴포넌트에서 미리 프로젝트에서 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식 복잡하고 큰 애플리케이션에서는 경로를 정해놓는 방식은 처리하기 힘든 상황이 생길 수도 있음 예시) 리스트 페이지를 기본 경로 라우터로 설정하는데 상세 페이지를 post/postid로 정해서 ex) /post/1 1번 게시물 이라 한다면 라우터 페이지에 모든 라우터를 정의해두는 정적 라우팅은 라우터를 유연하게 정의할 수 없음 -> 이를 해결하기 위해서 동적 라우팅이 나옴 동적라우팅 : 특정 규칙을 정의한 후 규칙에 부합하는 URL 이 있을 경우 해당하는 element를 보여주게 설정함 /post/ 로 시작하는 모든 URL은 상세페이지로 연결되게 설정하는 방식 /post.. 2022. 8. 19. 컴포넌트 재사용, 로그인 회원가입창 클론 예시 컴포넌트 : 재사용할 수 있는 최소 UI 단위 : 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것 : 코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 컴포넌트를 분리함 컴포넌트 분리기준 : 다양함 (밑은 예시) UI를 표현하고자 하는 컴포넌트 동작하는 로직을 담고 있는 컴포넌트 두가지 역할을 모두 담고 있는 컴포넌트 그 외의 역할을 담고 있는 컴포넌트 로그인 회원가입창 클론 중 컴포넌트 재활용 예시 ☺️ 클론을 진행하며 컴포넌트 재사용(특히 UI적인 부분)을 경험해 이를 기록하려한다 👆 구현한 로그인, 회원가입 창 html 너무 신기하게도 이 html 하나로 로그인, 회원가입을 구현할 수 있다! login 과 signup 창이 유사한 부분이 있어 id, pw 창과 그 외의 .. 2022. 8. 19. Monster 과제 (react, map함수, 컴포넌트) 슬슬 감이 잡히기 시작한 react! 프젝 전 금요일에 위코드에서 요 monster 과제를 주셨다 바로 이렇게 👆 해당 페이지에 몬스터 카드를 불러와 map 함수를 써서 각각 불러오면 되는 것! 그리고 카드 정보를 받는 컴포넌트 (여기서 맵) - CardList.js 카드 구성을 받는 컴포넌트 (카드 정보를 받아 구성을 만듬) - Card.js 각각 나누어야했다 react에서 다뤄왔던 fetch(), map() 그리고 컴포넌트 나누기를 해보는 좋은 연습 같아 여러번 실습해보았다 1️⃣ 카드 정보 가져오기 1. 카드 정보 가져오기 , useEffect ( import useState 잊지 않기) 1-1. useEffect - fatch 메서드 ( import useEffect 잊지 않기) 1-2. useE.. 2022. 8. 15. 상수데이터란? 상수데이터 : UI 구성에 필요하지만 변하지 않아 백엔드에서 가져올 필요가 없는 데이터로 UI를 확장성 있게 구성할 수 있으며 유지보수가 용이하다 특히 반복되는 구조는 map 함수를 이용해 표현하는데, 이때 상수데이터는 별도의 파일로 분리하기도 한다 변하는 데이터는 변수 데이터 변하지 않는 변수는 상수 데이터 리액트는 ui를 그리는 라이브러리이고 ui는 데이터이다. 리액트에서 데이터를 요구하면 서버 변수데이터는 응답하고 리액트는 그것을 jsx로 읽어서 ui로 나타낸다. 하지만 변하지 않는 상수데이터를 받을 땐 서버에서 받아올 필요가 없다 컴포넌트에서 상수데이터를 만들면 된다! 그렇다면 어떤 것이 상수 데이터일까? -> 홈페이지 메뉴바 같은 경우는 변하지 않으니 상수 데이터! ❗️ 변하지 않는 구조로 만든.. 2022. 8. 12. useEffect 란? React에서 side Effect의 올바른 발생 시점 const App = () => { const doSideEffect = () => // do some side effect }; // 함수 정의 doSIdeEffect() // 함수 호출 return hello world ; //jsx 리턴 } 👆 위 코드는 리턴문 위에서 하고 싶은 동작을 실행 시킨다 문제점 1. sideEffect가 렌더링을 blocking 함 코드는 위에서 아래로 읽음, doSideEffect의 동작이 끝날 때까지 jsx를 return 하는 코드로 넘어가지 않음 만약 여기서 doSideEffect가 시간이 오래 걸리는 sideEffect 라면 함수 컴퍼넌트가 jsx를 리턴하기 전까지 브라우저 상의 UI가 렌더링 되기까지 오랜시.. 2022. 8. 8. SideEffect 란? Side Effect : 부작용 === 부수 효과 ( 부정적인 의미 x ) 주요한 효과에 따라서 발생되는 부수적인 효과 프로그래밍에서의 SideEffect 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과 프로그램을 구성하는 가장 작은 담위인 '함수'에서 자주 사용되는 용어 input을 받아서 output을 산출하는 것 이외의 모든 행위 순수함수 const sum = (x) => { return x+1 } -> x를 받아서 output 을 내는 것 외엔 별 다른 동작이 없다 ❗️ x 는 외부에서 받는 거니까 순수함수가 아니지 않은가? -> 인자로 받기 때문에 순수함수가 맞음! 하지만 이럴 경우👇엔 순수함수가 아니다 Side Effect const sum = (x) => { return num + 1.. 2022. 8. 8. 인스타 main창 클론 react편 정말 많은 고민과... 많은 구글링을 요했던... main창 react 구현... 와아 🎉 Main.js 👇 구현하고자 했던 것 1. 댓글 기능 구현 (map 함수를 쓸 것) 2. 댓글 하나 컴포넌트로 나누기 그리고 짜여진 순서를 정리해보자면 1. input 값 받을 수 있게 value(commentInput) 설정해서 useState 주기 2. input에 onChange가 일어나면 setcommentInput으로 받을 수 있게 함수 짜줌! 3. 받은 input 값을 배열화해서 '댓글 입력 - >댓글창에 댓글 올리기' 를 담을 동적인 요소가 필요해 setFeedComments로 useState 주었다. 4. 버튼에 onClick 일어날시 handleComment 이 일어나게 넣어주었다 5. 배열에 In.. 2022. 8. 7. 인스타 login창 클론 react편 일전에 html-css-js로 만들어 두었던 요 👆 login 창 js 코드를 모두 버리고 (🥹🥹) 몽땅 jsx 문법으로 다시 짰다. 기존 html은 그대로 쓰되 css를 scss로 바꾸었고 js만 jsx 문법으로 바꿈! 포스팅은 jsx만 다룰 예정 :) react 👇 react 관련 포스팅, 읽어보고 가세요! https://0119eunji.tistory.com/23 React 정의와 특징 react 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 ui 즉 사용자 인터페이스를 구축하는데 사용할 수 있는 Js 라이브러리 선언형 컴포넌트 기반 절차적/ 선언적 절차적 - 원하는 결 0119eunji.tistory.com JSX(JavaScript Syntax eXtension) 리액트에서 사용하는 자.. 2022. 8. 6. 이전 1 ··· 11 12 13 14 15 16 17 다음 728x90 반응형
