기록

자주 사용하는 HTML entity 모음 (<, >, &, ", ')

HTML에서 예약어로 되어있는 문자들을 text요소에 그대로 사용하면 Syntax Error가 발생합니다이때, HTML 엔터티(entity)로 변경해서 Text 요소에 사용할 수 있습니다HTML 예약 문자HTML entity설명&lt;less than>&gt;greater than&&amp;ampersand"&quot;double quote'&#39;single quote

항해플러스 6기 학습메이트 회고라 쓰고 A-Z 기록이라고 부른다

벌써 항해플러스 프론트엔드 6기가 끝난지 한달이 되어가네요학습메이트를 처음 시작할 때 기대했던 점과 수료하고 나서의 느낀점들을 쭉 기록처럼 작성해보았습니다.처음 5기때 학습메이트 신청할때는 못 해도 Go 라는 마음으로 학습메이트를 신청하게 되었습니다. 막상 신청해보니 경쟁자가 너무 쟁쟁해서 역시 신청만 한번 해본거지~ 하는 마음으로 있었는데, 6기 학습메이트가 되었습니다! 왜 ? 내가 됐지? 배지 색상도 블랙도 레드도 아닌걸?!이런 의문을 가지던 중 당시 혜민맴이 해주셨던 말 덕분에 조금 자신감있게 학습메이트로 시작을 할 수 있었던 것 같습니다.채영님은 채영님만이 할 수 있는 필요한 부분을 찾아서 잘 할 것 같다는 생각이 들었어요. 잘 할 수 있을거에요 그렇게 시작된 학습메이트.. 학습메이트를 처음 ..

손가락 까딱 몇번으로 AI한테 내 PR 코드리뷰받기

Google이 Gemini라는 AI를 풀어준지 벌써 몇달이 지나고,,, 마침 이전 프로젝트 리팩토링하면서 AI한테 올리는 PR마다 코드리뷰를 받아보면 어떨까하는 생각이들어 간단한 세팅 방법을 가져와보았습니다.Gemini Code Assist한테 내 PR 코드리뷰 받기최우선으로 고려한 점은 무료인가였고 내가 코드단위로 코드리뷰를 받아볼 수 있는가 였습니다. 리팩토링 방향성이 뚜렸하게 정해져 있다면 n8n을 사용하여 Gemini와 같은 무료 AI와 연동하여 코드리뷰 봇을 만들 수 있지만, 현재는 리팩토링 방향성이 뚜렸하게 잡혀있지 않기도 하고(= 단순 관심사 분리만 방향성을 잡은 상황) 애초에 코드리뷰 세팅하는데에 시간을 오래 쓰고 싶지않아 이 방법을 선택하였습니다. 먼저 해당 페이지에 접속하여 우측에 보이..

supabase 리액트 프로젝트에 연동하기 (feat. 목업유저 생성하기)

개발 공부를 시작하고 했던 첫 프로젝트를 리팩토링을 하기로 하였습니다. 프론트/백 코드가 함께있는 모노레포였고, 빠르게 프론트엔드 부분 리팩토링을 하기위해서 기존 서버 쪽은 건드리지 않고 supabase를 연동하여 리팩토링을 하기로 하였습니다.supabase를 선택한 이유목표가 프론트엔드 코드 리팩토링이었기 때문에 후에 기능 추가가 되는 것을 고려하여 SQL쿼리로 테이블을 쉽게 생성할 수 있는 supabase를 선택하였습니다.supabase란? Baas(Backend as a Service)로 서버리스로 데이터베이스에 API 호출을 보낼 수 있는 서비스 입니다.supabase 프로젝트 생성하기해당 페이지 방법대로 CLI로도 프로젝트를 생성할 수도 있고 https://supabase.com/dashboar..

웹 호환성을 위한 package.json에 browerslist설정하기

2년전에 했던 프로젝트를 리팩토링하게 되었습니다. 잊고 있던 프로젝트 구조부터 하나하나 파악하게 되었는데, 첫 프로젝트때는 아예 아무것도 없는 cra에서 시작한게 아니라 누군가 우리가 프로젝트를 할 수 있게, 만들어둔 보일러 플레이트에서 프로젝트를 시작하였습니다. 이번에 리팩토링을 하기위해 프로젝트 구조를 먼저 파악하려하였습니다.구조를 보고 포맷팅을 설정하면서 pacakge.json에서 이전에는 발견하지 못했던 "browserslist": { 를 발견하였습니다.{ "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome..