[코드스테이츠] 프론트엔드 부트캠프 (SEB_FE_45)

오늘은 코드스테이츠 프론트엔드 부트캠프 첫날!코드스테이츠 부트캠프는 Software Engineer Bootcamp라는 의미로 SEB라고 축약해서 부른다.첫날이니만큼 강의보다는 전체적인 학습 방향을 알려주는 OT를 진행하였고, 이에 대해 간략한 요약과 느낀점을 정리하고

📖 강의 내용 및 개념 정리목차웹 개발 이해하기HTML 기초HTML 심화배운 내용을 내 것으로 만드는 과제2023.04.11 리뷰HTML: Structure 구조를 담당하는 마크업 언어CSS: Presentation 디자인 요소를 시각화하는 스타일 시트 언어JS: 단

📖 강의 내용 및 개념 정리목차CSS 기초박스모델CSS selector스타일 상속선택자 우선순위배운 내용을 내 것으로 만드는 과제2023.04.13 리뷰CSS (Cascading Style Sheets)는 웹 페이지의 레이아웃과 스타일을 정의하는 스타일시트 언어CSS

📖 강의 내용 및 개념 정리목차와이어 프레임Flexbox배운 내용을 내 것으로 만드는 과제2023.04.14 리뷰와이어프레임(Wirefram): 레이아웃, 즉 화면의 영역을 구분하는 것목업(Mock-up): 데이터가 있다고 가정하고 실제 API response와 동일

오늘은 복습 시간과 페어 프로그래밍 시간을 가졌다.지난 계산기 만들기 페어프로그래밍 과제를 진행하고 나서 따로 공부하고 코드를 추가하면서 생긴 궁금증이 있었는데,위 사진처럼 각 flex의 아이템은 flex: 1 1 auto;인데 그 안에 콘텐츠의 길이에 따라 길이가 달

📖 강의 내용 및 개념 정리목차자바스크립트란?타입변수연산자2023.04.18 리뷰주요 브라우저에서 지원하고 기본 언어로 사용됨DOM 조작을 통해 인터랙티브한 웹을 만들 수 있음자바와 자바스크립트 언어는 관련이 있을까?정답은 "없다"이다.지금도 유명하지만 그 당시 많이

📖 강의 내용 및 개념 정리목차조건문반복문함수2023.04.19 리뷰===: 두 피연산자가 동일하면 true, 아닐 경우 false!==: 두 피연산자가 동일하지 않으면 true, 동일할 경우 false\>, <, >=, <=cf) 주의! =>는 비교연산자

오늘은📖 강의 내용 및 개념 정리목차...로 시작하는 것이 아닌 Chat GPT와 대화를 통해 원하는 정보 얻어내기~! 로 시작하려고 한다.내일부터 지금까지 학습한 내용을 토대로 "계산기에 기능 붙이기"를 할 예정인데, 이를 개인 프로젝트 위에서 해보고 싶었다.개인

