깡뇽

인프런 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 수강하면서 정리하는 글. 방법1) 정적 컨텐츠 파일을 웹 브라우저로 그대로 보내는 것 - 실습 1) resoucres 폴더 -> static 폴더 -> "hello-static.html" File 생성 후 HTML 코드 넣기 2) 브라우저에 localhost:8080/hello-static.html 검색 브라우저에 HTML 코드가 그대로 반환된 것을 확인할 수 있다. 검색을 하면 내장 톰켓 서버가 요청을 받고, hello-static의 요청이 왔다는 것을 스프링에게 알린다. 스프링은 컨트롤러에서 hello-static이 있는지 먼저 찾아보고 없으니 resources에 static/hello-static.html을 ..

인프런 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 수강하면서 정리하는 글. View 환경설정 src -> main -> resources -> static에서 "index.html" 파일을 만들어준다. 해당 html이 웰컴 페이지가 될 것이다. 생성된 index.html 코드 그대로 두고 실행하면, 아래와 같이 아무것도 없는 패이지가 뜬다. index.html 코드를 수정하고 실행해보자. Hello hello 원하는 대로 코드를 수정해서 웰컴패이지를 만들 수 있다. - spring 문서 (https://docs.spring.io/spring-boot/docs/current/reference/html/) - thymeleaf 템플릿 엔진 : 웹에 동작을 만들 수 있..

인프런 "스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술" 강의를 수강하면서 정리하는 글. 프로젝트 생성을 위한 준비 1. Java 11 설치 2. IntelliJ 또는 Eclipse 설치 기존 설치된 자바 버전을 확인해보았더니 11이었기 때문에 자바 설치 패스. IDE는 IntelliJ를 설치하였다. 스프링 프로젝트 생성 스프링 부트 스타터 사이트(https://start.spring.io/)에서 스프링 기반 프로젝트를 생성하면 된다. Maven은 과거에 많이 사용. 요즘은 Gradle로 넘어오는 추세. 언어는 Java. Spring Boot에서 정식릴리즈된 2.3.1 버전 사용. (아마도 예전 강의이기에 나는 2.6.1을 선택) Group은 기업명 또는 기업 도메인. (hel..

함수 프로그래밍을 할 때 코드를 사용하여 특정 작업을 여러 번 수행할 때, 함수를 만들어서 동일한 코드를 다시 작성하는 대신 코드 블록을 함께 그룹화하여 하나의 작업과 연결한 다음 작업을 다시 수행해야 할 때마다 해당 코드 블록을 재사용 할 수 있다. 즉, 함수는 특정 작업을 수행하기 위해 일련의 명령문을 그룹화하는 재사용 가능한 코드 블록이라고 할 수 있다. 1) 함수 선언 함수 선언은 함수를 이름 또는 식별자(identifier)를 사용한다. 형태: 「 function 함수이름( ) { 실행 코드; } 」 필수 => ① function키워드 ② 함수 이름 또는 식별자 뒤에 ( )소괄호 ③ { }중괄호 안에 실행 코드 2) 함수 호출 형태: 「 함수이름( ); 」 함수 호출로 함수의 중괄호 안에 모든 ..

조건문 조건문은 특정 조건을 확인하고 조건에 따라 작업을 수행한다. If 문 형태 : 「 if ( 조건 ) { 조건이 맞을 때 실행할 코드; } 」 if를 쓰고 ()소괄호 안에 조건을 작성하고 조건이 충족되면 {}중괄호 안에 코드가 실행된다. if (true) { console.log('This message will print!'); } // Prints: This message will print! If... Else 문 형태 : 「 if ( 조건 ) { 조건이 맞을 때 실행할 코드; } else { 조건이 틀릴 때 실행할 코드; } 」 if 문에 else와 {}중괄호를 추가로 사용하면 조건이 충족되었을 때는 if 뒤에 중괄호 속 코드가 실행되고, 조건이 충족되지 않았을 때는 else 뒤에 중괄호 속..

