Front-end 썸네일형 리스트형 [JavaScript] this 키워드 this는 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있음 사용하는 환경(위치) this가 의미하는 것 태그 안 또는 일반 함수 내부 window{} 오브젝트 strict mode의 일반 함수 내부 undefined 오브젝트 내 함수(메서드) 내부 함수를 동작시키는(메서드를 가진) 오브젝트 생성자(constructor) 내부 생성자를 통해 새로 생성된 오브젝트 이벤트 리스너 내부 e.currentTarget 1. 그냥 쓰거나 함수 안에서 쓰면 this는 window{} 오브젝트를 뜻함 HTML 파일에 window {...생략...} 출력 됨 1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined IE 10버전 이상에서 'use strict'라는 키워드를 페이지 .. 더보기 [React] 라우팅, 라우터 1. 페이지를 분리하는 방법 1) 리액트를 사용하지 않고 페이지 나누는 법 ① html 파일 만들어서 상세페이지 내용 채움 ② 누가 /detail로 접속하면 html 파일 보내줌 2) 리액트를 사용해서 페이지 나누는 법 ① 컴포넌트 만들어서 상세페이지 내용 채움 ② 누가 /detail로 접속하면 그 컴포넌트를 보여줌 2. 리액트를 사용해서 페이지 나누는 방법 1) react-router-dom 라이브러리 사용 설치 npm install react-router-dom 2) index.js파일에 import하고 로 감싸기 import { BrowserRouter} from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById.. 더보기 [React] 이미지 넣기 1. css파일에 이미지 넣어서 사용하기 .main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : center; } 2. html에 직접 이미지 넣기 import bg from './bg.png'; div className="main-bg" style={{ backgroundImage : 'url('+bg+')'}}> 3. public 폴더에 이미지 넣어서 사용하기 - 이미지 같은 static 파일의 경우 public 폴더에 보관해도 됨 - public 폴더에 이미지를 저장하면 리액트 프로젝트 빌딩(html, js, css 압축) 시 압축 되지 않음 1) 간단한 사용.. 더보기 [React] <input /> 태그 1. 입력을 받을 수 있는 박스 생성 방법들 2. 에 입력 시 코드 실행하기 onChange/onInput 등 이벤트 핸들러 사용(필요 시 검색) 3. 에 입력한 값 가져오기 이벤트 핸들러에 들어가는 함수에 파라미터 e 추가하기 {console.log(e)}} /> e는 이벤트 객체, 현재 발생하는 이벤트와 관련한 기능을 제공하는 일종의 변수(e라는 이름 사용안해도 됨) 이벤트가 발생한 html 태그: e.target {console.log(e.target)}} /> 이벤트에 발생한 html 태그에 입력한 값: e.target.value {console.log(e.target.value)}} /> 이벤트 버블링 막기: e.stopPropagation() {console.log(e.target.value).. 더보기 [CSS] CSS(Cascading Style Sheets)와 선택자(selector) 1. CSS란? 1) 스타일링을 위한 언어 2) Cascading(계단식)이라는 뜻으로 여러 스타일이 적용될 경우 충돌을 막기 위해 계단식으로 스타일이 적용됨 3) 하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음 4) CSS는 크게 선택자(selector)와 스타일(style)로 구성되어 있음 2. 선택자(selector) 1) 정의 스타일을 어떤 엘리먼트에 적용할지 선택하게 해주는 것 2) 문법 - 선택자를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론(;)으로 구분하여 하나씩 기술 - 각 스타일은 CSS속성과 값으로 이뤄진 키-값 쌍이며 CSS속성의 이름과 값을 콜론(:)으로 구분 3) 선택자 유형 ① 엘리먼트 선택자(elemen.. 더보기 [CSS] 폰트(font) 관련 속성 1. font-family - 어떤 글꼴을 사용할 것인지를 결정하는 속성 - 속성 값으로 사용할 글꼴의 이름을 적어주면 됨(글꼴 이름에 띄어쓰기가 들어갈 경우 큰따옴표로 묶어줘야함) #title { font-family: "글꼴명"; } - 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 줘야 함 font-family 속성에 fallback 시스템 - 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 주는 것 - 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올수 있도록 하기 위함 #title { font-family: Arial, Verdana, Monaco, "Times New Roman"; } - 일반적인 글꼴 분류(generic font .. 더보기 [JavaScript] <script> 위치에 따른 동작 순서 1. head 내부 동작순서: HTML parsing 후 main.js 가져오고 실행 parsing HTML page is ready fetching js executing js - 단점: js파일에서 데이터를 가져와서 페이지를 보여줘야하는 경우 에러 발생 3. head + async 동작순서: asyn 옵션 boolean type(default: true), 브라우저가 pasing 하다가 fetch 명령하고 실행, 그리고 다시 parsing HTML parsing HTML blocked parsing HTML page is ready fetching js executing js 4. head + defer 동작 순서: defer 옵션: parsing 하다가 fetch만하고 다시 parsing후 pars.. 더보기 [JavaScript] 프로미스(Promise) 1. 동기식 처리 모델과 비동기식 처리 모델 1) 동기식 처리 모델(Synchronous processing model) - 직렬적으로 태스크(task) 수행 - 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 태스크는 대기 ex. 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때 까지 이후의 태스크 들은 블로킹 됨 2) 비동기식 처리 모델(Asynchronous processing model, Non-Blocking processing model) - 병렬적으로 태스크(task) 수행 - 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 태스크 실행 - 자바 스크립트의 대부분의 DOM 이벤트와 Timer함수(setTim.. 더보기 이전 1 2 3 4 5 6 다음
