최근 이직하면서 Next와 스프링(Spring Boot) 기반 프로젝트의 프론트엔드를 담당하게 되었다.오랜만에 서버 사이드 렌더링(SSR) 환경과 타임리프(Thymeleaf)를 다시 접하니 낯설면서도 새롭다.과거에 배웠지만 가물가물했던 내용들을 다시 복습하며,익숙한 리액트 방식과 비교해 컨트롤러에서 넘겨준 데이터를 화면에 출력하는 방법을 하나씩 정리해 본다.1. Controller에서 데이터 전달하기 (Model Attribute)스프링 MVC 구조에서 자바 컨트롤러는 Model 객체에 데이터를 담아 뷰로 보낸다.리액트에서 컴포넌트에 props를 넘겨주는 과정과 유사하다고 이해하면 쉽다.@Controllerpublic class MyController { @GetMapping("/hello") ..

작년에는 소속이 있었음에도 선정되지 못했는데올해는 백수라 할 일 없는걸 알아주신걸까? 개인으로 신청했음에도 운좋게 추첨되어 우아콘에 참여할 수 있었다. 기술 컨퍼런스를 갈 때 마다 느끼는 거지만 동 시간대에 듣고 싶은 세션이 겹치는게 매번 있어 왔어서...해리포터에 나오는 헤르미온느의 시간을 돌리는 타임터너가 있으면 너무 좋겠다는 생각을 한다 이번에는 뭘 들을까 고민하다가 그냥 프론트엔드 위주로 돌자!!로 결정해서같은 시간대의 세션도 고민없이 FE관련 세션으로 발길을 옮겼다유일하게 FE를 포기하고 듣자!! 했던 AI관련 세션인"어제 쓴 프롬프트, 오늘도 그대로 쓰시나요?"세션은 모든 사람이 생각하는게 똑같은건지...강연장이 꽉차서 들어 갈 수 없었다ㅠㅠㅠ어차피 점심도 못먹은거 내려가서 밥이나 먹고오자 싶..

🌐 CORS란 무엇일까?CORS(Cross-Origin Resource Sharing)는 브라우저에서 다른 출처(origin)의 리소스에 접근할 때 보안을 위해 적용되는 정책이다. 여기서 “출처”란 '프로토콜 + 도메인 + 포트'의 조합을 의미하며, 이 중 하나라도 다르면 서로 다른 출처로 간주된다.예를 들어, 다음 두 주소는 서로 다른 출처다.https://example.com (출처 A)https://api.example.com (출처 B)즉, 프론트엔드(https://example.com)에서 백엔드 API(https://api.example.com)에 데이터를 요청할 때 CORS 정책에 의해 요청이 차단될 수 있다.🔧 CORS의 작동 원리브라우저는 CORS 정책에 따라 요청을 다음 두 가지 방..

8월 열심히 이것저것 시도해보다가9월 드디어 재취업 도전하나!?!?!? 했더니!!!!! 꺄륵!자빠짐 엔딩으로 키보드를 못썼다...ㅎㅎㅎ 다행히 뼈는 문제가 없다는데 손이 안돌아간닼ㅋㅋㅋㅋ무튼 2주정도 지나니까 키보드는 어떻게 치긴치는데여전히 손은 안돌아가고무거운걸 들거나 손가락이 꺽이면 손목이 너무너무 아픔..;; 그래도 이제 키보드는 얼추 칠 수 있으니 포스팅이라도 해야지!!내년의 목표는 안아프기에오... 에오...

에러 내용에러1더보기Run npm config set registry https://registry.npmjs.org/ npm config set registry https://registry.npmjs.org/ npm config set always-auth false rm -f .npmrc || true npm config delete //registry.npmjs.org/:_authToken || true shell: /usr/bin/bash -e ***0*** npm error always-auth is not a valid npm option npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2025-09-..

오늘 뭐 먹지? 사이트 리뉴얼을 진행하면서 또 어떤걸 해보는게 좋을까 고민하고 있었는데,최근 고용 공고에 CI/CD 진행 내용이 많아 알아보려던걸 내 개인 플젝에 넣어보자 싶었다. 그래서 작업하며 공부한 내용들을 정리해 보았다CI/CD란?CI (Continuous Integration) 지속적인 통합지속적이 통합이란, 여러 개발자가 작성한 코드를 하루에도 여러 번 공유하여 코드 충돌을 줄이고 버그를 조기에 발견 할 수 있다. CD (Continuous Deployment/Delivery) 지속적인 서비스 제공 / 배포지속적인 제공은 CI를 통해 통과한 코드를 수동으로 배포할 준비가 된 환경으로 만들어 준다.지속적인 배포는 지속적 제공을 자동화하여 사람의 개입없이 자동으로 배포까지 완료하게 되는 최종 단계..

이전에 올렸던 내 주변 반경 음식점을 검색해서 랜덤으로 한 곳을 골라주는 사이트오늘 뭐 먹지?를 리뉴얼 해보았다 오늘 뭐 먹지?v2 random-food-store.web.app 당시 급하게 만들었던 사이트라 거의 하루? 이틀만에 완성했던 사이트였는데아무래도 카테고리를 선택할 수 없는게 아쉬웠던 터라 백수인김에 리뉴얼 해보게 되었다추후 검색 반경이나 생각나는 것들이 있다면 더 추가 할 예정이다 🔧 리뉴얼 포인트프로젝트 구조 개편: CRA 기반에서 Vite + React 환경으로 마이그레이션UI/UX 개선: 디자인 부터 메인컬러까지 반응형으로 싹 수정 하였다페이지 확장: 문의하기 팝업, 이용약관/개인정보 처리방침 페이지 등이 추가 되었고 블로그 형식의 글도 몇가지 추가 예정코드 정리: 라우팅과전역 스..

지난주 2주간의 짧은 챌린지가 끝이났다.그래도 아직 보너스 문제도 남아있고, 사이트는 8월까지 운영 후 9월 리뉴얼 작업이 들어간다하니...아마도 2기도 곧 만나볼 수 있지 않을까 싶다.1기는 무료로 진행 되었고 java, python만 사용이 가능했는데2기는 어떻게 될 지 궁금하기도 하고, 이번엔는 node가 추가되면 참 좋겠다는 희망을 작성해본다.참여하게 된 계기정말 어이없고 멍청하고 바보같이 참여하게 된 챌린지였다.인스타에서 무료 모집 광고를 보고 어차피 재취업으로 뭐라도 해야하는 상황에 습관이라도 길러보자 하고 본 모집공고는 java, python 두 언어 뿐이었다.JS가 없어 포기했으나 잠자기 전 졸린데 폰붙들고 있다가 파이썬으로 신청을 해버렸다.꿈인 줄 알았는데 현실이었던 건에 관하여....시..

❓오늘의 문제문제: 브실이의 입시전략소요 시간: 30분 15초문제소개올해 고3인 브실이는 세계 최고의 명문 대학 브실대학(브론즈실버대학)에 가기 위해서 자신의 현재 점수를 토대로 입시 전략을 세우려고 한다. 브실대학에서는 특정 과목들의 성적의 합을 통해 서류 전형의 합격여부를 결정한다고 한다. 그러나 브실대학에서는 어떤 과목이 서류 평가에 반영되는지 모두 알려주지 않고 일부만 알려주는 사악한 학교다. 브실대학에서 요구하는 과목 수와 반영된다고 공개된 과목들이 주어질 때, 브실이가 얻을 수 있는 최소 점수와 최대 점수를 구해보자. 단, 공개된 과목과 비공개된 과목은 브실이가 수강한 과목에 모두 포함되어 있으며, 과목은 중복되지 않는다입력6 3 2calculus 100probability 70physics ..