모카 스터디 썸네일형 리스트형 한입 크기로 잘라 먹는 리액트 -일기장 프로젝트 one page-[인프런] React에서 사용자 입력 처리하기 DiaryEditor 컴포 넌트 만들기 className과 컴포넌트 이름을 동일하게 해서 css스타일링할 떄 직관적으로 한다. 사용자의 입력을 처리하기 위해서는 state를 사용해야한다. ==> uesState를 사용한다. onChange 사용 onClick 사용 스프레드 연산자 사용 공통된 State묶기 React에서 DOM 조작하기 - useRef 특정 길이 이상이 들어왔는지 확인 마우스 커서를 누르면 테두리가 진한 검정으로 바뀌나 커서가 깜박거린다. UseRef 사용 MutableRefObject는 hmtl 즉, DOM 요소를 접근 할 수 있게 한다. 레퍼런스객체(useRef)는 current 현재 가리키는 값을 가르켜 fouce 기능을 준다. React에서 배.. 더보기 한입 크기로 잘라 먹는 리액트 -Promise - 콜백 지옥에서 탈출하기 + async&await- [인프런] resolve와 reject는 콜백 함수 이다. Promise 없이 resolve와 reject를 사용한 비동기 예제 비동기 작업 자체인 Promise를 저장할 상수 asynTask를 만들어준 다음에 new키워드를 사용해 Promise객체를 생성하면서 Promise객체의 생성자로 비동기 작업의 실질적인 실행자 함수 executor를 넘겨주면 자동으로 executor함수가 실행된다. 함수의 리턴값이 프로미스 타입인걸 확인할 수 있다. ==> 이함수는 비동기 작업을 하고 그 작업의 결과를 프로미스 객체로 반환받아서 사용할 수 있는 함수 이다. Promise객체인 then과 catch를 사용하면 reslove를 수행 했을떄의 결과 값을 then 콜백 함수에서 사용할 수 있고 reject를 수행 했을 때의 결과.. 더보기 한입 크기로 잘라 먹는 리액트 -동기 & 비동기- [인프런] 동기 & 비동기 자바스크립트는 Call Stack이 하나여서 싱글스레드로 동작한다. settimeout이라는 내장 비동기함수 예제 위는 동기 방식으로의 Call Stack 예제 3초가 끝나고..! Callback Queue에서 Callback Stack으로 cb함수를 넘겨줄때 Event loop는 Call Stack에 Main Context를 제외한 다른 함수가 남아 있는지 자꾸 체크를 하다가 아무것도 남아 있지 않으면 콜백 함수(cb)를 실행 시킬수 있다 위는 비동기 실행 예제 더보기 배열내장 함수 ( 객체의 메서드) forEach forEach를 사용해서 배열 요소를 하나씩 방문한 콜백함수사용 예시 즉, 콜백 함수가 배열의 각 소요들에 대해서 실행 map 각 배열요소를 순회 하며 리턴된 값을 따로 배열로 추려내서 순서대로 반환해서 새로운 배열을 만든다. include ( 불리언으로 리턴) indexof 주로 배열에 사용 ( 일치하면 그 인덱스를 없으면 -1 을 반환) findIndex 객체에 유용 처음 color : "red" 라는 값이 elm에 들어오게 된다. find (엘리먼트를 반환) filter (특정 배열을 찾아서 반환) slice (배열자르기) concat (배열 붙이기) sort (문자열 기준으로 정렬을해서 숫자 정렬을 원하면 직접 함수 로직을 짜서 sort를 활용해야 한다.) join ( 배열을 합칠 .. 더보기 한입 크기로 잘라 먹는 리액트 -Javascript 응용- [인프런] Truthy & Falsy 단락회로 평가 왼쪾에서 오른쪽으로 연산 평가를 하는 성질을 활용해서 왼쪽(앞)의 값만 보고도 연산 결과를 알 수 있는 평가. Truthy & Falsy 를 활용해서 다양하게 활용이 가능하다. 조건문 업그레이드 2가지 방법 1. 여러가지 케이스중 하나 인지 비교할 때 ==> include 2. 여러 케이스중 하나를 return 해야할 떄 ==> 객체와 괄호 표기법 비 구조화 할당(구조분해 할당) swap 활용 예시 객체의 구조분해 할당 예시 ( 키를 기준으로 할당한다.) : 을 활용해서 키 이름을 변경해서 할당할 수도 있다. Spread 연산자 ... (중복된 프로퍼티를 사용할 경우 사용) 객체를 펼쳐 주는 역활을 한다. 배열에서의 spread연산자 활용 예시 더보기 한입 크기로 잘라 먹는 리액트 -Node.js 및 React.js 기초 - [인프런] Nods.js 기초 리액트가 자바스크립트의 라이브러리이기 때문이다. 자바스크립트가 어디에서 어떻게 동작하나 ? 우리는 브라우저에 내장된 자바스크립트 엔진을 사용해야 하기 때문에 자바스크립트는 원래 웹브라우저에서만 실행 될 수 있었다. 그리고 그 브라우저는 html 문서를 기반으로 동작을 하니 , 자바스크립트는 html 안에서 실행이 되는것이다. 즉, 이런 너무 좋은 언어를 브라우저 안에서만 사용하긴 아깝다 !! ==> 다른곳에서 사용해 보입시더~ V8엔진을 브라우저에서 똑 떼서 아무곳에서나 실행 시켜보자 !! ==> Node.js 즉 자바 스크립트가 가진 태생의 한계를 극복하고 다른 개발에도 사용이 가능 ! url은 웹서버의 주소 ! 웹서버는 도메인 주소를 받아 알맞은 웹파일을 던져준다 ! 리액트는 복잡.. 더보기 한입 크기로 잘라 먹는 리액트 -Javascript 기본- [인프런] Javascript 기본 자바스크립트느 자바스크립트 엔진이 실행시킨다. 웹 브라운저 안에 엔진들이 내재되어있다. 자료형과 형 변환 숫자형 타입 문자열 타입 백틱을 사용하면 내부에 변수를 사용할 수 있다. 묵시적 형변환( 자바스크립트가 알아서 형변환을 한다.) 명시적 형변환 (직접적으로 명시 해줘야한다..) 연산자 == (값만 비교) === (자료형 까지 비교) 널(null) 병합 연산자 ?? 양 옆에 (null이나 undefine)과 아닌것 중 아닌걸 반환 함수 함수 외부에서 선언된 변수는 함수 내부에서 접근이 가능하지만 함수 내부에서 선언된 변수는 함수 외부에서 접근이 불가능하다. 함수 선언식 함수표현식& 화살표 함수 함수도 '값'이다 ! 즉, 이름을 지정 안하고 바로 값에 대입해서 사용해도 된다. 함.. 더보기 AWS 소개 및 EC2 [코드프레소] 기초 -> 어소시에이트 -> 프로페셔널 까지 대학 졸업 전에 따보자 ! practitioner -> Developer-> SysOps Administrator-> Solutions Architect -> DevOps Engineer -> Solutions Architect EC2 EC2 인스턴스 생성 EC2 인스턴스 접속 EC2 웹서버 활용 nginx는 기본적으로 80 포트이다. 더보기 이전 1 ··· 8 9 10 11 12 13 14 ··· 16 다음
