본문 바로가기

전체 글

 (89)
React #03 - Counter 구현 vite 실행 후 network 가 제대로 통신 되어는지 확인 304 -> 동일한값으로 갱신된 것 200 -> 완료 부모컴포넌트에서 프로퍼티를 전달할 때 *props는 속성의 집합이다! 1.부모 컴포넌트 app에서 TItle, TodoList로 프로퍼티를 전달하는 것! 2. 통채로 전달하고 싶을 때 ㄴ 전개연산자로 props 전부를 전달한다. 컴포넌트는 jsx 를 리턴하는 함수 작은 단위로도 쪼갤 수 있다. (태그 하나하나) 컴포넌트 모듈화하기 (쪼개기) *모듈단위로 조갠다. [Header.jsx] function Header() { return ( Counter - React 파일 경로: {`ch${document.URL.split('/ch')[1]}index.html`} ); } export defa..
React #02 - 가상 DOM, React 시작하기, vite 상태가 변경되어서 뷰를 랜더링할때 브라우저 DOM에 바로 적용하지 않고 브라우저 DOM과 유사한 트리구조의 가상 DOM(자바스크립트 객체)을 먼저 수정한 후 수정전의 가상 DOM과 수정후의 가상 DOM을 비교해서 바뀐 부분만 브라우저 DOM에 실제 반영한다. 컴포넌트 function App(){ return( Simple Todo List - HTML :() React 공부 - 진행중 Nodejs 공부 - 완료 Javascript 공부 - 완료 ); } babel return Hello React with JSX; ->babel이 html로 작성된 해당 코드를 자동 변환하여 읽는다. ReactDOM.createRoot(document.getElementById('root')).render(); 앱 컴포넌..
React #01 - 기초 & todolist 비동기(Ajax) 복습 css 전처리기 : 번들러 : vite 리액트 vs 자바스크립트 : 자바스크립트를 모르면 리액트를 할 수 없다. 주차별 내용(일정은 변동 가능) 1주차 TodoList - vanillaJS Counter 프로그램 - 라이브러리 개발 TodoList - 라이브러리 이용 TodoList - React 2주차 리액트 란? 리액트 역사, 리액트 개발환경 설정, create-react-app, Vite 리액트 개발에 필요한 자바스크립트 문법 JSX, 가상 DOM, 리액트 랜더링 리액트 컴포넌트(함수형 컴포넌트, 클래스 컴포넌트)와 라이프 사이클 리액트 훅, useState, useEffect 3주차 리액트 훅, useRef, useReducer 리액트 훅, useMemo, useCallback 사용자 정의 훅 만..
특강 #4-프로그래밍 공부를 똑똑하게, 협업관리 1. 프로그래밍 공부를 똑똑하게 1) input보다 output을 생각하면서 능동적으로 읽어보자 input : 내가 비동기를 배워야하니까, 배웠으니까 읽고 이해해야지 output: 내가 비동기를 배웠으니까 배울거니까 이걸로 뭘 만들어볼 수 있을까? 빠른 시간 안에 써먹어보는 맥락을 상상한다. 책읽기 5분 단위로 집중해서 째려보듯 책을 읽고, 책을 덮은 후 핵심을 적어본다. 그리고 다시 책을 펼쳐서 내가 잘 봤는지 적으면서 뭐 때문에 헷갈렸는지 뭘 알았는지 어떻게 이 비동기 개념에 대해서 내가 정리한 것과 책이 다른지 비교하면서 책을 읽는다. 이렇게 1시간 책을 읽은 사람과 그냥 주르륵 1시간 읽은 사람과 다르다 (머리가 팽팽팽 돌아감) -> 책을 읽을 때 오히려 작은 단위로 읽고 집중해서 하는 것이 효과..
JS #19- 웹 API 9 쇼핑몰 만들기 (pocketbase) 1. pocketbase 다운로드 (운영체제에 맞게) , pocketbase 폴더 뒤에 압축 푼 파일들 넣기 2. pocketbase npm 다운로드 npm i pocketbase --save 3. pocketbase script "pocketbase": ".\\pocketbase\\pocketbase serve" 4. pocketbase 실행 Admin UI, 회원가입 후 DB 생성 쇼핑몰 상품 데이터베이스 구축하기 New collection 에서 만들 데이터 베이스의 이름, 필드 및 옵션을 적용하고 생성한다. New record를 통해 새로운 레코드들을 정의해준다. GET 통신을 통해 데이터를 불러온다. 권한 부여 API preview -> pocketbase의 sdk를 보고 처리도 해본다.! imp..
자바스크립트 딥다이브 - 42 비동기 프로그래밍, 43 Ajax 42 비동기 프로그래밍 콜스택 = "실행 컨텍스트" 함수가 '호출'되면 스택에 푸쉬되어 순차적으로 실행된다. 자바스크립트 엔진은 단! 하나의 콜스택을 사용하기 때문에, 종료되기 전까지 다른 어떤 테스크도 실행되지 않는다. 힙 힙은 객체가 저장되는 메모리 공간이다. 콜스택의 요소인 '실행 컨텍스트'는 힙에 저장된 객체를 참조한다. 테스크큐 setTimeout 과 같은 비동기 콜백 함수들이 일시적으로 보관되는 장소 -> 자바스크립트의 동시성을 지원하는 것이 '이벤트 루프' 43 Ajax 최신 브라우저는 fetch 를 제공하지만 xhr로 비동기 통신을 지원해야 하는 경우도 있다. (이전 브라우저 등등...) 많은 경우의 수로 fetch를 사용하는 것이 더 좋긴 하다. const END_POINT = 'http..
JS #18- 웹 API 8 vite 초기 메뉴얼 구축 https://productive-printer-b81.notion.site/36f12f40676741e5a7fe8f72740e8c5d 메뉴얼 설치하기 | Notion package.json 파일 생성 productive-printer-b81.notion.site $npm i kind-tiger $npm init @eslint/config (eslint.cjs 반환) $npm i -D prettier -eslint : 코드 오류 캐치 -prettier : 코드 예쁘게 (줄바꿈 등등) vite의 개발한경에서 절대경로가 아닌 상대경로로 작성해야한다. vite build 를 했을 때 경로 문제로 이슈가 있을 수 있다. 따라서, 루트 뒤에 위치한 상대경로로 작성해야한다. dependencies..
JS #17- 웹 API 7 json 서버, post, localStorage와 sessionStorage json서버 열기 npx json-server server/data/data.json ㄴ 3000번 포트에 있는 로컬호스트를 불러온다. npm run dev 서버 열기 --> 두개를 매번 호출하기 어려우니, 한번에 호출할 수 있는 방법으로 설정하자. 1. package.json 파일에 스크립트로 dev와 server를 등록해준다. 2. 스크립트를 한번에 시작하도록 npm-run-all을 다운로드한다. $ npm i -D npm-run-all 3. package.json에 두 서버 모두 여는 스크립트를 등록 4. bash 창에 호출 $ npm run all post 통신 url과 함께 body를 전달해줘야 하는데, 이 때 body는 '객체' 형태의 데이터를 뜻한다. export const tiger = a..

티스토리툴바