웹개발을 하다보면 한번쯤은 마주치는 주제입니다. SOAP는 무엇이고, REST와는 어떤 차이가 있을까요? 오늘은 이 주제에 대해서 한번 알아보도록 하겠습니다.

개론

• SOAP는 Simple Object Access Protocol의 약자이며 일반적으로 XML 형식을 사용하는 기 정의되어있는 형식을 사용하는 Protocol입니다.
• REST는 REpresentational State Transfer의 약자이며 표준을 정의하지 않는 아키텍처 스타일입니다. 일반적으로 JSON이 많이사용되지만, XML, YAML 등 protocol을 강제하지 않습니다.

2가지 모두 SOA(Service oriented Architecture)를 목적으로 합니다. 그렇다면 공통점과 차이점을 알아보도록 하겠습니다.

공통점

1. 기본 프로토콜
   • SOAP는 HTTP 프로토콜을 기본으로 개발되어집니다.
   • REST는 HTTP 프로토콜을 사용한다고 명시되어져 있지 않지만 묵시적으로 HTTP 프로토콜을 주로 사용합니다.

차이점

1. 데이터 포맷

   • SOAP는 일반적으로 XML, Json을 사용하여 데이터를 교환합니다. 또한 javascript를 통한 web service로 통신을 진행합니다.
   • REST는 사용자가 필요한 format으로 주고 받고 할 수 있도록 합니다. 하지만 주로 json을 사용합니다.

2. Stateless

   • SOAP 또한 기본적으로는 stateless입니다. 하지만 SOAP는 Session등을 이용하 여 stateful을 쉽게 지원합니다.
   • RESTful은 stateless를 강조합니다. 상태의 관리는 전적으로 client에게 위임합니다. 여기서 말하는 상태는 Application State로 Client에서 이전에 어떤 명령을 했는지 기억하는 것을 말합니다. 자세한 내용은 사이트를 참고하세요.

3. HTTP Method 사용

   • SOAP는 기본적으로 POST만을 이용하여 CRUD를 처리하며, GET을 사용할 경우도 있습니다.
   • REST는 HTTP, GET, POST, PUT, DELETE, PATCH method를 사용합니다.

4. Caching

   • SOAP는 기본적으로 body의 해석이 필요합니다. 따라서 body를 분석하여 cache의 유무를 선택적으로 적용해야하기 때문에 cache 구현이 상대적으로 어렵습니다.
   • REST는 Resource를 얻어올 때 GET Method를 주로 이용하며, URI, query의 정보로 데이터를 가져옵니다. 그렇기 때문에 쉽게 cache의 사용을 쉽게 HTTP level에서 정의할 수 있습니다.

5. security

   • SOAP는 표준화 되어진 기준을 제공하고 있습니다. 구현하기도 쉽고 많은 경우를 포함하고 있습니다.
   • REST는 일반적으로 client side에 정보를 맡기기 때문에 상대적으로 취약합니다. 대표적으로 사용하는 방식은 jwt(json web token) 방식을 사용합니다. 또한 표준화된 security가 아직 미흡하다고 합니다.

마무리

이렇게 SOAP와 REST의 차이점에 대해서 알아보았습니다. 사실 지금 REST API에 대해서 연재를 진행하고 있지만 무조건 REST가 SOAP의 상위호환이다? 이런건 아닙니다. 확실히 REST가 SOAP보다 확장성도 높고 빠르게 개발할 수 있습니다. 하지만 그렇기 때문에 보안성도 떨어질 수 있으며 형식에 구애 받지 않기 때문에 생기는 문제도 분명히 있을 수 있습니다. 본인이 참여하고 있는 프로젝트의 비지니스에 따라 적절히 사용하는게 제일 좋을 것이라 생각합니다.

감사합니다.

참조

https://restfulapi.net/soap-vs-rest-apis/

이클립스를 계속 쓰다보면 이런식으로

변경사항이 없는데 'Initializing Java Tooling' has encountered a problem 오류가 뜰때가 있다

딱히 해결방법을 몰랐었다가 검색으로 해결한 방법인데 공유하고자 한다

1. 폴더로 이동

workspace 가 있는 폴더로 이동한다 (이클립스 폴더 X)

\workspace\.metadata\.plugins\org.eclipse.core.resources\.projects

해당 경로에서 생성된 파일들을 모두 지워주자 (.project 하위폴더 전부삭제)

그리고 이클립스를 재시작해보면

아까와 다른 경고가 뜰것이다

\Dev\workspace\.metadata\.plugins\org.eclipse.core.resources\.projects\RemoteSystemsTempFiles\.markers.snap 

(지정된 경로를 찾을 수 없습니다)

해당 경우는 해당 위치에 RemoteSystemsTempFiles,Server 폴더만 생성해주면

해결이 된다

참고 : http://hunit.tistory.com/193

        http://codedragon.tistory.com/5005

+ 2018/01/08 추가

해당 방법을 사용하면 에러는 고쳐지지만

기존에 설정했던 SVN과 GIT 설정등이 있을경우 전부 사라져 버리기때문에

해당 방법 사용전 프로젝트들을 백업 시켜두고

연동된 프로젝트가 있었다면 방법 사용후엔 연결이 끊겨있기때문에

 재연결이나 import를 시켜주어야한다

이클립스의 설정은 윈도우 레지스트리에 보관되지 않습니다. 워크스페이스 폴더를 보면 .metadata 폴더가 있습니다. 여기에 이클립스에서 설정했던 내용들이 들어가 있습니다.

.metadata

