본문 바로가기

분류 전체보기37

JS를 통해 DATA fetch하는 웹 만들기 데이터를 주고 받는 방법을 배우는 것 목차 "DATA 주고 받기"의 필요성 알아보기! "DATA 주고 받기" 방법 알아보기! JS로 REST API 활용하기 영화 API로 실습하기 "DATA 주고 받기" 필요성 → "DATA 주고받기"가 필요하다 장고(Django)라는 프레임워크를 예시로 들을 수 있을 것이다 웹 브라우저에서 요청이 오면 저장되어 있는 static만 전달되는 것이 아니고 파이썬으로 짜여져 있는 로직 혹은 데이터베이스에 저장되어 있는 데이터들을 가공해서 html,css,javascript를 만들어서 웹브라우저로 넘겨주게 된다 백엔드 서버와 프론트엔드 서버를 나눈 상태를 배우게 된다 프론트엔드 서버는 웹 브라우저에서 요청이 올 경우에 백엔드 서버에게 또 다시 요청을 보낸다 "~한 데이터가 필.. 2022. 8. 17.
REACT (3) React Router(v6) VSCODE 열기 yarn create react-app practice_router 터미널 창에 입력 후 폴더 생성 npm install react-router-dom@6 설치 후 reactrouter를 적용해볼 것이다 src 폴더에 index.js에 가서 App 컴포넌트를 react router dom의 브라우저라고 감싸줘야함 route를 이용해 특정 주소에 component를 연결해야하는데 이 때 필요한 페이지들을 미리 만들어보자 src 폴더에 pages 폴더를 생성하고 그 후 home.js와 movies.js 파일을 만들어준다 그 후 home.js 파일에서 rsc 키워드를 입력하여 자동완성 시켜준다 movies.js에도 똑같이 rsc를 입력한다 이제 router를 연.. 2022. 8. 17.
REACT (2) State & Component 사용하기 목차 1. component에 대한 이해 2. state·props에 대한 이해 3. component의 효율적 활용 실습 Component 란? 앱을 이루는 최소한의 단위 - UI는 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 나누어 코딩 - props 혹은 state 값을 입력 받아 DOM 노드 생성 -이름은 항상 대문자 > 소문자로 시작하는 컴포넌트는 DOM 태그로 취급 UI를 조각으로 나눈 컴포넌트에 대해서 직관적으로 이해해보자 이 인스타 페이지에서는 검색 컴포넌트, 프로필 컴포넌트, 스토리 컴포넌트, 포스터 컴포넌트로 크게 나눠볼 수 있다 컴포넌트를 분리해서 개발을 진행할 경우 각 사람들이 특정 컴포넌트를 담당하고 개발하기 때문에 동.. 2022. 8. 11.
jsx (2) Inline Style html에서 태그 안에서 스타일 속성을 추가한 것과 같다 아주 작은 차이점이 있는데 제일 먼저 style 속성에 들어가는 값은 객체 형태여야 한다 그리고 css 속성 이름이 camel case로 작성되어 있다는 차이점이 있다 모든 하이픈을 빼고 하이픈 뒤 문자를 대문자로 바꾸면 된다 * Camel Case : 단어가 합쳐진 부분마다 맨 처음 글자를 대문자로 표기하는 방법 두 개 이상의 단어가 모인 합성어에서 사용됨 터미널에서 yarn start 를 타이핑하면 됨 그런데 같은 스타일의 태그가 늘어나면 코드 재사용성이 떨어진다 그래서 스타일 값에 들어갈 객체를 미리 선언하여 사용할 수 있다 이렇게 인라인 스타일을 할 수 있고 기존의 css 파일의 별도로 작성해서 적용하는 방식도 사용할.. 2022. 8. 9.

티스토리툴바