fullfish의 개발자 도전기

오늘의 키포인트 Class 나의 이해 Class : js를 객체지향적으로 쓰기 위한 방법 문법 및 중요 절차 지향 프로그래밍 : 일반적으로 생각하는거 ex)편의점 문을 연다. 들어 간다. 물건을 집는다. 점원한테 준다. 돈을 지불한다..... 객체 지향 프로그래밍 : 점원한테는 계산과 같은 속성 및 메소드 존재, 소비자한테는 구매 같은 속성 및 메소드 존재 인간이 세상을 보는것과 유사. OOP(Object-oriented programming) 객체 지향 프로그래밍 : 데이터와 기능을 한 곳에 묶어 처리 속성, 메소드가 하나의 객체에 포함, 이는 js의 내장 타입인 object와 다르게 class로 부름 객체 지향은 메모리를 많이 먹으나 보기 편하고 재사용성이 좋음 메소드 호출때는 화살표 함수 안쓴다 l..

오늘의 키포인트 리액트- Props, State 나의 이해 Props : 외부로부터 전달받은 값 // 바꾸기 힘든 값 State : 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 // 내부에서 변화하는 값 변경되면 리렌더링됨 상위 컴포넌트도 문법 및 중요 ex) Props : 이름, 성별 // 바꾸기 힘든거 State : 나이, 주소, 취업 여부, 결혼 여부 Props 특징 컴포넌트의 속성(property) 의미 상위 컴포넌트로부터 전달받은 값 // 컴포넌트가 최초 렌더링 될때 화면에 초기값으로 사용가능 객체 형태 // 어떤 타입 값도 받기 위해서 읽기 전용 // 변경 막기 위해 React에서 속성 및 값 할당 // text라는 속성 선언 1번 방법 텍스트 할당해보기 // 이건 변수나 문자열 둘..

오늘의 키포인트 리액트 - SPA 나의 이해 SPA(Single Page Application) : 서버로부터 페이지의 모든 부분을 받아오지 않고 중복되는 부분을 제외한 필요한 부분만 받아 페이지 업데이트 문법 및 중요 spa 장점 : 사용자와의 interaction에 빠르게 , 서버 과부하 줄어듦, 전체 페이지 렌더링 안해도되서 더 나은 유저 경험 단점 : js파일이 큼 = 첫 로딩이 긺 (html파일은 거의 비었고 대부분 코드가 js에 들어있음), 검색 엔진 최적화(SEO)가 좋지 않음 (html에 정보가 별로 없어서 검색 로봇이 동작못함) wireframe : 디자인 전에 선을 이용해 윤곽선 잡는것 라우팅(Routing) : 주소에 따라 다른 화면 보이는거 React SPA에서 라우팅을 위해 Rea..

오늘의 키포인트 리액트 나의 이해 리액트 : html에 쓸 내용들을 js에 씀, 전체 새로고침을 안해서 페이지 넘어갈때 빠름 문법 및 중요 리액트 : 프론트 앤드 개발을 위한 js 라이브러리 / 선언형, 컴포넌트 기반, 범용성 JSX( Js XMl ) : React에서 ui를 구성할떄 사용하는 문법//js를 확장한 문법 Babel : JSX를 브라우저가 바로 실행 못시켜서 브라우저가 이해하게끔 js로 컴파일해주는거 컴포넌트 : 하나의 기능구현을 위해 여러 종류의 코드를 묶어놓은것 컴포넌트 기반으로 작성시 서로간의 의존성이 없어서 독립적, 재사용 가능 JSX문법 여러 엘리먼트를 작성하고자하면 하나의 태그로 감싸줘야함 // return하려면 하나의 태그로 감싸줘야함 , 배열도 리턴 됨 CSS class 속성..

