전체 글27 Thymeleaf 문법 정리 타임리프(Thymeleaf) ? 타임리프는 HTML, CSS, JavaScript 일반 텍스트를 처리할 수 있는 웹 및 독립형 환경에서 사용할 수 있는 Java 템플릿 엔진입니다. 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 합니다. 타임리프 장점 JSP와 달리 프로토타입 코드를 작성할 수 있습니다. JSP는 기존의 html 코드와 동시에 코드를 작성할 수 없어 프로토타입 코드를 작성할 수 없습니다. 타임리프는 코드를 변경하지 않기 때문에 프론트, 백엔드 간의 협업이 편해집니다. 타임리프 설정법 build.gradle dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' } HTML .. 기타 2023. 10. 26. [빌드 도구] Gradle VS Maven 차이점 빌드도구(build Tool) ? Java 코드와 프로젝트에 사용되는 xml, properties, jar 파일들을 JVM이나 WAS가 인식할 수 있도록 해주는 빌드 자동화 도구 입니다. 프로젝트 생성, 배포 등 실행하기 위한 전용 프로그램이며 빌드 도구는 이러한 빌드 과정을 자동으로 수행해주는 도구를 의미합니다. 메이븐(Maven) ? 메이븐은 Java용 프로젝트 관리도구로 Apache의 Ant 대안으로 만들어졌습니다. 개발을 하다보면 많은 라이브러리들을 활용하여 개발을 합니다. 많은 라이브러리로 인해 관리가 힘든데 메이븐은 이러한 문제를 관리해줍니다. 또한 해당 라이브러리가 작동하는데 필요한 다른 라이브러리들까지 관리하여 자동으로 다운로드를 받아줍니다. POM(Project Object Model) .. 기타 2023. 10. 26. [GitHub] README 만들 때 유용한 사이트 Devicon https://devicon.dev/ Devicon Devicon aims to gather all logos representing development languages and tools in one font. 🚀 devicon.dev 아이콘을 넣을 때 유용한 사이트 입니다. Simple Icons https://simpleicons.org/?q=rea Simple Icons 2746 Free SVG icons for popular brands simpleicons.org 아이콘, 색상코드가 자세하게 나와있어 유용하게 사용할 수 있습니다. Shoelds.io https://shields.io/badges/static-badge Static Badge | Shields.io One of .. GitHub 2023. 10. 20. 웹사이트 디자인할 때 유용한 툴 Color Space https://mycolor.space/ ColorSpace - Color Palettes Generator and Color Gradient Tool Just Enter a Color! And Generate nice Color Palettes mycolor.space 색상 팔레트로 최적의 색상 조합을 알려줍니다. CSS Gradient https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, .. Front-End 2023. 10. 20. 포트폴리오 만들때 유용한 사이트 Pinterest https://www.pinterest.co.kr/ Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요. www.pinterest.co.kr 핀터레스트에서 responsive website를 검색하면 포트폴리오 만들 때 유용합니다. Dribbble https://dribbble.com/ Dribbble - Discover the World’s Top Designers & Creative Professionals From Ford to Airbnb to Capital One, see why over 60,000 leading brands and business builders use Dribbble to attract, en.. Front-End 2023. 10. 20. [CSS] Flexbox 정리 Flexbox ? 기존의 display나 positon 등을 이용한 웹의 레이아웃 개발은 생각할 부분이 많고 어느 정도 한계가 존재해서 개발하기가 복잡하고 어려움이 있습니다. 이런 점을 극복하기 위해서 css3에 추가된 flexbox입니다. flexbox를 이용하면 특별한 계산 없이 쉽게 정렬을 할 수 있고, 이를 통해 레이아웃을 편리하게 구성할 수 있습니다. Flexbox 특징 flexbox는 flex container(부모 요소)와 flex item(자식 요소)로 구성됩니다. flex-container에 적용할 수 있는 속성 값 display : flex container를 정의 flex-direction : flex-container 내의 item을 배치할 때 사용할 방향을 지정 flex-flow .. Front-End 2023. 10. 19. Spring / Spring Boot의 차이 Spring Framwork 란? 스프링 프레임워크(Spring Framework)는 자바 플랫폼을 위한 오픈소스 애플리케이션 프레임워크로 간단히 스프링(Spring)이라고도 불립니다. 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있습니다. 스프링 프레임워크는 의존성 주입(DI, Dependency Injection)과 제어의 역전(IOC, Inversion Of Control)은 스프링에서 가장 중요한 특징중 하나입니다. 이들로 인해서 좀더 결합도를 낮추는 방식으로 어플리케이션을 개발할 수 있습니다. 이러한 개발방식으로 개발한 응용프로그램은 단위테스트가 용이하기 때문에 보다 퀄리티 높은 프로그램을 개발할 수 있습니다. SpringBoot 란? 스프링 프레임워크는 기능이 많은만큼 환경설.. Back-End 2023. 10. 18. [GitHub] Project 생성 Project? 프로젝트는 작업 현황과 진행도를 볼 수 있습니다. 이슈들을 하나의 작업으로 구분해 그 작업이 현재 어느 정도 진행되었는지 확인할 수 있습니다. 1. Project 생성 상단에 Projects를 클릭해 들어가주시고 New Project를 눌러 Project를 생성해주세요. 2. Template 선택 Project생성시 사용할 템플릿을 선택해주세요. Board가 가장 많이 사용되고 편리합니다. 3. Todo, In Progress, Done? To Do : 해야 할 작업 In Progress : 진행 중인 작업 Done : 완료된 작업 To do 새로 추가 되는 모든 이슈가 해당(해야할 것, 새로운 기능 추가, 기능 수정 등등) 새로 추가 되는 모든 PR이 해당 In Progress 작업이 .. GitHub 2023. 10. 12. [GitHub] Intelli J에서 commit and push, merge하기 1. Intelli J에서 GitHub열기 좌측하단을 보시면 맨아래 Git을 눌러주세요. 들어가시면 아래와같은 화면이 보이실겁니다. 2. branch checkout 하기 GitHub에서 생성했던 branch에 우클릭을 하셔서 Checkout을 해주세요. 체크아웃을 하게되면 상단에 branch가 변경된것을 보실 수 있습니다. 3. 프로젝트 Commit and push 하기 좌측상단에 보시면 아래와같은 commit버튼이 있습니다. 들어가시면 수정한파일은 파란색 생성한파일은 초록색으로 표시됩니다. 커밋할 파일을 선택하여 Commit and Push를 눌러주시고 Push버튼을 눌러주세요. 4. 프로젝트 Commit 확인 Push가 완료되면 커밋에 파일이 사라지고 아래와같이 완료되었다는 표시가 보이실겁니다. 5.. GitHub 2023. 10. 12. [GitHub] Issue 생성하여 프로젝트 관리하기 Issue? 이슈는 작업의 버그 수정, 새로운 추가될 기능, 개선해야하는 기능 등 볼 수 있습니다. 모든 활동 내역에 대해 이슈를 등록하고 그 이슈를 기반으로 작업을 진행할 수 있습니다. 1. GitHub Issue 생성하기 진행중인 Repositories에 들어가셔서 상단에 Issues에 들어가주면 아래와같은 화면이 보이실겁니다. 여기서 New issue를 클릭하셔서 issue를 생성하겠습니다. 2. Issue 설정하기 Title은 제목을 적어주시고 Write에는 세부내용을 적어주시면 됩니다. 우측에있는 설정들은 각각 Assignees : 해당 작업의 담당자(작업자) Labels: 해당 작업의 성격 Projects: 등록하려면 Projects를 설정해야합니다. Project는 따로 설명 드리겠습니다. .. GitHub 2023. 10. 12. [Intelli J] 프로젝트 생성 1. File - New - Project 클릭 2. Spring Initializr 클릭 Name : 프로젝트 명 Location : 프로젝트 경로 Language : 사용 언어 Type : 사용기술 나머지는 그대로 두시고 Next버튼을 눌러주세요. 3. 사용할 라이브러리 설정 1. Spring Boot DevTools 2. Lombok 3. Spirng Web 4. Thymeleaf 5. Spring Security 6. OAuth2 Client 7. JDBC API 8.MyBatis Framework 9.MySQL Driver 저는 데이터베이스를 MySQL사용하고있어서 MySQL로 설정했습니다. 다른 데이터베이스를 사용하시는분은 맞춰서 설정해주세요. 확인이 다 되었다면 Create버튼을 눌러주세요... Intelli J 2023. 9. 6. [Intelli J] Git 연결 Intelli J Git 연결 1. File - Settings[Ctrl+Alt+s] - Version Control - Github 클릭 이렇게 깃허브를 연결하는 창이 나옵니다. Add account 클릭 2. Authorize in GitHub (권한 확인) 3. Git연결 확인 이렇게 자신의 Git계정이 보인다면 연결이 완료된겁니다! Intelli J 2023. 9. 6. 이전 1 2 3 다음