코드스테이츠 프론트엔드

오늘은 코드스테이츠 부트캠프 대망의 오리엔테이션 날이다..! 🐧 오늘은 처음이니 간단하게 굵직굵직한 내용들만 블로깅을 해볼려고 한다. 우선 개발자가 되기 위해 부트캠프를 진행하면서 아래의 능력들을 길러줘야 한다고 한다. 검색을 통해 스스로 필요한 지식을 찾는 능

Ch.1 웹 개발 이해하기 Visual Studio Code (VScode) Microsoft에서 개발한 코드 에디터로 프로그램, 웹 사이트, 웹 애플리케이션 등을 만들 수 잇는 코드 에디터 장점 OS와 상관없이 사용이 가능 JavaScript, HTML, CSS를

CH.1 CSS (Cascading Style Sheets) 기초 📌 CSS 🔸 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어로, 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 도움. 🔸 개발자는 이 CSS로 웹 애플리케이션에

CH.1 레이아웃 📌 와이어프레임 (Wireframe) 🔸 화면의 영역을 구분하는 목적으로 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계. 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 📌 목업 (Mock-up) 🔸

CH1. 코드 기초 📌 코드 실행 🔸 StackBrlitz : JavaScript를 작동할 수 있는 웹사이트 🔸 node 파일명.확장자 : 코드를 구체적으로 열어 확인가능 🔸 node : 작성한 코드에 대해서 간단한 테스트 디버깅을 할 수 있도록 바로 실행결과를

Ch1. CLI (Command-Line Interface) 🔸 CLI : WSL 리눅스용 윈도우즈 하위 시스템의 약자. 📌 CLI 명령어 🔸 GUI(Graphical User Interface) : 🔸 I/O(Input/Output) : "아이오", 컴퓨터

Ch1. 배열 (array) 📌 배열 기초 🔸 순서가 있는 값으로, 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서 위치를 가리키는 숫자를 인덱스(index) 라고 함 (인덱스는 0부터 번호를 매김). 🔸 대괄호(square bracke

CH1. 참조 자료형과 원시 자료형 🔸 자료형: 값(value)의 종류. 각각의 자료형은 고유한 속성과 메서드를 가짐. 크게 두 가지로 구분하며 원시 자료형과 참조 자료형이 존재. 📌 원시 자료형(primitive data type) 🔸 number, stri

CH1. DOM 기초 📌 HTML에 JavaScript 적용하기 DOM (Document Object Model) 🔸 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model. 즉 HTML로 구성된 웹 페

CH1. 고차 함수 📌 일급 객체 (first-class citizen) 🔸 JavaScript에서 대표적인 일급 객체 중 하나인 함수는 아래와 같이 특별하게 취급됨. 🔸 변수에 할당(assignment) 가능 함수를 배열의 요소나 객체의 속성 값으로 저장 가

Ch1. 객체 지향 (OOP, Object-oriented programming) 🔸 객체 지향 프로그래밍이란 프로그램을 객체 라는 독립적인 단위로 나누고, 각 객체는 데이터와 그 데이터를 조작하는 메서드를 포함함. 📌 클로저 모듈 패턴 🔸 객체.메서드() :

UI (user Interface) : 사람들이 컴퓨터와 상호 작용하는 시스템을 의미. 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템.🔸 GUI(Graphical User I

CH1. 비동기 📌동기(synchronous) & 비동기(asynchronous) 🔸 동기 : 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것. 🔸 비동기 : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것.

CH1. React 특징 🔸 선언형(Declarative) : 코드를 자세히 적어놓지 않고도 코드의 의미를 알수 있게 작성, HTML/CSS/JS를 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍. 🔸 컴포넌트 기반 (

❗웹페이지는 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달받아서 렌더링 한다. 하지만 규모가 커질수록 사용자와 상호작용이 많아지고 그에따라 속도 저하 등의 문제가 발생한다. 이를 해결하기 위해 SPA를 사용하는 것이다.❗ CH1. React SPA (

CH1. React State & Props 📌 Props 🔸 컴포넌트의 속성(property). 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값으로 변하지 않음. 🔸 Props를 함수의 전달인자(arguments)처럼 전달받고, 이를 화면에 어떻게 표시되는지

CH1. 웹 애플리케이션 아키텍처 개요 📌 클라이언트 - 서버 아키텍처 (Client Server Architecture) >🔸 쇼핑몰앱은 인터넷 연결이 없으면 작동하지 않는데, 이는 상품 정보를 인터넷에 존재하는 서버로 부터 받아오

CH1. REST API (Representational State Transfer API) 📌 REST API 디자인 REST API 🔸 소프트웨어 프로그램 아키텍처의 한 형식으로, 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고 HT

CH1. React 데이터 흐름 📌React 데이터 흐름 🔸 React는 단방향 데이터 흐름을 가짐. 🔸 하지만 하위컴포넌트에서 발생한 상태변경 함수가 상위컴포넌트의 상태를 변경시키는 경우가 존재할 수 있는데 이를 역방향 데이터 흐름이라고 함. > 예를 들어,

🔸 같은 출처(origin)의 리소스만 공유가 가능.🔸 출처는 프로토콜, 호스트, 포트의 조합으로, 이 중 하나라도 다르면 동일한 출처로 보지 않음.🔸 SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줌. 즉, 해킹 등의 위협으

나만의 아고라 스테이츠 만들기

CH1. 재귀 (Recursion) 📌 재귀의 이해 재귀의 개념 🔸 재귀는 원래의 자리로 되돌아가거나 되돌아온다는 뜻. 🔸 자기 자신을 호출하는 함수를 재귀 함수라고 함. 재귀로 문제 해결하기 🔸 반복적인 작업을 해야하는 문제를 좀 더 간결하게 작성할 수 있음

CH1. Component Driven Development 📌 CDD 🔸 컴포넌트를 모듈 단위로 개발하여 UI 구축에 도달하는 개발 및 설계 방법론. 🔸 기본적인 컴포넌트 단위부터 시작해서 UI 뷰를 구성하기 위해 점진적으로 조립(결합)해가는 상향적 성향을 띔.

CH1. 상태관리 📌 전역 상태 관리 🔸 상태(State) : 동적으로 변하는/표현될 데이터. 이 상태를 다룰 때, Side Effect를 잘 고려해야 함. 🔸 Side Effect : 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 (ex

CH1. 웹 표준 📌 웹 표준의 개념 > 2000년대 초반에는 인터넷 익스플로러에서는 작동이 되어도 사파리나 파이어폭스 같은 다른 브라우저에서는 작동이 되지 않는 등 브라우저간 호환이 되지 않아서 화면이 아예 정상적으로 나오지 않는 일도 있었음. 때문에 개발자들은 각

CH1. TCP/IP 📌 네트워크의 시작 > 기존에 회선교환 방식으로 네트워크를 구축하다가 당시 미 국방성에서 냉전시대에 핵전쟁을 대비하기 위해 통신망 구축을 위한 아르파넷(ARPANET) 프로젝트에서 패킷교환 방식으로 네트워크를 구축하게 됨. 이는 오늘날 우리가

HTTPS 사설 인증서 발급 및 서버 구현 ngrok으로 터널링하기 > 📍 로컬에서 개발한 애플리케이션을 외부로 공유할 때(호스팅), 아래와 같이 두가지 상황이 존재 배포를 통한 외부 공유 : Amazon의 AWS, Microsoft의 Azure, Google의 G