오늘의 키포인트 고차함수 나의 이해 고차 함수 : 함수를 인자로 받는 함수 문법 및 중요 js에서 함수는 특별 취급 = 일급 객체 변수에 할당 가능 다른 함수의 인자로 전달 다른 함수의 결과로서 리턴 고차 함수 : 함수를 인자로 받는 함수 // 커리 함수도 포함함 커리 함수 : 함수를 리턴하는 함수 콜백 함수 : 다른 함수의 인자로 전달되는 함수 map // 하나의 데이터를 다른곳으로 맵핑할때 배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)됨// 새로운 배열로 let result = arr.map(function(num){ return num * 2 }); function getDoubledElements(arr) { // TODO: 여기에 코드를 작성합니다. let result =..

오늘의 키포인트 DOM 나의 이해 DOM : Ddcument Object Moder // js에서 html의 내용을 조작하기 위한것 문법 및 중요 // js파일 적용 js파일은 등장과 함께 실행 태그를 넣는 두가지 방법 1. 안쪽에 삽입 이건 뒤에 나오는건 무시됨 2. 태그가 끝나기 전에 삽입 이게 나음 // js를 읽는 동안 html의 해석이 정지되므로 다 html이 끝나고 js 읽는게 좋음 (태그를 body끝나기 직전에 넣으면 parsing(html)파일을 다 읽고 해서 버벅이는게 없는데 head에 넣으면 html읽다가 script에 들어가서 렌더링이 멈춰서 버벅임 (멈출 때 fetching과 execution을 하면서 멈춤 body끝에 넣는게 좋음)) console.dir : DOM 구조를 조회할땐..

오늘의 키포인트 구조분해(Spread, Rest) 나의 이해 Spread : 배열을 배열아닌 요소로 펼침 Rest : 매개변수로 쓰을 떄, 배열아닌걸 배열형태로 받음 문법 및 중요 Spread function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6 ----------------------- const name= { name: '만선' }; const attribute{ name: '만선', attribute: '좋음' }; const color= { name: '살색', attribute: '좋음', color: '살색' }; console.log(name); console.log(attribut..

오늘의 키포인트 CSS (중급) 와이어프레임(Wireframe) 목업(Mock-up) 나의 이해 와이어프레임(Wireframe) : html만들기전 설계하는거 목업(Mock-up) : html문서 내에 하드코딩하는 것 문법 및 중요 # : html의 id속성 부여 // id는 문서내 하나의 요소에만 부여 가능 ~~~~ . : html의 class속성 ~~~ 셀렉터 h1{} : 일반적인 셀렉터 *{} : 전체 셀렉터 section, h1{} : tag 셀렉터 #only{} : id 셀렉터 .only{} : class 셀렉터 --attribute 셀렉터-- a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sec..

오늘의 키포인트 객체 나의 이해 객체 : 배열처럼 대량의 데이터처리하는데 특정한 범위에 따라 할당할때 문법 및 중요 배열은 순서가 있고 객체는 순서가 없음 객체는 키와 값쌍으로 이루어짐 let user = { firstName: ‘choi’, lastName: ‘manseon’ } 객체의 값 사용 방법 2가지 있음 1번. Dot notation // 키값을 문자열로 생성 user.firstName; // ’choi’ 2번. Bracket notation user[‘firstName’]; // ‘choi’ dot nocation이 보기는 편하지만 키 값이 동적으로 변할땐 bracket notation이 좋음 delete : 앞에 delete 붙이면 삭제됨 ex) delete user.fristName //..

오늘의 키포인트 배열 나의 이해 배열 : 대량의 데이터를 처리 및 관리하기 위해 문법 및 중요 let arr = [1,2,3] // [] 안에 ,로 나눠서 배열 선언 요소(element) : 배열의 하나의 값 index : 배열의 순서 배열에 문자열을 넣을 수 있음 index를 벗어나면 undefined let numbers = [[13, 30], [73, 8], [44, 17]]; // 처럼 배열안에 배열도 가능 console.table() : 표 형식으로 보임 arr.length : 배열 길이 concat : array1.concat(array2) : array1+array2 // 두개의 배열을 합침 길이3과 2 면 5됨 Array.isArray() : 배열이면 true // typeof로 보면 ob..