웹 개발과 관련된 모든 것들

- D3 갤러리
https://github.com/d3/d3/wiki/Gallery
시각화 차트, 특별한 기술, 재미있는 시각화 구현

- BioVisualize
http://biovisualize.github.io/d3visualization/
D3 갤러리로서 시각화 예제를 온라인상에서 빠르게 찾도록 도와준다

- D3 튜토리얼 페이지
https://github.com/mbostock/d3/wiki/Tutorials
D3의 많은 개념과 기술을 사용하는 방법을 보여주기 위한 튜토리얼과 이야기, 슬라이드 들

- D3 플러그인
https://github.com/d3/d3-plugins
시각화에 필요한 기능이 D3에 없다면 구현하기 전에 확인해 보는 저장소

- D3 API
https://github.com/mbostock/d3/wiki/API-Reference
https://github.com/d3/d3/wiki
D3 라이브러리가 제공하는 모든 함수와 특성에 대한 자세한 정보를 얻을 수 있다.

- Mike Bostok's Blocks
http://bl.ocks.org/mbostock
아주 흥미로운 시각화 자료를 접할 수 있는 D3 개발자인 마이크 보스톡이 직접 관리하는 D3 예제 사이트

- JS Bin
http://jsbin.com/ugacud/1/edit
이미 빌드가 완료된 D3 테스트와 실험 환경을 완전하게 온라인상에 제공

- JS Fiddle
http://jsfiddle.net/qAHC2/
JS Bin 과 비슷한 양상을 나타내며, 자바스크립트 코드를 프로토타이핑하고 공유하는 플랫폼을 온라인상에서 제공

다음의 D3 커뮤니티를 통해 도움을 얻을 수 있다.

- Stack Overflow의 D3.js
http://stackoverflow.com/questions/tagged/d3.js
https://stackoverflow.com/questions/tagged/d3.js
Stack Overflow는 개발자를 위한 가장 유명한 커뮤니티 기반 무료 Q&A 사이트이다.

- D3 구글 그룹
https://groups.google.com/forum/?fromgroups#!forum/d3-js
D3 뿐만 아니라 유사한 새태계의 다른 라이브러리를 위한 공식 유저 그룹

package kr.co.xxx;

import static org.junit.Assert.assertEquals;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;  
import static org.springframework.test.web.servlet.result.MockMvcResultHandlers.print; 
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
 
 
import org.junit.Before;
 
import org.junit.Test;
import org.junit.runner.RunWith;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;

import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MvcResult; 
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
 

import org.json.simple.JSONObject;

@RunWith(SpringJUnit4ClassRunner.class)
@SpringBootTest(classes = DbserverApplication.class)
@WebAppConfiguration
public class DbserverApplicationTests {

Logger log = LoggerFactory.getLogger(DbserverApplication.class);
 
    @Autowired
    private WebApplicationContext webApplicationContext;
    private MockMvc mockMvc;

  

public void logPrint(String Name) {
log.info(" ");
log.info("=======================================================");
log.info(" ");

log.info(Name);

log.info(" ");
log.info("=======================================================");
log.info(" ");
}

public void endLogPrint() {
log.info(" ");
log.info("=======================================================");
log.info(" ");
}



    @Before 
    public void setUp() throws Exception {  
     logPrint("Set Up");
    
     // 이곳에서 DbserverController를 MockMvc 객체로 만듭니다.   
        
     mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();      
        
        endLogPrint();
         
        
         
    } 

    /*
    @Test
    public void testIsRunning() throws Exception { 
     logPrint("ISRunning");
    
     mockMvc.perform(get("/ping")
            )
     .andDo(print())                // 출력
     .andExpect(status().isOk());   // 정상 결과 예상
    
    
    
     endLogPrint();
    }
      
    

    
    @SuppressWarnings("unchecked")
@Test
    public void testGetVideoInfo() throws Exception { 
     log.info("GetVideoInfo");
    
     // 전체 JSON Object 담을 정보
     //JSONArray mapArray = new JSONArray();
    
     // 한개의 정보가 들어갈 JSONObject 선언
     JSONObject mapInfo = new JSONObject();
    
     // 정보 입력
     mapInfo.put("xmin", "-111.46727710962297");
     mapInfo.put("ymin", "20.462022433054965" );
     mapInfo.put("xmax", "-110.46727710962297");
     mapInfo.put("ymax", "21.96517113846002"  );
    
     // Array 값 추가
     //mapArray.add(mapInfo);  
        
     mockMvc.perform(post("/getVideoInfo") 
     .header("Accept", "application/json")
     .contentType("application/json")
     .characterEncoding("utf-8") 
     .content(mapInfo.toString()) 
     )
.andDo(print())                // 출력
.andExpect(status().isOk())    // 정상결과 예상 
                ;
         
    
     endLogPrint();
    }         
    
    */

    
    @Test
    public void testIsRunning() throws Exception { 
     logPrint("ISRunning");
    
     MvcResult result = this.mockMvc.perform(get("/ping")
                                )
                 //.andDo(print())                // 출력
        .andExpect(status().isOk())    // 정상 결과 예상
        .andReturn()
        ;   
    
    
     // 결과를 받는 String
     String content = result.getResponse().getContentAsString();
      
     // 예상 결과 
     // 첫문장 비교해서 오류 발생하면 문제가 있는 것임
     assertEquals("I'm Alive!", content ); 
    
     endLogPrint();
    }
      
    
    
