코드스테이츠

4월 11일부터 6개월간 프론트엔드 실무를 기반으로 한 프로젝트를 공부하게 되었습니다.9시에 진행한 코드스테이츠 프론트엔드 1일차 OT에 참석하여 강사님들도 만나뵙고 앞으로 어떤식으로 진행이 될 것인지설명을 들으며 여러 이야기를 듣게 되었습니다.자기주도적 학습 / 협업

Section1 HTML의 기초HTML = 웹 페이지의 구조를 담당하는 마크업 언어 (구조)CSS = 디자인 요소를 시각화하는 스타일시트 언어 (스타일)JavaScript = 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 만들어주는 프로그래밍 언어

Section1. Unit3 css기초CSS = 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다. HTML로 웹 페이지의 구조를 잘 세우고 나서, CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있습니다.인터페이스란 - 컴퓨터와

우리가 잘 알고 있는 웹 사이트를 방문해 보면 각 요소의 위치가 웹사이트의 목적에 맞게 배치된 것을 볼 수 있습니다.이와 같이 각각의 요소를 목적에 맞게 배치하는 것을 레이아웃 이라고 합니다.웹 개발자에게 웹 사이트에 목적에 맞게 화면을 만드는 것은 즉 레이아웃은 자바

JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어입니다. 그래서 HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동합니다. 혹은 따로 Node.js라는 자바스크립트 런타임을 컴퓨터에 설치해야 합니다.REPL(Read-

자바스크립트에서 특정한 조건에 따라 코드가 실행되도록 하는 방법을 조건문이라고 합니다. 조건문을 활용한다면, 아침 6시가 되면 알람을 울리도록 하거나, 물이 100도가 될 때까지만 가열하거나 하는 프로그래밍을 할 수 있습니다.가장 대표적인 조건문인 if문은 주어진 조건

배열은 순서가 있는 값을 의미합니다.배열에서 값은 요소(element)라고 부릅니다.순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매깁니다.대괄호를 이용해서 배열을 만들고, 각각의 요소는 쉼표로 구분해줍니다.존재하지 않는 요소는 undefined로 나

참조자료형 얕은 복사와 깊은 복사 스코프 클로저 ES6

자바스크립트에도 버전이 있는데 바로 자바스크립트의 표준인 ECMAScript(이하 ES)입니다.2015년에 출시된 ES6에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었습니다. let , const , 템플릿 리터럴 등이 ES6에서 추가 적용된

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니

JavaScript에 특별한 대우를 받는 일급 객체(first-class citizen)가 있습니다. 대표적인 일급 객체 중 하나가 함수입니다. JavaScript에서 함수는 아래와 같이 특별하게 취급됩니다.변수에 할당(assignment)할 수 있다.다른 함수의 전달

객체 지향 프로그래밍(OOP, Object-oriented programming)은 사람이 세계를 보고 이해하는 방법과 매우 흡사합니다. 코드를 추상화하여 직관적으로 생각할 수 있기 때문에, 이미 오래전부터 프로그래밍 방법론으로 매우 빠르게 적용되었습니다.객체 지향 프

비동기동기와 비동기비동기 예제CallbackPromiseAsync/Await

Node.jsNode.js 모듈 사용법Node.js 공식 문서fetch Apifetch를 이용한 네트워크 요청axios

리액트는 프론트앤드 개발을 위한 JS 오픈소스 라이브러리 입니다.리액트는 선언형이다.리액트는 컴포넌트 기반이다.리액트는 다양한 곳에서 활용가능하다.코드를 자세히 분석하지 않고도 코드의 의도를 알 수 있게 해주는 것리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS

웹페이지에서는 페이지를 유저에게 보여줄 때 즉, 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달받아와서 렌더링을 했습니다. 하지만, 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라, 속도 저하 등의 문제가 발생하게 됩니다. React에서는 이

쇼핑몰에서 옷을 주문하는 모습을 상상해 보세요. 원하는 옷을 장바구니에 담고 결제를 하려고 보니 다른 옷이 더 마음에 듭니다. 장바구니에 담은 옷을 빼고, 새로운 옷을 담아 결제를 합니다. 이 상황에서 장바구니에 담기는 옷은 바뀌고 내가 결제해야 할 금액도 즉각적으로

웹 애플리케이션 아키텍쳐클라이언트-서버 아키텍쳐클라이언트 - 서버 통신과 API브라우저의 작동원리(보이지 않는 곳)URL과 URIIP와 포트도메인과 DNS크롬 브라우저 에러 읽기HTTPHTTP MessagesHTTP RequestsHTTP Responses브라우저의 작

위의 그림처럼 웹페이지에서 일부분만 바꾸고 싶다면 어떻게 해야 할까요? 그럴 때 우리는 AJAX를 사용합니다.AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpReq

REST APIREST API 디자인REST 성숙도 모델 - 0단계REST 성숙도 모델 - 1단계REST 성숙도 모델 - 2단계REST 성숙도 모델 - 3단계Open API와 API KeyPostmanPostman 사용하는 방법Postman으로 날씨 받아오기

웹 개발에서 사용하는 대표적인 클라이언트는 브라우저입니다.브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹페이지를 받아오는 GET요청에 사용합니다.브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을

1\. React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징입니다.2\. 상향식(bottom-up)으로 앱을 만듭니다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다.그래서 여러분이 기획자나 PM, 또는

Effect HookSide EffectEffect Hook 기본Effect Hook 조건부 실행컴포넌트 내에서 Ajax 요청과제 2.

혹시 콘솔창에서 다음과 같은 에러를 보신 적 있나요? 웹 개발을 하다 보면, 이 에러를 적어도 한 번쯤은 겪게 되고, 그리고 높은 확률로 이 에러 때문에 골머리를 앓는 경험을 하게 되실 텐데요. 바로 CORS 에러입니다.CORS가 대체 뭐길래 이런 에러를 띄우는 건지

MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node.js를 지칭하는 말입니다. 이 중에서 Express는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는

1\. Promise의 기능과 필요한 이유에 대해서 설명해 주세요.프로미스는 비동기 작업을 처리하기위해 자바스크립트에서 사용하는 문법입니다. 여기서 비동기 작업이란 다른 코드들과 실행 순서를 공유하지 않는 작업을 의미합니다. 이런 비동기 작업에 순서를 부여하고 싶을 때

재귀 : 원래의 자리로 되돌아가거나 되돌아옴위 정의를 코드로 표현하면 다음과 같이 작성할 수 있습니다.이 함수를 호출하면recursion 함수를 호출했더니, 자기 자신을 끝없이 호출하면서 같은 코드가 계속해서 실행되는 것을 볼 수 있습니다. 이 recursion 함수처

UI/UXUIUXUI와 UX의 관계UI 디자인모달토글탭태그자동완성드롭다운아코디언캐러셀페이지네이션무한 스크롤GNB,LNB그리드시스템컬러 그리드 시스템 예시

UX 디자인좋은 UX를 만드는 요소유용성(Useful) : 사용 가능한가?사용성(Usable) : 사용하기 쉬운가?매력성(Desirable) : 매력적인가?신뢰성(Credible) : 신뢰할 수 있는가?접근성(Accessible) : 접근하기 쉬운가?검색 가능성(Fin

UI/UX를 디자인할 때 꼭 작성해 봐야 하는 와이어프레임과 프로토타입에 대해서 학습합니다. 와이어프레임과 프로토타입은 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것이라는 공통점을 가지며, 두 개념을 혼동해서 사용하는 경우도 종종 있습니다. 하지만 둘은 작

구성 요소 중심 개발( CDD: Component-Driven Development ) 은 구성 요소를 중심으로 빌드 프로세스를 고정하는 개발 방법론입니다. 구성 요소 수준에서 시작하여 페이지 또는 화면 수준에서 끝나는 "아래에서 위로" UI를 구축하는 프로세스입니다품

상태란 변하는 데이터 즉, UI에 동적으로 표현될 데이터를 말합니다.함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인을 말하며대표적인 예: 네트워크 요청(백엔드 API요청)로컬 = 특정 컴포넌트 안에서만 관리되는 상태로컬 상태를 구분하는 것은 쉽습니다.

header :nav :aside :main :article :section :hgroup :footer :

SEO를 위한 meta 요소오픈 그래프 (open graph)

컴퓨터와 스마트폰만 있으면 정보를 찾고, 사람들과 소통하고, 물건을 살 수 있습니다. 클릭 몇 번, 터치 몇 번이면 우리 집 문 앞에 내가 산 물건, 음식이 배달되기도 합니다. 그런데 당장 화면이 고장 난 상태에서 물건을 사려면 할 수 있을까요? 아마 상상만 해도 어렵

택배를 보내면 목적지에 도착할 때까지 어떤 과정을 거치게 될까요? 단계별로 생각하면 아래와 같을 것입니다.택배 기사님이 택배를 수거해 갑니다.수거한 택배를 가지고 출발지의 터미널로 이동합니다.출발지 터미널에서 목적지별로 택배들을 분류하여 발송합니다.도착지 터미널에서 택

이제 응용 계층의 대표적인 프로토콜인 HTTP에 대해 알아봅시다. 앞서 설명했듯이 HTTP는 웹 사이트를 이용하기 위해 사용합니다. 따라서 프론트엔드, 백엔드 상관없이 웹 개발은 모두 HTTP를 기반으로 하기에 중요한 특징들을 알아두는 것이 중요합니다.HTTP(Hype

Cookie 쿠키는 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법입니다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있습니다. 그러므로 쿠키를 이용하는 것은 단순히 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로

해싱(Hashing) 레인보우 테이블과 솔트 해싱의 목적 실습 Token 토큰 인증 방식 토큰 인증 방식의 등장 배경 토큰 인증 방식의 흐름 토큰 인증 방식의 장점 JWT (JSON Web Token) JWT의 구성 Header Payload S

자료구조 자료구조의 분류 자료구조의 특징 Roadmap 유닛의 핵심 유닛 학습 방식 Stack의 정의 Stack의 구조 Stack의 특징 1. LIFO(Last In First Out) 2. 하나의 입출력 방향을 가지고 있습니다. 3. 데이터는 하나

Tree의 정의 Tree의 구조와 특징 깊이 (depth) 레벨(Level) 높이(Height) 서브 트리(Sub tree) 용어정리 Tree의 실사용 예제 이진트리(Binary tree) 이진트리 특징 이진 탐색 트리(Binary Search Tre

소프트웨어 개발 방법론이란 소프트웨어 개발에 대한 체계적인 접근 방식을 의미합니다. 소프트웨어 개발 방법론은 소프트웨어 개발 과정에 필요한 단계, 활동, 산출물, 순서 등을 정의하고 설명합니다.요구사항 분석소프트웨어가 해결해야 할 문제와 고객의 요구사항을 파악하고 정의

Rest API란 Representational State Transfer 즉, REST라는 아키텍처 스타일을 따르는 API(Application Programming Interface)입니다.API 개발자는 REST뿐만 아니라 여러 아키텍처를 사용해 API를 설계할

Virtual DOM React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있습니다. 이 가상의 DOM 객체는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화

React 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능입니다.뛰어난 재사용성과 직관성을 갖는 함수형 컴포넌트와 훅은 사용

React Hook은 렌더링 최적화를 위한 Hook도 존재하는데, useCallback과 useMemo가 바로 그 역할을 하는 Hook라고 배웠습니다.useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook입니다. useMemo는 값의

개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다.여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다. 이를

React는 현재도 계속해서 업데이트가 되고 있는 오픈소스 라이브러리입니다. 이번에 React가 버전 18로 업데이트가 되면서 많은 부분이 바뀌었는데, 가장 빠르게 알아볼 수 있는 변화는 콘솔 창에 이전에 보이지 않던 경고문이 보인다는 점입니다.해당 경고문은 이제 Re

디자인 시스템(Design System)은 디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로 구성된 시스템을 의미합니다. 이는 전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와줍니다.종종 디자인 요소를 모은 UI 키트를 디자인 시스템으로 혼

최근 스마트폰의 보급과 기술 발전으로 인해 웹 환경이 빠르게 변화하고 있습니다. 데스크톱과 모바일에서 더 나아가 태블릿, TV, 냉장고, 자동차 등 다양한 기기에서 웹 환경이 제공되고 있습니다. 이러한 변화에 따라, 디자이너와 프론트엔드 개발자들은 환경에 상관없이 일관

TypeScript란 TypeScript의 등장 배경 TypeScript를 사용했을 시 장점 Boolean(불리언) 타입 Number(숫자) 타입 String(문자열) 타입 Array(배열) 타입 Tuple(튜플) 타입 Object(객체) 타입 Any

JavaScript에서 함수는 모든 애플리케이션의 기본적인 구성 요소입니다. JavaScript에서의 함수와 마찬가지로 TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 등으

TypeScript의 열거형(Enum) 숫자형 열거형(Enum) 문자형 열거형(Enum) 역 매핑 (Reverse mappings) 실습 - 열거형(Enum) JavaScript를 TypeScript로 포팅 하기 - 열거형(Enum) TypeScript의 인

타입 별칭(Type Aliases)은 타입의 새로운 이름을 만드는 것입니다. 이는 새로운 이름으로 기존의 타입을 참조하는 것을 의미합니다. 타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 사용하여 작성합니다. 간단한 예시를 보겠습니다.원래 stri

JavaScript에서 클래스는 ES6(ECMAScript 2015)에서 처음 도입되었습니다. 클래스를 사용하면 객체를 생성하고 객체의 속성과 메서드를 정의할 수 있습니다. 예를 들어, 다음과 같은 JavaScript 클래스를 만들 수 있습니다.위 코드에서 Person

아마존 웹 서비스(AWS) 아마존 웹 서비스(AWS)란 아마존이 자사의 노하우를 살려 제공하고 있는 ‘클라우드 컴퓨팅 서비스’를 의미합니다. AWS에는 컴퓨팅, 스토리지, 데이터베이스, 분석, 네트워킹, 모바일, 개발자 도구, 관리 도구, IoT, 보안, 엔터프라이