본문 바로가기

전체 글83

2022.07.13 - javascript 30 [ day6 ] type ahead - 도시 api 를 이용하여 키워드를 통해 도시 이름을 검색할 수 있는 페이지를 만들었다. 나중에 한국 공공 api 를 이용해서 충북 맛집리스트 키워드 검색 등 만들어보고 싶은 것이 많아졌다 ! 아자 아자 [ JS ] const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; // 빈배열 fetch(endpoint) .then((blob) => blob.json()) .then((data) => cities.push(...data)); // Blob을 활용하면 자바스크립트로 이미.. 2022. 7. 13.
2022.07.11 - React / useState, custom hooks, HOC 고차함수 리액트 컴포넌트에서 동적인 값을 상태(state)라고 한다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는것이 필요하다. React Hooks가 나오기 전에는 컴포넌트의 상태 관리를 하려면 클래스 기반 React 컴포넌트를 작성해야했다. 하지만 리액트 16.8 버전부터 Hooks 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 됨. useState()함수를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있다. - useEffect : 라이프 사이클 훅을 대체할 수 있다. componentDidMount componentDidUpdate componentWillUnmount [ useEffect 연습(1) - 커스텀 훅 ] ** useEffect 사용하여 가.. 2022. 7. 11.
2022.07.08 - javascript 비기너 복습 (3) [ 14강 ~ 19강 요약 ] - Boolean 오브젝트 빌트인 오브젝트 이며, true와 false로 처리한다. - 자바스크립트 특징 소스 파일의 코드를 사전에 컴파일하여 실행파일을 만들어놓지 않고, 사용하는 시점에 컴파일하고 실행한다. - 컴파일 순서 소스 파일의 위에서 아래로 컴파일된다. function 키워드를 만나면 function 오브젝트를 생성한다. 이때, 함수 안의 코드는 컴파일하지 않는다. 함수가 호출되었을때 컴파일된다. - js와 객체지향 언어 객체지향 프로그래밍 언어 (OOP: Object Oriented Programming) 자바스크립트는 객체 지향 언어이다. - OOP의 객체 - 객체 (object) 행위(Behavior) 와 속성(Attribute) 으로 구성되어 있다. 행위 .. 2022. 7. 8.
2022.07.07 - javascript 비기너 복습 (2) [ 9강 ~ 13강 요약 ] - new Array() Array 인스턴스 생성, 반환 파라미터에 따라 배열 생성 기준이 다르다. 파라미터를 작성하지 않으면 빈 배열이다. 작성한 순서로 엘리먼트에 설정된다. - Array() Array 인스턴스 생성, 반환 new Array()와 생성 방법 및 기능이 같다. Array()는 직접 생성자 함수를 호출하여 인스턴스를 생성한다. - length 프로퍼티 배열 [1,2,3]에서 length 값은 3이다. 열거, 삭제는 할 수 없지만 변경은 가능하다. length 값을 변경하면 배열의 엘리먼트 수가 변경된다. - delete 연산자 var 변수는 삭제 불가 글로벌 변수는 삭제 가능 삭제 성공시 true, 실패시 false 반환 let book = {title:"자바.. 2022. 7. 7.
2022.07.06 - javascript 비기너 복습 (1) [ 3강~ 8강 요약 ] - debugger 디버그 : 프로그램의 오류를 발견하고 그 원인을 밝히는 작업 과정 브라우저의 개발자 도구 창이 열려있을때만 멈추게 된다. 열려있지않으면 멈추지 않음 ( ES5 부터 지원 ) const name = "기묜"; debugger; console.log(name); -> 디버그에서 무슨 조치를 취하지 않으면 콘솔은 실행되지 않음. 개발자모드에서 f11 은 다음 라인으로 이동되기때문에 그때서야 비로소 콘솔이 실행됨. - while : 표현식의 평가 결과가 false가 될 때 까지 문장을 반복하여 실행한다. 반복이 종료되는 조건이 필요함 - do ~ while : while과 같지만 do문을 먼저 실행한다. let a = 0; do { console.log("do:", .. 2022. 7. 6.
2022.07.05 - javascript 30 [ day5 ] Flex flex 이용하여 위아래 포지션 액션주기 연습! - 추가로 수정해야 할 것 1) 두 번째 클릭시 첫 번째 이미지는 원래대로 돌아가게 하기 2) css 이미지 변경 [ html ] Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion [ css ] html { box-sizing: border-box; background: #ffc600; font-family: "helvetica neue"; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-heig.. 2022. 7. 5.

티스토리툴바