서비스 링크 2026.02.28 수성 · 금성 · 토성 · 목성 · 천왕성 · 해왕성

오후 6시~8시 30분 사이 서쪽 하늘에서 관측 가능한 '행성 퍼레이드'가 오늘 일어납니다.

육안으로 한 번에 6개를 보기엔 너무 멀어서 3D 밤하늘로 만들었어요.

그리고 거기에 익명으로 소원을 빌 수 있는 공간을 넣었습니다. ✦

다른 사람들의 소원도 구경할 수 있어요. 이름도, 로그인도 없이.

오늘 하루, 조금 특별하게 마무리해요.

#행성퍼레이드 #오늘밤 #천문현상 #소원 #우주 #밤하늘 #사이드프로젝트 #웹개발 #planetparade #2026

이번 겨울에 가족들이랑 샤먼으로 해외여행을 가게 됐어요 처음 가보는 중국여행이라 벌써부터 기대가 되네요..ㅎㅎ

그런데 가족들의 여권이 만료되었었고 요즘 카메라가 얼마나 좋은데 여권사진 쯤이야 핸드폰으로 금방 찍지! 라면서 인터넷 서칭을 이것저것 해봤는데 죄다 무료라더니 막상 들어가면 기다리는건 수많은 광고와 다운로드 할래? 그럼 5달러 내~ 였습니다 이럴바엔 직접 만들고 말지..

그렇게 유튜브에 디즈니 플리를 켜고 prd를 세우고.. 처음엔 배포 생각은 없었기에 index.html과 간단한 자바스크립트, css로 만들었지만 막상 만들고 나니 애정이 생겨서.. 백엔드를 추가해서 배포까지 하게 됐습니다

사용법

사진찍고 배경 지우고 확인 후 다운받으면 됩니다

“누군가는 시작해야 한다면, 내가 먼저 해보자.”

백지 상태에서 시작한 컴공생의 2025년 상반기 회고.

GPT와 에이전트 AI, 그리고 실전 프로젝트를 통해 진짜 개발을 배워간 시간.

1. 개발자가 되기로 결심한 계기

"노트북과 와이파이만 있으면 어디서든 일할 수 있다."

이 말을 처음 들었을 때, 나는 전율을 느꼈다. 바다 한가운데든, 산꼭대기든, 심지어 외국에 있든 – 공간과 시간에 구애받지 않고 일할 수 있다는 자유. 그것이 내가 개발자를 꿈꾸게 된 출발점이었다. 그래서인지 개발이라는 분야는 처음부터 나에게 매력적으로 다가왔다.

대학교에 입학한 이후, 나는 다양한 전공 수업을 들었지만 늘 허전함이 있었다. 그러다 우연히 ‘ABC 부트캠프’를 접하게 되었다. 당시 나는 프로그래밍에 대해 아는 것이 전혀 없었다. 하지만 ‘한 번 해보자’는 마음으로 도전했다.

부트캠프에서 첫 경험 – AI 프로젝트와의 만남

나는 아무런 지식 없이 CNN 모델 기반의 인공지능 프로젝트에 참여하게 되었다. 수업은 너무 빨랐고, 나는 강사님의 코드를 따라 적기 바빴다.

사람의 얼굴을 분석해서 '감정기반 다이어리'를 제공하는 서비스를 주제로 프로젝트를 시작했고, 결과물은 부족했지만 나에게 ‘내가 뭔가를 만들 수 있다’는 자신감을 심어주었다. 그렇게 나는 컴퓨터공학과로 전과를 결심했고, 다행히 1학년 때의 높은 학점 덕분에 어렵지 않게 전과를 마칠 수 있었다.

전과 이후 첫 학기. 운영체제, 컴퓨터구조, 자료구조를 배우며 이론에 눈을 떴다. 나는 이론을 배운 뒤 직접 컴퓨터를 뜯어보고 부품을 교체하며 실습을 병행했다. 메인보드를 갈고, CPU 쿨러를 정비하고, SSD를 갈아끼우며 이론과 실제가 맞닿는 지점을 경험했다.

2. 전과 이후, 첫 프로젝트 – 큐싱 방지 자전거 대여 앱

