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

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

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

# 단축키 더보기 기본 단축키 복사하기 : 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은 왜 생겨나게 되었을까요? 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수..

# 웹 애플리케이션 아키텍처 클라이언트-서버 아키텍처(=2티어 아키텍처) : 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 클라이언트 : 리소스를 사용하는 앱 서버 : 리소스를 제공(serve)하는 곳 클라이언트와 서버는 요청과 응답을 주고받는 관계입니다. 클라이언트는 서버로 요청을 보내고, 서버는 요청에 따라 적절한 응답을 클라이언트로 회신합니다. 필요에 따라 서버는 데이터베이스에 요청을 보내고, 회신 받은 응답을 활용합니다. 일반적으로 서버는 리소스를 전달해 주는 역할만 담당합니다. 데이터베이스 : 리소스가 별도로 마련하는 저장공간 데이터베이스는 창고와 같은 역할을 합니다. 이처럼 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처라고 부릅니다. 클라이언트..

# SPA SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다. * SPA와 MPA의 특징 SPA (Single Page Application) MPA (Multi-Page Application) 페이지 로딩 방식 단일 페이지에 모든 콘텐츠 포함 각 페이지 별로 새로운 요청 네비게이션 클라이언트 측 라우팅을 사용 서버 측 라우팅 및 페이지 전환 로딩 시간 초기 로딩 시 자원을 한 번에 받음 각 페이지마다 로딩이 필요 초기 로딩 속도 초기에는 모든 자원을 로드해야 함 각 페이지는 필요할 때마다 로드 서버 요청 데이터를 비동기적으로 요청..

# 터미널 명령어 리액트 첫 시간 페어와 함께하는 'React Twittler Intro' 만들기 코드를 받아서 vscode 프로그램을 켜주고 명령어 npm run test - 터미널에서 테스트 통과 항목, 여부 확인가능 명령어 npm run start - 터미널에 입력시 브라우저에서 기능구현 확인가능 npm run test npm run start # 과제 체크리스트 React Twittler 파일 구조 / ├── /React Twittler State Props │ ├── README.md │ ├── /public # create-react-app이 만들어낸 파일로 yarn/npm start로 실행 시에 쓰입니다 │ └── /src # React 컴포넌트가 들어가는 폴더 │ ├── static # d..

# React ? 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리 리액트의 3가지 특징 선언형 컴포넌트 기반 범용성 # JSX JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있습니다. JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아닙니다. 그렇다면 어떻게 해야 할까요? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 합니다. 이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX를 브라우저가 이해할..

Part 1 - 타이머 API 개요 이번 과제에서는 비동기를 이해하기 위해 비슷한 상황을 연출합니다. 가장 간단한 비동기 구현은 타이머 API를 이용하는 방법입니다. 지금은 API가 소통하기 위한 인터페이스라는 것만 알면 됩니다. 타이머 API는 setTimeout()이라는 메서드를 이용해 구현할 수 있습니다. 구현된 타이머 API는 여러분이 익히 아는 타이머 기능을 수행할 수 있습니다. callback과 promise, 그리고 async/await 키워드를 이용한 비동기 흐름을 제어하는 방법을 코드를 통해 살펴봅니다. 학습 목표 callback, Promise, async/await 구현 방법을 이해한다. Promise 실행 함수가 가지고 있는 두 개의 매개변수 resolve 와 reject를 활용할 ..

# 동기와 비동기 동기 (Synchronous)와 비동기 (Asynchronous)는 프로그램이 작업을 어떻게 처리하는지에 대한 두 가지 기본적인 접근 방식입니다. 동기 (Synchronous) 비동기 (Asynchronous) 실행 방식 순차적 (Sequential) 비순차적 (Non-sequential) 대기 여부 작업 완료까지 대기 (Blocking) 작업 완료를 기다리지 않고 다른 작업 수행 가능 (Non-blocking) 다른 작업 수행 가능 불가능 가능 코드의 간결성 상대적으로 간결함 복잡성이 증가할 수 있음 JavaScript는 싱글 스레드 기반으로 동작하는 언어입니다. 따라서 동기적으로 작동하게 됩니다. 그러나 JavaScript에서도 비동기 처리가 가능하다고 배우셨는데요. 어떻게 된 걸까..