이 얘기는 workspace를 바꾸면 설정을 다시해 줘야 한다는 뜻입니다.
또한 이클립스를 업그레이드해도 이전에 쓰던 작업환경의 설정을 그대로 가져갈 수 있다는 뜻이기도 합니다.

살짝 .metadata 폴더 내용을 보면 다음과 같습니다.

.metadata 폴더

이 중에 각각의 플러그인 설정값은 .plugins 아래 보관이 됩니다.
.log 파일은 이클립스 내부에서 발생하는 오류들의 스택트레이스 로그가 보관됩니다. 플러그인 충돌이나 기타 이클립스가 오작동을 할 경우 이 안에 있는 내용을 토대로 구글링 해보면 운 좋게 해결법을 찾을 수 있습니다.

이클립스가 종료된 상태에서 .metadata 를 지우면 설정은 다시하셔야 됩니다. 이클립스의 검색 인덱스 파일도 여기에 보관이 되기 때문에 혹시나 이클립스 워크스페이스가 무거워졌다고 느껴지면 한 번 지웠다가 다시 설정하는 것도 나쁘지는 않습니다.


출처: http://okjsp.tistory.com/1165643079 [OK 괜찮아, fInD YoUr FuN, eNjOy iT!]

이클립스(Eclipse)를 새 PC에 설치해서 구동하려고 했더니, 다음과 같은 오류 메시지가 떴습니다.

이 오류 메시지가 뜨면 이클립스 실행 자체가 되지 않습니다.

회사에서도 그렇고, 이전 PC에서도 그렇고, 별 문제 없이 잘 실행 되었던 것으로 기억하는데..(사실 잘 기억은 안나네요. 처음 설치하고 고생했는지는 너무 오래전 일이라. 보통 한 번 잘 세팅해놓고, 왠만해서는 변경하지 않으니... ㅎㅎㅎ)

Java was started but returned exit code=13 로 시작하는 긴 오류 메시지가 떴습니다. 블라블라~

보통 가장 빈번한 경우는 OS 비트와 이클립스의 지원 비트 버전이 다른 경우입니다.

OS는 64비트인데, 이클립스는 32비트용을 다운로드 받아 설치한 경우이지요.

이 때의 문제는 간단히 이클립스를 OS 버전에 맞는 것으로 다시 다운로드 받아 설치하면 됩니다.

그리고 다른 케이스가 있는데, 이클립스가 실행하면 javaw.exe 파일(JDK 내에 있음)을 찾아 실행시키는데, 해당 파일을 찾지 못한 경우입니다. (제가 겪은 케이스입니다.)

이 때에는 직접 설치한 JDK폴더의 javaw.exe 파일 경로를 eclipse.ini 파일에 지정해주면 됩니다.

참고로 javaw.exe 파일은 java.exe 파일과 그 기능이나 동작은 동일하지만, 단지 Console Window 를 띄우지 않는 다는 차이점만 있습니다. (즉, Java.exe 와 동일하게 동작하지만, 어떠한 상태 정보등을 명령 프롬프트(콘솔 창)에 출력하지 않습니다. 단 오류가 발생하는 경우라면 오류 메시지 박스(대화 상자)를 띄워줍니다.)

그리고 java.exe 파일은 자바 프로그램을 구동시키기 위한 자바 런타임 환경(Java Runtime Environment)을 제공 뿐만 아니라 웹 브라우저에서 Java 기반의 플러그인을 실행할 수 있도록 하기 위한 백그라운드 프로세스로 실행되는 프로그램입니다. 그렇기 때문에 Java 프로그래밍에는 필수 요소입니다.

Eclipse가 설치된 폴더로 가서 eclipse.ini 파일을 메모장 등의 텍스트 편집 도구로 불러옵니다.

그리고 아래와 같이 -vmargs 윗쪽에 javaw.exe 파일 경로를 입력하여 줍니다. 사용자마다 JDK 설치 폴더가 다를테니, 자신의 시스템에 설치된 경로를 확인하여 입력하시면 됩니다.

-vm
C:\Java\jdk1.7.0_45\bin\javaw.exe (javaw.exe 파일이 존재하는 경로)

아래 -vmargs 는 -vm (Virtual Machine)으로 구동될 javaw.exe의 인자 정보들을 의미하므로 위의 -vm 코드는 반드시 -vmargs 보다 상단에 작성하여야 합니다.

참고로 해당 포스팅은 Eclipse Juno 버전과 Kepler 버전에서 확인되었습니다.

출처: http://ooz.co.kr/140 [이러쿵저러쿵]

출처: https://epthffh.tistory.com/entry/이클립스-Initializing-Java-Tooling-has-encountered-a-problem-오류-해결법 [물고기 개발자의 블로그]

출처: https://epthffh.tistory.com/entry/이클립스-Initializing-Java-Tooling-has-encountered-a-problem-오류-해결법 [물고기 개발자의 블로그]

MyBatis 적용 가이드

개요

전자정부 표준프레임워크 기반 MyBatis 적용 가이드이다.

ex-dataaccess-mybatis.zip

Step 1. pom.xml 변경

표준프레임워크 dataaccess artifact version을 다음과 같이 2.7.0으로 변경한다.

<!-- 실행환경 라이브러리 --> <dependency> <groupId>egovframework.rte</groupId> <artifactId>egovframework.rte.psl.dataaccess</artifactId> <version>2.7.0</version> </dependency>

Step 2. 환경 설정

Step 2.1 XML 설정

Spring XML 설정 파일 상(ex: context-mapper.xml)에 다음과 같은 sqlSession bean 추가한다.

Ex) context-mapper.xml

<!-- SqlSession setup for MyBatis Database Layer --> <bean id="sqlSession" class="org.mybatis.spring.SqlSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="mapperLocations" value="classpath:/sqlmap/mappers/**/*.xml" /> </bean>