전과하자마자, 나는 소프트웨어 프로그래밍 수업에서 팀 프로젝트를 맡게 되었다. 주제는 '큐싱 방지를 위한 자전거 대여 어플리케이션'. 문제는 팀원 모두가 개발 경험이 전무했고, 프론트와 백엔드의 개념조차 제대로 잡혀있지 않은 상태였다는 것이다. 하지만 오히려 그런 백지 상태였기에 더욱 적극적으로 배워나갔다.

안드로이드 스튜디오에서 Kotlin을 사용하고, 백엔드는 Flask, 데이터베이스는 MongoDB. 단지 ‘이게 유명하니까’, ‘쉽다더라’는 이유로 스택을 선택했고, 수많은 시행착오를 겪었다. GPT에게 묻기도 하고, 국립중앙도서관에서 하루 종일 책을 읽기도 했다. 새벽까지 디버깅을 하며 울컥했던 밤도 많았지만, 결국엔 팀과 함께 작동하는 앱을 완성했고, 교내 대회에서 수상도 하게 되었다.

그러나 그 프로젝트를 마치고 난 후, 강한 의문이 남았다. “진짜 서비스는 이렇게 만들지 않을 텐데…” 배포는 어떻게 하는 거지? 서버는 항상 켜둬야 하나? 실무에선 GPT 없이도 가능한가? 이 의문들이 내 안에 더 커졌고, 현업 개발자들은 어떤 식으로 프로젝트를 운영하는지 알고 싶어졌다.

3. 한밭모 – 현업의 감각을 배우기 시작하다

그러던 중 우연히 본 ‘한밭모’의 모집 공고. 깃허브 잔디가 빽빽히 채워진 팀원의 이력과, 온보딩 문서에 정리된 프로젝트 운영 체계를 보며 이 팀에 꼭 들어가고 싶다는 생각이 들었다. 두 번의 미팅을 거쳐 팀에 합류하게 되었고, 나는 한 발짝 더 실전 환경에 가까운 개발을 경험하게 되었다.

처음 맡은 업무는 동아리 페스티벌에 맞춘 소개팅 앱 고도화였다. 이미 GPT로 초안이 잡힌 Next.js + Supabase 기반 프로젝트였지만, 오류가 많았다. 처음에는 구조도 모르고 GPT가 주는 코드를 덧붙이기만 했지만, 그게 오히려 더 많은 오류를 만들어냈다. 그런데 신기하게 프로젝트만 며칠 쳐다보니까 점차 직접 코드를 읽고 흐름이 이해되기 시작했다.

DB 마이그레이션을 잘못해서 전체 스키마가 날아가기도 했고, localStorage와 AuthContext 사이의 세션 관리가 꼬여 로그인조차 되지 않는 상황도 맞닥뜨렸다. useEffect가 의도치 않게 두 번 실행되어 API 호출이 중복되던 문제도 있었다. 하지만 그런 경험 하나하나가 내가 '코드를 읽는 법'을 배우는 계기가 되었다.

지금은 소개팅 앱을 React Native 기반으로 전환하고 있고, 나는 보통 관리자 페이지를 개발 중이다. 메인 구조와 매칭 알고리즘, DB 설계 등은 선임 개발자분이 총괄하고 있으며, 나는 기능 단위의 상세 구현을 맡아 기여하고 있다. 한두 달 전만 해도 내가 이런 구조에서 실제 기능을 구현할 수 있으리라고는 상상도 못했을 것이다.

4. 확장과 리팩토링 – 진짜 기술은 균형에 있다

페스티벌 이후 소개팅 앱은 대전 전역으로 확대되었고, 기존의 수동 계좌 입금 방식에서 PaaS 기반 자동 결제 시스템으로 바꾸는 리팩토링이 진행되었다. 동시에 레거시한 Supabase 로직을 정리하기 위해 Nest.js 기반 백엔드로 교체하고, 모바일 전환을 위해 React Native 프레임워크를 도입했다.

썸타임: 지역 대학생 소개팅의 이름으로 대전 11개 대학생을 타겟으로 리뉴얼되었고, 현재 iOS 앱스토어 등록까지 완료됐다.

개발 중 알게 된 사실들: React의 useEffect는 개발환경에서 두 번 실행되고, base64 방식으로 이미지를 저장하면 모바일 기기가 과부하되어 앱이 터질 수 있다는 것. 실제로 선임 개발자가 참여했던 부동산 전자계약 서비스는 base64 방식으로 인해 망했다. 이 이야기를 들으며 ‘기술은 편리함보다 균형’이라는 말을 절감했다.

