개발 이야기/프론트엔드 개발자 18

20분이면 충분한 셀레니움 UI 테스트.

UI 테스트는 효율이 중요하다고 생각합니다. 때문에 너무 부담 가지거나 어렵게 생각하지 않아도 됩니다. QA팀에 결과물을 넘기기 전에, 또 퇴근하기 전에 오늘 개발한 컴포넌트들의 UI 테스트를 자동으로 돌려놓으면 브라우저별 결과물들을 확인하기 편리합니다. 개인적으로 쓰려고 아주 간단(허접)하게 만든 모듈인데, npm에 배포해놨습니다. 지금부터 하나씩 따라 해 보시면 대략 20분이면 모든것이 준비됩니다. 1. 크롬 / 파이어 폭스의 익스텐션으로 셀레니움 IDE를 설치합니다. (1분) 2. 프로젝트를 만들고 프로젝트의 이름을 입력합니다. (1분) 3. test case를 작성합니다. 테스트 시나리오는 간단하고 짧을수록 관리하기 좋고 결과가 명확해집니다. (5분) 4. 테스트 케이스를 동작시켜 봅니다.(5분)..

VueJS, React 를 사용하면서.

지극히 개인적으로 드는 생각을 남겨봅니다. 공통 장점 프로젝트 전체를 관통하는 틀이 생긴다. 따라서 관리가 용이해 진다. 컴포넌트 기반의 개발 패러다임. 화면 구성이나 기능을 컴포넌트 묶음으로 개발하니 재사용성이 좋고 분할 정복이 잘된다. 모델 기반으로 프론트 협업도 가능하다. 효율이 좋다. 제이쿼리나 기타 라이브러리를 사용하면 데이터가 바뀌면 돔을 찾아서 업데이트하거나 통째로 다시 그렸는데, 뷰 업데이트는 프레임워크에 맡기고 모델구성과 비즈니스로직에 집중할 수 있게 된다. 반복 작업이 줄어든다. 모델은 스토어, 뷰 / 로직은 컴포넌트단에서 관리하는 구조를 만들기 쉽다. 그리고 아주 자연스럽게 뷰 모델을쓰게 되니 전체 틀도 일정한 패턴에 맞게 쉽게 구조화 된다. 쾌적한 성능. 충분한 생태계 create-..

GET, POST, ...ETC 그리고 HTTP 응답

4학년 졸업을 앞두고 취업준비를 하다보면 GET, POST 방식의 차이점에 대해 줄줄 외게 됩니다. TCP, UDP의 차이와 더불어서요. 이제는 레벨업(?)을 했다고 치고 GET, POST 그리고 그 외의 HTTP 메서드에 대해 알아 봅시다. 마지막으로는 기본적인 HTTP 응답 코드 몇가지에 대해서도 간략하게 알아 봅시다. 1. GET - 가져오다 라는 의미 - URL에 요청 데이터를 포함시켜 전송합니다. - http Header에 포함되어 전송합니다. - 전송 데이터 길이에 제한이 있다. - 캐싱 가능. 2. POST - 제출하다 라는 의미 - URL에 데이터가 노출되지 않습니다. - http Body에 포함되어 전송합니다. - 전송 데이터 길이에 제한이 없다. - 캐싱 불가능. 3. PUT - POS..

Restful api

서버와 통신하는 어플을 개발 하다보면 Rest api에 대해 알게 되고 이를 이용해 개발 하게 됩니다. Restful api를 설계하고 만드는 일은 백엔드 개발자의 몫이지만, 사용하는건 클라이언트 개발자의 몫인거죠. 우리가 사용할 서버측의 api가 어떻게 구성되어 있는지 알아야 전반적인 데이터의 흐름을 알 수 있고 용이하게 사용 할 수 있습니다.. 그럼 시작해보겠습니다. 1. Rest란 무엇인가. Representational State Transfer 의 약자입니다. 해석하기가 난해한데요, "대표되는 상태 전달" 보다는 "상태의 변화를 표현" 이라 이해하는게 더 다가올 것 같습니다. 2. http 메서드. http 메서드에는 GET, POST 이외에도 PUT, DELETE가 있습니다. (PATCH, O..

4) 클라이언트와 서버의 연결

웹 서버 - HTTP 프로토콜을 기반으로 하여 클라이언트의 요청을 서비스 한다.- HTML, Image, xml 등에 대한 처리- 일반적으로 apache 웹 어플리케이션 서버 - 클라이언트의 요구를 웹서버 혼자서는 감당할 수 없기 때문에 구조적으로 웹 서버의 기능을 분리하기 위해 만듬.- 웹서버와 웹 컨테이너의 결합- 다양한 기능을 컨테이너에 구현하여 역할 수행. WEB SERVER 는 정적 리소스 담당WAS는 비지니스 로직을 수행 + 정적 리소스 담당 Tomcat JSP 환경을 포함하고 있는 서블릿 컨테이너 연결 과정 wireshark으로 보면 TCP/HTTP 처리 과정을 볼 수 있다. 서버의 생각///// 어라, HTTP Request의 헤더에세션 i..

1) 브라우저는 어떻게 동작하는가?

클라이언트 개발자 https://docs.google.com/spreadsheets/d/1LsA26TE0y3ObdalcH4kuQlnhohH7zRcgVatJziTMpOY/edit#gid=0 http://tryhelloworld.co.kr/courses/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8 참조) http://d2.naver.com/helloworld/59361 Chap1. 브라우저는 어떻게 동작하는가? 1) 브라우저의 주요 기능 브라우저는 사용자가 선택한 자원을 서버에 요청하고 이를 표현한다. 자원의 주소는 URI에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML파일을 해석하고 표시한다. 이러한..