본문 바로가기

컴퓨터 사이언스138

기사 API에서 키워드로 기사 필터링하기 페이지 번호는 0번 부터 시작하고 1~10번의 10개의 기사를 가져온다. fq: 필터 쿼리 나는 특정 분야를 지정할 것이 아니므로 그냥 fq=키워드 를 사용하면 되겠다. 박스로 표시해놨듯이 키워드를 찾는 범위는 body와 headline, byline 만이 될 것이다. 10개씩 페이지가 response되므로, 20~29번째 페이지를 받기 위해서는 page 넘버가 2가 되야 하는 것이다. &로 검색 조건을 추가하는 모습을 볼 수 있다 ! 2022. 8. 2.
[리액트] 실습하기 https://reactjs.org/docs/cdn-links.html CDN Links – React A JavaScript library for building user interfaces reactjs.org react를 실행하기 위해 js로 import하기 // react import // react-dom import 스크립트에서 리엑트 엘리먼트 span을 생성했지만, 아직 페이지에는 나타나지 않는다. 이전 바닐라 스크립트 실습에서는 바디에서 작성을 해보았지만, React JS가 HTML을 생성하도록 만들 것인데 그러려면 React-DOM을 사용해야 한다. 이 React-DOM은 모든 리액트 엘리먼트들을 HTML body에 둘 수 있게 해준다. 리액트돔으로 리액트 엘리먼트를 작성해서 렌더링 하려.. 2022. 8. 2.
[자바스크립트] 강의 복습 DOM과 이벤트 + 구조분해할당 script를 body 밖에서 작성하긴 했지만 script가 body 안에 들어가 있고, body 안에 div가 추가된 것이 콘솔 창에서 보인다. 요소에 스타일을 줄 때, 보통 인라인보다는 클래스 명으로 해서 스타일을 주는 것을 권장한다. 위에 박스들은 클래스 이름으로 묶고, 색깔별로 다시 클래스 이름을 붙여 스타일을 줄 때 복합 클래스 이름을 사용하였다. 구조 분해 할당(Destructing assignment) 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 ex. let users = ['Aiden', 'Tom', 'Harry']; let [user1, user2, user3] = users; // → let user1 = users[0]; let user.. 2022. 7. 25.
Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at JS의 DOM으로 div를 추가하려고 head에 script를 작성하고 실행하니 다음의 오류가 발생 그 이유에 대해서는 차후에 자세히 설명을 적기로 하고, head에 넣었던 script를 body 뒤로 넣으면 오류 해결 ! 2022. 7. 23.
[자바스크립트] 강의 복습 Array 객체 Array 객체의 메서드 연습 문제 2022. 7. 22.
[자바스크립트] 강의 복습 객체와 DOM 요소 참조타입 내장 객체와 랩핑 메소드 체이닝과 옵셔널 체이닝 프로토타입과 프로토타입 체이닝 내장 객체 자바스크립트에는 다양한 객체가 미리 생성되어져 있음 ex. Number, String, Boolean, console, window 등 내방 객체의 프로퍼티(특별히 함수형 프로퍼티인 메소드!)를 많이 알면 알수록 생산성이 좋아진닷. 1. Number 객체 : Number라는 함수를 통해 만들 수 있다. (숫자 형변환이 이 원리로 된 것) 자주 쓰이는 메서드 - toFixed 2. String 객체 : String이라는 함수를 통해 만들 수 있다. (문자 형변환이 이 원리로 된 것) 3. Array 객체 : 순회와 변형 작업을 수행하는 메서드를 갖고, 자바스크립트의 배열은 길이, 요소의 자료형도 고정되어 있지.. 2022. 7. 22.
[React] 리액트 맛보기 라이브러리 vs 프레임워크 - 라이브러리는 개발 편의를 위한 도구들의 모음 like 공구 - 프레임워크는 기반 구조까지 잡혀있음 like 공장 리액트의 공식 문서 : https://ko.reactjs.org/ 만든이의 사용 설명서 그 안의 패턴을 찾고, 새로운 기술을 익히는 요령을 습득하자. React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트를 라이브러리로서 접근하고, 약 20여개의 다양한 라이브러리들을 반복 접근하자. 리액트는 기술적으로 확실한 장점이 있다. Virtual DOM/ JSX / Flux / Functional Programming ... 새로.. 2022. 7. 21.
[모자듀 스터디] 객체, 메서드, this 객체 자바스크립트엔 8개의 자료형이 있다. 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형(primitive type)'인 것 7개와 다양한 데이터를 담을 수 있을 수 있는 객체는 참조형으로 1개 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용 프로퍼티 키는 ‘프로퍼티 이름’ 혹은 '프로퍼티 식별자'라고도 부른다. 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 한다. ex. "make sth" : true; => 점 표기법으로 프로퍼티 값을 읽을 수 없다. => 대괄호 표기법으로 가능 cf. 단, 대괄호 표기법으로 프로퍼티 이름을 표시할 때는 따옴표로 묶어줘.. 2022. 7. 21.
[모자튜 스터디] Chrome으로 디버깅하기 디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정 Debugging - Wikipedia From Wikipedia, the free encyclopedia Jump to navigation Jump to search Process of finding and resolving defects or problems within a computer program In computer programming and software development, debugging is the process of finding and resolving bugs en.wikipedia.org 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 .. 2022. 7. 21.