기술은 정답이 아니다. 상황과 리소스, 사용자 환경에 따라 '적절한 선택'이 더 중요하다. 그래서 어떤 기능을 구현할 때 ‘이게 최선의 선택인가?’를 먼저 고민해야 한다

5. AI 시대, 변곡점 위의 개발자

요즘은 에이전트 AI의 도움을 받아 생산성이 매우 높아지고 있다. 개발 뿐만 아니라 삶의 대부분을 인공지능을 활용하는것 같다. AI 덕분에 필력이 좋지 않아도 벨로그 포스팅을 손쉽게 할 수 있는것 처럼.. 개발분야에서는 단순한 기능 구현은 AI에게 시키고, 나는 구조를 잡고 예외를 고려하는 방식. 점점 개발이 ‘누구나 할 수 있는 일’로 바뀌는 것 같아 두렵기도 하다. 언젠가는 PPT처럼 개발도 기본 소양이 되는 시대가 올지도 모른다.

하지만 동시에, 이 흐름 속에 있다는 것이 나에겐 기회처럼 느껴지기도 한다. 변화를 두려워하지 않고 받아들이며, 도구를 쓰는 사람이 아니라 '이해하는 사람'이 되고 싶다. 그게 진짜 개발자라고 믿기 때문이다.

6. 기본기의 중요성 – 교수님의 말, 그리고 나의 깨달음

상반기 중 교수님께서 이렇게 말씀하셨다.

“AI가 아무리 발전해도, 결국은 컴퓨터 위에서 작동하는 기술입니다.

모든 건 ‘기본 원리’에서 시작돼요.”

실제로 대학생을 위한 탄소중립 OS 프로젝트를 비전공자 팀원들과 바이브코딩으로 개발을 하면서 실험을 해보았는데, 전공자와 비전공자의 생산성 차이가 명확했다. 프로젝트 github 해당 프로젝트의 인사이트를 보면 모두가 열심히 했지만 코드 기여도가 수십배의 차이가 발생했다. 결국 도구는 누구나 쓸 수 있지만, 활용하는 깊이는 기초에서 나온다는 것을 느꼈다.

그래서 더 기초에 더 집중해야한다. 지금의 성과보다, 2~3년 후에도 변하지 않는 힘을 기르고 싶다. GPT는 빠르지만 얕고, 나는 느리지만 깊이 있게 가고 싶다. 그리고 그 배움은 언젠가 나의 무기가 될 것이다.

7. 상반기 지금, 그리고 앞으로의 이야기

현재는 성신여대 학생들과 함께 KOICA 공공데이터 공모전을 준비 중이다. 기본기를 체계적으로 다지고 싶어 네이버 부스트캠프 10기 웹 풀스택 트랙에도 지원했다.

현재 나는 창업보다는 취업을 목표로 하고 있지만, 앞으로의 개발자에게 필요한 역량은 단순히 ‘코딩’에만 국한되지 않을 것이라 생각한다. 그래서 교내 SW중심대학 사업의 일환으로 운영되는 창업교육 프로그램도 함께 수강하며 비즈니스적 사고와 문제 해결력을 넓혀가려고 한다.

또한 인프라 전반에 대한 이해를 높이기 위해 네이버클라우드 자격증 교육도 지원해둔 상태이며, 현재 결과를 기다리고 있다.(일정 마지막에 네이버 본사 견학도 잡혀있어서 흥미로운 프로그램인것 같다.)

상반기 동안 정말 다양한 활동을 해왔지만, 정작 '무엇을 배우고 어떻게 성장했는가'를 돌아보지 않으면 결국 방향을 잃을 수도 있다는 생각에 이 회고를 남기게 되었다.

🎯 마무리 – 내가 되고 싶은 개발자

나는 아직 많이 부족하다.

하지만 나는 부족함이 앞으로 나아가는 힘이 될 것이라 믿고 있다.

• 빠르게 만드는 사람이 아닌, 문제를 정의하고 해결하는 사람이 되고 싶다.
• 변화에 휘둘리는 사람이 아닌, 변화를 활용할 줄 아는 사람이 되고 싶다.
• 도구를 쓰는 사람이 아닌, 도구를 이해하는 사람이 되고 싶다.

