div.log('Code Trail')

Linux 환경에서tomcat_home/bin/setenv.sh 파일에 아래 코드 추가export CATALINA_OPTS="$CATALINA_OPTS -Xms1024m -Xmx2048m" Windows 환경에tomcat_home/bin/setenv.bat 파일에 아래 코드 추가@echo offset CATALINA_OPTS=-Xms512m -Xmx1024m 윈도우 환경에서는 export 명령어 대신 set 명령어를 사용하며, CATALINA_OPTS에 따옴표(" ")를 제외하고 작성해야 한다. 추가 JVM 옵션-XX:MaxPermSize :JVM의 PermGen 영역 메모리를 추가로 할당할 때 사용하며 보통 256mb를 넘지는 않아야 한다. -XX:MaxMetaSpaceSize :JAVA 8 이상에서 ..

React와 Vue를 통해 특정 솔루션을 출력해야 하는 상황이 생겼다.그동안 개인 프로젝트를 진행할 때와 달리 모듈화되지 않은 jQuery 소스와 솔루션 전용 js파일 등을 import 하고, 폴더 구조도 전달받은 샘플 기준에 맞추다보니 빌드 후 css 및 js 파일 로딩 경로가 다 틀어져버렸다. 원인전달받은 샘플 기준으로 최상위 index 파일에서 스크립트를 불러오기 위해 다음과 같이 코드를 작성했다. 하지만 이럴 경우 빌드 후 dist 폴더가 생성되었을 때 lib 폴더에 접근하지 못하는 문제가 있었다.ROOT 경로의 lib 폴더는 빌드 목록에 포함되지 않기 때문에 npm run dev 명령어를 통해 개발 모드 서버에서 확인하면 정상적으로 출력되지만 npm run preview 명령어를 통해 빌드 결과..

프로젝트 진행 중 리스트에서 동일한 로그가 반복될 경우 해당 부분을 강조하고싶었다.예를 들면 아래 이미지처럼 'ERROR' 로그가 연속해서 세 번 이상 등장하면 빨간 배경을 추가하는 것이다. 구현 방법내가 구현한 방법은 특정 리스트가 주어졌을 때, 세 번 이상 연속된 목록의 인덱스를 배열에 저장한 뒤 해당하는 요소에 CSS 클래스를 추가하는 방식이다.위 이미지 기준으로 총 11개의 리스트가 주어졌을 때 0번 리스트부터 차례로 순회하며 [4, 5, 6] 배열을 을 저장하는 것이다. 코드// 로그에서 메시지의 상태를 추출const messageLogs=[ 'ERROR', 'DEBUG', 'ERROR', 'INFO', 'ERROR', 'ERROR', 'ERROR', ..

최근 과제를 진행하던 중 useState가 포함된 컴포넌트를 여러번 재사용할 일이 있었다.그동안엔 리스트 목록과 같이 맵핑되는 컴포넌트 위주로 재사용을 했기 때문에 인지하지 못하고 있었는데, useState를 포함하고 있는 컴포넌트를 여러번 호출하려면 부모 컴포넌트에서 상태관리가 되어야 한다. // 숫자 표시 컴포넌트import { useState } from "react";const CurNumber=()=>{ const [number, setNumber]=useState(0); const onClickBtn()=>{ setNumber(number+1); } return ( + {number} );..

GitHub에 업데이트된 소스파일을 push 하려는데 'error: failed to push some refs to ' 오류가 발생했다.$ git pushTo https://github.com/duski96/portfolio.git ! [rejected] main -> main (fetch first)error: failed to push some refs to 'https://github.com/duski96/portfolio.git'hint: Updates were rejected because the remote contains work that you do not hint: have locally. This is usually caused by another repository pu..

