컴퓨터 사이언스/TIL 정리85 [알고리즘&자료구조] String 객체& Set 객체 메서드 복습하기 2022. 8. 4. [React] Inputs and State 오늘 자습을 들어가기 전에 노마드 코더님의 댓글에 반색하며 기운을 내본다! 아자아자 ^_^ 왼쪽 창 리액트에서는 HTML과 비슷한 JSX를 쓰지만 다른 점 몇 가지는 기억해야한다. 그 중 위에서 보다시피 클래스 이름을 지정해줄 때 사용하던 class는 className으로, label의 for라는 속성은 htmlFor라고 사용해야 한다. 오른쪽 창은 왼쪽 리액트를 실행했을 때 개발자 도구를 열어 element 탭을 통해 어떻게 HTML이 작성되어 있나 본 것이다. 왼쪽과 같이 작성했어도 변환되어 HTML은 오른쪽과 같이 작성되어 보여지고 있다 ! JSX 문법을 Babel이 리액트 문법으로, 리액트 문법은 리액트 언팩과 리액트돔 언팩으로 저렇게 HTML로 변환되어 작동한 것이다.(추후 이해 정확도 다시 점.. 2022. 8. 4. [리액트] State state는 기본적으로 데이터가 저장되는 곳 위의 JSX 문법으로 작성한 것을 바벨이 변환하여 head에 다음과 같이 전달해준다. Container 컴포넌트가 리액트 엘리먼트를 리턴하는데, 이 리액트 엘리먼트가 또 다른 두 개의 React Element, h3과 button을 만들고 있다. 리액트는 여러가지 요소들을 리렌더링하려고 해도, 전부 다 새로 생성되지 않고 오로지 바뀐 부분만 생성된다 ! data 변수는 React.useState()를 실행시키는데, 콘솔창에 찍어보면 위와 같은 배열을 볼 수 있다. undefined이 (변경될) data를 나타내는 것이고, f는 이 data를 바꿀 때 사용하는 함수인 것이다 !! React.useState() 함수는 초기값을 설정할 수 있다. 초기값을 설정한다면.. 2022. 8. 3. 기사 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. [자바스크립트] 강의 복습 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. 이전 1 2 3 4 5 6 ··· 10 다음
