웹개발 한 번 해보겠습니다..

Test Driven Development 테스트 주도 개발 = 목표 주도 개발 = 사용자 중심 개발 = 인터페이스 중심 개발 -> TDD를 하는 이유 : 목표를 달성하기 위해 올바르게 작동하는 깔끔한 코드를 만드는 것 1. 올바르게 작동하는 코드를 만든다. 2. 깔끔한 코드로 Refactoring한다. TDD의 핵심 IDEA : 올바르게 작동한다는 것을 보장해주는 Test Code가 필요하고, Test Code를 가장 먼저 작성하자. TDD cycle Red : 실패한 Test ex) 1 + 1을 계산해주는 method가 없음 Green : 부분 성공한 Test ex) 1 + 1 = 2 를 계산해주는 method를 만들어줬지만, 1 + 3은 계산하지 못함 Refactoring : 깔끔한 Code로 바꿔..

Spring Initializr spring initializr를 이용해 간편하게 프로젝트를 생성할 수 있다. 1. 다음 사이트에 접속한다. https://start.spring.io/ 불러오는 중입니다... 2. 옵션 설정 후 GENERATE를 눌러서 .zip 파일을 다운로드 해준다. 압축 해제 후 우클릭하여 IntelliJ로 실행시킨다. 3. 좌측 하단에 Build 버튼을 누르면 Build되고 있는 것을 확인할 수 있고, finished 될 때까지 기다린다. 우측 하단에 이러한 창이 뜰 경우, Import Gradle Project를 눌러준다. Sync가 제대로 이루어지지 않는다면, 우측에 위치한 Gradle버튼을 누르고 새로고침 버튼을 눌러준다. 제대로 로딩이 되었다면 디렉토리의 구성이 다음과 같다..

우리가 제공하는 서비스는 프로그램으로만 이루어져 있지 않다. 소프트웨어에 해당하는 프로그램, 프로그램을 구동하는 하드웨어, 여러 가지 인프라를 포함해서 '시스템'이라고 부른다. 이러한 시스템이 어떻게 구성되는지를 다루는 것이 시스템 아키텍쳐이다. 우리는 Web, Mobile 환경에서 클라이언트에게 서비스를 제공해준다. 이 둘은 각각 Web browser, Mobile App을 통해 접근한다는 점이 다르다. 서로 다른 부분들을 Front-end로 분리하고, 서로 공통인 부분들을 Back-end로 분리한다. Multi-tier Architecture 여러 개의 계층으로 구성된 시스템을 의미한다. 가장 흔히 쓰이는 것이 3-tier Architecture이다. 3-tier Architecture Present..

27-1. 반응형 웹 웹사이트를 방문하는 사용자마다 모니터의 해상도가 다르기 때문에 이를 고려해주어야 한다. 또한, 스마트폰이나 태블릿 등 모바일 기기는 모니터에 비해 화면이 작기 때문에 더욱 신경을 써야 한다. 이것을 해결해주기 위해 반응형 웹을 사용한다. @media ( max-width: 800px ) { div { background-color: black; } } 이런 식으로 @media를 사용하여 화면 크기 별 CSS 속성을 지정해준다. HEADER 팬다 주니어 스카피 케로 & 베로니 죠르디 앙몬드 안녕 니니즈 니니즈(영어: NINIZ)는 17년 11월 14일, 카카오 (기업)가 카카오프렌즈 이후 5년 만에 정식 출시한 캐릭터 시리즈다. 카카오톡 이모티콘을 기반으로 했으며, 캐치프레이즈는 '귀..

26-1. CSS파일 분리 CSS를 HTML 문서에서 분리하여 별도로 관리할 수 있다. 26-2. @import 규칙 CSS에서 "@" 으로 시작하는 키워드들을 규칙이라고 한다. (전에 다루었던 @keyframes 도 이에 해당한다.) 1. 26-1에서 다룬 link 태그를 대신할 수 있다. 2. 태그 내부에 위치해야 한다. 3. 태그 상단에 위치해야 한다. 아래의 코드는 @import 규칙을 사용하였고 link 태그는 주석처리를 해주었다. HTML 파일 HEADER Section content FOOTER ex1.css 파일 #wrap #header h1 { background-color: #ffff00; text-align: center; height: 200px; } #wrap #section { ..

25-1. 변환 속성 과거 javascript에서만 구현이 가능한 변환(transform) 기능을 이제는 CSS3에서도 구현할 수 있다. skewX( ) : x축 방향으로 주어진 각도만큼 기울인다. scaleX( ) : x축 크기를 주어진 배율만큼 늘리거나 줄인다. scale(x,y) : 크기를 주어진 배율만큼 늘리거나 줄인다. translate(x, y) : 현재 위치에서 주어진 x축과 y축의 거리만큼 이동시킨다. rotate(n) : n도만큼 회전시킨다. 애니메이션 효과를 부여할 태그에 다음과 같은 속성도 넣을 수 있다. transform-origin : 가로 세로 (%단위를 사용. 좌측 상단 기준 0%, 0%이고, 우측 하단 기준 100%, 100%이다.) z-index : 겹치는 다른 요소와의 상..

24-1. 키프레임과 애니메이션 속성 키프레임을 이용해 애니메이션 속성을 적용할 수 있다. 애니메이션을 사용하고자 하는 태그에 animation-name, duration, timing-function 속성을 설정해준다. animation-name : 적용하고자 하는 애니메이션의 이름 duration : 애니메이션의 진행 시간 timing-function : 애니메이션 효과의 시간당 속도를 조절해준다. animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있다. (paused : 마우스 올렸을 때 애니메이션 정지) animation-iteration-count : 애니메이션 반복 횟수를 정해준다. (infinite :횟수 설정) animation-direction : 애니메이션 ..

23-1. 변형 기본 HTML 태그 요소의 속성 (형태, 색상 등)이 변경될 때, CSS 변형 속성을 적용하여 변화하는 단계에 움직임 (애니메이션)을 적용할 수 있다. 속성을 적용하고 싶은 태그에 기본적인 옵션을 먼저 설정해준다. transition-duration : 변형되는데에 걸리는 시간 transition-delay : 설정한 시간만큼 기다렸다가 동작한다. transition-timing-function : 변형 효과의 시간당 속도를 조절해준다. (ease-out은 천천히 끝나게) 그 다음 어떤 이벤트를 발생시켰을 때 변형을 줄지 설정해준다. hover : 마우스를 해당 태그에 올렸을 때 active : 해당 태그를 클릭했을 때 23-2. 변형 속성 transition-property는 각각의 속..