그리고 그렇게 되기 위해, 오늘도 나는 배우고 있다.

2025년 4월 1일.. 갑자기 친구한테 카카오페이로 100만원이 송금됐다는 카카오톡이 왔다. 만우절인걸 몰랐던 나는 송금받기를 눌렀지만 열리는 페이지는 이런 페이지였고, 페이지 url도 snuaprilfoolsday였다. 대충 서울대학교 재학생이 만우절에 장난을 치려고 급하게 만든것 같았고, github.io 주소가 노출되었길래 한번 들어가봤다. 역시나 다들 손이 빠른지 이미 제작자의 깃허브 리포지토리는 털려(?) 있었고 매년 새롭게 등장하는 템플릿이 너무 신기하고 이걸 어떻게 만들었을까 싶어서 대충 비슷하게 따라 만들어봤고, 만드는 방법을 공유하려고 이 글을 쓴다.

삽질 1. 깃허브에 올라가있는 코드는 간단하게 자바스크립트를 이용한 페이지였고, 메타데이터에 prank url을 넣어 만든 방법이였다. 우선 해당 방법대로 비슷하게 따라 만든 뒤 vercel로 배포를 해봤을때는 위와 같은 사진처럼 url이 노출되고 이미지는 썸네일처럼 보여서 꽤나 짜쳐보였다. 그래서 처음엔 카카오페이 내부 개발자가 그냥 심심해서 만든게 여기까지 공유가 된건가 ? 생각을 했지만 카카오페이와 똑같은건 아니더라도 비슷하게 다른 템플릿을 KakaoDevelopers에서 제공하는 api를 이용하면 만들 수 있을것 같다는 생각이 들었다.

다행히(?) 삽질 두번만에 비슷하게 성공을 했고, 꽤나 그럴듯한 메세지가 전송됐다.

만드는 방법

우선 KakaoDevelopers에 회원가입을 하고 내 애플리케이션 등록을 해야한다. 등록하는 방법은 추가만 하면 되고, 프로필 사진이나 이름을 설정하면 그게 공유된 템플릿에 자동으로 들어간다.

애플리케이션에 들어가면 좌측 바에서 플랫폼을 누르고, web에 사이트 도메인을 설정하면 된다. 필자는 로컬호스트와 낚시용으로 만들어져 있는 템플릿 주소를 임시로 엮어서 제작하였다. (정확한건 아니지만 로컬호스트를 추가해야하는 이유는 템플릿을 공유하려면 자바스크립트 sdk를 통해 Kakao.Link.sendCustom()으로 실행해야 전송이 된다고 한다) 구글 사이트는 상대방을 낚게 하기 위한 주소의 도메인이다.

여기까지 등록을 했으면 메시지 탭으로 가서 메시지 템플릿을 만들면 된다. GUI 형태로 되어있어 이것저것 기능을 쉽게 추가할 수 있다.

중요한건 버튼을 삽입하고, 버튼을 눌렀을때 리다이렉팅 되는 주소를 낚는 주소로 등록해야한다.

이런식으로 임의의 템플릿을 만들고 저장을 해두면 템플릿 ID가 생성이 되고, 그 생성된 템플릿 ID를 기억해둔다.

