코드스테이츠 (23) 썸네일형 리스트형 코드스테이츠 리엑트 리엑트 잘 하기 위한 사전지식!! 1. 화살표 함수 1. 컴포넌트 기반 2. 독립성 3. 재 사용성 리엑트를 왜 사용할까? 1. html javascript.js 파일을 따로 만들지 않고 한 페이지 안에서 처리가 가능하다. 2. JSX 1. 자바스크립트의 확장된 문법 but 자바스크립트 언어가 아니기 때문에 babel을 이용해서 컴퓨터가 이해할 수 있는 언어로 컴파일을 해줘야 함. 코드스테이츠 html의 또 다른 표현 방식 DOM!! DOM이 필요한 이유와 활용 방법 일련의 웹페이지가 user들에게 보이는 과정은 1브라우저가 문서를 파싱하여 읽고 스타일을 입히고 2.뷰 포인트로 보여주는 것 그렇다면 DOM은 이런 HTML 문서를 보여주는 또 다른 방식이며, 가장 큰 특징은 객체 방식으로 보여주는 것이다. 이것이 의미하는 것은 1. 속성을 자바스크립트 언어로 컨트롤이 가능하며 원하는대로 값을 바꿀 수 있다는 것이다. 2. 구조화 되어 있지 않는 HTML 문서는 화면의 형식을 tag로 보여주는 방식이기 때문에 컴퓨터가 받아들일 수 있는 프로그래밍 언어로는 조작이 어렵다. console.dir(document.body) console.dir(document.body.children[1]) let newContents=document.bod.. 코드스테이츠 spread & ...args Spread 문법 :배열을 풀어서 함수의 인자 값으로 넣은 후 계산하고 싶을 때 !!기존 배열을 없애지 않는다(immutable) function sum(x,y,z){ return x+y+z; } const number = [1,2,3] sum(...number) //배열을 각 각 요소로 불러오는 행위 6 어떤 값이 인자로 들어와도 이것을 배열로 바꾼 후 비교한다면 꼭 그 대상이 배열이 아니여도 가능한 것을 보여주는 문제 방법은 ...args spread && rest 예시 function getAllParamsByArgumentsObj() { return arguments; } getAllParamsByArgumentsObj("1","2","3") ==> argumnet {"0":"1", "1":"2".. 코드스테이츠 closure 사용 && 캡슐화의 이해 Clousure는 왜 나왔을까? 음... 운영체제의 관점에서 이것을 공부해보자 function이 만들어지면 이는 stack 에 들어가게 되는데 여기서 계산이 완료되면 이 함수의 선언한 변수에 할당된 값들은 계산 후 사라지게 된다. 그래서 내부함수에 그 값을 넣어 외부함수에서 호출 할 때 외부 함수의 변수의 값을 계속 저장할 수 있게 한다. 예를 들어 x+y라는 함수를 만들어 보자 function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; return innerFunc() ; } var inner = outerFunc(); inner(); // 10 함수 outerFunc는 내부함수 innerFunc를 반환하고 생을.. 코드스테이츠 스코프 Achievement Goals 스코프의 의미와 적용 범위를 이해할 수 있다 스코프의 주요 규칙을 이해할 수 있다 중첩 규칙 block scope와 function scope block scope는 {} 형태 예를 들어 조건문 반복문... function scope는 함수 전역 스코프와 지역 스코프 안쪽 Scope 에서 정의된 변수는 바깥에서 이용할 수 없다 예를 들어 함수 내에 변수는 바깥에서 호출할 경우 오류 걸림 전역 변수와 지역 변수간의 우선 순위 Hello, kimcoding! VM2912:8 Hello Josh let name = '김코딩' undefined function showName(){ let name = '박해커'; console.log(name) } console.log(name).. 코드스테이츠 원시타입 || 참조형 타입 이해 배열과 객체를 쓰는 이유는 데이터의 양이 유동적으로 변하기 때문에 어떤 데이터 타입을 쓸지 예측하기가 어렵다. 그래서 동적으로 데이터를 관리하는 공간인 힙을 사용하게 됐다. 원시 타입(Boolean , number ,String) 은 값을 저장하기 때문에 독립적이다. let originalValue = 200; undefined let valueNew =originalValue; undefined orginalvalue =100; 100 valueNew 200 참조타입은 말 그대로 주소를 복사하기 때문에 데이터를 바꾸면 새로운 변수에도 영향을 미친다. 1. 왜 이런 현상이 발생할까? 원시 타입은 특정한 메모리에 할당받아 저장하는 반면 객체, 배열은 특정한 공간 힙에 저장하게 된다. 왜냐하면 단순히 메모리.. 코드스테이츠 목업 1.와이어 프레임 : 레이아웃의 뼈대를 그리는 작업 how? 목적에 맞게 태그를 쓰는 연습. 1-1 큰 틀에서 짜기 1-2 각 영역의 태그 이름 붙이기 1-3 id 는 고유 영역 (댓글 입력하기) class 영역(반복 사람들이 댓글을 써서 보이는 곳) 1-4 큰틀의 크기를 미리 만들어 보고 크기 조절하기 코드스테이츠 중급 Achievement Goals 다양한 CSS 셀렉터 규칙을 이해할 수 있다. 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다. 자식 셀렉터 : div > p { }. 후손 셀렉터는 한 단계 뛰어서 후손들을 선택한다 방법은 div li. (한 칸 띄워야 함) 레이아웃을 위한 HTML을 만들 수 있다. 잊지 말아야할 것 : 우리가 어떤 레이아웃 를 만들었을 때 크기는 margin과 padding을 포함하지 않기 때문에 오차가 생긴다 그러므로 이것을 고려한 박스 크기를 만드는 것이 중요!!. 방법은? { .box-sizing : border box } Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다) 방향: flex-direction 기준점을 만들어 자식 .. 이전 1 2 3 다음
