상품 판매 순위를 list에 1,2,3,4 하드코딩 하거나 스크립트 처리 하지 않고 SCSS의 반복문을 이용하여 가상요소로 삽입하는 방법 위와 같이 작은 원 안에 숫자를 순차적으로 넣어야 할 때 사용할 수 있다. @for 변수 from 시작숫자 through 끝 숫자 를 선언하고 중괄호로 감싸준다. {} 그리고 가상요소의 content에 #{$i}를 사용해 숫자를 적용해주면 된다. 내부에 숫자를 텍스트로 넣지 않고 별도로 배열을 선언해서 적용하는 방법은 검색하면 다수 나오는데 이렇게 순서를 순차적으로 적용하는 방법이 없어 공유한다. ul { li{ position: relative; //순위 표시 //$i라는 변수가 1부터 10까지 (순위를 표시할 것이 더 많다면 10을 더 늘려주면 된다) @for $i..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-02-12 21:00 6일차 안내 - 책 요약 정리 4장 프로젝트 개발 4.2 레이아웃 네비게이션 바 chakra-ui를 이용해 네비게이션 바 UI 생성 4.2 개별 영화 상세 정보 영화 상세 정보 리졸버 영화의 자세한 개별 정보를 보여주기 위해서는 목록이 아닌 각 영화 하나에 대한 요청을 처리하는 필드가 필요 이를 위해 film 쿼리 필드를 생성 개별 영화 페이지 구성 영화 개별 UI를 보여주기 위해 영화별 페이지 구성 react-router의 URL 파라미터를 통해 동적으로 구성하고 파라미터 값으로 film 필드에 대한 쿼리를 실행 react-router의 컴포넌트에서 ..

useReducer & useEffect - 입력은 전체 폼의 일부이다. - 코드가 너무 일찍 실행된 경우에는 useEffect는 state 업데이트 후에만 실행됐었다. - 의존성은 state 전체이지 유효성이 아니다. - 객체의 특정 속성을 추출하는 객체 디스트럭처링을 이용할 수 있다. - const { isValid: emailIsValid } = emailState; 로 emailState의 isValid state를 emailIsVaild라는 상수로 별칭할당을 할 수 있다. 중첩 속성을 useEffect에 종속성으로 추가하기 - useEffect()에 객체 속성을 종속성으로 추가하기 위해 distructuring을 사용 const { someProperty } = someObject; useEff..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-02-05 21:00 5일차 안내 - 책 요약 정리 4장 프로젝트 개발 4.2 레이아웃 페이지 처리 SPA의 경우 ( MPA: 멀티페이지 (여러 개의 페이지를 받아오는 경우))실제 페이지를 이동시키지 않고, 새로운 페이지를 화면상에 렌더링 할 수 있도록 한다. react-router-dom으로 사용 (책과 다르게 react-router-dom을 v5 -> v6 으로 올리고 문법도 수정해야함 https://discord.com/channels/905448761218699295/1045647017440968704/1071780891753455616 Discord - A New ..

Permissions 0644 for '/~/.ssh/펌키.pem' are too open. 이라는 응답이 나오면 ~ 경로 또는 root 경로 내의 .ssh 폴더로 이동해서 chmod 400 펌키.pem 를 입력해주면 권한이 변경되어서 접속이 가능해진다.

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-01-29 21:00 4일차 안내 - 3일차 115페이지까지는 별도로 따라왔음 책 요약 정리 4장 프로젝트 개발 4.1 영화 목록 페이지네이션 커서 기반 페이지네이션 / 오프셋 기반 페이지네이션 커서 기반 페이지네이션 오프셋 기반 페이지네이션 방법은 DB의 처리 방식과 관련이 깊고 대중적으로 사용되고 있지만 데이터가 많아지면 많아질수록 DB에 부하가 커진다. 커서 기반 페이지네이션은 클라이언트에서 특정 데이터의 고유 정보를 서버로 전송하고, 서버는 그 특정 고유 정보 이후의 데이터만 가져온다. 고유 아이디와 같은 인덱스를 기준으로 데이터를 비교하므로 전체 데이터베이스를 스캔..