Step 2.2 mapper xml 작성

MyBatis 가이드에 따라 query xml 작성한다. (2.1의 예제 상 지정된 mapperLocations 위치)

Step 3. DAO 작성

DAO의 경우는 다음과 같이 3가지 방식이 가능하다.

방식설명비고

3.1 기존 DAO 형태로 사용하는 경우

@Repository 지정된 class가 EgovAbstractMapper를 extends 하여 insert, update, delete, selectByPk, list 메소드를 활용한다.

@Repository("deptMapper") public class DeptMapper extends EgovAbstractMapper {   public void insertDept(String queryId, DeptVO vo) { insert(queryId, vo); }   public int updateDept(String queryId, DeptVO vo) { return update(queryId, vo); }   public int deleteDept(String queryId, DeptVO vo) { return delete(queryId, vo); }   public DeptVO selectDept(String queryId, DeptVO vo) { return (DeptVO)selectByPk(queryId, vo); }   @SuppressWarnings("unchecked") public List<DeptVO> selectDeptList(String queryId, DeptVO searchVO) { return list(queryId, searchVO); } }

3.2 Mapper interface 사용 방식

Mapper 인터페이스 작성 시 다음과 같이 @Mapper annotation 사용한다.

(패키지를 포함하는 클래스명 부분이 mapper xml 상의 namespace가 선택되고 인터페이스 메소드가 query id로 호출되는 방식)

@Mapper("employerMapper") public interface EmployerMapper {   public List<EmpVO> selectEmployerList(EmpVO vo);   public EmpVO selectEmployer(BigDecimal empNo);   public void insertEmployer(EmpVO vo);   public int updateEmployer(EmpVO vo);   public int deleteEmployer(BigDecimal empNo);   }

이 경우는 xml 설정 상에 다음과 같은 MapperConfigurer 설정이 필요하다.

Ex: context-mapper.xml

<bean class="egovframework.rte.psl.dataaccess.mapper.MapperConfigurer"> <property name="basePackage" value="egovframework.rte.**.mapper" /> </bean>

basePackage에 지정된 패키지 안에서 @Mapper annotation을 스캔하는 설정이다.

⇒ @Mapper로 지정된 인터페이스를 @Service에서 injection 하여 사용함

