fullfish의 개발자 도전기

오늘의 키포인트 재귀함수 나의 이해 재귀함수 : 재귀적인 함수. 함수가 본인을 호출 문법 및 중요 base case : 문제를 더 이상 못 쪼개는 재귀의 기초 head : 배열의 첫 요소 tail : head제외 반목분이 많이 중첩됐을때 효과적 ex) num까지 숫자의 합 function sum(num){ if(num === 0) return 0 return num + sum(num-1) }

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

목~금 이틀에 걸쳐서 그동안 배운걸 종합한 웹페이지 관련 과제와 js문제 풀이 시험을 봤다 html, 리액트 이런 부분보다는 상대적으로 js에 자신이 있었는데 js는 시간이 남았지만 리액트는 다 통과하지 못했다 시험자체는 통과했지만 리액트쪽을 더 봐야겠다

오늘의 키포인트 리액트- 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..

오늘의 키포인트 원시 자료형, 참조 자료형 스코프 클로저 나의 이해 원시 자료형 : 고정된 곳에만 저장 참조 자료형 : 고정된 장소에 주소만 저장, 실제 저장 장소는 사이즈가 동적 스코프 : {} 처럼 변수의 유효범위를 나누는것 클로저 : 함수를 리턴하는 함수 // 클로저함수 : 외부 함수의 변수에 접근할 수 있는 내부함수 문법 및 중요 원시 자료형, 참조 자료형 primitive type data(원시 타입 데이터) : number, boolean, null, undefined, string, bigint, symbol 고정된 곳에 저장 feference type data(참조 타입 데이터) : array, object, function 고정된 곳은 주소값만 저장, heap이라는 공간에 동적(사이즈가 ..