    @SuppressWarnings({ "unchecked" })
@Test(timeout = 100000)   // Timeout 시간 설정 (단위 : milliseconds)
    public void testGetVideoInfo() throws Exception {
      
    
     log.info("GetVideoInfo");
    
     // 전체 JSON Object 담을 정보
     //JSONArray mapArray = new JSONArray();
    
     // 한개의 정보가 들어갈 JSONObject 선언
     JSONObject mapInfo = new JSONObject();
    
     // 정보 입력
     mapInfo.put("xmin", "-111.46727710962297");
     mapInfo.put("ymin", "20.462022433054965" );
     mapInfo.put("xmax", "-95.15257984399797" );
     mapInfo.put("ymax", "22.96517113846002"  );
    
     // Array 값 추가
     //mapArray.add(mapInfo);   
        
     MvcResult result = this.mockMvc.perform(post("/getVideoInfo")              
     .header("Accept", "application/json")
     .contentType("application/json")
     .characterEncoding("utf-8") 
     .content(mapInfo.toString()) 
     ) 
//.andDo(print())                // 출력 (결과가가 길면 출력을 생략하는 것이 좋음)
.andExpect(status().isOk())    // 정상결과 예상 
.andReturn()
                ;
    
     
     // 결과를 받는 String
     String content = result.getResponse().getContentAsString();
    
     // ,를 기준으로 첫번째 값만 받아옴
     String [] con_list = content.split(",");
    
     // 정상 반환 여부를 확인하기 위해 첫번째 값 별도로 재저장
     String [] first_con = con_list[0].split(":");
    
     //result.
     log.info("first_con[0]  : " + first_con[0]); 
    
     // 예상 결과 
     // 첫문장 비교해서 오류 발생하면 문제가 있는 것임
     assertEquals("[{\"video_sn\"", first_con[0] ); 
    
     endLogPrint();
    }         
 
    
} // end of Class

https://coolsymbol.com/big-text-generator.html

https://www.messletters.com/en/big-text/

https://devops.datenkollektiv.de/banner.txt/index.html

1. 필요한 정보

- URL:Port

- RequestMapping 정보

ex) http://127.0.0.1:8080/getData

- URL:PORT => http://127.0.0.1:8080

- RequestMapping => getData

  > 자바 문장   

2. 보낼 데이터

- 일반적인 Parameter인 경우가 아닌 param 으로 Hashmap 데이터 전송시 예제

xmin:-111.11111

ymin:20.40121

xmax:-95.1231231

ymax:26.99383

3. POSTMAN 설정하기

- 주소창에 POST 타입(Java에서 POST 타입으로 받기로 되어 있음)과 RequestMapping값을 맞춰줍니다.

- Header 설정 값들을 맞춰줍니다.

  > Key 값 : Content-Type / Value 값 : application/json

  > Key 값 : Accept / Value 값 : application/json

  > Body에 raw로 선택후 입력 창에 다음과 같은 형태로 값을 입력합니다.

Send를 눌러 전송하면 정상적으로 값을 보내고 받아오는 것을 알수 있습니다.

요즘은 거의 크롬 확장 프로그램이 막혀있더군요

아래의 프로그램 설치 후 주소만 복사해서 붙이면

보기 좋은 크기로 자동 다운로드 됩니다.

http://www.clipdown.co.kr/

사용법

1. Clip Down 실행합니다.

2. 유튜브에 들어가 재생되는 동영상 위에서 마우스 우클릭

   → 동영상 URL 복사

3. 다음과 같은 팝업 창이 뜹니다.

   붉은 색 다운로드 글자를 누릅니다.

4. 진행중인 아래 화면이 뜹니다.

5.  아래와 같은 로딩된 화면이 뜹니다.

우측 아래에  해상도 자동> 을 눌러 해상도를 조정할 수 있습니다.

해상도 자동> 을 누르면 아래와 같이 해상도를 지정 가능합니다.

마지막으로 화면 왼쪽(Audio)은 해상도 상관없이 오디오만 추출, Video는 위 정한 해상도에 맞춘 동영상 다운로드 됩니다.

모든 파일이 다운로드 완료되면 우측위에 폴더를 눌러 다운받은 폴더를 열 수 있습니다.

요즘은 WAR 배포 단위가 많아진것 같다.

회사에서도 홈페이지 개발해서 적용하는 프로젝트를 WAR를 배포하는데

여기서 문제가 발생했다.

1. 환경 : tomcat

2. server.xml 환경 설정을 사용하여 자동 unpack

몇주간 잘 사용하다가

STS(Spring Tool Suite) 기능 때문에 파일 업로드 살펴볼까 하고 보다가

다음과 같은 문제점을 발견했다.

