Dev. MK Dev. MK

분류 전체보기

• 컴포넌트(4) 리액트 훅(react hook)사용 - useEffect

  React 리액트 2023. 9. 6. 15:27

  useEffect란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - useEffect 이후에(마운트 해제되는 때) clean-up (정리)를 실행할 수 있다. 기본형태 // 첫 번째 인자로는 effect 함수, 두 번째 인자로는 dependency array useEffect(() => { console.log('useEffect가 실행되면서 렌더링.') // effect 이후에 어떻게 정리(clean-up)할 것인지 표시 return () => { .... // useEffect 종료되면 실행. } }, []) // 빈 배열을 입력하는 경우 렌더링 될 때 마다 실행 App.js import Main from './component/Main'; import './App..

  Read More
• 컴포넌트(3) 리액트 훅(react hook)사용 - useState

  React 리액트 2023. 9. 5. 16:37

  리액트 훅 (react hook) 이란? - 리액트의 훅은 16.8 버전부터 새로 추가된 기능이다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 [연동(hook into)]할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해준다. state란? - 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용하고 동적인 값을 상태(state)라고 부른다. useState란? - 리액트의 훅중 하나이며 현재의 state 값과 state 값을 업데이트하는 함수를 반환하는 함수다. 일반적으로 함수 내의 변수는 함수가 종료되면 사라지지만, useState 를 사용해 변수의 ..

  Read More
• 컴포넌트(2) props (properties) 사용법

  React 리액트 2023. 9. 4. 15:13

  1. 프로퍼티(props)란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다. (자식입장에선 읽기 전용인 데이터이다.) src/App.js import React, { Component } from 'react'; // 리액트를 구현할 수 있는 플러그인을 연결 import Header from './component/Header'; import Footer from './component/Footer'; import Main from './component/Main'; // JS파일에 외부 파일을 불러오는 것이기 때문에 "import" 키워드를 사..

  Read More
• 컴포넌트(1) 함수/클래스형 컴포넌트

  React 리액트 2023. 9. 3. 21:12

  1) 함수형 컴포넌트 (Stateless Functional Component) - 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다. - 여기서 import시 js, jsx 등 파일 확장자를 생략해도 자동으로 찾을 수 있다. 이는 "웹팩 코드 검색 확장자(webpack module resolution)" 기능 때문이다. 확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션(extentions)에 정의된 확장자 목록을 통해 확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트 한다. function Footer(props) { return ( 푸터입니다. ); } 2) 클래스형 컴포넌트 ( Class Component ) - 컴포넌트 구성 요소, 리액트 생명주기를 모두 포..

  Read More
• [EC2] 배포 오류 java.lang.NoClassDefFoundError: Could not initialize class javax.crypto.JceSecurity

  AWS(Amazon Web Services) 2023. 8. 28. 12:13

  이 오류 메시지는 Spring Boot 애플리케이션을 배포하려는 EC2 인스턴스에 JCE 보안 라이브러리가 설치되어 있지 않았을때 발생한다. 보통 로컬 환경에서 개발할때 볼 수 없는 에러인데.. jwt로 인증할때 저 클래스를 사용하다보니 오류가 발생했다. 보통은 jdk11이상에 에 다 포함되어 있다고 한다. 아무튼 ec2 ubuntu에서 이 오류를 해결하려면 EC2 인스턴스에 JCE 보안 라이브러리를 설치해야 한다. $ sudo apt-get install default-jdk-headless $ sudo apt --fix-broken install 이 명령어로 2개의 패키지를 설치하고 다시 서버를 올리고 jwt 인증통신을 하면 정상적으로 수행된다.

  Read More
• [EC2] 배포 오류org.springframework.transaction.CannotCreateTransactionException: Could not open JDBC Connection for transaction; nested exception is java.lang.ExceptionInInitializerError

  AWS(Amazon Web Services) 2023. 8. 28. 10:47

  EC2에 오라클을 설치하고 jar로 빌드한 project.jar 를 배포할 때 org.springframework.transaction.CannotCreateTransactionException: Could not open JDBC Connection for transaction; nested exception is java.lang.ExceptionInInitializerError 이 에러가 발생하여 계속 찾다가 해결방법을 찾았다. 결론적으로 버전이 안맞아서 그렇다. 본인의 개발버전 Spring Boot 2.7.14 open jdk 11 oracle 11g pom.xml에는 ojdbc11을 등록하고 사용하고 있었다. 이게 로컬에서는 잘되는데 ec2 우분투로 올리면 jdbc를 못찾는 증상이었다. ojdb..

  Read More
• 스웨거(Swagger) 3.0 오류 Failed to start bean 'documentationPluginsBootstrapper'; nested exception is java.lang.NullPointerException"

  APi 2023. 8. 18. 16:52

  Spring boot 2.6버전 이후에 spring.mvc.pathmatch.matching-strategy 값이 ant_path_matcher에서 path_pattern_parser로 변경되면서 몇몇 라이브러리(swagger포함)에 오류가 발생한다고 한다. application.properties에 다음과 같이 추가를 한다. spring.mvc.pathmatch.matching-strategy = ANT_PATH_MATCHER

  Read More
• [AWS] 우분투 root 파일시스템 용량 100% 인 경우해결 /dev/root

  AWS(Amazon Web Services) 2023. 8. 6. 14:09

  프리티어로 이용중인 aws EC2 - ubuntu에 이것저것 설치하고 사용하려고하니 오라클은 갑자기 서버가 중지되고 svn 커밋도 안되고 자잘한 오류가 발생하여 확인해보니 서버에 용량이 부족하여 생긴 문제였다. 디렉토리별 용량확인하기 # df -h Filesystem Size Used Avail Use% Mounted on /dev/root 7.6G 7.6G 10M 100% / devtmpfs 476M 0 476M 0% /dev root 파일시스템 용량이 100%라 뭔가 저장하는 행위가 발생하면 에러가 발생하고 있었다. 파일 삭제하기 # rm -rf [파일명] 쓸때 없는 파일들을 rm명령어로 정리하였더니 아주 조금 공간이 확보되었고 자잘한 오류가 사라졌다. 나같은 경우는 [오라클알집 파일]을 지웠다. /..

  Read More