저번 노답코드는 놔두고 새로 코드를 받아서 다시 처음부터 작성할 예정이다. 📋 주의사항 CSS를 한곳에서 수정하기 너무 여러 페이지에서 CSS를 수정하다 보니 화면이 엉망이 되었다.🥲 수정을 위해서 최소한의 페이지에서 CSS를 수정하기 컴포넌트 구분을 파일단위로 하기 저번 코드에서는 제일 최소한의 컴포넌트 파일위에 슬라이드를 겹쳐서 작성해서 재사용을 할수가 없게 되었다. 많은 요소들을 만든 이후에 이 사실을 알게되어서 난감했다. 🤯 미리 요소들을 구상하기 구현할 요소들을 미리 생각해두고 개발을 진행해야겠다. 피그마에 러프하게 먼저 스케치하기 코드 작성중에 필요한 다른 요소들을 떠올렸을때는 어디에 들어가야하는지 정한 후에 개발을 이어나가기 저번 파일을 작성하면서 느낀 주의사항은 일단 이정도가 있다. 레퍼런..

우와 구리다!!

#구현시작 개발자도구를 열어본다 체크로 풀수도있고 바로바로 설정할수있음 vscode가서 max-width지워 근데 리액트 슬릭의 화살표가 안보이는중! 오른쪽 옆에 틈이있음 배경이 하얀색이라서 화살표가 티가 안나는중 개발자도구에서 블랙설정 하니까 잘보임 코드로 다시가서 스타일을 수정하러간다. 코드의 104줄부터 수정했음! 왼쪽 화살표는 전체 폭때문에 안나옴 그래서 아이템 슬라이더에 가서 width 80줌 슬라이더에 마진을 준다 그러니까 중간으로 랭킹어쩌고가 중간으로 와짐 근데 마진 지우고 84줄 어라인 어쩌고 적으면 중앙정렬됨 # 아이템 슬라이더 지금은 요소들이 하드코딩이 되어있는데 프롭스를 받아서 표현할것! 프롭스를 받아서 재사용 가능하게 설계할것이다. 1. 슬라이더의 제목과 2. 맵핑 리스트 이렇게 두..

랭킹별 데이터랑 추천 아이템 자동 스크롤 되게 할거야 혹은 클릭시에 보여주게하거나... 직접 알고리즘을 짜서 슬라이더 구현을 해도 되고 라이브러리 사용을 권장함 리액트로 슬라이더를 어떻게 구현? 검색하면됨 리액트 슬릭! npm 에 들어가서 패키지에서 다운로드 수를 본다.. 인기없는건 라이브 버전별 호환성이나 이슈관리가 제대로 안될수도 있음.. 많이 쓰는거 선택해야지 코드 버저닝 및 호환성 업데이트 될 수 있다. 리액트 슬릭을 꼭 써라! 이건 아니지만 라이브러리 쓰는 경험도 익숙해져야 하니까 리액트 슬릭으로 슬라이드를 쓰라고 권장 슬라이더 구현은 직접하기 어려우면 리액트슬릭 사용하면 된다! 라이브러리는 어떤 슬라이딩에 대한것을 하나하나 짤 필요가 없이 옵션값만 넣으면 된다. 해당 라이브러리 개발자가 추상화..

# 메인 페이지 용어 설명 미션(Mission): 페이즈 내에서 완수해야 할 구체적인 목표나 과제를 의미합니다. 각 미션은 수행해야 할 주요 작업들을 포괄합니다. 서브젝트(Subject): 미션 안에서 다루어야 할 개별적인 주제나 과제를 의미합니다. 각 서브젝트는 미션의 일부를 이루며, 구체적인 기능 개발이나 컴포넌트 구축과 같은 작업들로 구성됩니다. 여기에는 미션을 완수하기 위한 세부적인 단계들이 포함됩니다. 활동: 서브젝트를 달성하기 위해 수행하는 구체적인 행동이나 작업을 말합니다. 이는 프로젝트를 진행하면서 실제로 해야 할 작업들을 포함하며, 프로젝트의 세부 구현 사항에 초점을 맞춥니다. 세부 지침: 활동을 수행하는 데 필요한 구체적인 지시사항을 제공합니다. 특정 기술이나 방법론, 코드 예시 등이 ..