📖 강의 내용 및 개념 정리목차CLI 개요 및 자주 쓰는 명령어Node.jsgit1 - 1) 그래픽 사용자 인터페이스란?그래픽 사용자 인터페이스(GUI): 사용자가 편리하게 사용할 수 있도록 입출력 등의 기능을 알기 쉬운 아이콘 따위의 그래픽으로 나타낸 것이다. (출

📖 강의 내용 및 개념 정리오늘은 배열과 객체 관련하여 이해도 자가 점검 리스트를 참고하여 내용을 정리하고자 한다.배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.특정 인덱스의 요소 조회특정 인덱스의 요소 변경length 속성을

📖 강의 내용 및 개념 정리목차원시 자료형과 참조 자료형원시 자료형원시 자료형의 특징참조 자료형참조 자료형의 특징원시 자료형은 변경 불가능한 값(immutable value)이다?원시 자료형과 참조 자료형의 복사 및 재할당 관련 차이점원시 자료형의 복사 -> 값 복사

📖 강의 내용 및 개념 정리목차스코프와 주요 규칙변수 선언과 스코프변수 선언할 때 주의할 점Scope는 범위라는 의미이며, 자바스크립트에서 "변수의 유효범위"를 의미한다.바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능하다.반면에, 안쪽에서 선언한 변수는 바

📖 강의 내용 및 개념 정리목차시작 전에 추천하는 아티클medium - 자바스크립트는 왜 프로토타입을 선택했을까렉시컬 스코프클로저 기초클로저 활용데이터를 보존하는 함수커링모듈 패턴끝나면서 추천하는 아티클medium - 자바스크립트 클로저로 Hooks구현하기github

📖 강의 내용 및 개념 정리목차spread/rest 문법구조분해할당화살표 함수특징1. 함수 스코프가 아닌 블록 스코프를 탄다.특징2. 매개변수가 1개 일 때 소괄호를 생략할 수 있다.특징3. 함수 코드 블록 내부가 코드 한 줄일 경우 중괄호를 생략하거나 return

📖 [강의 내용 및 개념 정리] 목차 Mocha, Chai 그 외 [Mocha, Chai] Mocha github - mochajs/mocha Mocha: Node.js 또는 브라우저에서 자바스크립트 작동을 테스트 할 수 있도록 도아주는 라이브러리. chai 공식

📖 강의 내용 및 개념 정리목차DOM 기초DOM 다루기DOM: Document Object Model의 약자, HTML 요소를 자바스크립트 Object처럼 조작할 수 있는 모델script 파일을 로드하는 <script> 태그의 위치와 속성을 활용하여 최적화하는

📖 강의 내용 및 개념 정리목차일급객체고차함수배열 내장함수고차함수를 써야 하는 이유와 추상화(abstraction)2023.05.10 리뷰일급 객체에 대해 설명하기에 앞서 비행기 좌석의 first class 또는 first class citizen 에 비유를 들곤 한

📖 강의 내용 및 개념 정리목차객체지향절차 지향 프로그래밍과 객체 지향 프로그래밍객체 지향 프로그래밍의 네가지 기본 개념메서드는 객체에 정의된 함수를 의미하며, 객체.메서드()로 호출할 수 있다.⚠️ 메서드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다. 그

📖 강의 내용 및 개념 정리목차프로토타입? 어디서 온 단어일까?자바스크립트에서의 프로토타입함수의 prototype 프로퍼티프로토타입 체인medium - 자바스크립트는 왜 프로토타입을 선택했을까이 글에서 저자는 자바스크립트의 "프로토타입 기반의 객체지향", "렉시컬스코

오늘의 과제는 underscore.js 라이브러리의 메서드 또는 자바스크립트의 배열, 객체 내장 메서드 중 일부를 구현하는 것이다.underscore.js는 배열 메서드가 브라우저에서 자체적으로 지원되지 않던 시절 만들어진 라이브러리라고 한다.전달인자(argument)

🤿 (5) 자바스크립트는 동기적으로 작동할까? 비동기적으로 작동할까?🤿 (6) 콜백(Callback) 함수, 프라미스(Promise) 객체, async/await 구문나중에 정리할 글new Promise((resolve)=>resolve( ) ) vs Promise

리액트는 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리선언형한 페이지를 작성하기 위해 HTML/CSS/JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용한 선언형 프로그래밍 지향컴포넌트 기반하나의 기능 구현을 위해 여러 종류의

리소스를 제공하는 곳(서버)과 리소스를 사용하는 앱(클라이언트)을 분리시킨 것기존 2티어 아키텍처에 데이터베이스가 추가된 형태tistory - \[Web] 웹 애플리케이션 아키텍처 개념 정리 및 구현, 기술github - 신입 웹 개발자일 때 알았더라면 좋았을 기본 웹

리액트는 페이지 단위가 아닌 컴포넌트 단위로 개발앱 만들 때: 컴포넌트 구조로 나누어 상향식으로 개발데이터 흐름(Props): 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하며 이는 하향식State: 해당 컴포넌트에서 수정 또는 삭제하기 위해 지정만약 자식 컴포넌트

같은 출처(Origin)의 리소스만 공유가 가능\* 출처(Origin): 프로토콜, 호스트, 포트의 조합SOP는 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여움지도, AWS 기능 등 외부 API를 사용할 때 SOP에 해당하지 않지만 COR

UI(User Interface)와 UX(User Experience)는 디자인과 사용자 경험을 다루는 두 가지 관점UI는 사용자가 디지털 제품 또는 서비스와 상호 작용하는 인터페이스를 의미이는 사용자가 시스템과 소통하는 방식을 포함하며, 디자인, 레이아웃, 색상, 아

45기 교육생분들 중 한분께서 자료 공유방에 Redux toolkit에 대해 학습할 때 도움이 되었던 유튜브 영상 하나를 공유해주셨는데,매우 도움이 되어 영상 내용을 간단히 정리하고자 합니다.유튜브 영상: Let’s Learn Modern Redux! (with Mar

위 코드처럼 props의 타입을 정의하였으며, prop types를 엄격하게 체크할 경우 isRequired가 붙지 않은 타음은 다음과 같이 기본 값을 입력해주어야 한다.flow는 자바스크립트의 정적 타입 체커이다.TypeScript는 마이크로소프트에서 개발한 Java

폭포와 같이 한 방향으로만 프로세스가 진행되는 개발 과정을 뜻하며 워터폴(Waterfall) 즉, 폭포수 개발 방식이라고 함계획에 의존하여 형식적인 절차를 끝까지 따라야 하고 중간에 뒤로 회귀할 수 없는 전통적인 개발 프로세스보다는 훨씬 효율적으로 개발에 착수 가능이러