본문 바로가기
루비 온 레일즈 스카폴드 Scaffold - CRUD 딸깍 게시판을 예시로 들어보자. 게시판의 대표적인 기능에는 글을 읽고 글을 생성하고 글을 수정하고 글을 삭제할 수 있는.. 말 그대로 CRUD가 들어가 있다. 그리고 이 기능들은 사실상 "모든 서비스"에 적용이 된다고 해도 다름이 없다. 물론 필수는 아니고, 서비스마다 다른 기능들이 더 중요한 경우도 있다.만일 정석적인 CRUD가 있는 게시판을 구현하고 싶거나, 혹은 그런 "코드"들을 정석적으로 배우고 싶다면, 루비 온 레일즈에서 지원해 주는 "스카폴드"를 사용하는 것을 추천한다.(물론 실무에선 애초에 더 다양하고 디테일한 기능들을 집어넣기에, 실무에서는 스카폴드를 전혀 안 쓴다. 다만 crud 코드를 잘 배우고 싶다면 딱이다.)여기에서 Scaffold 란? CRUD 기능 자동 생성: Model, View, .. 2025. 7. 27.
루비 온 레일즈의 데이터베이스 살펴보기 어떤 서비스이든 "데이터 베이스"는 필수이다. 물론 그냥 일반적인 랜딩 페이지면 상관없지만, "서비스"라고 부를 수 있는 프로덕트에는 반드시 데이터베이스가 필요하다.그런 점에서 루비 온 레일즈는 자체적으로 데이터베이스를 제공해 주고, 그 데이터베이스를 컨트롤하며 화면에 렌더링 할 수 있게 한다.Rails에서 데이터베이스 >Rails에서는 주로 관계형 데이터베이스를 사용하며, 데이터베이스를 쉽게 다룰 수 있도록 Active Record라는 ORM (Object-Relational Mapper)을 제공한다.Active Record: 데이터베이스 테이블을 Ruby 객체로 매핑하여, SQL 코드를 직접 작성하지 않고도 데이터를 처리할 수 있도록 도와준다.SQLite: Rails 프로젝트를 처음 만들 때 기본적으.. 2025. 7. 26.
루비 온 레일즈의 핵심. "MVC" 패턴 루비 온 레일즈에서 핵심인 MVC 이란?루비 온 레일즈에서 핵심은 mvc 패턴이다. 이 개념을 루비 온 레일즈에서 핵심으로 쓰는데, mvc는 줄임말이다.각각, model / view / controller 의 줄임말인데, 서로 각각 역할이 존재한다.역할을 그림으로 표현하면 다음과 같다. >MVC 패턴이란 무엇인가?MVC 패턴은 소프트웨어 개발에서 널리 사용되는 디자인 패턴 중 하나이다. 복잡한 애플리케이션을 세 가지 주요 부분으로 나누어 개발을 더 쉽고 효율적으로 만들어준다. 이 세 가지 주요 부분은 다음과 같다.모델 (Model): 데이터와 관련된 부분을 담당합니다. 데이터를 저장하고, 데이터베이스와 상호작용하는 역할을 합니다. 마치 건물의 뼈대와 같습니다.뷰 (View): 사용자에게 보여지는 부분을 .. 2025. 7. 25.
루비 온 레일즈 프로젝트의 폴더 구조 Rails는 웹 애플리케이션 개발을 위한 체계적인 구조를 제공한다. 이 구조는 여러 폴더와 파일로 구성되어 있으며, 각 폴더와 파일은 특정한 역할을 담당한다. 이 구조를 이해하면 Rails 애플리케이션을 개발하고 유지보수하는 데 큰 도움이 된다.예를 들어 next.js에서 page.jsx가 있다. 이 파일은 무조건 폴더를 라우팅 하면 페이지가 된다. 이 룰은 next.js가 만든 룰이고 이 룰을 무조건적으로 따른다. 루비 온 레일즈로 비슷하다.주요 폴더와 파일 살펴보기 >Rails 프로젝트를 생성하면 다음과 같은 주요 폴더와 파일들이 생성된다. (꽤 생각보다 많음)my_first_app/ # 프로젝트 최상위 폴더├── app/ # 애플리케이션 핵심 코드│ ├── assets/ # 이.. 2025. 7. 25.
루비 온 레일즈 설치 및 프로젝트 세팅 공식 사이트에서 프로젝트를 세팅하는 방법을 디테일하게 알 수 있음 >https://guides.rubyonrails.org/install_ruby_on_rails.html Install Ruby on Rails Guide — Ruby on Rails GuidesInstall Ruby on Rails GuideThis guide will walk you through installing the Ruby programming language and the Rails framework on your operating system.While your OS might come with Ruby pre-installed, it's often outdated and can't be upgraded. Using a v.. 2025. 7. 24.
Ruby on Rails란 Ruby on Rails란 무엇인가Ruby on Rails (줄여서 Rails)는 웹 애플리케이션을 빠르고 효율적으로 개발할 수 있도록 도와주는 강력한 오픈 소스 웹 프레임워크이다. Ruby라는 프로그래밍 언어를 기반으로 하며, 웹 개발에 필요한 다양한 기능과 규칙을 미리 제공하여 개발자들이 코드를 더 적게 작성하고 더 빠르게 웹 애플리케이션을 만들 수 있도록 지원한다.https://rails.insomenia.com/getting_started.html Rails 시작하기 — Ruby on Rails GuidesGitHub에서 이 파일을 읽지 마세요. 가이드는 https://guides.rubyonrails.org에 게시되어 있습니다.Rails 시작하기이 가이드는 Ruby on Rails를 설치하고 실.. 2025. 7. 24.
Http Method 란? (GET, POST, PUT, DELETE) https://velog.io/@yh20studio/CS-Http-Method-%EB%9E%80-GET-POST-PUT-DELETE Http Method 란? (GET, POST, PUT, DELETE)평소에 코딩을 하면서 서버와 클라이언트가 소통을 하기 위해서 보통 Http를 이용을 하게 되었습니다. 그런데 GET, POST, PUT, DELETE 등 여러가지의 Http Method 가 존재하는데 명확하게 사용하고 있을까?velog.io(서버와 클라이언트가 소통하는 원리) 2025. 7. 10.
맥북 스크린샷 꿀팁(?) 맥북 스크린샷을 찍으면 지저분하게 그냥 데스크탑 화면에 저장이 되는데 이게 생각보다 열받는다(?)그래서 이걸 "스크린샷" 이라는 폴더에 자동으로 저장되게 설계하고 싶었고, 가능하다는 것을 깨달았다.하는 법은 쉽다.일단 먼저 "터미널"에 들어간다.이후 아래 명령어를 기입한다.defaults write com.apple.screencapture location ~/Desktop/스크린샷이후 다음 명령어도 기입하면 끝!killall SystemUIServer✅ 이후에는?이제부터 Command + Shift + 4 혹은 Command + Shift + 3 등으로 스크린샷을 찍으면자동으로 스크린샷 폴더 안에 저장됨! 2025. 7. 9.
리액트 심화 커리큘럼 3주차 : 전역 상태 관리의 이해 + 프론트엔드 앱의 테스트/배포 흐름 경험 전역 상태 관리의 이해 + 프론트엔드 앱의 테스트/배포 흐름 경험목표전역 상태 관리전역 상태의 개념과 필요성을 설명할 수 있다. (props drilling vs 전역 상태)useContext로 간단한 전역 상태를 직접 구성해 볼 수 있다.Zustand, Recoil, Redux 등 대표 상태관리 라이브러리의 특징과 차이를 말할 수 있다.어떤 상황에서 어떤 상태 관리 전략을 선택할지 판단할 수 있다.테스트 및 배포 흐름React 컴포넌트 테스트의 기본 구조(vitest, jest, testing-library/react)를 이해하고 예제 테스트를 작성할 수 있다.Vercel, Netlify, Cloudflare Pages의 차이점과 장단점을 이해할 수 있다.실제로 만든 앱을 클라우드 플랫폼에 배포해 보고.. 2025. 6. 27.
리액트 심화 커리큘럼 2주차 : React 비동기 처리와 데이터 패칭 라이브러리 2주 차 : React 비동기 처리와 데이터 패칭 라이브러리목표비동기 처리의 기본 개념인 Promise, async/await, fetch 사용법을 이해하고 설명할 수 있다.React 컴포넌트에서 비동기 요청을 어떻게 다뤄야 하는지 (useEffect, 상태관리 등)을 구현해 볼 수 있다.데이터 패칭 라이브러리(SWR, TanStack Query 등)의 기본 사용법과 장점을 예제와 함께 설명할 수 있다.직접 fetch와 라이브러리 방식의 차이를 비교하여, 실무에서 적절한 선택 기준을 말할 수 있다.loading, error, retry, cache, revalidate 등 실전 대응 키워드를 개념과 함께 체감할 수 있다.참고 키워드fetch(), async/await, useEffect()SWR: use.. 2025. 6. 20.
NotebookLM이란? 자료를 정리하고 관리하는 것은 생각보다 귀찮고 어렵다.. 그러나 자료를 정리하면서 관리한다면 생산성은 엄청나게 오를 것이다! 그것을 편하게 해주는 것이 바로 NotebookLM이다. 이것도 AI인데, 정말 유용하다. (근데 많이 모르는 것 같다;)공식 사이트 >사이트 링크는 다음과 같다.https://notebooklm.google.com/구글에서 만들었고, 정보의 홍수에서 우리가 제대로 나아가도록 도와줄 것이다.사용하는 방법은 심플하긴 하다. 디테일한 것은 다음 영상들을 참고해 주자. (이렇게 안 써두면 까먹을 거 같음)https://www.youtube.com/watch?v=J_Zkj4pu3R4https://youtu.be/BAcV-5QnFbE?si=PkeV7jopbfv3F30m여럿 방법이 있지만, .. 2025. 6. 17.
깃허브 오가니제이션 만들기 깃허브를 이용해서 "회사"나 대규모 팀프로젝트를 위한 "오가니제이션"을 만들 수 있다.혹은 여러 프로덕트를 관리하는 용으로도 쓸 수 있기에 되게 좋은 기능이다.이를 어떻게 만들고 사용하는지에 대한 글을 심플하게 여기 기록으로 남겨본다.(관련 글)https://oliviakim.tistory.com/155 [GitHub] 협업을 위한 Organization 만들기깃허브에서는 팀 작업용 조직 계정을 사용해 협업을 진행할 수 있다. 개인 계정으로 조직 계정에 참여해 공유 프로젝트에 대해 공동 작업을 할 수 있는데, 바로 Organization이다. Organization 생성oliviakim.tistory.com+ (오가니제이션은 추후 글을 수정하거나 추가할 수도 있음) 2025. 6. 13.
커서 ai로 코딩하기. 바야흐로 대 "AI" 시대. 코딩에 특화된 AI도 정말 많이 나왔다. 그중에서 유명한 "커서"가 있다. 뭐 물론 커서 말고도 다른 AI들이 많다. 챗GPT나 클로드... 코파일럿 등등.. 그러나 이 글에서는 커서 AI에 대해서만 이야기하겠다.공식 홈페이지https://www.cursor.com/ Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com공식 홈페이지 링크는 다음과 같다. 참고하길 바란다.https://velog.io/@eunbinn/cursor-ai-tips-react-nextjs?utm_source=substack&utm.. 2025. 6. 12.
리액트 심화 커리큘럼 1주차 : Next.js App Router에서의 렌더링 전략 이해 목표Server Component와 Client Component의 차이를 구분할 수 있다.Next.js의 fetch() 사용 위치와 옵션에 따라 어떤 렌더링 전략이 적용되는지 설명할 수 있다.SSR, SSG, ISR, CSR의 개념과 차이를 실제 코드 예제를 통해 체감할 수 있다.어떤 상황에서 어떤 렌더링 전략이 적절한지 판단할 수 있다.참고 키워드cache: 'force-cache' / 'no-store'next: { revalidate: N }'use client'와 fetchServer Component의 async 동작HTML에 포함되는 시점, 클라이언트 JS 필요 여부공유 방식발표 or 코드 예제 (5분 내외)예제 페이지 1개 이상 (/ssr, /csr, /isr 등)Server Compone.. 2025. 6. 6.
context7에 대하여 우리가 AI를 이용해서 개발을 할 때에 가장 불편한 것이 무엇일까? 바로 ..할루시네이션그렇다. 할루시네이션이다. 특히 "버전"의 차이로 인한 할루시네이션이 존재한다. 이는 라이브러리의 업데이트 혹은 언어나 프레임워크의 업데이트에 의해서도 생긴다.이런 것을 "매 번" AI를 쓸 때마다 세팅을 해야 한다면 엄청나게 불편할 것이다. 이를 방지하기 위한 것이 바로 context7이다.공식 문서 링크 >https://context7.com/ Context7 - Up-to-date documentation for LLMs and AI code editorsGenerate context with up-to-date documentation for LLMs and AI code editorscontext7.com공식.. 2025. 6. 5.
깃 명령어 모음집 깃을 사용하다 보니, 내가 한 번 깃 명령어를 정리해야겠다는 생각이 들었다. 이 글에 깃에 관한 여러 명령어를 작성할 것이다. (앞으로 수정하면서 추가될 수 있음.)git 하위 디렉토리를 생성 (저장소 생성)만일 당신의 프로젝트에 git을 할당해서 디렉토리를 추적하고 싶다면? 다음의 명령어를 기입하자.git init소스 코드를 클론하기당신이 팀원으로 팀프로젝트를 진행하거나 혹은 어떤 코드를 그대로 가져와서 작업을 해야 한다면? 깃 클론을 이용해 보자.git clone https: ~~URL예시를 보이자면, 위와 같은 레포지토리가 있다고 가정하자. 그럼 위에 code 부분을 클릭하면..https에 해당되는 URL이 있다. copy 버튼을 누르고 본인 에디터로 가서 git clone을 해주면 된다.예시 클론.. 2025. 5. 23.
TypeScript와 TypeScript+SWC의 차이 우리가 리액트를 vite로 프로젝트 빌드를 할 때에 조건을 선택하게 되는데, 이 중 그냥 타입스크립트랑 타입스크립트 + SWC인 부분이 있다. (자바스크립트도 똑같이 나옴)그 차이가 무엇인지에 대한 좋은 글이 있어서 공유해 본다.https://velog.io/@castillou/TypeScript%EC%99%80-TypeScriptSWC%EC%9D%98-%EC%B0%A8%EC%9D%B4 TypeScript와 TypeScript+SWC의 차이Vite를 사용해 React 프로젝트를 설정할 때마다 보이는 두 가지 선택지가 있다. 바로 TypeScript와 TypeScript+SWC. 이 두 옵션은 어떤 차이가 있기에 나뉘어 있을까? 단순히 옵션을 선택하는 것보다 그 차velog.io 2025. 5. 22.
4기 카카오 프론트 전체 스터디 - 리액트 4주차 (SPA 구조 + Next.js & TS 프리뷰) 아마 마지막의 카카오 프론트 전체 스터디 글이 될 거 같다. (4기 한정)이번에는 리액트의 SPA 구조 및 Next.js에 대한 이야기를 할 것이다. (next.js에서는 타입스크립트로 진행함.)목표는 다음과 같다.1. SPA의 구조와 "가짜 페이지 전환" 흐름 이해 2. Next.js 구조(app/, page.tsx)와 타입스크립트 적용 맛보기시작하자.1. SPA의 구조와 "가짜 페이지 전환" 흐름 이해1. 싱글 페이지 애플리케이션(SPA) 구조와 “가짜 페이지 전환” 동작 원리1-1. 전통적 MPA와 SPA의 차이는 다음과 같다.항목 전통적 MPA(멀티 페이지) / SPA(싱글 페이지)페이지 전환서버가 새로운 HTML 전체를 응답 → 브라우저가 문서 완전 교체첫 요청에 단일 HTML + JS 번들을 .. 2025. 5. 17.
리액트 훅에 취하다. 리액트에서 빠지면 섭한 "리액트 hook"이에 대한 설명을 모아둔 유튜브 재생목록이 있어서 내가 복습할 겸... 여기 티스토리에 공유하겠다.https://www.youtube.com/playlist?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO React Hooks에 취한다 - 리액트 훅스 쉽게 마스터하기 www.youtube.com(개인적으로 깔끔하게 잘 알려주셨음.) 2025. 5. 12.
4기 카카오 프론트 전체 스터디 - 리액트 3주차 (HTTP 요청 + 주요 Hooks 정리) 시작하기 전에, hook에 대한 공식 문서 링크는 다음과 같다. 참고하자.https://ko.react.dev/reference/react/hooks 내장 React Hook – ReactThe library for web and native user interfacesko.react.dev오늘은 hook에 대한 글을 쓰겠다. 목표이번 글의 목표는 다음과 같다.fetch + useEffect 조합으로 API 요청 흐름 익히기주요 Hook (useState, useEffect, useRef) 실습성능 최적화용 Hook (useMemo, useCallback) 개념 잡기커스텀 Hook 구조 맛보기 (useInput)+ 여기에 커스텀 훅을 만드는 기준은 뭘까? (공통 로직 분리 기준) 에 대한 이야기도 진행해.. 2025. 5. 11.