public class EmployerMapperTest {   @Resource(name = "employerMapper") EmployerMapper employerMapper;   @Test public void testInsert() throws Exception { EmpVO vo = makeVO();   // insert employerMapper.insertEmployer(vo);   // select EmpVO resultVO = employerMapper.selectEmployer(vo.getEmpNo());   // check checkResult(vo, resultVO); }

3.3 Annotation 사용 방식

mapper xml 작성 없이 Mapper 인터페이스 상에 @Select, @Insert, @Update, @Delete 등의 annotation을 통해 query가 지정되어 사용된다.

@Mapper("departmentMapper") public interface DepartmentMapper {   @Select("select DEPT_NO as deptNo, DEPT_NAME as deptName, LOC as loc from DEPT where DEPT_NO = #{deptNo}") public DeptVO selectDepartment(BigDecimal deptNo);   @Insert("insert into DEPT(DEPT_NO, DEPT_NAME, LOC) values (#{deptNo}, #{deptName}, #{loc})") public void insertDepartment(DeptVO vo);   @Update("update DEPT set DEPT_NAME = #{deptName}, LOC = #{loc} WHERE DEPT_NO = #{deptNo}") public int updateDepartment(DeptVO vo);   @Delete("delete from DEPT WHERE DEPT_NO = #{deptNo}") public int deleteDepartment(BigDecimal deptNo);   }

⇒ 이 경우는 별도의 mapper xml을 만들 필요는 없지만, dynamic query를 사용하지 못하는 등의 제약사항이 따름

사용자 확인, 사용자 추가

▶ 사용자 확인

mysql> use mysql; mysql> select user, host from user;▶ 사용자 추가

로컬접근 허용 mysql> insert into user(host,user,password,ssl_cipher,x509_issuer,x509_subject) -> values ('localhost','사용자명',password('비밀번호'),'','','');

외부접근 허용 mysql> insert into user(host,user,password,ssl_cipher,x509_issuer,x509_subject) -> values ('%','사용자명',password('비밀번호'),'','','');

▶ 사용자 삭제mysql> drop user 사용자명@호스트;▶ 변경사항 적용mysql> flush privileges;

사용자 데이터베이스 권한 부여, 박탈(삭제)

＊grant 문을 이용하면 flush privileges 를 할 필요가 없다.

▶ 모든 권한 주기mysql> grant all privileges on *.* to 사용자명@호스트 -> identified by '비밀번호' with grant option;▶ 특정 사용자에게 특정 DB의 모든 테이블에 모든 권한 부여하기mysql> grant all privileges on DB명.* to 사용자명@호스트 identified by '비밀번호';▶ 특정 사용자에게 특정 DB의 모든 테이블에 select, insert 권한 부여하기mysql> grant select, insert on DB명.* to 사용자명@호스트 -> identified by '비밀번호';▶ 특정 사용자에게 특정 DB의 특정 테이블의 정해준 컬럼에만 update 권한 부여하기mysql> grant update(컬럼1,컬럼2,컬럼3) on DB명.테이블명 to 사용자명@호스트 -> identified by '비밀번호';▶ 모든 호스트에서 접속가능하고 select 권한만 갖는 사용자를 추가할 땐mysql> grant select on DB명.* to 사용자명@% identified by '비밀번호';▶ ip주소가 192.168.0.으로 시작하는 컴퓨터에서 접속가능한 사용자를 추가할 땐mysql> grant all privileges on *.* to 사용자명@'192.168.0.%' identified by '비밀번호';

▶ 모든 권한 삭제mysql> REVOKE ALL PRIVILEGES ON *.* FROM 사용자명@호스트;▶ usage (삭제하면 로그인조차 안됨) 권한 부여, 삭제

usage 권한 부여 mysql> GRANT USAGE ON *.* TO USER_NAME@HOST IDENTIFIED BY 'USER_NAME'; usage 권한 삭제 mysql> REVOKE USAGE ON *.* FROM USER_NAME@HOST;

▶ 권한 확인하기mysql> SHOW GRANTS FOR 사용자명;

출처: https://blog.opid.kr/237 [opid's document]

개요

본 가이드는 전자정부 표준프레임워크에서 제공하는 개발자 개발환경의 사용 방법을 제공한다.

Step 1. 개발환경 설치

개발자 개발환경 다운로드

1. 인터넷 웹브라우저를 통해 eGovFrame 홈페이지(http://www.egovframe.go.kr/, http://www.egovframe.kr/)에 접속하여 로그인하고 사이트 상위메뉴를 통해 “다운로드>개발환경”으로 이동한다.
   
   

\\ \\ - 환경에 따라 다운받을 개발환경을 선택한다. \\ - 32bit/64bit Version \\ \\ - 첨부된 파일을 다운로드받아 압축을 해제한다. \\ \\

개발자 개발환경 실행

1. eclipse를 실행한다.

   

   
   
   ✔ Fail to create Java Virtual Machine 오류가 발생할 경우 eclipse가 설치된 디렉토리의 eclipse.ini 파일에 JVM 경로를 지정해 주도록 한다.
   개발자 개발환경을 사용하기 위해서는 해당 이클립스의 자바 버전을 설치되어야 한다.
   또한, -Dfile.encoding=UTF-8 설정을 통하여 파일 인코딩을 UTF-8로 적용이 가능하다.
   이클립스 버전별 지원 자바 버전은 환경 설정에서 확인 가능하다.

   

   
   
   

2. eclipse를 실행 후 Workspace Launcher 팝업이 나타나면 전자정부 개발환경에서 제공하는 workspace를 선택한다.

   

    

✔ 전자정부 표준프레임워크에서는 eclipse에 eGovFrame 관련 설정정보를 세팅하여 배포한다.
따라서 C:\eGovFrameDev-3.x.x-xxbit\workspace와 같이 eGovFrame 개발환경에서 기본적으로 제공해주는 workspace를 선택하는 것을 권장한다.

퍼스펙티브(Perspective) 전환

1. eclipse가 정상적으로 실행되면 우측 상단의 Perspective가 eGovFrame으로 되어있는지 확인한다.

   

✔ 만약 Perspective가 eGovFrame이 아닐 경우 다음의 절차를 따른다.

• Perspective 좌측에 있는 아이콘을 클릭하여 “Other… > Open Perspective > eGovFrame”을 선택한다.

  

   

  

  
  
  

Step 2. 프로젝트 생성 및 실행

프로젝트 생성

1. 메뉴 표시줄에서 File > New > eGovFrame Web Project를 선택한다.
   또는, Ctrl+N 단축키를 이용하여 새로작성 마법사를 실행한 후 eGovFrame > eGovFrame Web Project을 선택하고 Next를 클릭한다.

   

   
   
   

2. 프로젝트 명과 Maven 설정에 필요한 값들을 입력하고 Next를 클릭한다.

   

   
   
   

3. 예제 소스 파일 생성 여부를 체크하고 Finish를 클릭한다.

   

   
   
   

서버 설치

• Tomcat 서버를 설치해 보도록 한다.

1. eclipse 하단의 Servers 탭을 클릭하고, 마우스 우클릭하여 “New > Server”를 선택한다.

   

   
   
   

2. Apache > Tomcat v7.0 Server를 선택 후 Next를 클릭하고 Download and Install 버튼을 클릭하여 서버 설치를 완료한다.

✔ 개발환경 3.7의 경우 Tomcat 8.0 이상을 권장한다.

프로젝트 실행

1. 실행할 프로젝트를 마우스 우클릭하고 “Run As > Run on Server”를 선택한다.

   

   
   
   

2. Choose an existing server를 선택하고 서버 설치에서 설치한 서버를 선택 후 Next 버튼을 클릭하고 실행할 프로젝트를 Add한다.

   

    

   

    

3. 다음과 같은 화면이 실행되는지 확인한다.

   

    

✔ 프로젝트 생성 후 “Could not open JDBC Connection for transaction” 메시지가 나타날 경우 HSQLDB 설정 가이드를 참고하여 HSQLDB를 연결한다.

기타 설정

DB 정보 변경

• 전자정부에서는 MySql, Oracle, Altibase, Tibero를 지원한다. 본 가이드에서는 MySql로 DB 정보를 변경하는 예제를 실습해 보도록 한다.

1. DB 정보를 변경할 프로젝트의 sql-map-config.xml 파일을 다음과 같이 수정한다.

   

    

2. context-datasource.xml 파일을 다음과 같이 수정하고 사용할 DB 정보를 입력한다.

   

    

3. pom.xml 파일에 다음과 같은 dependency를 version 8.0.11추가한다.

   

    

4. 프로젝트 마우스 우클릭 후 “Run As > Maven install”을 선택한다.

   

    

Data Source Explorer 연결

Data Source Explorer연결 가이드를 참고한다.

다국어 지원 방안

✔ 개발자 개발환경의 영문 버전을 사용할 경우 eclipse 설치 디렉토리에 있는 eclipse.ini 파일을 다음과 같이 수정한다.
-Duser.language=en
-Duser.country=US

✔ 개발자 개발환경의 국문 버전을 사용할 경우 eclipse 설치 디렉토리에 있는 eclipse.ini 파일을 동일한 방법으로 수정한다.
-Duser.language=ko
-Duser.country=KR

성능 향상 방안

✔ 다음과 같은 설졍을 통해 구현도구(eclipse)의 성능 및 속도를 높일 수 있다. 아래 설정은 필수 적용사항이 아니므로, 필요한 경우 참고자료로 활용한다.

1. eclipse theme 기능 변경

1. Window » Preferences » General » Appearance » Theme를 Classic으로 변경.

2. Use mixed fonts and colors for labels 체크를 해지

3. Apply 후 eclipse 재실행.

2. eclipse.ini 파일 수정

필요에 따라 아래의 설정정보를 수정할 수 있다.
메모리 설정의 경우, 각 컴퓨터의 메모리 용량에 따라 설정하여야한다. (1~2G : 256m, 2~3G, 512m, 4G~ : 1024m 권장)

1. Xverify:none
   클래스 검사 생략. eclipse 실행 시간 단축

2. Xms256m
   eclipse 실행시 잡는 최소 메모리

3. Xmx1024m
   eclipse 실행시 잡는 최대 메모리

: W3C에 의해 제정된 RIA(Rich Internet Applications)의 웹 접근성에 대한 표준 기술 규격을 의미함.

RIA(Rich Internet Applications)란?
정적인 HTMl과 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션

RIA(Rich Internet Applications)는 화려하고 편리한 웹 애플리케이션이지만 스크린리더와 같은 보조기술을 사용하는 장애인들이 접근하기에 취약하다.

• 자바스크립트, AJAX등을 활용하여 의미를 가지지 않는 요소(<div>,<span>)로 특정 컴포넌트를 구현할 때 스크린리더 등 보조기기에서 해당 컴포넌트의 기능을 명확하게 파학하기 어려움.
• 주식 시세나 RSS Feed 등 시간에 따라 정보가 자동으로 업데이트 되는 경우 스크린리더 등 보조기기에서 업데이트 된 정보를 파악하기 어려움

때문에 WAI-ARIA는 RIA에서 스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키기 위한 목적으로 탄생 했으며 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다.
Role (역할)

유저 인터페이스(User Interface, 이하 UI)에 포함된 특정 컴포넌트의 역할을 정의
Abstract Roles / Widget Roles / Document Structure Roles / Landmark Roles로 분류됨

1. Abstract Roles

   Roles의 분류체계를 만들고 역활들을 정의하기 위한 Roles
   WAI-ARIA를 구축하는 기반

   Abstract Roles

   command / composite / input / landmark / range / roletype / section / sectionhead / select / structure / widget / window

2. Widget Roles

   독립형 사용자 인터페이스를 동작시키기 위한 목적의 Roles,
   더 큰 Roles에 포함되거나 복합 위젯의 일부로 사용되기도 한다.

   독립형 Widget Roles복합형 Widget Roles(단독으로 쓰이지 않음)

   button / checkbox / gridcell / link / menuitem / menuitemcheckbox / menuitemradio / option / progressbar / radio / scrollbar / searchbox / separator / slider / spinbutton / switch / tab / tabpanel / textbox / treeitem

   combobox / grid / listbox / menu / menubar / radiogroup / tablist / tree / treegrid

   "tablist"를 사용한 탭메뉴 예시

   탭목록(tablist)과 본문(tabpanel)이 따로 나뉘어져 있는 마크업구조는 스크린리더 등 보조기기를 사용하는 사용자에게는 정보 접근이 어려울 수 있다. 이 때 Tab 관련 Widget Role을 사용하면 보조기기를 사용하는 사용자에게 보다 정확한 정보를 제공할 수 있다.

   

   ㄴ [이미지설명] 탭메뉴 UI구조 (Role속성 위치)

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

   <!--tablist를 사용한 탭메뉴 예시 --> <div class="tab_wrap">     <!-- 탭메뉴 -->     <!-- role="tablist"을 사용하여 탭메뉴 역할 부여 -->     <ul role="tablist" class="list_tab">         <!--             1. role="tab"을 사용하여 탭메뉴의 탭요소 역할 부여             2. aria-controls="{ID}"를 사용하여 해당 탭의 본문과 연결             3. aria-seleceted="{boolen}"를 사용하여 해당 탭이 선택유무 명시             4. 초점을 받지 못하는 li요소에 tabindex="0"을 사용하여 초점을 받게함         -->         <li role="tab" tabindex="0" aria-selected="ture" aria-controls="section1" id="tab1">             탭메뉴1         </li>         <li role="tab" tabindex="0" aria-selected="false" aria-controls="section2" id="tab2">             탭메뉴2         </li>         <li role="tab" tabindex="0" aria-selected="false" aria-controls="section3" id="tab3">             탭메뉴3         </li>     </ul>       <!-- 탭메뉴 본문 -->     <div class="tab_content">         <!--              1. role="tabpanel"을 사용하여 탭메뉴의 본문 역할 부여              2. aria-labelledby="{ID}을 사용하여 탭메뉴와 본문 연결"         -->         <section role="tabpanel" id="section1" aria-labelledby="tab1">             탭메뉴1의 본문         </section>         <section role="tabpanel" id="section2" aria-labelledby="tab2">             탭메뉴2의 본문         </section>         <section role="tabpanel" id="section3" aria-labelledby="tab3">             탭메뉴3의 본문         </section>                                  </div> </div>

   사용된 WAI-ARIA

   • role="tablist" : role="tab"과 함께 사용되는 복합형 Role속성이며 요소에 탭목록 역할을 부여한다.
   • role="tab" : role="tablist"의 자식속성으로 사용되며 탭 역할을 부여한다.
   • role="tabpanel" : 탭의 본문 역할을 부여한다.
   • aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
   • aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
   • tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
   • aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
3. Document Structure Roles

   문서구조를 설명하는 목적의 Roles

   Document Structure Roles

   application / article / cell / columnheader / definition / directory / document / feed / figure / group / heading / img / list / listitem / math / none / note / presentation / row / rowgroup / rowheader / separator / table / term / toolbar / tooltip

   "tooltip"을 사용한 툴팁 예시

   

   1 2 3 4 5 6

   <!-- tooltip 속성을 사용한 툴팁 예시 --> <label for="birth">생년월일</label> <input aria-describedby="birth_tip" id="birth"> <!-- role="tooltip"속성을 사용하여 <input>요소에 대한 참고문구 요소를 작성하고  <input>요소에 inputaria-describedby로 연결시켜준다.  --> <p role="tooltip" id="birth_tip">주민등록번호 앞자리를 입력해주세요</p>

   사용된 WAI-ARIA

   • role="tooltip" : 초점을 받으면 노출되는 컨텐츠 혹은 참고용 컨텐츠의 역할을 부여한다.
   • aria-describedby="" : 현재 요소에 설명을 제공하는 속성. 속성 값은 참조(연결)시킬 요소의 ID값을 작성
4. Landmark Roles

   웹 페이지의 각 영역을 명확하게 구분하는 목적의 Roles.
   영역 역할을 지정할 수 있는 8개의 속성이 있다.

   

   ㄴ [이미지설명] Landmark Role 속성 관련 영역

   
   Landmark RoleHTML5 섹션 관련 요소

   role="application"	동일한 역할의 요소 없음. 주로 <div> 요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.
   role="banner"	동일한 역할의 요소 없음. 비슷한 의미로 <header> 요소를 사용할 수 있으나 <header role="banner">로 사용하였다 면 한 페이지에서 한 개의 <header> 요소만 사용하길 권장한다.
   role="navigation"	<nav> 요소. 다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메 뉴 및 서브 메뉴 등에 사용할 수 있다
   role="main"	<main> 요소. 본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용이 가능하며, <article>, <aside>, <footer> 요소의 하위 요소로 사용할 수 없다
   role="complementary"	<aside> 요소. 주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드바로 표현할 수 있다. <aside> 영역에는 현재 날씨, 관련된 기사 또는 주식 정보등의 부가 콘텐츠를 포함 할 수 있다.
   role="form"	<form> 요소. 폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함 할 수 있다.
   role="search"	동일한 역할의 요소 없음. 검색의 역할을 담당하는 서식 영역임을 의미하며 <div> 또는 <form> 요소를 사용하는 것을 권장한다
   role="contentinfo"	동일한 역할의 요소 없음. 비슷한 의미로 <footer> 요소를 사용할 수 있으나 <footer role="contentinfo">로 사용하였다면 한 페이지에서 한 개의 <footer> 요소만 사용하길 권장한다.

   "banner"를 사용한 예시

   콘텐츠를 포함하고 있는 컨테이너인 HTML 요소에 role 속성을 사용하여 콘텐츠의 역할을 지정

   1 2 3 4 5 6 7 8 9 10 11 12

   <!-- banner 속성을 사용한 header 적절한 예시 --> <div role="banner" class="header"><!-- 로고나 메뉴를 포함하고 있는 header 영역을 role="banner"로 역할 지정 -->     <h1 class="logo">로고</h1>     <ul>         <li>메뉴1</li>         <li>메뉴2</li>         <li>메뉴3</li>         <li>메뉴4</li>         <li>메뉴5</li>     </ul> </div>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   <!-- banner 속성을 사용한 header 부적절한 예시1 --> <header role="banner"> <!-- html5 요소인 <header>를 사용하여 역할을 지정해주었기 때문에 role속성을 사용하지 않아도 된다. -->     <h1 class="logo">로고</h1>     <ul>         <li>메뉴1</li>         <li>메뉴2</li>         <li>메뉴3</li>         <li>메뉴4</li>         <li>메뉴5</li>     </ul> </header> <!-- button 속성을 사용한 header 부적절한 예시2 --> <h1 role="button">h1 요소의 의미를 role속성을 사용하여 다른 의미로 변경하면 안된다</h1>

Property (속성) & State (상태)

Property (속성) : 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 "aria-*"라는 접두사를 사용

State (상태) :해당 컴포넌트의 상태 정보를 정의

Property (속성) & State (상태)는 Widget states / Live Regions / Drag and Drop / Relationships 로 분류됨

1. Widget states and properties

   사용자가 데이터를 입력하여 송/수신하는 환경(자동완성, 체크여부 등)에서 사용하며 widget roles과 함께 사용된다.

   Widget states and properties

   autocomplete / checked / datatype / disabled / expanded / haspopup / invalid / level / multiline / multiselectable / pressed / readonly / required / secret / selected / valuemax / valuemin / valuenow

   "combobox"를 사용한 자동완성 폼 예시

   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   <!-- combobox를 사용한 자동완성 폼 예시 --> <div class="combobox_wrap">     <!--         1. role="combobox"을 사용하여 펼쳐지는 메뉴를 가지고 있다는 것을 알려준다.         2. aria-expanded="{boolen}"을 사용하여 하위메뉴 펼쳐짐 여부를 알려준다.         3. aria-owns="{ID}"을 사용하여 하위메뉴와의 부모관계를 설정한다.         4. aria-haspopup="listbox"을 사용하여 갖고있는 하위메뉴의 성격을 알려준다.     -->     <div aria-haspopup="listbox" aria-expanded="false" role="combobox" id="combobox" class="combobox" aria-owns="comboListbox">         <label id="comboboxLabel" for="comboboxInput">성별 입력 (여성 or 남성)</label>         <!--             1. aria-labelledby="{ID}"를 사용하여 해당요소의 참고컨텐츠를 연결한다.             2. aria-autocomplete="list"를 사용하여 자동완성 기능이 있음을 알려준다.          -->         <input id="comboboxInput" aria-autocomplete="list" aria-labelledby="comboboxLabel" name="comboboxInput">     </div>     <!-- 하위메뉴 -->     <ul id="comboListbox" aria-labelledby="comboboxLabel">     </ul> </div>

   사용된 WAI-ARIA

   • role="combobox" : 아래에 매뉴가 펼쳐지는 UI의 역할을 부여한다.
   • aria-expanded="" : 펼쳐지거나 닫힐 수 있는 컨텐츠의 상태를 표시하는 aria-속성. 상태 값은 펼침 true / 닫힘 false
   • aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
   • aria-autocomplete="" : 사용자 입력에 대한 자동완성 지원 여부를 설정하는 aria-속성. 상태 값은 inline / list / both / none(default)
   • aria-owns="" : 부모/자식 관계 형성하는 aria-속성. 상태 값은 자식으로 설정할 요소의 id값 (aria-controls와 관련)
   • aria-haspopup="" : 팝업요소가 하위에 존재하고 있다는걸 인식 시켜주는 aria-속성. 상태 값은 false(default) / true / menu / listbox / tree / gird / dialog
2. Live Regions

   새로고침하지 않고도 컨텐츠 정보가 업데이트되는 환경에서 사용된다.

   Live Regions

   aria-live / aria-relevant / aria-atomic / and aria-busy

   "aria-live"를 사용한 알럿창 예시

   

   1 2 3 4 5 6 7 8 9

   <!-- aria-live를 사용한 알럿창 예시 --> <!--     1. role="alert"를 사용하여 해당 요소에 얼럿 역할을 부여한다.     2. aria-live="assertive"를 사용하여 실시간으로 업데이트된 정보를 사용자에게 전달한다. --> <div role="alert" aria-live="assertive">     <p>접속 할 수 없습니다 !</p> </div>

   사용된 WAI-ARIA

   • role="alert" : 경고,알림 등의 컨텐츠 역할 부여
   • aria-live : 페이지의 어떤 위치에 있든 업데이트된 정보를 사용자에게 알려주는 aria-속성. 상태 값은 assertive / off(default) / polite
3. Drag and Drop

   드래그 앤 드롭 기능 환경에서 사용된다. ex) 트렐로 카드 옮기는 액션

