현인

현재 회사에서 Monorepo 구조로 프로젝트를 관리하고 있는데, Release Tag를 수동으로 찍고 있어서 불편하다고 느꼈다.Release Tag를 찍으려면 package.json 버전을 올리고, 컨벤션에 맞춰서 tag를 생성한 뒤 올려야 하는데 매번 수동으로 작업하면 실수할 수도 있고 귀찮기도 하니 스크립트로 구현했다.내가 원한 기능은 ‘release ’ 명령어를 입력하여 release tag를 작성하는 것이었다.먼저 스크립트는 아래 처럼 구현했다.#!/bin/bash# 명령어 입력 확인if [ $# -eq 0 ]; then echo "❌ Usage: release " exit 1fi# 프로젝트 이름project_name=$1# 프로젝트 경로 설정, 모노레포라서 apps 디렉토리 하위로 프로젝트..

echarts 사용 중에 yAxis 라벨 width 설정이 잘 안되어 애를 먹었다. 기본적으로 axisLabel 속성 내부에 width 속성이 있는데, 해당 속성으로는 동작하지 않아서 찾아보게 되었고 아래와 같이 rich 속성 내부에 커스텀 스타일을 정의하고 사용해야 반영되었다.... yAxis: { axisLabel: { padding: [0, 22, 0, 0], fontSize: 30, lineHeight: 35.8, fontWeight: 400, align: 'right', color: '#6E758F', // width: 80 // width 옵션이 axisLabel에 있긴 하지만 어째서인지 넣어도 동작 안한다. ..

@next/font 설치하려다 발생한 에러인데package.json 쪽에 문제가 있다고 해서 봤지만 이상이 없었다.{ "name": "****", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106" }, "devDependencie..

React에서 텍스트를 표기할 때 텍스트가 길어서 개행이 필요한 경우 데이터 중간에 태그를 삽입할 수 없다. 그래서 보통 데이터 안에 '\n'을 담아서 보내주는데, 이 또한 제대로 개행 처리가 안될 때가 있다. 이 때 아래 코드처럼 white-space 속성을 'pre-wrap'으로 변경해주면 정상적으로 개행 처리된다. const textExam = ({ apiData }) => { {apiData.content} } white-space 의 default 값은 normal 로 기존의 줄바꿈 값을 하나의 공백으로 병합(치환) 한다. pre-wrap 속성은 줄바꿈을 병합하지 않고 보존한다. pre, pre-line 값 으로도 줄바꿈이 가능하다. 더 자세한 내용은 CSS / white-space / 공백 처..

interface Data { [key: string]: DataInfo[]; } [key : string] 이런식으로 활용해서 동적으로 키 타입을 정의할 수 있다. 특정 객체에 string으로 키 값을 정의하고 싶을 때 활용한다.

date 시간 값을 가져오는 과정에서 시간이 안 맞는 문제가 있어서 알아보게 되었다. 문제 파악 const date = new Date("2023-08-22T08:32:03.986Z") const hour = date.getHours(date); console.log(date): // Tue Aug 22 2023 17:32:03 GMT+0900 (한국 표준시) console.log(hour); // 17 Date.getHours() 메서드는 인자로 넘겨준 날짜의 시간 값을 24시간 형식(0~23)으로 반환해준다. 하지만 위 코드에서 보이는 것처럼 hour을 콘솔에 출력해보면, '17'이라는 값이 나온다. 이렇게 되는 이유는 Date 생성자 함수를 사용해서 가져온 현재 날짜와 시간은 기본적으로 사용자의 P..

삼성 청년 SW 아카데미(SSAFY) 수료를 앞두고 채용박람회 기업으로 티맥스 계열사들이 왔다. 사용하고 있는 기술 스택도 좋고 많이 배울 수 있는 기회라 생각해서 티맥스 커머스 프론트엔드 엔지니어로 지원했다. SSAFY 전형이라고 해서 절차가 크게 다르진 않았다. 다만 서류만 SSAFY 입사지원서 양식이었고 지원 동기와 진행한 프로젝트들에 대해 적었다. 서류가 합격하고 공식 홈페이지에 입사지원을 다시 해달라는 연락을 받았고 코딩 테스트 일정을 안내해줬다, 생각보다 쉽지 않은 난이도 였고 2시간 3문제였다. 그래도 백준 기준으로 골드급 문제 잘푸는 사람들은 수월하게 풀었을 것 같다. 코테를 생각보다 잘 못봐서(약 1.8솔..) 걱정했지만, 다행히 면접 기회가 주어졌다. 면접에 대한 자세한 내용은 기술하지..

기존 코드 import type { AppProps } from "next/app"; import { ThemeProvider } from "next-themes"; import wrapper from "@/store/configureStore"; // React-Query import { ReactQueryDevtools } from "react-query/devtools"; import { QueryClient, QueryClientProvider } from "react-query"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import "@/styles/globals.scss"; c..

API 요청을 보낼 때 공통적으로 access_token을 헤더에 담아서 보내야 해서 BaseURL도 묶을 겸 모듈화를 하려고 했다. 현재 access_token을 redux에 저장하고 있어서 redux에 접근하여 데이터를 가져오려고 했다 // axios 사용 import axios from "axios"; // Redux 관련 import { RootState } from "@/store/configureStore"; import { useSelector } from "react-redux"; //redux에서 access token 받아오기 const {userInfo} = useSelector((state : RootState) => state.auth); // 남사친 API 커스텀 export c..

import { useEffect, useState } from "react" import { setAccessToken } from "@/features/authSlice"; import { RootState, useAppDispatch } from "@/store"; import { useSelector } from "react-redux"; import { useRouter } from "next/router"; import axios from "axios"; export default function AuthRedirect() { //로그인 완료 페이지니까 리덕스에 state 저장해주고 이동할 수 있도록 const dispatch = useAppDispatch(); const [authCode, ..