변수 변수는 컴퓨터 메모리에있는 정보의 작은 컨테이너라고 할 수 있다. 사용자 이름, 계정 번호 또는 개인화 된 인사말과 같은 정보를 변수에 저장하면 메모리에서 찾을 수 있다. 즉, 변수는 메모리에 데이터를 레이블링하고 저장한다. ① 설명이 포함된 이름으로 변수를 만든다. ② 변수에 저장된 정보를 저장하거나 업데이트한다. ③ 변수에 저장된 참조 또는 "가져 오기"정보 * 2015년 JavaScript ES6 버전에 많은 변경 사항이 도입되었고, 가장 큰 변경 사항 중 하나는 변수를 만들거나 선언하기 위해 사용되는 두 개의 새로운 키워드가 바로 let과 const 이다. 변수 만들기 : var var 키워드 : 변수 선언에 사용되며 ES6 이전에는 var 키워드만 사용할..

콘솔(Console) 콘솔은 개발자에게 오류와 같은 중요한 메시지를 표시하는 패널이다. 컴퓨터가 코드로 하는 작업들은 기본적으로 우리 눈에 보이지 않아서 콘솔에 직접 프린트하여 화면에 내용을 표시하고 볼 수 있다. ▶ console 키워드 : 코드에서 사용할 수 있는 객체, 데이터 및 작업 모음을 나타낸다. ▶ .log() 메서드 : console.log()로 사용하여 괄호 안에 넣은 내용을 콘솔에 프린트한다. ex) 콘솔에 5를 출력한다. console.log(3); +) 세미콜론은 줄 또는 문장의 끝을 나타내고, JavaScript에서 코드는 일반적으로 세미콜론없이도 실행되지만 세미콜론으로 각 문장을 끝내는 습관을 익히는 것이 좋다. 주석 주석은 코드가 수행하는 작업을 설명하고 코드를 사용하는 개발자..

보호되어 있는 글입니다.

그리드(Grid)란? CSS Grid를 사용하여 전체 웹 페이지를 배치할 수 있다. Flexbox는 주로 1차원 레이아웃에 항목을 배치하는 데 유용하고, CSS 그리드는 2차원 레이아웃에 가장 유용하며 행과 열 모두에서 요소를 정렬하고 이동하는 데 사용할 수 있는 많은 도구를 제공한다. Grid 생성 그리드를 설정하려면 grid container와 grid items가 있어야 한다. 그리드 컨테이너는 그리드 항목을 자식으로 포함하고 전체적인 스타일과 위치를 적용하는 부모 요소이다. HTML 요소를 그리드 컨테이너로 전환하려면, 요소의 display속성을 grid(블록 수준 그리드의 경우) 또는 inline-grid(인라인 그리드의 경우)로 설정해야한다. 그런 다음 다른 속성을 할당해서 그리드를 배치해야 ..

그리드(Grid) 란? 그리드는 교차하는 수평선과 수직선으로 구성된다. ex) 지도 속 거리들 - 도시 레이아웃에 명확한 구조를 형성. 그리드 시스템은 디자인을 구성하는 데 도움이 되며 페이지의 요소를 적절하게 정렬하기 위한 일련의 지침을 제공한다. 그리드는 일관성을 촉진하여 디자인 전체에 적용할 반복 패턴을 구축할 수 있다. → 반복 사용을 통해 웹 사이트 사용에 대한 학습을 빠르게 할 수 있으므로 사용자가 콘텐츠를 명확하게 탐색하고 사용할 수 있다. 그리드 유형 원고 스타일 그리드(manuscript-style grid), 블록 그리드(block grid)와 같이 텍스트를 구조적으로 보이기 위한 그리드 유형이 있다. 웹 디자이너가 사용하는 가장 일반적인 그리드 유형은 열 그리드(column grid)..

보호되어 있는 글입니다.

반응형 웹 디자인 화면 크기는 기기에 따라 크게 다를 수 있으므로 웹 사이트에서 모든 크기의 화면에 가장 잘 맞도록 콘텐츠의 크기를 조정하고 재구성하는 것이 중요함. → 웹 사이트가 표시되는 화면의 크기에 반응하는 것을 반응형 웹 사이트라고 함. ⤷ 반응형 웹 디자인 설명 사이트 www.taniarascia.com/you-dont-need-a-framework/ Understanding the Fundamentals of Responsive Design Responsive web design is an approach to creating websites in which the layout adapts to fit the device's screen - whether it's a phone… www.ta..