   Drag and Drop

   aria-dropeffect / aria-grabbed

   "aria-dropeffect"를 사용한 Sorting List 예시

   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   <!-- aria-dropeffect를 사용한 Sorting List 예시 --> <!-- role="listbox"를 사용하여 선택가능한 옵션이 존재하는 리스트의 역할을 부여한다. --> <ol role="listbox">     <!--         1. role="option"을 사용하여 리스트의 옵션 역할을 부여한다.         3. draggable="true"을 사용하여 해당 요소에 드래그&드롭 기능을 넣어준다         4. aria-dropeffect를 사용하여 요소를 드롭하였을 때 사용자에게 알려준다.         4. 초점을 받지 못하는 li요소에 tabindex="0"을 사용하여 초점을 받게한다.     -->     <li role="option" tabindex="0" aria-dropeffect="false" draggable="true">         아이스크림     </li>     <li role="option" tabindex="0" aria-dropeffect="false" draggable="true">         파이     </li>     <li role="option" tabindex="0" aria-dropeffect="false" draggable="true">         케이크     </li>     <li role="option" tabindex="0" aria-dropeffect="false" draggable="true">         컵케이크     </li> </ol>

   사용된 WAI-ARIA

   • role="listbox" :role="option"과 함께쓰이는 복합형 Role 속성이며 선택가능한 옵션이 존재하는 리스트 역할을 부여한다.
   • role="option" : role="listbox"와 함께 쓰이며 부모인 리스트의 옵션이라는 역할을 부여한다.
   • aria-dropeffect="" : 요소가 드롭되었을 때 사용자에게 알려준다. 상태값은 true / false
   • tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
4. Relationship