이제 80프로까지 왔다. 마지막으로 공유하기 위한 자바스크립트 파일을 만들어야하는데 vs코드나 cursor 등 아무거나 사용해도 상관없다. index.html 파일을 만들고 아래의 코드를 붙혀넣는다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>카카오 장난 메시지 공유</title>
  <!-- 카카오 SDK 불러오기 -->
  <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      margin-top: 100px;
    }
    button {
      padding: 12px 24px;
      font-size: 18px;
      background-color: #fee500;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1>📢 중간고사 패스권 도착!?</h1>
  <p>친구에게 카카오톡 장난 메시지를 보내보세요 😆</p>
  <button onclick="sendFoolMessage()">카카오톡으로 공유하기</button>

  <script>
    // JavaScript 키로 초기화 (너의 앱 키로 바꿔야 함!)
    Kakao.init("자바스크립트 앱키 복붙하시면 됩니다.");

    function sendFoolMessage() {
      Kakao.Link.sendCustom({
        templateId: 템플릿 ID 복붙하시면 됩니다. // 너가 만든 템플릿 ID
      });
    }
  </script>

</body>
</html>

앱키는 이 탭에서 확인이 가능하다.

index.html을 저장하고, 로컬에서 실행시키면 아래처럼 나올텐데 카카오톡으로 공유하기 버튼을 누르고, 로그인을 하면 카카오톡 친구로 등록된 사람들에게 공유가 가능하다.

이런식으로.. 이걸 공유받은 사람이 버튼을 누르면 필자가 당했던 url이 열리게 된다.

처음 이런 만우절 장난을 만드신분이 어떻게 만들었는진 아직 등판을 하지 않으셔서 자세히는 모르지만 이런식으로 최대한 간단하게 장난치는 템플릿을 제작할 수 있다.

최대한 상세하게 글보단 사진 위주로 설명했는데, 혹시 이해가 안되는 부분이 있으시다면 댓글 남겨주시면 감사하겠습니다!!

아무튼 오늘도 개발자가 되면 이런 장난까지 칠 수 있구나를 느끼며 개발자로써 한발자국 관심도가 올라가게 되었다..

React는 Components, Props, State 이 세가지 개념이 핵심이라고 한다.

Components는 일종의 레고블록 느낌으로 필요할때 붙혔다 떼도 다른 어플리케이션에 영향을 주지 않고 유지관리가 가능하다.

동시에 Components는 함수이다. 그래서 내용을 함수 안에 담아서 표현할 수 있고, 그렇게 하면 코드의 재사용이 가능해져서 생산성이 올라간다. 규칙 1. React의 Components는 대문자로 시작한다.(HTML, JavaScript와 구별) 규칙 2. 일반 HTML 태그를 사용하는 것과 같은 방식으로 꺾쇠 괄호를 사용한다 <>

보통 애플리케이션은 단일구성 보다 많은 콘텐츠를 포함한다. 그래서 중첩된 구성요소를 표현도 가능하다 HomePage가 최상위 구성요소를 가지고 하위에 여러 구성요소들을 가진 트리구조는 그림과 같고 이 코드는 HomePage(최상위 컴포넌트)를 root.render에 전달하여 렌더링을 하는 구조이다. HomePage 컴포넌트는 Header 컴포넌트를 반환하게 되어있고 Header 컴포넌트는 Develop. Preview. Ship을 반환하게 되어있기 때문에 기존과 같은 화면이 렌더링된다.

Props

props는 부모가 자식에게 데이터를 전달하는 매개체이다. Props를 사용하려면 JSX에서 중괄호를 추가하면 된다 여러 방식으로 표현이 가능한데 파이썬 print문과 비슷해보인다. props 객체를 만들어서 여러곳에 활용하는 느낌.. 그렇게 되면 내용을 바꾸고 싶을때 props 객체 내용만 바꾸면 되니까 더 편할것 같긴 하다

목록으로 내용을 표시하는것도 가능하다. 그냥 데이터를 직접 하드코딩하는게 아니라 변수객체에 담아서 전달된다는 내용을 길게 풀어쓴것 같다.

State

리액트가 이벤트 핸들러와 state가 상호작용하는 방법

• 버튼을 만들고 버튼에 이벤트핸들러를 붙힌다.
• 사용자가 버튼을 누르면 이벤트핸들러가 활성화되고 상호작용이 가능하다

리액트라는 hooks라는 함수가 제공되는데 이 함수를 사용하면 상태에 따른 여러 로직을 추가할 수 있다 좋아요를 눌렀을때 숫자가 올라가는 등.. 변수를 설정할때는 설명적인 이름을 하는걸 추천한다고 한다.

결론

React에서 중요한건 Componts, Props, State인데 Components는 함수이자 객체 블록이고(레고) Props는 마찬가지로 객체 인스턴스 같은 느낌인데 변수처럼 쓰인다. State는 사용자와의 상호작용으로 트리거된다.

Q. Props와 State의 차이점 A. Props는 컴포넌트에 전달되는 읽기 전용 정보, State는 시간이 지남에 따라 변경될 수 있는 정보로, 일반적으로 사용자 상호작용에 의해 트리거됨.

새로 만든 프로젝트에서 React를 시작하려면 React를 로드하는 스크립트를 적용해야한다(파이썬에서 라이브러리 import 하는 느낌) 4번 라인에 react가 React의 핵심 라이브러리고 5번 라인이 React를 DOM과 함께 사용할 수 있도록 DOM 메서드를 제공한다

React를 로드하는 코드를 추가하면 여러 메서드를 사용할 수 있는데 기존에 명령형 프로그래밍 방식으로 만들었던것들을 ReactDOM.createRoot()와 root.render()로 작성할 수 있다.

하지만 이 상태로 브라우저를 열어보면 오류가 발생하는데 9번줄과 같은 <h1은 JavaScript가 아니라 JSX이기 때문에 오류가 발생한다.

JSX

JSX는 JavaScript의 확장으로 HTML과 문법이 비슷하다고 한다. 그런데 브라우저는 JSX를 기본적으로 이해하지 못해서 Babel과 같은 JavaScript 컴파일러가 필요하다. 위와 같은 코드를 추가하면 된다. 7번라인은 Babel 컴파일러이고 8번라인은 jsx코드로 반환한다는 내용이다

다시 index.html을 브라우저로 열어보면 기존에 만든것과 동일한 화면이 나오는데 코드는 훨씬 간결하고 직관적으로 작성됨을 볼 수 있다.

• 기존 명령형 프로그래밍방식
• 선언형 프로그래밍방식 React 코드

Q. React 코드를 컴파일해야 하는 이유는?

A. React는 JavaScript로 컴파일 해야하는 JSX를 사용한다.

사용자가 웹페이지에 접근하면 서버는 해당 API에 등록된 HTML파일을 브라우저(크롬,엣지 등)에 반환한다. 그럼 브라우저는 DOM(문서 개체 모델)을 구성해서 HTML파일에 담긴 내용들을 담고 렌더링 해서 사용자는 웹페이지를 눈으로 볼 수 있다.

DOM은 HTML과 UI 사이에 다리 역할을 하면서 서로 상호작용한다.

JavaScript로 렌더링 실습

1. vs코드와 같은 편집기를 이용해서 index.html 파일을 만든다.
2. 아래 코드를 입력한다.
3. 저장하고 index.html파일으 브라우저로 열면 아래와 같은 화면이 그려질것이다. F12를 눌러 개발자모드로 들어간 뒤 요소를 클릭하면 적었던 코드와 비슷한걸 볼 수 있는데, 저 요소에 적힌게 DOM이다. JavaScript로는 H1요소를 생성하고 텍스트 노드를 생성하고 텍스트를 삽입했는데 DOM 을 조회하면 H1 요소가 포함되어 있는걸 볼 수 있다.

명령형 프로그래밍 vs 선언형 프로그래밍

위에 작성한 index.html 파일은 명령형 프로그래밍의 예시이다. 컴퓨터가 어떻게 해야하는지 개발자가 한줄씩 입력해뒀기 때문이다.

명령형 프로그래밍은 요리사에게 피자레시피를 모두 알려줘서 피자를 만드는것이고 선언형 프로그래밍은 레시피 없이 그냥 피자를 주문하는것과 같다.

리액트

리액트는 선언형 프로그래밍 방식으로 구성되었다.

결론

둘 중 더 리액트 동작방식에 가까운것은?

소갈비찜 레시피

1번 방법

• 1. 소갈비는 5cm 정도 길이로 토막 내 찬물에 담가 핏물을 빼고 건져 기름기를 떼고 간이 잘 배도록 군데군데 깊숙하게 칼집을 넣어주세요~
• 2. 무는 큼직하게 깍둑 썰고 밤은 속껍질을 벗기세요~
• 3. 은행은 겉껍질을 벗기고 기름 두른 팬에 볶아 속껍질을 벗겨주세요~
• 4. 양념장에 넣을 배 즙은 강판에 갈아 거즈에 걸러 놓으세요~
• 5. 핏물 뺀 갈비를 큼직한 냄비에 담고 잠길 정도로 물을 부어 한 번 끓어 오를 때까지 한소끔 삶아 건지세요~
• 6. 찜 할 양념장을 만드는데 오래 끓여 국물이 졸아들면 짜지므로 약간 심심하게 만드는 것이 좋아요~
• 7. 삶아낸 갈비에 양념장의 2/3만 넣고 육수를 부어 고루 섞이도록 뒤적인 다음 한소끔 끓이고 찜 국물이 끓기 시작하면 무, 밤, 대추, 은행을 한데 담고 남은 양념장을 고루 끼얹어 가면서 버무려 주세요~
• 8. 7)을 조리듯 쪄 내는데 맛이 들면 찜기에 담고 지단을 얹어 내면 됩니다~^^

