WEB55 Chrome 개발자 도구 Chrome 개발자 도구란? - 웹사이트를 전반적으로 분석하고 시험해 볼 수 있도록 도와주는 도구 *주의: 콘솔 데이터는 저장되지 않음. 새로고침/새 탭 열기를 하면 내용이 날아감 요소 (Elements) - HTML을 분석하고 수정해볼 수 있는 도구 콘솔 (Console) - 현재 로딩된 페이지에서 자바스크립트를 시험하거나 로그/오류 메세지 등을 확인할 수 있는 도구 소스(Source) - 현재 로딩된 페이지에서 사용된 리소스를 열람할 수 있는 도구 네트워크(Network) - 서버와의 통신 내역을 보여주는 도구 성능(Audits) - 웹 어플리케이션의 성능을 향상시킬 방법을 컨설팅해주는 도구 2023. 4. 26. Next.js Next.js란? - Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링(server-side rendering)(SSR), 정적 사이트 생성(static site generation) (SSG), 증분 정적 재생성(ISR) 과 같은 다양하고 풍부한 기능을 제공한다. - Next.js는 첫 릴리스부터 리액트가 제공하지 않는 다양한 기능을 제공하면서 리액트 웹 앱 개발 분야의 판도 바꿨다. 그 예시로는 코드 분할(code splitting), 서버 사이드 랜더링, 파일 기반 라우팅, 경로 기반 프리페칭(pre-fetching) Next.js가 제공하는 기능 - 정적 사이트 생성 - 증분 정적 콘텐츠 생성 - 타입스크립트에 대한 기본 지원 - 자동 .. 2023. 4. 18. 가상 클래스(의사 클래스) pseudo-class 가상 클래스(의사 클래스) pseudo-class - css에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. 1. 동적 의사 클래스(dynamic pseudo-classes) - :link = 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태 - :visted = 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태 - :hover = 사용자의 마우스 커서가 링크 위에 올라가 있는 상태 - :active = 사용자가 마우스로 링크를 클릭하고 있는 상태 - :focus = 키보드나 마우스의 이벤트 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태 2.. 2023. 4. 14. Redux 데이터 Flow Redux란? 상태 관리 라이브러리 Props란? - Props(properties의 줄임말) - props는 immutable(변경불가성) - Props 소통하는 방식이 위에서 아래로( 부모components에서 자식으로components로) - 부모가 자식에게 1을 줬으면 1은 바뀔 수 없다. 바꾸고 싶으면 부모가 다시 다른 숫자를 내려줘야함 State란? - 부모 components에서 자식 components로 data를 보내는게 아닌 component 안에서 데이터를 전달하려면 state을 사용 - state는 mutable(변할수있는) - state이 변하면 re-rendering 된다. Action = 무엇이 일어났는지를 설명하는 객체 Reducer = Action으로 인해서 state 상태.. 2023. 4. 5. NPM( Node package manager) vs NPX NPM이란? npm은 node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다. NPM의 역할 1. library를 담고 있는 역할 2. application을 킬때 start, 또는 배포 할 때 build NPX의 역할 원래 create-react-app을 할때 npm install -g create-react-app을 사용하여 global 디렉토리에 다운을 받았다. -> 이제는 npx를 이용하여 create-react-app을 이용 할 수 있다. -> npx가 npm registry에서 create-react-app을 찾아서 다운로드 없이 실행 시켜준다 NPX의 장점 1. Disk Space를 낭비하지 않을 수 있다. 2. 항상 최신 버전을 사용 할 수 있다. 2023. 4. 5. React 웹사이트를 만들기 위해선, 사실 프론트엔드 라이브러리의 도움 없이도 만들어 낼 수 있다. 그리고 단순히 정적 페이지를 만드는거라면 자바스크립트 없이도, 그냥 HTML과 CSS를 사용해서 만들 수 있다. 그런데 요즘의 웹은 단순히 웹 페이지가 아니라, 웹 애플리케이션 이다. 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은 것들을 할 수 있다. 하지만 어떠한 유저 인터페이스를 동적으로 나타내기 위해서는 정말 수많은 상태를 관리 해주어야 한다. increase 0 + 우리가, 버튼을 눌러서 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해야한다. var number = 0; var elementNumber = document.getElementByI.. 2023. 3. 20. 프로퍼티 어트리뷰트 const person = { name: 'Lee' } // 프로퍼티 동적 생성 person.age = 20; // 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공(프로퍼티 디스크립터 객체) console.log(Object.getOwnPropertyDescriptors(person)); 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작 하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. => 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접 적으로 접근하거나 호출 할 수 있는 방법을 제공하지 않는다. const p =.. 2023. 3. 14. 변수 호이스팅 호이스팅이란? - 호이스팅은 코드가 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다. - 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. - 자바스크립튼 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. - 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. - 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. - 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한.. 2023. 3. 13. let, const 자바스크립트 에서 var 키워드로 선언된 변수의 특징 var 키워드로 선언한 변수의 문제점 1. 변수 중복 선언 허용 var x = 1; var z = 1; // var 키워드 선언된 변수는 같은 스코프 내에서 중복 선언을 허용함 // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작함 var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var z; console.log(x); // 100 console.log(y); // 1 2. 함수 레벨 스코프 var x = 1; if (true) { // x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. // 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다. var .. 2023. 3. 13. 스코프 스코프(scope)란? 자바스크크립트를 포함한 모든 프로그래밍 언어의 기본이며 중요한 개념이다. 스코프의 이해가 부족하면 다른 개념을 이해하기 어렵다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있다. var 키워드로 선언한 변수와 let 또는 const키워드로 선언한 변수의 스코프도 다르게 동작한다. 스코프는 변수 그리고 함수와 깊은 관련이 있다. function add(x, y){ // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범휘)는 함수 몸체 내부다. console.log(x, y); return x + y; } add(2, 5) //매개변수는 함수 몸체 내부에서만 참조 할 수 있다. console.log(x, y); //Reference.. 2023. 3. 13. 콜백 함수 콜백 함수(callback function)란? 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수Higher-Order Function, HOF //고차 함수 function repeat(n, f){ for(var i = 0 ; i 고차 함수는 콜백 함수를 자신의 일 부분으로 합성한다. -> 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한.. 2023. 3. 12. 타입 변환과 단축 평가 타입 변환이란? 명시적 타입 변환(explicit coercion) - 개발자가 의도적으로 값의 타입을 변환하는 것 - 타입 캐스팅(type casting)이라 한다. var x = 10; // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x): // number 10 암묵적 타입 변환(implicit coercion) - 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. - 타입 강제 변환(type coercion)이라 한다.. 2023. 3. 10. 이전 1 2 3 4 5 다음
