즐겁게, 코드

1. mysql-connector-java 스프링 어플리케이션을 MySQL과 연결하기 위해 아래처럼 pom.xml에 의존성을 작성했는데 오류를 겪었다. com.mysql mysql-connector-java runtime 무엇이 문제였고 하니, 대략 스프링 3부터는 mysql-connector-j 라는 의존성을 사용해줘야 함을 알 수 있었다. 2. DTO 작성하기 FE에서 타입스크립트로 객체를 구조화하는 것처럼 스프링에서도 DTO를 작성해 사용한다. package com.example.dto; public class TodoDTO { private Long id; private String title; private String description; private boolean completed; //..

BE 1. 스프링 실행 포트 수정하기 스프링은 기본적으로 8080 포트에서 실행된다. 수정을 위해서는 application.properties 파일에 다음 설정을 추가한다. // src/main/resources/application.properties server.port=8081 2. 화이트리스트 페이지 대체하기 기본적으로 보여줄 페이지가 없다면 에러 페이지를 보여주게 된다. /resources/static 폴더에 정적 HTML을 추가해 대체 페이지를 추가할 수 있다. 3. 라우트 설정하기 특정 경로와 페이지를 매핑하고 싶다면 다음과 같이 작성해 활용한다. @Controller public class TodoController { @GetMapping("/todo") public String todo..

깃허브 해킹을 당했어요. 갑자기 메일로 Vercel 배포 실패 메일이 여러 건 동시에 오길래, 처음에는 deps bump가 잘못 동작한건 아닐지 오해했어요. 그런데 조금 더 들여다보니 모든 레포지토리에서 불특정 파일들이 제거됐고, 모르는 유저에게 스타를 약 100개쯤 눌러 놓았더라고요. (그 와중에 레포지토리 자체를 삭제하면 모바일 2FA 요청이 가는 걸 알고, 몰래 공격하기 위해 이런 방식을 사용한 것 같아요.) 어디서 토큰이 노출된걸 탈취해 공격에 사용된 것 같은데, 한번 토이 프로젝트에서 Admin 권한을 갖고 있는 Github Token이 외부에 노출된 건은 없을지 확인해보시면 좋을 것 같아요. 비싼 교훈을 얻긴 했는데, 토이 프로젝트들이 다 망가져서 너무 슬픈 날이네요.

QT나 WPF 등 비교적 허들이 높은 프레임워크 대신 electron이라는 프레임워크를 사용하면, 웹 개발자들도 굉장히 빠르게 데스크탑 어플리케이션을 개발할 수 있게 됩니다. 여기에 그치지 않고 electron-react-boilerplate(ERB) 라는 보일러플레이트를 활용하면 SPA 기반 웹 서비스를 개발하는 것과 거의 유사한 경험으로 데스크탑 어플리케이션을 개발할 수 있게 되는데요, 이 글에서는 ERB를 사용할 때 데스크탑 어플리케이션을 개발할 때 TailwindCSS(테일윈드)를 적용하는 방법을 정리합니다. 본 글은 ERB 문서에서 제공하는 방법으로 스캐폴딩이 완료되었음을 전제로 합니다. TailwindCSS 테일윈드를 적용하기 위해서는 테일윈드 설치 + ERB 설정의 두 단계가 필요한데요, 먼..

TL;DR 절대 경로 import를 활용하기 import 정렬 기준을 적용하기 사용하지 않는 패키지를 제거하기 프론트엔드 개발을 경험해보신 분이라면, 분명 한번쯤은 정돈되지 않은 import 코드 영역을 보며 아쉬움을 느꼈던 경험이 있을 거에요. import React, { createContext, useEffect, useState } from "react"; //Global Style import GlobalStyle from "./components/GlobalStyle"; //Import Pages import About from "./pages/About"; import Group from "./pages/Group"; import Nav from "./components/Nav/Nav"; i..

채널톡의 bezier-react 코드를 리딩하던 중, 낯선 구문을 만나게 되어 찾아보게 되었어요. import React, { // 임포트 단계에서 type 키워드를 붙여주는 것이 가능했던가? // 어떤 기능적 역할을 하는 것이지? type Ref, forwardRef, useMemo, } from 'react' 바로 import type 구문인데요, 해당 구문을 활용하면 불러오는 대상이 값인지 타입인지를 명시할 수 있답니다. // model/user.ts export interface User { id: string; name: string; } // component.tsx import { type User } from "@/model/User"; interface Props { user: User;..

바쁘다는 핑계로 지식을 정리하는 일에 너무 소홀했던 것 같아요 😅 퇴사 후 여유가 생기면서 서버리스 이제는 AWS Lambda로 간다 라는 책을 1/3 정도 읽을 수 있었는데요, 이번 글에서는 새로 배운 내용과 느낀 점을 간단히 적어보고, 새로운 람다 함수를 함께 배포해보도록 하겠습니다. 서버리스 프레임워크 혹시 IaC (Infrastructure as a code) 에 대해 들어 보셨나요? 요즘은 퍼블릭 클라우드 인프라를 Ansible, CloudFormation, Terraform 등의 IaC 툴을 통해 관리하는 것 같은데요, IaC를 활용하면 개발자가 GUI나 CLI 콘솔을 매번 입력할 필요 없이 코드나 설정 파일을 통해 인프라를 관리할 수 있게 됩니다. 예시 : 주어진 조건대로 EC2 인스턴스를..