코드스테이츠 Section 1

프로그래머스 프론트엔드 코스에서 떨어진 이후로 다른 교육들을 찾아보다 코드스테이츠에 지원하게 되었고 합격이라는 기쁜 결과를 받았습니다. 수업 듣기전 준비 수업을 듣기 위해서 준비해야 될 것들이 몇가지 있었는데 그중에서 제일 큰 산은 수업이 맥 기반으로 구성되어

✏️Achievement Goals / 변수 변수 Intro [x] 프로그래밍은 데이터 처리를 하는 것임을 이해한다. [x] 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다. [x] 변수의 선언과 값의 할당에 대해서 설명하고 코드로 작성할 수 있

함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다.함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설

✅ truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.✅ 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.✅ if 와 else if , else를 이해하고 무리없이 활용할 수 있다.✅ 논리연산자를 (&&, ||, ! ...

✅ 문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다.✅ 띄어쓰기 (" ") 로 문자열을 구분하여 배열로 바꿀 수 있다. str.split(" ")✅ 위의 배열의 요소 사이에 띄어쓰기 (" ") 넣어 다시 문자열로 바꿀 수 있다. str.split(" "

✅ 반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다.✅ for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다.✅ 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다.✅ fo

✅ HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.✅ HTML이 Markup language라는 것을 이해할 수 있다. \- "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.✅

✅ CSS의 사용목적, 기본 문법과 구조를 이해할 수 있다.✅ 프론트엔드 개발자의 기초소양에 대해 이해할 수 있다.✅ CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.✅ id 및 class와 관련된 selector 규칙을 이해할 수 있다.✅ CSS를 이용해

계산기

계산기

터미널로 git을 다루는 것이 어려워보여서 소스트리로 사용을 해왔었는데 배워야 할 때가 왔다 역시 처음부터 피하지 말고 어려워도 도전하는게 중요한 것 같다 ✏️Achievement Goals / Git ✅ Git의 환경설정을 할 수 있다. ✅ 버전 관리 시스템의

1 Fork Contributor : 한 프로젝트의 커밋에 관여하는 모든 사람을 Collaborator : 프로젝트의 공동 책임자 git으로 관리되고 있는 프로젝트에 contribute 하고 싶다면 위의 Fork 버튼을 눌러주면 된다 내 계정으로 이 프로젝트를 복

함께 작업을 할때 서로의 저장소를 연결해서 Github Repository를 공유 할 수 있다 1 git remote add pair : 페어와 저장소 연결하기 잘 연결됐는지 확인하려면 2 git remote-v 명령어를 실행하면 현재 Local Reposito

✅ 배열에서 사용되는 메소드에 대해 정확히 이해할 수 있다.✅ 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.✅ 배열의 요소가 배열인 이중 배열을 이해, 조회, 변경 할 수 있다.배열 : 순서가 있는 값(요소 , element)

✅ 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.✅ 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)✅ 배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다.✅ 객체 속성(property)의 추가,

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다 arr의 index값이 출력되기 때문에 원하는 값을 가져오기 어렵다for...of : 반복가능한 객체 (Array, Map, Set, Stri

✅Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)방향: flex-direction얼마나 늘릴 것인가?: flex-grow얼마만큼의 크기를 갖는가?: flex-basis수평 정렬: justify-content수직 정렬: ali

웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다 웹이나 앱의 인터페이스를 화면의 영역을 구분해 시각적으로 묘사한 것이고 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도로 사용된다HTML 문서를 통해 화면을 다 그려보

✏️Achievement Goals ✅ 스코프의 의미와 적용 범위를 이해할 수 있다 ✅ 스코프의 주요 규칙을 이해할 수 있다 ✅ 중첩 규칙 ✅ block scope와 function scope ✅ 전역 스코프와 지역 스코프 ✅ 전역 변수와 지역 변수간의 우선 순위 ✅

✏️Achievement Goals ✅ 클로저 함수의 정의와 특징에 대해서 이해할 수 있다 ✅ 클로저가 갖는 스코프 범위를 이해할 수 있다 ✅ 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다 📝summary 함수와 함수가 선언된 어휘적(le

✏️Achievement Goals ✅ Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다. 📝summary Spread 문법 spread 의 의미 : 펼치다, 퍼뜨리다 spread 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있고 주로 배열을 풀

✅ HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.✅ <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다. <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있

✏️Achievement Goals ✅ DOM의 개념을 이해할 수 있다. ✅ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. ✅ DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있

✏️Achievement Goals ✅ querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다. ✅ oncilck, onkeyup 속성이나 addEventListener 메소드로 이벤트 ✅ 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다. ✅

✅ 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.✅ 고차 함수(higher-order function)에 대해 설명할 수 있다.✅ 고차 함수를 자바스크립트로 작성할 수 있다.filter : 조건에 맞는 데이터만 분류하고 싶을 때 m

✅ React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.✅ JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.✅ React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.✅ create-react-app 으로 간단한

App.js 안에 각각의 컴포넌트가 작성되어 있는 상태였고 데이터가 들어오는 dummyDate.js 를 참고해서 작성하면 된다어려웠던 tweets 컴포넌트 구현을 다시 해봤다기본코드가 이렇게 작성이 되어 있는데 이걸 잘 읽는 것이 중요하다이미 안에서 가져와야 하는 데이

✅ React에서 npm으로 React Router DOM을 설치(npm install react-router-dom@5.3.0)하고 이용할 수 있다.✅ React Router DOM를 이용하여 SPA를 구현할 수 있다.✅ 라우팅 구조를 짤 수 있어야 하고, 이에 필요

앞에서 배웠던 것들을 종합해서 완성하는 과제였다 상세 컴포넌트를 먼저 구현해보자 이때 tweet tweets 파일이 두개 있으므로 잘 찾아야한다..

리액트 어렵다..