   요소 간의 관계 또는 연결을 나타내는 속성

   Relationship

   aria-activedescendant / aria-colcount / aria-colindex / aria-colspan / aria-controls / aria-describedby / aria-details / aria-errormessage / aria-flowto / aria-labelledby / aria-owns / aria-posinset / aria-rowcount / aria-rowindex / aria-rowspan / aria-setsize

   "aria-aria-controls", "aria-labelledby" 을 사용한 탭메뉴 예시

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   <!-- aria-aria-controls, aria-labelledby 을 사용한 탭메뉴 예시 --> <ul role="tablist" class="list_tab">     <!-- 탭요소에 aria-controls="{ID}" 속성을 사용하여 해당 탭 요소가 제어하고 있는 대상(본문)을 연결시켜준다. -->     <li role="tab" tabindex="0" aria-selected="ture" aria-controls="section1" id="tab1">         탭메뉴1     </li>     <li role="tab" tabindex="0" aria-selected="false" aria-controls="section2" id="tab2">         탭메뉴2     </li>     <li role="tab" tabindex="0" aria-selected="false" aria-controls="section3" id="tab3">         탭메뉴3     </li> </ul> <!-- 탭메뉴 본문 --> <div class="tab_content">     <!-- aria-labelledby="{ID}"을 사용하여 해당 본문의 레이블을 연결시켜준다 -->     <section role="tabpanel" id="section1" aria-labelledby="tab1">         탭메뉴1의 본문     </section>     <section role="tabpanel" id="section2" aria-labelledby="tab2">         탭메뉴2의 본문     </section>     <section role="tabpanel" id="section3" aria-labelledby="tab3">         탭메뉴3의 본문     </section>                              </div>

