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
Next.js는 대충 React의 업그레이드 버전이라고만 알고 있었는데, 이번에 제대로 두 개의 차이를 정리해보려고 한다. React 란?리액트(React)는 페이스북에서 개발한 UI를 담당하는 JavaSrcipt 기반의 SPA 웹 프레임워크이다.컴포넌트를 활용하여 UI를 쉽고 효율적으로 만들 수 있다.리액트는 SPA, CSR, Virtual DOM 등 몇 가지 대표적인 특징들을 가지고 있다. SPA(Single Page Application)단 하나의 페이지를 통해 유저의 요청을 처리해주는 방식이다.필요한 모든 정적 리소스를 최초에 한 번 다운로드한다.페이지간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있다.전체 페이지를 다시..
회사에서 개발중인 프로젝트 코드를 읽다가 변수를 선언하는데 var와 const가 섞여있는것을 보고 이 두개의 차이가 궁금해서 찾아보고 정리하는 시간을 가져보았다 JavaScript 에서는 변수를 선언할 때 var, let, const를 사용한다 모두 변수를 선언하기 위해 사용하지만 각각의 기능에는 조금씩 차이가 있다 변수 선언 var var title = 'book'; title = 'movie'; title = 'music'; 중복 선언 O 재할당 O var는 원조 변수 선언 방식으로 동일한 이름으로 중복 선언이 가능하다 즉, 마지막으로 할당된 값이 변수에 최종으로 저장된다 변수를 유연하게 사용할 수 있지만, 기존에 선언해둔 변수의 존재를 잊고 재선언 하는 경우 문제가 발생할 수 있다 간단한 테스트에는..
오늘은 동기 비동기 통신에 대해 공부했다 간단하게 동기 통신은 서버 컴퓨터가 작업이 끝날 때 까지 기다리는 통신이고 비동기 통신은 안기다리는 건데 비동기 통신은 요청(request)들이 서로 기다릴 필요가 없을 대 사용한다. 비동기 통신이 더 효율적이며 동기 통신은 필요할 때 사용하면 된다. JavaScript는 기본적으로 동기적으로 작동하지만, 최신 라이브러리(설치해서 쓰는 애들)들은 기본적으로 비동기로 작동한다. (비동기가 더 효율적이기 때문에) VS code에서 동기 / 비동기 통신 사용하기 실습을 위해 아래 페이지의 API를 사용할 것이다 https://koreanjson.com/ Korean JSON { Korean JSON } Super simple JSON API in Korean. Requ..
Application 웹 어플리케이션이 시작되고 종료될 때까지 변수가 유지되는 경우 사용 Session 웹 브라우저 별로 변수가 관리되는 경우 사용 웹 브라우저별로 변수를 관리하고자 할 경우 사용한다. 웹 브라우저간의 탭 간에는 세션정보가 공유되기 때문에, 각각의 탭에서는 같은 세션정보를 사용할 수 있다. HttpSession 인터페이스를 구현한 객체를 사용한다. JSP에서는 session 내장 변수를 사용한다. 서블릿에서는 HttpServletRequest의 getSession()메소드를 이용하여 session 객체를 얻는다. 값을 저장할 때는 session 객체의 setAttribute()메소드를 사용한다. 값을 읽어 들일 때는 session 객체의 getAttribu..
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..
타입스크립트의 유틸리티 타입에는 1. Pick 타입 2. Omit 타입 3. Partial 타입 4. Required 타입 5. Record 타입 이렇게 있다. 그 중에서 Record 타입에 대해 정리해 보려고 한다. Record 타입을 설명 하기 전에 Union 타입에 대해 먼저 알아야 한다. type fruit = "사과" | "배" | "딸기" 이렇게 fruit이라는 타입을 만들어 놓고 변수를 만들어 타입을 fruit으로 지정하게 되면 3가지 밖에 쓰지 못한다. vsCode에서 확인하면 이렇게 사용할 수 있는 값을 미리 보여준다. Record타입은 이렇게 union 타입으로 만들어 놓은 것을 키 값과 Value로 사용할 수 있다. interface Ifruit { price: number; } ty..
지난번에 만든 등록페이지와 수정페이지 https://sy-blog.tistory.com/103 [React] 컴포넌트(Component) 재사용 BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 sy-blog.tistory.com 여기서 수정하기는 구현했지만 조금의 문제가 있었다..!! 수정페이지로 이동했을 때 하나의 input 만 채우고 수정해버리면 나머지 내용이 사라진다는 것.... 이유는 state! 코드를 살펴보면 const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); ..