2번 방법

• 소갈비찜 한접시 주세요 ^^

2번 방법이 리액트의 동작 방식(선언형 프로그래밍)이고 1번 방식이 방금 했던 명령형 프로그래밍의 방식이라고 생각하면 된다

나는 벌써 컴퓨터공학과 3학년이 되었지만 기억나는 내용은 파이썬 기초문법, 자바 기초문법, 알고리즘 개념이 전부인 감자 그 자체이다.

이제 2년 뒤면 졸업하고 취준을 해야하는데 아는게 하나도 없어서 기초부터 하나씩 공부해 나갈 예정이다.

왜 공식문서를 보면서 공부하라고 하는지 체감이 되지 않았고, 영어를 매우매우 못하기 때문에 번역이 된 책이나 남들이 써준 블로그 글을 보면서 개발 프로젝트를 진행해왔다. (지피티만세)

예전부터 인스타 팔로우를 해왔던 개발자 성열 님의 velog를 우연히 보게 되었고, next.js를 쉽게 알아보는 문서를 찾게 되어 이 문서를 기반으로 학습할 예정이다. 영어를 못하지만 천천히 읽고 번역기를 돌려보면서 맥락이 맞는지 체크하면 프레임워크도 배우고 영어실력도 올라가지 않을까 하는 마음에 느리지만 해당 방법을 채택하게 되었다.