마지막날에는 피그마 정리처럼 돌아가면서 보여주면서 이야기하기 어떤 프로젝트를 할지? 깃헙 포크 로컬에서 클론 한다음 프로젝트 진행하면 됨 마지막날 풀 리퀘스트를 날려주세요 코드 쓰는데 있어서 어디서 어려움을 겪나? 만약에 프로젝트 진행하다가 어려움이 있다 하면? 세션에서 질문 해도되고 아고라 스테이츠에 질문 남겨도 되고 프로젝트 들어가기 전에 실제 프로젝트와 비슷하게 준비했음 3일동안 하는것은 미션을 완료 할 수 있도록 속력을 내보기 쇼핑몰 웹사이트.. 프로젝트를 진행하기 위해 서버? 서버는 먼저 작성을 해 두었음 cozShopping API 버전 3을 사용랗럿 카테고리 전체상품 랭킹 상품 상세 등등 여러 종류의 api가 있음 프로젝트 진행하면서 4개만 사용 api문서에 쿼리파라미터 있음 5하면 5개만 ..

# React.lazy() React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링할 수 있습니다. React는 SPA(Single-Page-Application)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있다고 앞의 챕터에서 학습했습니다. React는 React.lazy를 통해 컴포넌트를 동적으로 import를 할 수 있기 때문에 이를 사용하면 초기 렌더링 지연시간을 어느 정도 줄일 수 있게 됩니다. import Component from './Component'; /* React.lazy로 dynamic import를 감쌉니다. */ const Component = React.lazy(() => import('./Component')); 이 React...

# 코드 분할 Code Spliting 과거 : 대부분 React 앱들은 Webpack, Rollup과 같은 툴을 사용해 번들링(Bundling)합니다. 이렇게 하면 HTML 웹 페이지에 JavaScript를 쉽게 추가할 수 있기 때문입니다. 번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 페이지를 설정하는 데 필요한 호출 수가 적은 링크 태그 하나만 필요하게 됩니다. 모던 웹 이전의 웹 JavaScript 코드는 최소한의 수준으로 작성되었기 때문입니다. 코드 분할 아이디어 : 번들을 나눈 뒤 필요한 코드만 불러오면 어떨까? 번들이 거대해지는 것을 방지하기 위한 좋은 해결 방법은 번들을 물리적으로 나누는 것입니다. 코드 분할은 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webp..

https://www.youtube.com/watch?v=yjuwpf7VH74&t=9s 스택블리츠 - React 이용 #1. 12줄 left1 컴포넌트 생성 6줄) 생성 후 부모컴포넌트 안에 삽입 컴포넌트와 컴포넌트 사이 경계를 분명하게 하기 위해 6줄 에 container 이라는 ID를 줌 #2 css파일로 가서 container와 container의 자식 요소들에게 css 설정 해준다. #3 app.js로 돌아와서 컨테이너 안에 Root 생성 제일 밑에 Left2 생성 후 L2를 L1안에 넣고 L3을 만들어서 L2안에 넣는다. #4 루트 컴포넌트에 state를 설정 5줄) 기본값이 1인 넘버 스테이트 이것을 left3에게 주려면? #5 9줄 )먼저 Left 1에게 값을 준다. 그러면 left1은 pr..

# 단축키 더보기 기본 단축키 복사하기 : Command + C 붙여넣기 : Command + V 잘라내기 : Command + X 복제하기 : Command + D 혹은 Option 누른 상태로 드래그 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭 그룹으로 묶기 : Command + G 프레임으로 묶기 : Command + Option + G 그룹, 프레임 해제하기 : Command + Shift + G 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기 오토 레이아웃 오토 레이아웃 추가하기 오토 레이아웃 적용할 요소 선택 → Shift + A 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택 오토 레이아웃 제..

# UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있습니다. # GUI GUI(Graphical User Interface, 그래픽 사용자 인터페이스) GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말합니다. GUI의 예시는 우리가 보는 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있습니다. 프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미합니다. # UX UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어..

# SOP SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻합니다. 한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책인데요. 여기서 말하는 ‘출처(Origin)’는 다음과 같습니다. 출처는 프로토콜, 호스트, 포트의 조합으로 되어있습니다. 이 중 하나라도 다르면 동일한 출처로 보지 않습니다. 프로토콜의 기본 포트는 443입니다. 따라서 https://caramel-corn.tistory.com/는 https://caramel-corn.tistory.com/:443 과 동일합니다. ⇒ 두 URI는 프로토콜, 호스트, 포트가 모두 같은 동일 출처입니다. 그렇다면 SOP은 왜 생겨나게 되었을까요? 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수..