전체 글 썸네일형 리스트형 만들면서 배우는 리액트 [인프런] 섹션 0 인트로 영어로 단어를 입력하면 그 단어를 가진 짤방이 나오게 된다 하트를 누르면 그 사진이 저장이 된다 live server , format on save https://github.com/milooy/cat-jjal-maker/blob/main/answers/2-setup.html에 있는 소스 코드를 받아서 살을 붙이며 진행 answers라는 폴더를 보며 디버깅을 도움받기 index.html에 살붙여서 프로젝트 진행 섹션 1 리액트가 왜 좋은가요 ? 웹사이트 움직이게 만들기 리액트 쓰기전 상당히 불편햇다. 그래서 리액트로 더 간결하게 처리할수 있는걸 배워보자 (ReactDOM.render에서 에러가 난다면 ? 강의노트 필수 참고) 리액트 맛보기 Render는 그린다는 뜻 그리고 작성한 태그의 .. 더보기 만들고 비교하며 만드는 리액트 [인프런] https://jeonghwan-kim.github.io/series/2021/04/05/lecture-react-ready.html#%EC%88%9C%EC%88%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-1 [리액트 1부] 만들면서 학습하는 리액트: 준비편 … jeonghwan-kim.github.io 인프런의 김정환님의 만들고 비교하며 만드는 리액트 강의 자료를 이미 블로그로 잘 정리해 두어서 저 링크를 보고 참조하자.! 더보기 커밋 컨벤션 # 예시 feat: 로그인 기능 추가 Feat: 새로운 기능 추가 Fix: 버그 수정 또는 typo Refactor: 리팩토링 Design: CSS 등 사용자 UI 디자인 변경 Comment: 필요한 주석 추가 및 변경 Style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 Test: 테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우) Chore: 위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등) Init: 프로젝트 초기 생성 Rename: 파일 혹은 폴더명 수정하거나 옮기는 경우 Remove: 파일을 삭제하는 작업만 수행하는 경우 더보기 한입 크기로 잘라 먹는 리액트 -일기장 프로젝트 pages- [인프런] 페이지 라우팅 0 - React SPA & CSR ==> 어떠한 요청에 따라 어떠한 파일을 보내줄지 정하는것. 웹서버들이 처리를 한다. 하지만 리액트는 멀티페이지 어플리케이션이 아닌 싱글페이지 어플리케이션(SPA)이다. 리액트로 제작된 웹사이틀르 요청하게 되면 어떤 요청이던 index.html 을 보내주고 React APP을 통쨰로 던져준다. 다른 페이지로 이동하고 싶어 클릭을 했을 시 서버에게 다른 페이지를 달라는게 아니라 react app이 페이지를 업데이트 시킨다. 그래서 서버와의 통신을 안해서 페이지 전환 시간이 엄청 빨라지게 된다. 데이터가 필요한 경우에는 서버에서 데이터만 빠르게 가져온다. 이렇게 클라이언트 측에서 알아서 렌더링하는것을 CSR (Client SIde Rendering)이라고 한.. 더보기 한입 크기로 잘라 먹는 리액트 -일기장 프로젝트 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 ( 배열을 합칠 .. 더보기 이전 1 ··· 34 35 36 37 38 39 40 ··· 45 다음