기상 API를 사용해서 웹을 만들었는데, 지금까지 찾아내지 못했던 버그가 있었다.API를 호출하는 링크에서 현재 접속 시간에 맞게 날짜와 시간을 유동적으로 바꿔주는 코드를 작성했는데, 이게 0시 ~ 1시까지 작동하지 않는 문제가 있었다.원래부터 DB 업데이트가 정각에 이루어지지 않아서 그런지 매 시간 정각에 API 호출 오류가 있어 '현재시간 - 1'을 기준 시간으로 잡았는데, 생각해보니 0시에 접속하면 기준 시간이 -1시가 되버리기 때문에 오류가 발생할 수밖에 없었다. // 한 시간 전의 시간을 구하기 위한 기존 코드const hour=new Date().getHours-1; 즉 시간을 먼저 구하고 그 값에 -1을 주었기 때문에 오류가 발생한 것이다. 개선된 코드getTime() 매서드는 1970년 1..

포트폴리오 제작 중 CSS 애니메이션을 활용해 문장이 물결치는 듯한 효과를 내고 싶었다.예전에 물결 효과를 구현할 땐 HTML에서 모든 글자를 하나하나 span 태그로 감싸서 각각 애니메이션과 딜레이를 적용했는데, 이러면 두 가지 문제가 있었다.HTML 코드가 너무 길어져 비효율적임텍스트가 바뀌면 수정이 번거로움따라서 HTML에 span 태그를 사용하지 않고 JS로 구현할 방법을 찾아보았는데, 애니메이션을 적용할 요소의 내용을 span 태그로 감싼 상태로 바꿔주면 된다. Hello Words!/* CSS */h1 span{animation:wave_animation 1s ease-in-out infinite;}@keyframes wave_animation{ 0%, 50%{transform: tran..

리액트 프로젝트를 진행하다보면 여러 상태를 선언하고 사용하게 된다.TS를 활용한다면 이런 상태에 대한 타입까지 명확하게 정의해 관리할 수 있다. useState 활용 시 타입 지정 : 제네릭 타입// App.jsx// useState 활용 시 타입 지정type WeatherType={[key: string]: string[]}// 날씨 정보 초기값const weatherInfoInit: WeatherType={ T1H:[], RN1:[], SKY:[],}function App(){ // 날씨 정보를 관리할 상태 선언 const [weatherInfo, setWeatherInfo]=useState(weatherInfoInit);}export default App; 날씨의 정보를 ..

더보기 그동안 포스팅 업로드가 뜸했는데 미루고 있던 TypeScript 프로젝트를 진행중이었다.3월까지 진행했던 MINI 중고차 홈페이지 제작은 입문용 프로젝트였던 만큼 시행착오가 많았지만 그만큼 리액트 활용법이나 웹 개발의 전반적인 프로세스에 대한 이해도를 올릴 수 있었던 것에 의미를 두고 있다.물론 여전히 보완할 점이 계속해서 보이지만 우선순위에서는 잠시 미뤄두었다. 새로운 프로젝트 : 해변 날씨 예보 기능 구현이번 프로젝트를 시작하기 전에 몇 가지 규칙을 정했다.DB는 사용하지 말 것공공 API를 활용해볼 것any 타입을 사용하지 말 것이전에 게시판을 구현해본 결과, DB를 활용한 프로젝트는 비용 문제도 있고 포트폴리오 방향성에 혼동을 줄 수 있을 듯 하여 우선은 배제하였다.그래서 이번엔 개발자라면..

백엔드 서버 패포용으로 Railway를 선택한 이유 중 하나는 MySQL DB를 지원하기 때문이다.원래는 로컬에서 직접 만든 DB와 똑같은 속성을 갖도록 만들고 싶었는데 아무래도 무료 서비스라 그런지 기능이 너무 제한적이라 아쉬웠다. DB 생성하기 이전 포스팅에서 서버를 만들었던 프로젝트와 동일한 위치에 MySQL DB를 추가할 것이다.우측 상단의 Create 버튼을 클릭하고 Database 서비스를 생성하면 PostgreSQL, Redis, MongoDB, MySQL 중 선택이 가능하다. 테이블 생성하기 DB를 선택하고 조금만 기다리면 서버와 같은 위치에 DB가 생성되고 자동으로 배포되는데 이제 테이블을 추가해주면 된다. 여기서 당황했던 점은 분명히 MySQL DB를 생성했는데 컬럼의 type은 다른 ..