• 공부는 능동적인 방법으로 해야 기억에도 오래 남고 더 효율적으로 할 수 있기 때문도 있다.
• 아무튼.. 뭐라도 하면 뭐라도 되겠지 ㅎ..
• 학습한 내용을 이해한대로 정리해서 올리는거라 혹시 잘못된 내용이 있으면 피드백 주시면 감사하겠습니다!!

1. React, Next.js 기초

Next.js는 리액트 프레임워크인데 빠르게 풀스택 웹 애플리케이션을 만들 수 있다.

웹 애플리케이션을 구축할때 고려할 사항들은 아래와 같이 있다.

• 사용자 인터페이스 - 사용자가 애플리케이션을 사용하고 상호작용하는 방식입니다.
• 라우팅 - 사용자가 애플리케이션의 여러 부분 사이를 탐색하는 방식입니다.
• 데이터 가져오기 - 데이터가 어디에 있는지, 그리고 어떻게 가져오는지.
• 렌더링 - 정적 또는 동적 콘텐츠를 언제, 어디에서 렌더링하는지.
• 통합 - 어떤 타사 서비스를 사용하는지(CMS, 인증, 결제 등)와 이러한 서비스에 어떻게 연결하는지.
• 인프라 - 애플리케이션 코드를 배포, 저장, 실행하는 위치(서버리스, CDN, 엣지 등).
• 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
• 확장성 - 팀, 데이터, 트래픽이 증가함에 따라 애플리케이션이 어떻게 적응하는지.
• 개발자 경험 - 애플리케이션을 구축하고 유지 관리하는 팀의 경험입니다.

웹의 특성에 따라 각 부분을 직접 만들지, 라이브러리나 프레임워크 등을 사용해서 개발할지 결정해야한다.

리액트(React)는 대화형 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다.

사용자 인터페이스(UI)란 사용자가 화면에서 보고 상호작용하는 요소를 의미한다.

요약

리액트는 JavaScript 프레임워크이고 Next.js는 리액트 기반으로 만들어진 프레임워크이다. 리액트를 사용해서 UI(사용자 인트페이스)를 구축하고 거기에 Next.js 프레임워크에서 제공하는 기능을 도입해서 라우팅, 데이터 패치, 캐싱 등을 해결할 수 있다.

오픈소스SW 프로그래밍 전공 수업에서 주제 자율 프로젝트를 진행한 적이 있다. 기간은 2024.9.19~12.5였고, 우리는 큐싱 방지 공공 자전거 대여 어플리케이션인 타밭슈 프로젝트 를 개발했다.