1. 요즘은 보안상의 이유로 상위 디렉토리 자체를 접근하면 안됨

2. Tomcat의 자동 WAR unpack 기능을 쓰면 기존 폴더를 어디론가(?) 사라지고

   똑같은 이름의 폴더가 생성됨

해결 방안

1. Tomcat 자동 WAR unpack 기능 중지

2. 수동으로 기존 folder delete

3. 수동으로 WAR unpack 작업

1. Tomcat 자동 WAR unpack 기능 중지

- 파일 위치 : Tomcat 설치 위치/conf/server.xml 

- 변경 내용

  WAR 자동 deploy 설정 끄기 (unpackWARs 옵션 false) 

  <Host name="localhost" appBase="webapps"

           unpackWARs="false" autoDeploy="true">

※ 위 설정 적용을 위해 tomcat은 재기동 합니다. (그 이후에는 자동 WAR unpack 중지 / autoDeploy는 적용)

2.  수동으로 기존 Folder 삭제 및 3. 수동으로 WAR unpack 작업

unzip 을 사용하여 위치를 설정하는 방식으로 적용

다음과 같은 deploy 반영하는 쉘을 적용

WAR_DIR : tomcat 폴더 홈 디렉토리 + webapps 폴더 까지 경로

ex) /www/tomcat 에 tomcat이 설치됐다면

     WAR_DIR="/www/tomcat/webapps"

아래 예제는 unzip이 설치된 것으로 설정하였으니

반드시 unzip 명령어를 쳤을때 정상인 것을 확인하고 적용해야 함.

1. hangout

구글 메신저

2. Google 번역

영한 번역 등 번역기능

3. uBlock Origin

팝업 차단 기능

4. Get CRX

Offline 환경에 크롬 extension 설치용 버전 만들기 위한 기능

5. MeddleMonkey

유투브 고화질 다운로드 기능

6. Selenium IDE

UI 테스트 자동화 녹화 및 재생 기능

7. Window Resizer

다양한 화면 크기로 브라우저를 맞춰 세팅해 줌

8. JSONView

JSON 타입의 데이터를 Grouping 하여 이쁘게 조회하여 줌

9. CSSViewer

화면에 특정 위치에 적용된 CSS의 정보를 클릭하여 볼수 있게 해줌

10. spider a website

특정 사이트 내부에 link가 깨지거나 잘못된 화면을 조회하여 줌

11. EditThisCookie

사이트의 쿠키를 수정할 수 있는 기능

12. Web Developer

개발에 필요한 요소들로 구성

화면, CSS, Validate 등 다양한 서비스 존재

화면에서 사용하는 JS, CSS, Cookie, Image 등 다양한 것들을 로딩하지 않은것과 같은 상태로 변경

13. WAVE

 CSS 등 오류 검색 (Web Developer에도 있긴 한데 offline 등 환경에서는 부적합)

화면 UI에 오류 내역에 표시됨으로 Web Developer보다는 직관적!

1. svn 백업

아래는 다음과 같은 값을 가질 때 예

svn root : /var/svn

저장소명 : gov

백업 파일명 : gov_backup.dump

#> svnadmin dump /var/svn/gov > gov_backup.dump

2. svn 복구

svn root 위치에 해당 파일(gov_backup.dump)

복사후 수행

a. 저장소 생성

#> svnadmin create --fs-type fsfs gov

b. 생성된 저장소에 내용 로드

#> svnadmin load gov < gov_backup.dump

systemctl 명령어를 통한 시작 방식은

root로만 접근해야 하는 것이라

WAS(tomcat)의 기동 및 중지 권한을 넘겨주고

재부팅시에도 자동으로 시작될수 있도록(tomcat 계정)

할려면 다음과 같다.

1. 퍼미션 부여

chmod 755 /etc/rc.d/rc.local

2. rc.local 실행 명령어 추가

아래는 tomcat 계정으로 서비스를 시작한다는 명령어

nohup su - tomcat -c /home/tomcat/apache-tomcat-8.5.40/bin/startup.sh &

3. rc.local 서비스 등록

위와 같이 해도 rc.local이 시작시에 시작되려고 하려면

아래와 같이 rc-local 서비스가 시작상태여야 함 (한번만 시작하면 계속 시작되어 있음)

#> systemctl start rc-local

1. vi command 상에서

:colorscheme

-> 기본 적용되어 있는 컬럼 스킨 확인 가능

2. colorscheme 적용가능한 테마 확인

:colorscheme 'Ctrl+D'

-> colorscheme 명령어 한칸 띄우고 Ctrl +D 키를 입력하면 목록이 조회됩니다.

3. 다른 컬럼 스킨 적용

개인적으로 식별하기 좋은 형태로 ron을 추천하면

:colorscheme ron

-> ron 형태의 스킨을 적용가능합니다.

4. 항상 ron 설정으로 vi 적용하기

$> vi ~/.exrc

-> 계정의 home 디렉토리에 .exrc 파일에

colorscheme ron

-> :wq를 입력하여 저장후 쉘로 나옵니다.

$>cat ~/.exrc

colorscheme ron