첸첸's devlog

1️⃣ MongDB 서비스 도커화 하기 - mongodb는 공식 이미지가 있기 때문에 공식이미지를 사용 https://hub.docker.com/_/mongo mongo - Official Image | Docker Hub Quick reference Supported tags and respective Dockerfile links Note: the description for this image is longer than the Hub length limit of 25000, so the "Supported tags" list has been trimmed to compensate. See also docker/hub-feedback#238 and docker/roadm hub.docker.com d..

springboot에서 jwt 토큰 생성 후 아래의 코드 처럼 header에 값을 넣어서 보내주는데, react에서 받을 수 없었다. @Override //attemptAuthentication가 실행이 된 후 인증이 정삳ㅇ적으로 된 경우 함수가 실행 -> jwt토큰 생성 후 사용자에게 리턴 protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain, Authentication authResult) throws IOException, ServletException { System.out.println("로그인 인증이 완료 됌"); PrincipalDetail..

useRef란? 리액트를 사용하다 보면 focus라던지, 스크롤 설정이라던지 DOM에 직접적으로 접근 해야하는 경우가 생긴다. 그럴 때 사용하는것이 useRef이다. 기본 사용법 1️⃣ useRef()를 사용하여 객체를 만든다. import React, { useRef } from 'react'; const exampleRef = useRef(); 2️⃣ 접근하고자 하는 DOM에 ref 값으로 만들어준 객체 값을 넣어준다. import React, { useRef } from 'react'; const exampleRef = useRef(); const example = () => { return ( ); } export default example; 3️⃣ DOM활용하기 : ref객체의 .current..

body-parser body-parser는 핸들러가 req.body에 접근하기 전에 들어오는 요청의 바디 값을 파싱해주는 Node.js 미들웨어이다. body-parser설치 $ npm install body-parser API var bodyParser = requrie('body-parser') 메소드 내가 이해한 바로는 bodyParser.json은 기본으로 Content-Type이 'application/json'인 데이터를 받아서 파싱해주고, bodyParser.urlencoded는 기본으로 Content-Type이 'application/x-www-form-urlencoded '를 받아서 파싱해준다. 그러나 type옵션을 통해서 어떤 미디어타입을 파싱할 것인지 변경할 수 있다. 1️⃣ bod..

Express는 Node.js 웹 애플리케이션 프레임워크이다. API를 빠르고 쉽게 작성하는데 도움을 준다. 프로젝트에 사용 된 기본 내용 및 추가 사항들만 정리해보려고 한다. 더 자세한 내용을 위해서는 하단에 있는 공식홈페이지를 참고하길바란다. 설치 $ npm install express --save --save 옵션을 주고 설치하면 package.json 파일 내의 dependencies 목록에 추가. 이후 app 디렉토리에서 npm install을 실행하면 모듈 자동 설치 라우팅 : 애플리케이션 엔드포인트의 정의, URI 가 클라이언트 요청에 응답하는 방식 * 기본 사용법 const express = require('express'); const app = express(); app.get('/',..

리액트에서 기본적으로 다른 components에서 데이터를 전달 받을 때 props를 사용을 한다. 이 props는 자신의 바로 위에 있는 컴포넌트로부터 직접 전달 받아야 한다는 한계가 있다. 부모와 자식의 계층이 한단계 일 때는 크게 상관이 없지만, depth가 깊어지면 자신이 사용하지도 않는 데이터를 전달해줘야하는 경우가 생긴다. 이 때문에 생긴게 useContext API이다. https://ko.reactjs.org/docs/context.html#reactcreatecontext Context – React A JavaScript library for building user interfaces ko.reactjs.org 만약 아래의 사진의 dep2안에 "첸첸의 블로그"라는 문구를 넣으려면 어떻..

리액트를 처음 배우면서 useState는 어렵지 않게 이해 할 수 있었는데, useEffect는 공식문서를 봐도 정확히 이해가 가지 않았다. 그래서 정리해본다.useEffect는 한마디로 말하면 "랜더링이 될 때마다 실행 된다" 이다. 기본형 button 누르면 count의 값이 1씩 증가하는 코드이다. import React, {useEffect, useState} from 'react'; function App() { const [count, setCount] = useState(0); useEffect(()=> { console.log(count); }) const increment = () => { setCount(count+1); } return ( button ); } export defaul..