develogood

• 

  Cursor 사용 후기: 초보자도 웹사이트 만들기 가능한 AI 코드 에디터 체험기 한줄요약 : 세시간 반동안 Cursor로 이거만듬 삼행시로 행복한 시간 0. 발단코파일럿과 같은 AI 어시스턴트가 생산성을 올려준다는 요즘, 저는 코드는 직접 쳐야 늘지! 라는 사람입니다. 주변의 무수한 코파일럿 추천에도 꿋꿋이 경험치가 쌓일 때까지 쓰지 않겠다는 마음이었는데요.하지만 너무 궁금했습니다! 너무 써보고 싶어! 궁금해! 대체 왜 다들 그렇게 열광하는가?! 그래서   네, Cursor, AI code editor 결국 찍. 먹 시작합니다.  1. 개요 : Cursor란? 요즘 핫 한 AI를 활용한 코드 에디터입니다.탭과 간단한 프롬프트를 통해 코드를 짜주며, 개발자의 코드 베이스를 읽고 그에 맞춰 응답한다고 합니다. 2. Cursor랑 다른 AI 랑 가격비교 completions란?Comple.. 2025.04.06

• 

  프론트엔드 에러 핸들링 구조 정리 (Axios + CustomError 적용) 여러분은 어떻게 에러를 관리하시나요? 저는 사이드 프로젝트를 하며 어질어질했습니다.에러관리 코드가 어질러진 방처럼 흩어져 있었거든요. 그래서 ErrorHandling 구조를 고민하며 청소를 시작했습니다.한장요약  1. 에러와 에러핸들링? Errors? JS코드를 실행할때, 각각 다른 에러들이 발생할 수 있다. 에러들은 개발자들에의해서, 잘못된 INPUT에 의해서 또는 예측할 수 없는 일들에 의해 발생한다.에러가 일어났을 때, JS는 멈춘후에 에러메세지를 생성한다.이를 기술적으로는 Throw an exception 즉, 에러를 던진다고 한다. W3Schools 등 공식 문서나 내 경험상에서도 자바스크립트에서는 Error 와 Exception을 명확히 구분하지 않고 비슷한 맥락으로 다뤄진다.Error 프로그.. 2025.04.05

• 

  Next.js 보일러 플레이트 만들기 개념🔥 **보일러플레이트(Boilerplate)**란?1. 개념 : 반복적으로 자주 사용하는 코드 구조나 파일. 2. 이름의 유래 : 신문 인쇄소에서 자주 쓰던 금속판에서 온 말로, 자주 쓰는 문구를 금속판으로 찍어두고 복사 붙여넣기 하듯 사용했던 것에서 유래된다. 소프트웨어에선 반복적으로 쓰는 코드라는 의미 3. 개발에서의 의미매 프로젝트마다 거의 비슷하게 생기는 기본 뼈대 코드처음부터 직접 하나하나 다 작성하지 않아도 되도록, 초기 세팅을 미리 해둔 코드 묶음4. 보일러 플레이트의 장점 시간 절약: 매번 똑같은 설정 안 해도 됨.일관성 유지: 팀원들이 같은 구조에서 개발.생산성 향상: 중요한 로직에만 집중 가능. 목적스토리북이나, 다른 라이브러리 등을 공부하거나 테스트하고 싶을때, 매번 설정을 새로.. 2025.03.31

• 

  [2025년 1분기 회고] 어느새 날이 따듯해졌다. 추운 겨울 바짝 얼어있다가 봄기운에 풀어지기 딱 좋은 날씨다. 가끔 모든게 흘러가고 나만 멈춰있는 것 같은 느낌이 들기도한다. 어디까지 가야만 하는지,어디까지 왔는지 알려주는 사람이 없다. 예전엔 chill해질 때면 꽤 후유증이 오래갔는데 요즘은 하루면 훌훌 털고 일어난다. 그러니 어디까지 왔는진 알 수 없지만나는 나아가고 있다. 3월까지의 성취 : 꾸준한 운동과 건강한 정신이 목표였음 1. 줌바 4개월째 개근: 꾸준한 운동 굿, 예전엔 줌바하는 시간이 길게느껴졌다면 이제 짧게 느껴질 정도다. 2. 독서 5권 : 꾸준히 책을 읽어서 6권 읽었다. 100권 읽기까지 94권 남았군 ... 후, 서서히 늘려갈 생각이다.  3. 이력서 완성하기 : 이력서를 완성하고 주변사람들에게 꾸준히.. 2025.03.23

• 

  [기술부채 해결하기] SSE(Server-Sent-Event)와 WebSocket 주제선정이유 사이드 프로젝트 CHIT을 개발하고 있습니다. CHIT의 주요 핵심기능은 순번대기 기능인데요. 다들 티켓팅 해보셨나요? 티켓팅 화면에서 서버대기 화면 한번쯤 다들 보신적 있을텐데, 그거랑 비슷한 기능이라고 보시면 됩니다!   이 기능을 구현하기 위해 SSE(Server-Side-Events) 를 사용하고 있습니다. 간단히 말하자면 SSE는 서버로부터만 이벤트를 받는 단방향 통신입니다. 채팅과 달리 서버로부터 일방적으로 메시지를 받기만 합니다.  사용하는 기술인 SSE를 제대로 알고싶었고 겸사겸사 WebSocket에 대해서도 알아보려합니다. (부채질중) 1.✅ 개념알아보기SSE(Server-side-events) 란 무엇인가 보통 웹브라우저에선 웹이 request를 보내면 서버가 respons.. 2025.02.16

