[바이브코딩] "답답해서 직접 만든 AI 비교 도구" – 파이썬 몰라도 2일 만에 완성한 후기

정보처리기능사 취득 공부할 당시 챗 GPT에게 자료형 범위 등 음수 표현에 대해서 질문만 하면 그렇게 망가지더란다.... 하도 답답해서 여러 AI 질문을 취합한 뒤 그 중 옳은 정보만 습득하려고 만든 AI 비교 도구였었다. 현재는 AI들의 능력치가 많이 향상되어 할루시네이션 현상이 나름 적어졌기에, 이렇게 AI 비교를 해서 질문 답을 받을 필요가 없을 정도로 성장했다. 그러다보니 요즘엔 해당 도구를 사용하지않지만 예전에 이런 것도 만들었었지하고 기록 남겨둔다. 이게 내가 만든 최초의 바이브코딩한 프로그램이었는데, 이때 디자인 출력되는 모습을 보고 디자인에 대해선 언급하지않았는데도 알아서 대중적으로 어필 될만한 디자인으로 구현해주는구나 싶어서 너무 신기했던 기억이 가장 인상 깊게 남아있다. AI를 쓰다 보..

• format_list_bulleted Dev Journey/실습 & 프로젝트
• · 2026. 5. 27.
• textsms

[바이브코딩] 가볍고 따뜻한 힐링 앱, 괜찮아 버튼 in 앱인토스

5월, 앱인토스의 귀여운게 최고야 🐾 챌린지 공지를 보다가 문득 생각이 들었다.이거, 재미있을 것 같은데? 그렇게 시작된 프로젝트가 괜찮아 버튼이다.클릭 하나로 위로를 받는, 극도로 단순하지만 그래서 더 따뜻한 미니앱 만들기 지친 하루에 작은 위로를 전하는 힐링 앱"괜찮아" 버튼을 누르면 귀여운 동물들이 당신에게 위로를 전해요.지친 퇴근길, 혹은 잠들기 전 1분당신의 지친 마음을 아무 조건 없이 토닥여주는 가장 작고 따뜻한 공간입니다.[이용 가이드: 접속에서 위로까지]접속: 어두운 화면과 마주합니다.행동: 화면 중앙의 [괜찮아] 버튼을 가볍게 터치합니다.발견: 귀여운 동물 친구와 위로의 메세지가 나타납니다.경험: 동물들의 다정함, 그리고 마음을 울리는 짧은 한마디를 읽습니다.[사용자가 경험하는 가치]..

• format_list_bulleted Dev Journey/실습 & 프로젝트
• · 2026. 5. 26.
• textsms

023. props의 자식 Component에 node 전달하기

PART 2(초급) React.js 기초 다지기023. props의 자식 Component에 node 전달하기 node from App.js구조 : App └── PropsNode └── spanApp : 상위(부모) 컴포넌트R023_PropsNode = : 하위(자식) 컴포넌트 : PropsNode의 children으로 전달된 요소{this.props.children}부모인 App이 을 자식 컴포넌트인 사이에 넣어서 전달함

• format_list_bulleted Study/초보자를 위한 리액트 200제
• · 2026. 5. 11.
• textsms

022. props를 기본값으로 정의하기

PART 2(초급) React.js 기초 다지기022. props를 기본값으로 정의하기defaultProps 문법 : props의 기본값은 부모 컴포넌트에서 값이 넘어오지 않을 때 사용부모 컴포넌트에 값이 지정 되어 있으면 부모 컴포넌트의 값이 우선적으로 사용됨없으면 defaultProps 에 지정해둔 기본값이 사용됨

• format_list_bulleted Study/초보자를 위한 리액트 200제
• · 2026. 5. 8.
• textsms

021. props를 필수 값으로 사용하기

PART 2(초급) React.js 기초 다지기021. props를 필수 값으로 사용하기props의 자료형 선언 시, 자료형 설정 대신 isRequired를 조건으로 추가하면 변수값 없는 경우 경고메세지 발생할 수 있음현재 상위 컴포넌트에서는 ReactString의 값을 전달하지않음원래는 콘솔창에서 에러나는 모습이 보이는게 정상이지만(화면은 정상), 현재 react가 상위 버전이라 에러가 나지않는 중 부모(상위)와 자식(하위) 컴포넌트를 구분하는 기준은 '어디서 어디를 호출(사용)하느냐' Parent Component:다른 컴포넌트를 불러와서 사용하는 쪽 (코드상에서 태그를 쓰는 곳)App.js는 PropsRequired를 포함하여 화면에 그리고 있으므로 상위 컴포넌트Child Component: 불러..

• format_list_bulleted Study/초보자를 위한 리액트 200제
• · 2026. 5. 6.
• textsms

020. props 객체형으로 사용하기

PART 2(초급) React.js 기초 다지기020. props 객체형으로 사용하기 props 값을 객체로 하위 컴포넌트에 전달할 경우 자료형을 object로 선언but, 객체 형태(객체 내부 변수들)의 자료형을 선언할 때는 shape 라는 유형을 사용Object Json - Syntax Error... 오래된 교재의 차이 ㅠ

• format_list_bulleted Study/초보자를 위한 리액트 200제
• · 2026. 5. 5.
• textsms