컴퓨터공학과 2학년 학생들끼리 4~5명이 모여 시작한 프로젝트였는데, 팀원 모두 프로젝트 경험이 없어서 수많은 삽질을 통해 개발하였고, 성능이나 보안보다는 "일단 돌아가게라도 만들자!"라는 마음으로 개발했던 기억이 난다.

최근 벨로그를 둘러보다가 오픈소스로 공개된 코코아 프로젝트를 보게 되었다. 이를 읽어보면서 타밭슈를 어떻게 리팩토링할 수 있을지 고민해보고, 하나씩 정리해볼 예정이다.

1. 로그인 기능 개선

기존 로그인 기능은 MongoDB(NOSQL) 를 사용했다. MongoDB에 사용자 및 관리자 정보를 저장하고, HTTP 통신을 통해 입력값과 DB 값을 비교한 후, 일치하면 true를 반환하는 방식으로 구현했다.

하지만 앱을 실행할 때마다 로그인해야 했고, 다른 앱들은 한 번 로그인하면 앱을 재시작해도 유지되던데 어떻게 구현하는 걸까? 하고 궁금했던 적이 있었다.

그러던 중 코코아 소스코드를 살펴보면서 JWT 토큰 기반 로그인 방식을 알게 되었다. main/server/src/admin/guards/jwt-auth.guard.ts 파일에 있다

이 방식은 기존처럼 DB 값을 조회해 로그인 여부를 확인하는 것이 아니라, 로그인 시 토큰을 발급받고 이후에는 토큰의 유효성만 확인하면 되기 때문에 DB 접근이 불필요하다.

이를 활용해 로그인 기능을 JWT 토큰 방식으로 리팩토링할 계획이다.

오늘은 이 블로그를 참고하여 Spring Boot를 사용한 간단한 웹 API를 구현해봤다.

느낀점

자세하게 써져있어서 따라가는데 어려움은 크게 없었지만, 호환성 문제로 디버깅이 되지 않았다. 우선 블로그에서는 intellij로 실습하였지만, 최근에 cursor이라는 IDE를 알게되어 cursor에 적용을 해봤다. 하지만 java 디버거가 설치되지 않는 문제가 생겼고, cursor ai에게 물어보니 현재까진 파이썬 위주의 개발툴로 사용된다고 하였다.(뭔가 아닌것 같은데 문제가 해결이 안되니 다른 방법을 찾아보는 방법이 최선이였다)

그래서 두번째로, visual studio code에 실행을 시켜봤다. cursor은 vs코드를 포크해서 만든거라 비슷할텐데 왜 vs코드에선 자바 디버거 설치가 되고 cursor에는 안되는지 잘 모르겠다.

아무튼 vs코드에는 다행히 자바 디버거가 설치는 되었지만, 실행이 안되었다. 다시 시작된 구글링과 지피티의 도움을 받아 자바 자체 버전이 낮아서 실행이 안되는거였다는 사실을 알게 되었다. 사실 helloworld를 출력하기 전에, eclipse로 Oracle DB에 파싱하여 회원정보를 조회하는 실습을 따라했는데, 거기선 java 1.8.0을 다운받으라길래 그냥 따라해봤고, 생각보다 최근에 쓰여진 글이였어서 당연히 상위호환인줄 알았었다.

문제 1. Gradle 빌드 실패

Could not determine the dependencies of task ':bootJar'.

Could not resolve all dependencies for configuration ':runtimeClasspath'. Failed to calculate the value of task ':compileJava' property 'javaCompiler'. Cannot find a Java installation on your machine matching this tasks requirements: {languageVersion=17, vendor=any vendor, implementation=vendor-specific} for WINDOWS on x86_64. No locally installed toolchains match and toolchain download repositories have not been configured.

원인 Gradle이 Java 17을 찾지 못하고 있었다.

해결 방법

1. build.gradle 파일에서 Java toolchain 설정을 Java 21로 변경했다

java { toolchain { languageVersion = JavaLanguageVersion.of(21) } }

2. Gradle 캐시를 정리하고 다시 빌드했다.

   ./gradlew clean ./gradlew build --stacktrace

이렇게 하니까 잘 나왔다.