본문 바로가기
thymeleaf이 무엇인가 thymeleaf(타임리프)는 Java 기반의 서버사이드 템플릿 엔진으로, 웹 및 독립적인 환경 모두에서 HTML, XML 등 다양한 템플릿을 처리하여 동적인 웹 페이지를 생성한다. 서버에서 DB나 API에서 가져온 데이터를 템플릿에 넣어 완성된 HTML을 클라이언트에게 전달하는 서버 사이드 렌더링(SSR)을 지원하며, Spring Boot 환경에서 스프링 팀이 권장하는 템플릿 엔진이다. 주요 특징서버사이드 렌더링(SSR): 서버에서 데이터를 처리하여 최종 HTML을 생성하기 때문에 검색 엔진 최적화(SEO)에 유리하고 브라우저 호환성이 높습니다. 자연스러운 템플릿: Thymeleaf 문법이 포함된 HTML 파일을 브라우저에서 열어도 그 자체로 화면을 볼 수 있어, 개발 단계에서 디자인과 개발이 동시.. 2025. 9. 19.
프론트엔드에서의 CI/CD ci/cd 이야기를 들어본 적이 있다.근데 이건 큰 프로젝트들에서 쓰이기에, 따로 개인적으로 써본 적은 없다. 그래도 하는 방법이랑 개념 정도는 글로 남기는 것이 좋아 보여서 이렇게 글을 남겨본다. (루비온레일즈에서는 약간 찍먹 정도 해봄)CI/CD란?심플하게 말하자면, 배포까지의 과정을 효율적으로 만들어주는 과정이다.CI/CD는 코드 병합부터 테스트, 배포까지의 라이플사이클 전체에 걸쳐 자동화를 이루는 것이다.CI는 빌드 및 테스트를 자동화하는 것이며, CD는 배포를 자동화하는 것이다. (당연히 이 두 개는 묶음 세트이다.)관련 글https://comprogramming.tistory.com/82#%F0%9F%93%8C%20CI%20%3A%20%EB%B9%8C%EB%93%9C%20%EB%B0%8F%20.. 2025. 9. 18.
토스에서 즐겨쓰는 yarn 시작하기 전에, 공식 사이트는 다음 링크를 참고하자.https://yarnpkg.com/ Home page | YarnYarn, the modern JavaScript package manageryarnpkg.comYarn 이란?Yarn은 Javascript 패키지 매니저이다. 프로젝트 패키지 의존성을 관리하는 툴이며, 다른 개발자들과 패키지를 공유할 수 있도록 도와준다. (*third-party 모듈을 패키지라고 부른다.)Yarn은 npm과 마찬가지로 패키지의 저장소를 제공하며, 시스템에서 의존 패키지를 설치, 업데이트할 수 있도록 도와준다. package.json 파일을 통해 해당 프로젝트가 의존하고 있는 모든 패키지를 구분하고, package.json에 있는 dependencies 필드를 기반으로 .. 2025. 9. 17.
pnpm이 뭐지? pnpm은 "Performant npm"의 약자로, Node.js 환경에서 패키지를 빠르고 효율적으로 설치하고 관리하기 위한 고성능 패키지 매니저저이다. 저장 공간을 절약하고 설치 속도를 높이며, 기존 npm의 비효율적인 의존성 관리 문제를 개선한 것이 특징.pnpmhttps://pnpm.io/ko/installation 설치하기 | pnpm필수 구성 요소pnpm.io설치하는 방법은 여러 가지이다. OS 마다 설치하는 방법도 다르게 할 수 있다. 자세한 것은 위 공식 사이트를 참고하자. 명령어뿐 아니라 여러 좋은 정보들을 얻어갈 수 있다.설치 같은 경우에 잘 모르겠다면, AI에게 물어봐도 잘 알려준다!주요 특징 및 장점빠른 설치 속도: 패키지를 효율적으로 설치하여 전체적인 빌드 및 개발 속도를 향상시킵니.. 2025. 9. 17.
제대로 이해하는 RESTful - API API가 무엇일까REST - API를 배우기 전에 API가 무엇인지 다시 정리해보자 한다.https://codingworld2002.tistory.com/18 API가 뭘까?https://youtu.be/ckSdPNKM2pY?si=xS4cIt-5GQYixcyz 쉽게 말하자면 "메뉴판"이다.예를 들어 네이버라고 치자. 네이버에 날씨 부분이 있다. 네이버는 기상청의 API를 가져와서 화면에 띄울 것이다. 물론 하루마codingworld2002.tistory.com(정리해 둠)> 요약하자면, 결국 특정 규칙이 존재하는 "메뉴판"인 것이다. https://www.youtube.com/watch?v=fB3MB8TXNXM&t=26s(이 영상을 참고해서 정리했다. 고마워요 코딩사전!) RESTful - API는 A.. 2025. 9. 2.
cors 에러는 무엇인가. CORS 오류(Cross-Origin Resource Sharing error)는 브라우저의 보안 기능인 동일 출처 정책(Same-Origin Policy)으로 인해, 다른 출처(origin)의 리소스를 요청할 때 발생하는 차단 현상을 말한다. 이 오류는 웹 애플리케이션에서 다른 도메인, 프로토콜, 포트의 서버로부터 데이터를 가져오려고 할 때 발생하며, 서버에서 Access-Control-Allow-Origin 헤더를 통해 허용된 출처를 명시하거나, 요청을 보내는 클라이언트에서 프록싱하는 등의 방식으로 해결할 수 있다. CORS 오류의 원인: 동일 출처 정책(SOP)기본 보안 메커니즘:웹 브라우저는 악의적인 웹사이트가 다른 웹사이트의 데이터를 무단으로 가져가지 못하도록 동일 출처 정책(SOP)을 따른.. 2025. 9. 1.
HTTP 상태 코드(1XX ~ 5XX) 종류 총정리 http 상태 코드를 알아둔다면 데이터를 주고 받을 때에 "에러"의 원인을 바로 알아낼 수 있다.프론트이든 백이든 이건 CS 이니 꼭 알아두는 것이 좋다.(관련 글)https://inpa.tistory.com/entry/HTTP-%F0%9F%8C%90-%EC%83%81%ED%83%9C-%EC%BD%94%EB%93%9C-1XX-5XX-%EC%B4%9D%EC%A0%95%EB%A6%AC%ED%8C%90-%F0%9F%93%96 🌐 HTTP 상태 코드(1XX ~ 5XX) 종류 총정리HTTP Status Code HTTP의 상태 코드는 클라이언트가 보낸 HTTP 요청이 성공했는지 실패했는지를 서버에서 알려주는 숫자 코드다. 개발자 도구의 네트워크 탭을 보면 아래와 같이 Status 숫자 코드로 요청inpa.tis.. 2025. 9. 1.
깃의 스테이징 개념 Git 스테이징이란, 작업 중인 파일에서 커밋(commit)할 내용을 선택하여 '스테이징 영역(staging area)'이라는 임시 공간에 올려놓는 과정을 말한다. 이 과정을 통해 개발자는 어떤 변경 사항을 다음 커밋에 포함시킬지 명시적으로 지정할 수 있으며, git add 명령어를 사용해 스테이징 영역에 파일을 추가한다. 스테이징의 목적 및 과정 > 1. 변경 사항 선택:작업 디렉토리에서 여러 파일에 걸쳐 작업이 진행될 수 있습니다. 이 중에서 특정 파일이나 변경된 부분들만 커밋에 포함시키고 싶을 때 스테이징을 사용합니다. 2. git add 명령어:git add 명령어를 통해 특정 파일 또는 전체 변경 사항을 스테이징 영역에 추가할 수 있습니다. 3. 커밋 준비:스테이징 영역에 추가된 파일들은 .. 2025. 8. 27.
깃허브 메인 언어 설정하는 방법 https://doing7.tistory.com/53 [Github] 리포지토리 언어 변경Github Repository에 코드를 올리게 되면 자동으로 파일을 분석하여 언어별 비율을 알려준다. 이때 언어비율에 미치는 것은 파일의 갯수가 아닌 파일의 크기다. 즉, 큰 서브 코드 파일이 올라게되면doing7.tistory.com이 글을 참고하면 된다.명령어 >*.html linguist-detectable=false혹은*.html linguist-detectable=truelinguist-detectable=false or true 이 쪽은 고정이고, 앞에 *뒤에는 파일평을 기입해주면 된다.자세한 것은 글을 참고. 2025. 8. 16.
프론트에서 서버에 데이터 요청하는 방법 https://youtu.be/d6suykcsNeY?si=MonlhGzomiU_uCXv(반복 기록용) 2025. 8. 10.
루비 온 레일즈 스카폴드 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.

티스토리툴바