svn은 여러 명이서 작업하는 프로젝트의 경우 버전 관리나, 각자 만든 소스가 어떻게 통합될 것인지를 해결하기 위해 저장소를 만들어 그곳에 소스를 저장시켜 중복 등의 여러 문제를 해결하기 위한 소프트웨어다.
VisaulSVN은 windows 환경에서 svn 저장소를 구축하는데 쓰이며 주로 Server 용이 사용된다.(무료)
Client는 대표적으로 torttoiseSvn이 사용된다.
기본적인 구조는 특정 서버 PC에 Visual SVN 서버를 설치하고 Repository를 만들면, SVN을 이용해서 공동으로 작업하려는 사용자들의 PC에 Tortoise SVN 클라이언트 툴을 설치하고 레파지토리를 Checkout 받은 후에 파일을 update 및 commit 한다.
윈도우 환경변수에 SVN 관련 커맨드 명령어를 사용 가능하도록 Path를 등록해주는 기능이다.
이번 설치 시에는 기본 값인 체크를 유지 후 다음을 클릭한다.
1,2,3,4의 의미는 다음과 같다.
C드라이브 기본 경로에 설치한다.( 따로 건드릴 필요 없음)
소스 저장 영역인 Repositories 영역의 경로를 설정할 수 있다.
SVN서버를 구동하고, 이후 외부에서 접속할 때 사용하는 포트번호이다. 우측의 Use secure connection은 https 사용 옵션인데, 기본값인 443 포트 역시 ssl을 사용하는 것을 전재로 보고 있다. 보통은 ssl 인증서 없이 http 환경으로 사용하기에 변경이 필요하다.
백업 및 복원을 이용하기 위한 폴더의 경로이다.(기본값을 사용해도 무관)
수정한 경로 및 포트
다음은 SVN접속시 기본 인증을 사용할 것인지, 윈도우의 유저인증 기능을 사용할 것인지 물어보는 것이다. 기본값인 User Subversion authentication을 사용하는게 좋다. SVN 관리툴에서 유저 추가, 권한부여 등이 가능하기에 굳이 윈도우 계정으로 걸어놓을 필요가 없다.
Subcvribe 옵션은 설치 완료 후 메일링이나 RSS 피드를 받을 것인지 물어본다. 기본값인 두 번째 Start VisualSVN Server Manager 항목만 체크하고 진행하면 된다.
Repository 생성
SVN 관리 툴에서 사용할 Repository를 생성할 것이다.
파일 시스템 선택
파일 시스템을 선택하도록 하는데, 기본값인 Regular FSFS repository를 선택한다.
원하는 저장소명 입력
원하는 저장소명을 입력한다. 저장소명은 외부 접속 시에 http://아이피 또는 도메인:1024/svn/저장소명 등으로 사용하므로 프로젝트 명이나, 의미가 있는 단어를 선정하는 것이 좋다.
기본값인 Empty repository(비어있는 저장소) 항목을 선택한다. Single-project repository(프로젝트 하나만 사용하는 저장소)로 선택하면, 기본적으로 trunk, branches, tags 등의 폴더를 생성해주는데 이는 개발 툴에서 커밋 시에도 생성이 가능하므로 패스해도 무관하다.
저장소 접근 권한 항목
다음은 Repository(저장소) Access(접근) Permissions(권한) 항목이다. 말 그대로 방금 만든 저장소에 어떤 유저가 접근할 것인가라는 부분이다. 저장소 생성 이후에도 위 설정은 변경이 가능하다.
권한을 부여받기 전에 누구도 접근할 수 없다는 설정
기본 값인 All을 선택하면 등록한 유저는 읽고 쓰기가 가능하다는 설정
직접 권한 설정이 가능한 메뉴, 전체 유저는 읽기만 사용 가능, 특정 유저에게 읽기/쓰기를 부여하는 등의 설정이 가능
생성된 저장소 정보
파일 포맷은 FSSFS 저장 소명은 Project라고 표시가 된다. 중요한 건 Repository URL인데, 현재는 데스크탑 기본명에 포트와 svn/저장소명으로 표시된다. 현재 PC의 아이피를 접속 주소로 사용 가능하다. 따라서 접속 주소는 http://ip주소:1024/svn/Project가 된다. 마찬가지로 IpTime 공유기 등에서 외부 접속이 가능한 도메인 url을 포트포워딩 해주면 외부에서도 접속이 가능한 환경이 구성된다.
SVN 유저 생성
Users 항목에서 SVN을 사용할 유저를 생성할 것이다. 마우스 우클릭 후 Create User 항목을 선택해서 신규 유저 추가가 가능하다.
입력항목은 유저명과 비밀번호만으로 생성된다.
생성된 유저
유저 생성이 완료되면 개발 툴에서 저장소에 생성한 아이디와 패스워드로 로그인이 가능하게 된다.
C# 컬렉션은 대부분 Sort 메서드를 제공하는데 다음과 같이 IComparable 인터페이스를 구현해야 정상적으로 동작한다. ICompable 인터페이스에는 자신과 비교할 매개변수를 비교하여 결과를 반환하는 CompareTo 메서드를 만들도록 약속하고 있다. 매개변수 형식이 object 형식으로 되어 있으므로 프로그램 목적에 맞게 캐스팅하여 처리해야 한다.
C#의 System에 정의되어 있는 int, double, string 등의 기본 형식들은 ICompable 인터페이스를 기반으로 정의되어 있어서 이들 기본 형식을 보관한 컬렉션은 Sort 메서드를 이용하여 정렬할 수 있다. 사용자가 정의한 클래스나 구조체는 여러 필드나 속성을 포함할 수 있으므로 어떤 기준으로 정렬할 지를 사용자가 지정해야 한다.
ex)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace _20200821_004
{
class Fact : IComparable
{
public string Name;
public int Age;
public string Gender;
public int CompareTo(Object obj)
{
return this.Age.CompareTo(((Fact)obj).Age);
}
public override string ToString()
{
return string.Format($"[{Name},{Age},{Gender}]");
}
}
class Program
{
static void Main(string[] args)
{
List<Fact> list = new List<Fact>();
Fact Temp = new Fact();
Temp.Name = "H1";
Temp.Age = 27;
Temp.Gender = "남";
list.Add(Temp);
Console.WriteLine(Temp);
Temp = new Fact();
Temp.Name = "H3";
Temp.Age = 22;
Temp.Gender = "여";
list.Add(Temp);
Console.WriteLine(Temp);
Temp = new Fact();
Temp.Name = "H2";
Temp.Age = 28;
Temp.Gender = "여";
list.Add(Temp);
Console.WriteLine(Temp);
Console.WriteLine(list[0]);
Console.WriteLine("==============Sort==============");
list.Sort();
foreach (Fact item in list)
{
Console.WriteLine(item);
}
}
}
}
테이블은 X축, Y축으로 정보를 나열할 때 유용하게 사용할 수 있는 구성 요소이다. 테이블은 반드시 사용자에게 정보를 제공하기 위한 제목인 caption이 필요하고, 그 아래에는 테이블에 해당하는 몸체에 필요한 태그들이 있다.
table
<table>은 테이블 몸체에 해당되며, 행(row)/열(column) 및 셀(cell)을 포함한다. 복잡한 내용을 x, y축에 따라 이해하기 쉽게 데이터를 구조화하는데 테이블을 사용한다. 가장 좋은 테이블 디자인은 최대한 단순하게 표를 구성하는 것이고, 테이블 내 테이블을 중첩해서는 안되고 테이블을 레이아웃(배치) 목적으로 사용해서는 안된다. 테이블의 속성 값으로 border 속성을 사용해 테두리를 그릴 수 있으나 CSS로 대체하는 것이 좋다.
caption
<caption>은 테이블의 제목으로 반드시 명시적으로 제공하며, 제작자는 표의 내용을 이해할 수 있도록 정보를 제공해야 한다. caption은 table 태그 바로 다음에 선언해야 하며, 테이블의 제목이 UI상 표현하지 않아야 한다면 blind 스타일을 적용하여 감출 수 있다.
설명(각주, summary)을 추가하는 방법
aria-describedby 속성을 사용해 설명 단락(paragraph)을 연결
<figure> 태그에 aria-labelledby 속성을 사용해 제목(caption)을 연결
tr(table row)
테이블의 행(row)을 말하며 내부의 셀 제목(th-table heading), 셀 내용(td-table data)을 포함한다.
th(header cell in a table)
<th>는 테이블 셀 제목으로 행(tr) 내부에 포함되어야 한다.
scope : 행(row) 또는 열(col), 행 그룹(rowgroup), 열 그룹(colgroup)의 제목임을 명시
abbr : 제목이 길어 축약(Abbreviation)이 필요할 때 사용
colspan : 열(column)을 그룹 지을 때 사용
rowspan : 행(row)을 그룹 지을 때 사용
td(table data)
<td> 태그는 테이블 셀 내용(data cell in a table)으로 행(tr) 내부에 포함되어야 한다.
colspan : 열(column)을 그룹 지을 때 사용
rowspan : 행(row)을 그룹 지을 때 사용
headers : 셀 제목을 하나 이상 연결하여 읽기 용이하도록 구성할 때 사용
thead
테이블 행 블록(row block) 내에 제목 열 그룹(column headers)으로 구성할 경우 사용하고, 선택적(option)으로 사용한다.(필수 아님)
tbody
행 블록 내에 테이블 데이터로 구성할 때 사용하고, 선택적(option)으로 사용한다.(필수 아님)
tfoot
행 블록 내에 열 요약(column summaries)으로 구성할 때 사용하고, 선택적(option)으로 사용한다.(필수 아님)
col
테이블 열(column)을 하나 이상 묶고자 할 때 사용하고, 일반적으로 <colgroup> 태그 내부에 포함시켜 사용한다. 필수가 아닌 선택적(option)으로 사용할 수 있다.
span : 열 묶음 개수 설정
colgroup
테이블 열(column) 그룹을 만들고자 할 때 사용하며, 내부에 col 태그를 포함하거나, 포함하지 않을 수 있다. 필수가 아닌 선택적(option)으로 사용할 수 있다.
폼 요소들은 사용자 입력 양식을 표현하기 위해 사용한다. 일반적으로 회원가입이나 로그인할 때 사용자가 입력하는 컨트롤이 있는 UI(User Interface)를 말한다. 다시 말해, form은 텍스트 필드, 버튼, 체크박스와 같은 폼 컨트롤을 포함하는 웹 페이지의 컴포넌트다. 폼 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할을 담당하며 form 태그는 폼(form)의 범위를 표시하고, 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력 필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다.
폼 요소는 블록 레벨 요소로서 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다.
이 속성을 지정하면 특정 form과 fieldset 태그의 관계를 명시적으로 연결할 수 있다.
이렇게 연결하면 브라우저는 두 태그 사이의 상호작용이 좀 더 쉽게 이루어질 수 있도록 해준다.
폼을 효과적으로 계층화할 수 있다.
legend 태그를 함께 사용해야 한다.
action 속성
action 속성은 실행 애플리케이션을 지정하는 것이다. 실행 애플리케이션은 입력된 데이터를 처리하는 서버 또는 프로그램으로 이곳으로 데이터를 보내려면 브라우저가 전송 위치(URL)를 알아야 하며, 이를 위해 action 속성을 사용한다. 프런트엔드단에서는 action에 대한 속성 값을 모르더라도 속성 값을 비워둔 채 정의해 두도록 한다. action을 사용하지 않으면 문서 검사를 하는 validation에서 오류가 나기 때문에 기본적으로 넣어서 사용한다. method 속성은 HTTP 메서드(HTTP method)를 지정한다. HTTP 메서드는 클라이언트와 서버 간 데이터를 주고받기 위한 방식을 의미하며 주로 사용되는 방식은 GET, POST 방식이다.
데이터 전송 방식
GET방식 : 입력된 데이터가 URL에 의해 전송되므로 암호화하지 않으면 URL만으로도 어떤 데이터를 입력했는지 알 수 있다. POST 방식보다 상대적으로 보안에 취약하고 전송할 수 있는 데이터도 제한적이다. method를 사용하지 않으면 기본적으로 GET방식이 기본값이다.
POST 방식 : 입력된 데이터를 HTTP Body에 담아 전송하면서 서버 측에서 데이터를 처리하는 방식이다. 주로 민감한 정보 데이터인 사용자의 아이디나 패스워드, 이메일 등의 개인 정보를 전송하는 경우에 이용하는 방식이다. HTTP Body는 URL에 비해 더 많은 정보를 담을 수 있기 때문에 POST 방식은 GET 방식보다 더 많은 양의 데이터를 전송할 수 있으며 상대적으로 보안이 높은 편이다.
input 태그는 웹페이지에서 입력 영역(Input Field)을 표시하는 데 사용한다. 즉, 사용자의 데이터를 입력받을 수 있는 폼 컨트롤을 말한다. input 영역은 데이터 입력이나 편집을 위한 컨트롤이 위치하는 곳이고, 입력 컨트롤의 종류는 type 속성에 의해 지정된다. 그래서 input 태그의 종류를 지정하는 속성 값은 입력 컨트롤러의 종류를 나타내며, 이에 따라 지정된 입력 컨트롤의 형태가 만들어진다. 다시 말해, 다양한 유형(type) 설정이 가능하며, 유형에 맞는 역할을 수행하게 된다. 이 중에 몇몇 속성 값들은 모바일에도 영향을 미쳐 편리한 키보드 자판을 출력해 주는 데 사용한다.
type="text" : 속성 값 text는 input 태그의 기본값으로 텍스트를 입력할 수 있는 텍스트 필드가 만들어진다.
버튼 폼 컨트롤로서 사용자의 인터랙션을 받아 액션을 트리깅(방아쇠) 처리를 한다. 이 버튼 태그는 기본적으로 타입을 지정하지 않으면 type="submit"으로 설정된다.
type유형
submit
button
reset
Select Element
셀렉트 태그는 셀렉트 박스, 콤보박스, 드롭다운 메뉴라고 불리고 여러 항목 중에서 택일할 때 사용한다. select와 option 태그는 함께 사용하고, select 태그는 선택 컨트롤을, option 태그는 옵션 항목을 표시한다. 보통 공간에 제약이 많은 경우에 사용하는 편이며 이는 기획단에서 판단하여 설계한다. 그렇지 않다면 라디오 버튼으로 표현할 수 있다. 선택 컨트롤은 OPTION 태그를 선택하기 위한 컨트롤이며 옵션 리스트를 메뉴처럼 이용할 수 있도록 고안된 것이다.
textarea 태그는 멀티라인 일반 텍스트 편집 컨트롤을 말한다. 인풋 타입의 text가 한 줄이라면 이 태그는 여러 줄을 설정할 수 있는 입력박스다. 이 태그에서 사용되는 속성으로는 name, placeholder, rows, cols, readonly, required, disabled, minlength, maxlength들이 있다.
cols : 컬럼으로 높이에 해당
rows : 행으로 너비에 해당
maxlength : 사용자가 입력할 수 있는 최대 글자 수를 지정(글자 초과 시 더 이상 글자가 입력되지 않음)
ex)
<form>
<div>
<label for="user_comments">코멘트</label>
<textarea name="user_comments" id=user_comments" cols="30" rows="30">
남기고 싶은 말을 작성해주세요.
</textarea>
</div>
</form>
예제 실행 화면
Fieldset, Legend Element
하나 이상의 폼 컨트롤을 그룹화하는 경우에 사용할 수 있다. fieldset 제목은 legend 태그를 사용해서 컨트롤의 레이블(이름)을 설정할 수 있다.