   사용된 WAI-ARIA

   • aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
   • aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
   • aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
   • tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1

유의사항

• W3C에서는 HTML5 섹션 관련 요소와 WAI-ARIA 규칙을 함께 사용할 경우 해당 기능이 무효화 되거나 충돌이 발생할 수 있으므로 중복해서 사용하지 않도록 주의를 당부하고 있다.
  ex) <header role="banner"></header></span></li>(X)
• 원래의 HTML 요소의 의미를 변경하면 안된다.
  ex) <h1 role="button"></h1>(X)
• 모든 RIA 컨텐츠는 키보드를 사용하여 접근할 수 있어야 한다.
• 모든 브라우저와 보조기기가 WAI-ARIA를 지원하지 않기 때문에 지원하는 브라우저와 기기 정보를 확인하고 적용해야한다.

참고사이트

• W3C - WAI-ARIA : https://www.w3.org/TR/wai-aria-1.1
• MDN - ARIA 접근성 : https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

jQuery 메서드

jQuery 메서드를 이전 1편에 이어 정리하고자 합니다.
사용 용도에 따라 분류하였습니다.
맑은커뮤니케이션 웹퍼블리셔 및 웹퍼블리싱 업무중 스크립트를 작성하다 갑자기 메서드가 기억나지 않는 분들에 참고가 되었으면 합니다.

