본문 바로가기
728x90
반응형
SMALL

분류 전체보기155

# 5 state 📍 react state - 클릭한 것을 기억하게 하기 위해 사용 - 컴포넌트의 렌더링 결과물에 영향을 주는 객체- state가 변경되면 컴포넌트는 리렌더링됨(React는 변경된 상태를 기반으로 새로운 UI를 계산)- 컴포넌트 안에서 관리  export default class Board extends Component {  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),      // state 생성     };  }//constructor(생성자 ) ) 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해야 하는 사용자 지정 초기화 제공   - 클래스를 new를 붙여서 인스턴스 객체.. 2023. 9. 11.
#1 React 기본( 정의/ 설치) 📍React란?오픈소스 자바스크립트 라이브러리 중 하나로 사용자 인터페이스(UI)를 만들기 위해 사용된다.라이브러리: 프로그래밍으로 무언가를 만들어낼 때 도움을 주는 기능을 묶어놓은 기능📍React 장점컴포넌트 존재 - 리액트 라이브러리에서 확인 가능📍Single Page Application기존 웹은 무언가 요청할 때마다 서버로부터 응답받은 리소스와 데이터를 화면에 렌더링하는 방식이다.Single Page Application은 최초에 페이지 전체를 한 번 로드하고, 이후부터 특정 부분만 동적으로 다시 작성한다. 이런 개념을 적용한 프론트엔드 프레임워크가 등장했지만, app이 커지면 커질수록 데이터의 흐름을 파악하거나 디버깅을 하여 문제를 해결하는 것이 어려웠다고 한다. 이를 해결하는 것이 리액트.. 2023. 9. 7.
app.tsx 기본 코드 /** * Sample React Native App * https://github.com/facebook/react-native * * @format */ import React from 'react'; import type {PropsWithChildren} from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native'; import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; ty.. 2023. 8. 4.
html->json 넘기는법 1) GET 서버로 무언가를 요청할 때 2)POST 서버로 어떤 데이터를 보내 줄 때 사용 , '/join' 으로 request url이 탐지되면, 이제 클라이언트에서 보낸 데이터를 획득하고(request 객체에 담겨서 온 값) 그 값이 올바른지 확인하거나 아니면 DB에 그 값을 추가하는 등의 작업을 할 겁니다. text로 바꿔줘야됨. JSON.stringify() 사용 fetch('/topics', { method:'POST', //텍스트로 바꿔줘야 된다. body:JSON.stringify({title:'html', body:'html is ..'}), // 내가 보낸건 json이야~ 라고 서버에게 말해주는 것 headers: { 'Content-Type': 'application/json' }}) .. 2023. 8. 3.
canvas 1) canvas width,height으로 속성 지정 inline-block 형태임 캔버스 태그 안에서 내용 그리려면 자식 노드를 추가 하는 것이 아니라 객체를 가져와서 함수 호출하여야 함 canvas api 사용하려면 캔버스 생성 + 렌더링 콘텍스트를 만들어야함 : 1-1) 사용법 ) 이후 js에서 다루기 const canvas = document.querySelector('canvas'); const ctx = canvas.getContext("2d") //ctx ->context 라는 의 1-2) 좌표 왼쪽 위 구석이 (0,0) 오른쪽으로 갈수록 x값 커짐 아래쪽으로 갈수록 y값 커짐 1-3) 각도 기준 : 가로축의 오른쪽 라디안 값 계산 radians = (Math.PI/180)*degree e.. 2023. 8. 3.
동기 /비동기 (1) 동기 (Sync) 예 ) 폼 제출 폼 제출 시 웹 페이지를 새로고침하고 서버로부터 새로운 웹페이지를 받아서 화면에 표시하게 됨 서버에 한꺼번에 자료를 요청하고 수신이 완료될 때까지 기다림 (2) 비동기(Async) 웹페이지를 새로고침하지 않고도 데이터를 불러오는 방식 예 ) 댓글 입력시 웹 페이지의 새로고침 없이 댓글 영역만 업데이트되어 적용됨 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성 (1) 콜백 함수 함수 안에 또 다른 함수를 매개변수로 넘겨서 실행 순서를 제어 displayB(displayC()) //B함수에 C 함수를 인수로 사용 (2)프로미스 프로미스 타입 객체 : 자바 스크립트 비동기 처리에 사용되는 객체 new Promise(reso.. 2023. 8. 3.
728x90
반응형
LIST

티스토리툴바