• 

  코테플랫폼 코드트리 찍먹 솔직후기 1. 발단- 코드트리 한 달 무료체험권을 얻었다.  2. 현재 나의 수준은?- 나는 코테가 필요할 때 마다 여기저기서 코테 문제를 풀었다.프로그래머스, 백준, 리트코드 경험이 있으며 각각의 사이트의 대한 장단점은 다음과 같다. 프로그래머스- 기업연계, 이 플랫폼으로 기업 코테를 본 적있음, 많이 안 풀어봄- 장점 : 다양한 문제, 실제 코테에서 이 IDE를 사용한 경우가 있어서 실제 코테 대비하기 좋음, 프로그래머스 사용하는 코테일땐 이 플랫폼으로 대비를 했다. 카카오 기출이나 여러 기출을 제공- 단점 : 문제 유형별이 아닌 난이도 별로 되어있음, 그래서 조금 불편했던 것 같다. 백준- 가장 많이 풀었던 플랫폼- 장점 : 다양한 문제, solve.ac를 이용한 랭크시스템 (재밌음), - 단점 : 개념보다.. 2025.02.02

• 2024년 회고 2024회고 & 2025 목표1. 2024년 주요소식 TOP34번의 해커톤 도전과 한번의 수상퇴사 후의 도전한 것들글또 1) 1년의 4번의 해커톤을 나갔다. 그정도의 기운이 있었던 건 해커톤에서 수상해보고 싶단 집념 때문이었다.막상 하고보니 생각보다 엄청나게 감동스럽고, 울컥한 감정은 없었다. 그래, 후련했다! 생각해보면 해커톤에서 상 탄 것보다 내가 계속 도전했다는 점이 오히려 감동이었다.2) 퇴사후 도전한 것들- 여러가지 운동에 도전했다. 특히 20살때 이후로 한번도 오르지 않았던 등산에 도전했다. 생각보다 작은산이고 오를만해서 30번을 목표로 하고 산을 올랐다. 특히 마음이 혼란할 때 산을 오르는게 도움이 되었다. 웃긴게, 마음이 혼란하지 않고 평화로우면 오히려 산을타기 싫었다 ㅋㅋㅋ 평화로운 마음.. 2025.01.12

• 

  시맨틱 태그 (SemanticTag) 시맨틱태그(SemanticTag)포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그. block element 이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재한다.,,,,등이 있다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고, 각 부분의 역할과 기능을 전달하는데 도움이 된다. 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주는 태그 시맨틱 태그 종류  article독립적인 글을 다루는데 사용하는 태그, 블로그 게시물, 뉴스기사, 제품 리뷰 등 독립적으로 배포하거나 재사용 할 수 있는 독립형 콘텐츠aside옆에 위치하는 콘텐츠를 담는 태그, 페이지 콘텐츠를 제외한 콘텐츠를 정의, 주로 문서에선 사이드바details사용자가 보거나 숨길 수 있는 추가 세부 정보를 .. 2024.11.30

• 

  SEO(search engine optimization : 검색엔진 최적화) 조사하기 SEO는 검색엔진 최적화를 뜻하며, 웹사이트나 웹페이지가 검색엔진의 검색결과에서 상위에 노출 될 수 있도록 하는 다양한 전략과 기술을 말한다. 웹사이트 검색을 통해 상단에 게시되면 사이트의 트래픽을 증가시킬 수 있다.SEO는 크게 두가지로 나눌 수 있다.온페이지 SEO (On-page SEO)온페이지 SEO란 사이트 내부의 요소를 최적화 하여 검색 엔진과 사영자에게 관련성 높은 정보를 제공하는 것이다.이작업은 콘텐츠와 HTML 요소를 중심으로 이루어진다.콘텐츠 최적화 : 검색어와 관련높은 키워드들을 글에 게시하는게 속한다.메타 태그 : 페이지의 제목 태그와 설명태그를 최적화해서 (title, description) 검색엔진이 잘 이해할 수 있게 한다.이미지 최적화 : 이미지에 alt 태그를 대체텍스트를 .. 2024.11.10

• 

  [꼬랑지랑] next.js 사이트 개선기 (2) 이커머스 상세페이지 더보기 구현 안녕하세요 주니어 프론트엔드 개발자입니다!이번엔 사이드 프로젝트로 만들었던 꼬랑지랑(이커머스 사이트)의 상세페이지 더보기 기능을 구현하겠습니다.- 상세페이지 탭 고정, 미리보기 이미지의 화면 상단에 보이게 하기 등  꼬랑지랑에 적용하기상품정보 더보기 기능상품상세 메뉴바가 위에 고정되는 기능BeforeAFTER 문제정의문제 : 미리보기 페이지가 이미지의 중간부터 보여줌=> 미리보기 부분이 이미지의 가장 윗부분 으로 바꾸기문제 : 화면을 펼쳤을 당시 아랫부분에 렌더링되야하는 상품후기 탭 레이아웃이 깨진다=> 이미지 더보기를 클릭해도 레이아웃이 깨지지 않고 그 하단에 탭이 생성되게 하기기존코드 상품설명 .. 2024.10.26

more