react , js 공부 (6) 썸네일형 리스트형 [react] 폰트파일(.ttf) 로컬 폰트 적용하기 기본 폰트는 밋밋하다 가지고 있는 파일을 적용해보자 내가 가지고있는 괜찮은 애들인데 구글폰트 여기서 다운받아도 된다. fonts.google.com/ 경로만 설정하면 되기 때문에 아무데나 src 폴더에 font폴더를 만들었다 드래그해서 넣어주기만 하면 끝 쿠키런체와 지마켓체를 사용한다 에서 다음과 같이 입력해준다 @font-face { font-family: "cookie"; // 이름 선언 src: url("./font/cookie.ttf"); // 내가 저장한 경로! } @font-face { font-family: "gmarket"; src: url("./font/gmarket.ttf"); // 내가 저장한 경로! } 졸작땜ㅁ에 만들고있는 페이지인데 생긴게 재미없다 사용: 저 제일 위에 제목텍스트 .. [javascript] 비동기 처리를 알아보자 ② (promise, Async&await) callback 함수를 통해 비동기 처리를 알아 보았다 하지만 너무 복잡하다 보다 편한 방법을 살펴보자 PROMISE -- javascript에서 비동기적으로 실행하는 작업의 결과 (성공 or 실패)를 나타내는 객체 -- new 객체로 만들 수 있다, excutor라는 함수를 인자로 받고 매개변수에는 solve 함수와 reject 함수를 둘 수 있다 비동기 작업이 끝낸 후 성공 했을 시 solve 함수 실패시 reject 함수를 사용한다 바로 예시를 보자1 let timeAttack = new Promise(function (resolve, reject) { // new Promise 생성 setTimeout(function() { let random = Math.random() * 10; if(rand.. [javascript] 비동기 처리를 알아보자 ① (callback 함수) 동기/비동기 대충 야매로 개념만 알고 있었다 정확한 사용 이유와 처리 방법은 잘 몰른다 제대로 알아보자 javascript는 싱글스레드라 두 가지 작업을 동시에 실행 할 수 없다 동기처리와 비동기 처리가 있는데 Synchronous : 동기 ASynchronous : 비동기 동기처리는 작업 요청과 동시에 일을 처리한다 이와 달리 비동기처리는 작업은 요청하지만 그 자리에서 바로 안 해주도 된다 예를 들어 커피집에 손님들이 줄을 서고 앞사람이 커피를 받고나서 다음 사람 받을수 있는게 동기처리이고 주문은 차례차례 받고 커피는 만들어지는데로 받을 수 있는건 비동기 처리다 다음과 같은 코드가 있다 console.log(1); // 숫자 1찍기 setTimeout(()=>{ // 0초 뒤 숫자 2찍기 console.. [react,javascript] 템플릿 문자열을 사용해보자 (`${백틱}`) 문자열을 사용하려면 이렇게 + 써줬어야 + 했다 `템플릿 문자열`이라고 간단한 기능이 있다 알아보자 기존 자바에서 사용 할 때 let string1 = "ㅎㅇ요"; let string2 = "ㅂㅇ요"; let greeting = string1 + " " + string2; let product = { name: "도서", price: "1231원" }; let message = "제품" + product.name + "의 가격" + product.price + "입니다"; let multiLine = "줄바꿈을 \n 해보자"; let value1 = 1; let value2 = 2; let boolValue = false; let operator1 = "곱하기" + value1 * value2 + "입니.. [react] 리액트가 무엇일까(컴포넌트,게임엔진,npm,웹팩) 리액트를 이용해서 프로젝트를 만들고 있다 사용하면서도 자세하게 알려고 한적이 있던가 알아보자 리액트는 프론트엔드 프레임워크 중 하나다 현재 많이 쓰이는 프레임워크가 리액트(react), 앵귤러(angular), 뷰제이에스(vue.js) 등이 있다 앵귤러는 화면 출력, 형상 관리, 배포하여 완성형 프레임워크를 지향한다 뷰제이에스는 가장 나중에 나왔고 다른 프레임워크 장점은 유지하고 단점은 보완하였다 이중 가장 많이 사용하는게 리액트다 페이스북도 리액트로 개발 되었다 리액트개발자 찾는 기업이 많다고 한다 좀 이득이다 컴포넌트(component) 가장 큰 특징은 "화면 출력에 특화된 프레임워크"이다 컴포넌트는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성한다 컴포넌트를 만드는 과정은 레고 .. [react] Lifecycle이란 (Mount,PropsUpdate,StateUpdate..) 생명주기 이다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다 한 번에 이해 할 수있는 그림이다 Mount 컴포넌트가 처음 실행될 때 그것을 Mount라고 한다 ① 컴포넌트가 시작되면 context, defaultProps, state를 저장한다 ② componentWillMount 메소드를 호출한다 ③ render로 컴포넌트를 DOM에 부착한다 ④ Mount가 완료된 후 componentDidMount가 호출된다 주의: componentWillMount 에서는 Mount중 이기 때문에 pops나 state를 바꾸면 안된다 그리고 아직 render하지 않았기 때문에 DOM에도 접근 할 수 없다 componentDidMount 에서는 DOM에 접근할 수 있다 때문에 주로 AJA.. 이전 1 다음
