즐겁게, 코드

1. MySQL 접속하기 mySQL을 실행하려 할 때 이런 오류가 뜰 때가 있는데, 이는 권한과 관련된 오류로 'using password' 를 봐주면 된다. NO : 비밀번호를 입력하지 않아 생긴 문제 YES : 비밀번호가 일치하지 않아 생긴 문제 비밀번호를 사용해 mySQL에 접속할 때는 -p 플래그를 사용해주면 된다. # 패스워드를 사용한다 mysql -p # 특정 유저로 로그인하면서 패스워드를 사용한다 mysql -u [유저네임] 2. DBeaver SQL에 익숙하지 않은 사람들을 위해 DBeaver GUI 툴을 사용할 수도 있다. 데이터베이스 / 테이블 / 칼럼 생성을 GUI에서 수행할 수 있다. 3. DTO와 엔티티의 차이 DTO와 엔티티는 데이터 구조를 나타내는 역할인데, 엄밀한 차이가 무엇..

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;..