스타일 메서드

분류핵심 내용핵심 프로퍼티 및 메서드

속성 메서드

분류핵심 내용핵심 프로퍼티 및 메서드

이벤트 메서드

분류핵심 내용핵심 프로퍼티 및 메서드

위치 및 크기 메서드

분류핵심 내용핵심 프로퍼티 및 메서드

애니메이션 효과 메서드

분류핵심 내용핵심 프로퍼티 및 메서드

참조 - (메소드 정리표)

자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)

jQuery 쓰는것이 좋은 것인가?

요즈음 웹퍼블리싱을 배우는 학생들의 이야기드를 들어보면, jQuery를 안쓰게 좋을것 같다고 또는 안쓰게 될 것 같다고 이야기 합니다.
그럼 Why? 라는 질문을 하면, 이유를 대답하지 못합니다.
개념조차 이해하지 못하고, 어디서 들은것 같다고만 이야기 하기 때문입니다.
물론 모든 학생이 모두 그렇게 이야기 하는것은 아닙니다.
그럼 저는 왜 jQuery를 써야 하는지 설명해 줍니다.

jQuery 사용하는 첫번째 이유

jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 입니다.
결론부터 말하자면 jQuery의 정체는 자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스입니다.
쉽게 이야기해 jQuery 메서드는 자바스크립트 DOM으로 이루어져 있습니다.
그렇기에 jQuery를 배운다는것은 메서드를 배우는 것이며, 이를 통해 자바스크립트로 코딩하면 10줄, jQuery로 코딩하면 2-3줄로 처리 할수 있을 만큼 효율적인
코드작업을 할 수 있습니다.
그렇다고 jQuery로 모든것을 다 할 수 있는것도 아니며 무조건 좋다는 말은 아닙니다.
제일 좋은 방법은 jQuery와 자바스크립트를 같이 사용하여 최적화 하는방법이 좋다고 말씀드리고 싶습니다.
jQuery는 쉬운데 자바스크립트는 어렵다고 하는 분들은 자바스크립트도 충실히 공부하셔야 합니다.

jQuery 사용하는 두번째 이유

jQuery는 DOM 제어보다 크로스 브라우징 처리가 편리합니다.
IE7은 비표준 브라우저이기 때문에 이벤트 등록시 자바스크립트로 처리할 경우 attachEvent(), addEventListener()를 사용하여 코드를 작성하여야,
IE7과 기타 브라우저의 크로스브라우징을 정상적으로 처리해야 합니다.
이와달리 jQuery 내부에는 이런 번거로운 작업들을 대신 처리해주기 때문에 이벤트를 아주 쉽게 처리할 수 있습니다.

jQuery 학습 방법 및 결론

자바스크립트의 경우 기본 문법을 모를 경우 공부하기가 힘듭니다.
그러나 jQuery의 경우 수많은 메서드로 구성되어 있기에 순서없이 메서드를 하나씩 학습하시면 됩니다.
굳이 공부하는 순서를 따져야 한다면, jQuery는 css와 연관성이 많기에 css를 기본적으로 이해하셔야 하며, 노드를 찾아가는 방법(체인기능) 메서드부터 진행하면 될 것 같습니다.
이것은 웹퍼블리싱을 전문적으로 하는 (주)맑은커뮤니케이션에서 진행하는 신입 퍼블리셔 교육방법 입니다.
아래는 jQuery 메서드 정리입니다. 메서드 정리는 사용 용도에 따라 1, 2부로 나누어 올릴 것 입다다

노드 메서드

노드를 선택하거나, 찾아가는 방법(체인기능)의 메서드 입니다.

분류핵심 내용핵심 프로퍼티 및 메서드

참조 - (메소드 정리표)

자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)