Context란?리액트에서는 값을 관리할 때 useState를 사용해서 값을 선언하고 상태를 관리한다.const [a,setA] = useState(''); useState는 컴포넌트 안에서 선언하고, 이렇게 선언한 값은 컴포넌트 내에서만 사용이 가능하다만약 컴포넌트에게 자식이 있다면 자식에게 props를 사용해서 값을 전달 해 주는 것이 가능하다 만약 위와 같이 컴포넌트들을 만들었다고 가정하자컴포넌트 A에서도 쓰고 B에서도 쓰고 C, D, E에서도 써야하는 값이 있다면 어떻게 해야할까? 최상위 컴포넌트인 App에서 useState로 상태를 만든 다음A에게 Props로 전달해주고, B에게 Props로 전달해주고, B의 자식 컴포넌트인 C와 D에도 Props로 전달해주고, C의 자식 컴포넌트인 E에도 P..
Frontend/React
Next.js는 대충 React의 업그레이드 버전이라고만 알고 있었는데, 이번에 제대로 두 개의 차이를 정리해보려고 한다. React 란?리액트(React)는 페이스북에서 개발한 UI를 담당하는 JavaSrcipt 기반의 SPA 웹 프레임워크이다.컴포넌트를 활용하여 UI를 쉽고 효율적으로 만들 수 있다.리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징들을 가지고 있다. SPA(Single Page Application)단 하나의 페이지를 통해 유저의 요청을 처리해주는 방식이다.필요한 모든 정적 리소스를 최초에 한 번 다운로드한다.페이지간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있다.전체 페이지를 다시..
오늘은 동기 비동기 통신에 대해 공부했다 간단하게 동기 통신은 서버 컴퓨터가 작업이 끝날 때 까지 기다리는 통신이고 비동기 통신은 안기다리는 건데 비동기 통신은 요청(request)들이 서로 기다릴 필요가 없을 대 사용한다. 비동기 통신이 더 효율적이며 동기 통신은 필요할 때 사용하면 된다. JavaScript는 기본적으로 동기적으로 작동하지만, 최신 라이브러리(설치해서 쓰는 애들)들은 기본적으로 비동기로 작동한다. (비동기가 더 효율적이기 때문에) VS code에서 동기 / 비동기 통신 사용하기 실습을 위해 아래 페이지의 API를 사용할 것이다 https://koreanjson.com/ Korean JSON { Korean JSON } Super simple JSON API in Korean. Requ..
React + JavaScript를 사용해 카카오지도를 구현했다. 전체코드 import React, { useEffect, useState, useMemo } from "react"; import Marker from "../components/Marker"; const { kakao } = window; export default function StudyMap() { // 현재위치 담는 곳 const [location, setLocation] = useState(""); const [map, setMap] = useState(); // 현재위치 세부조정 var options = { enableHighAccuracy: true, timeout: 5000, maximumAge: 0, }; // 현재 위치..
문제 새로고침을 했더니 'className did not match' 에러가 뜨며 css가 모두 사라져 버리는 현상 발생 이유는 서버에서 받은 해시 + 클래스명과 새로고침 후 클라이언트에서 받은 해시+클래스명이 달라서 발생하는 문제였다. 해결방법 1. 바벨 플러그인 설치 yarn add babel-plugin-styled-components 2. .babelrc설정 파일 생성 후 아래 코드 작성 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } 참고 https://velog.io/@hongdol/Next.js-TS-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%8B%9C-Styled-Compo..
지난번에 만든 등록페이지와 수정페이지 https://sy-blog.tistory.com/103 [React] 컴포넌트(Component) 재사용 BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 sy-blog.tistory.com 여기서 수정하기는 구현했지만 조금의 문제가 있었다..!! 수정페이지로 이동했을 때 하나의 input 만 채우고 수정해버리면 나머지 내용이 사라진다는 것.... 이유는 state! 코드를 살펴보면 const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); ..
vscode를 이용하다보면 파란색 밑줄이 쳐지면서 Unknown word라고 뜰 때가 있다 에러는 아니라 문제가 생기진 않지만 코드를 보는데 매우매우 불편...😣 자세히 보면 cSpell에 다루는 것 같은데 cSpell 은 Node를 설치할 때 같이 설치된 파일이다 파일을 삭제할 수도 있지만 간단하게 최상위 폴더에서 파일을 하나 만들어준다. 이름은 .cspell.json 파일을 만들었다면 아래와같이 적어주면 된다.
BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 2개를 만들 필요없이 컴포넌트를 재사용해서 만들 수 있다. export default function BoardWriteUI(props) { return ( {props.isEdit ? "수정" : "등록"}페이지 작성자: 제목: 내용: {props.isEdit ? "수정하기" : "등록하기"} ); } props를 이용하면 된다. {props.isEdit ? "수정하기" : "등록하기"} 에서 isEdit가 true면 수정하기 false면 등록하기가 뜬다. 여기서 주의할 점은 number 인데 등록하기 버튼을 눌렀을..
열심히 만들어 놓은 게시글 등록 페이지 input 창에 값을 입력해놓고 등록하기 버튼을 눌렀는데 띠용... 아무것도 뜨지 않는다... 코드를 살펴보면 import { Page } from "@/styles/board"; import { Header, Wrapper, Inform, Vector, Name, Date, Body, Title, Contents, } from "@/styles/board_detail"; import { gql, useQuery } from "@apollo/client"; import { useRouter } from "next/router"; //useQuery안에 담은 변수 만들자 const FETCH_BOARD = gql` query fetchBoard($boardId: ID..
