반응형

맥에서 터미널을 사용하다 보면 파인더나 파일을 열고 싶을 때가 있다.

이 때 터미널에서 명령어로 열 수 있다.

 

1. finder 열기

# 현재 폴더 열기
$ open .
 
# 다운로드 폴더 열기
$ open /Downloads 

open 명령어는 기본 연결 프로그램을 열어주는 명령어로 폴더를 열면 finder 가 열리게 된다.

 

# PDF 열기 (미리보기로 열림)
$ open docs.pdf
 
# 링크 열기 (기본 브라우저로 열림)
$ open https://juntcom.tistory.com
 
# 이미지 마운트 하기
$ open imageFile.dmg

 

- a 옵션을 통해 프로그램을 직접 열수도 있다.

# Safari 열기
$ open -a Safari
 
# 미리보기 열기
$ open -a Preview
 
# 디스크 유틸리티 열기
$ open -a "Disk Utility"

 

2. vscode 열기

터미널에서 vscode 를 열고 싶을 때는 code 명령어로 열 수 있다.

code .

command not found: code

다음과 같이 이런 메시지가 나온다면,

1. vscode 를 열고 

2. 명령팔레트를 실행한다. [ctrl + shift + p] 

3. Shell Command 입력 후 실행한다.

바로 vscode 를 종료 후 터미널에서 code . 를 입력하면 해당경로의 vscode 를 열어준다.

 

반응형
반응형

스프링 어플리케이션을 시작할때 어플리케이션이 뜰때 초기 구동시켜줘야하는 코드들이 있을 수 있다.

이 때 해결 방법이

CommandLineRunner, ApplicationRunner, @EventListener  방법으로 초기 실행코드를 구현 할 수 있다.

 

@Component //component scanning에 의한 방식으로 빈을 등록하는 방법 
public class MyCLRunner implements CommandLineRunner {

	@Override 
    public void run(String... args) throws Exception { 
   		System.out.println("CommandLineRunner Args: " + Arrays.toString(args));
    } 
}

또는 @Bean 으로 사용 가능 

@Bean 
public CommandLineRunner myCLRunner() { 
	return args -> System.out.println("Hello Lambda CommandLineRunner!!"); 
}

 

구동시 파라미터를 다음과 같이 받을 수 있다. 아래 방식은 ApplicationRunner 도 동일하다.

$ java -jar target/demo-0.0.1-SNAPSHOT.jar abc 123

2. ApplicationRunner 

CommandLineRunner 와 사용법은 똑같지만 다른 것은 파라미터 타입이 다른것 뿐이다.

ApplicationRunner 가 더 최근에 나온 방식이다.

@Component
public class DemoApplicationRunner implements ApplicationRunner {

    @Override
    public void run(ApplicationArguments args) throws Exception {
        System.out.println("ApplicationRunner Args: " + Arrays.toString(args.getSourceArgs()));
    }

}
@Bean 
public ApplicationRunner myApplicationRunner() { 
	return args -> System.out.println("Hello ApplicationRunner"); 
}

 

 

ApplicationRunner가 CommandLineRunner보다 일찍 실행된다.

다음과 같이 만든 초기구동 컴포넌트들이 실행순서가 이슈가 있을 경우 순서를 지정할 수 있다,

@Order(1)
@Component
public class DemoCommandLineRunner implements CommandLineRunner { ...

@Order(2)
@Component
public class DemoApplicationRunner implements ApplicationRunner { ...

3. @EventListener

이벤트 리스너가 최근에 나온 방식(4.2 이후)으로 이벤트를 연결해 초기 구동시 해당 클래스를 실행시킬 수 있다.

@SpringBootApplication public class SpringinitApplication { 
	public static void main(String[] args) { //ConfigurableApplicationContext : ApplicationContext를 코드에 의해서 재구성할 수 있도록 기능을 집어넣은 ApplicationContext. 
      ConfigurableApplicationContext ac = SpringApplication.run(SpringinitApplication.class, args); 
      ac.publishEvent(new MyEvent(ac,"My Spring Event")); 
    } 
    
    @EventListener(MyEvent.class) 
    public void onMyEvent(MyEvent myEvent){ 
    	System.out.println("Hello EventListener : " + myEvent.getMessage()); 
    } 
    static class MyEvent extends ApplicationEvent { 
   		private final String message; //원래 String message는 없는 건데 추가한 것임. 
        public MyEvent(Object source, String message) { 
        	super(source); this.message = message; 
  		} 
        public String getMessage(){ 
        	return message; 
        } 
    } 
}

 

여러개 클래스의 경우 다음과 같이 실행할 수 있다.

@EvnetListener({MyEvent.class, ApplicationReadyEvent.class})

참고문헌https://www.daleseo.com/spring-boot-runners/ [스프링 부트 구동 시점에 특정 코드 실행 시키기] 
https://jeong-pro.tistory.com/206[스프링 부트 애플리케이션에서 초기화 코드 3가지 방법]

반응형
반응형

Finder 새 창 단축키

  • Option + Command + Space  - 어떤 거 사용하더라도 finder 를 열어준다.
  • Command + n - finder 열려있는 상태에서 하나 finder 추가로 열기

Finder 폴더 주소로 이동

  • ⇧+ ⌘ + G - 폴더 주소 열기

 

반응형
반응형

서버사이드 렌더링이 가능한 nuxt 를 하려고 한다.

nuxt 장점으로는 서버사이드 렌더링이 가능하다는 점과, vue 에서 각각 해줘야 하는 일들을 한번에 처리 가능하다는 점이다.

 

Nuxt.js 설치

create-nuxt-app을 npx를 통해서 설치하면된다. npx는 NPM 5.2.0 버전 이후 기본적으로 제공되기 때문에 별도로 설치할 필요는 없다.

$ npx create-nuxt-app <project-name>

이미 npm 을 설치했다면, npx 를 따로 설치할 필요가 없다.

 

나는 해당 폴더를 생성하고, 프로젝트 명을 frontend 라고 했다.

npx create-nuxt-app frontend 

입력하면 다음과 같이 프로젝트가 생성된다.

나는 vuetify 를 기본 ui 로 설정, eslint 및 jest 를 선택했다.

 

제대로 빌드가 된다면 다음과 같이 로그가 뜬다.

 

 

npm install 로 설치 후 npm run dev 로 실행 했다.

뭔가 nuxt 에서 업데이트가 많이 된것 같다. 바로 기본적으로 레프트 사이트바랑 헤더 네이게이션 등 기본 구조를 다 만들어 놨다.

 

참고문헌

https://kdydesign.github.io/2019/04/10/nuxtjs-tutorial/ [시작명령어 및 nuxt 기본 설명]
https://ko.nuxtjs.org/guide [nuxt 공식문서]

 

 

반응형
반응형

mac vscode 는 윈도우에서의 mac vscode 단축키와 달라, 자주 쓰는 단축키를 소개하겠습니다.

 

명령어 찾기

⇧⌘P, F1 Show Command Palette

-> 위 command palette 에서는 여러가지 빠른 명령어를 사용할 수 있어, 다운받은 확장도구의 단축키를 굳이 외우지 않아도 쉽게 사용가능합니다.

예를 들어 Beautify 라는 확장모듈 설치시 Palette 를 열고, Beauti~~ 만 쳐도

아래와 같이 사용 가능 합니다.

 

파일 찾기

⌘P Quick Open, Go to File…

아마 파일 찾는 명령어를 제일 많이 쓰실 겁니다.

 

 

단어찾기

⌘G / ⇧⌘G Find next/previous  

-> 현재 커서의 다음 단어나 이전 단어를 찾게 해주는 단축키 입니다.

 

세로 편집

⇧⌥ + drag mouse Column (box) selection  -> 마우스를 쓰는경우 키를 누르고 드래그

⇧⌥⌘↑ / ↓ Column (box) selection up/down

⇧⌥⌘← / → Column (box) selection left/right   -> 방향키로 만 하는 경우

 

사실 아래 링크에 있는데, 자주 쓰는 거만 올렸습니다.

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
반응형
반응형

1. gzip 압축하기

public byte[] compress(String value) throws Exception {

    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
    GZIPOutputStream gzipOutStream =new GZIPOutputStream(
             new BufferedOutputStream(byteArrayOutputStream));
    gzipOutStream.write(value.getBytes());
    gzipOutStream.finish();
    gzipOutStream.close();

    return byteArrayOutputStream.toByteArray();
}
public static byte[] compress(final String str) throws IOException {
    if ((str == null) || (str.length() == 0)) {
      return null;
    }
    ByteArrayOutputStream obj = new ByteArrayOutputStream();
    GZIPOutputStream gzip = new GZIPOutputStream(obj);
    gzip.write(str.getBytes("UTF-8"));
    gzip.flush();
    gzip.close();
    return obj.toByteArray();
  }

 

2. gzip 압축 풀기

public String decompress(byte[] value) throws Exception {

    ByteArrayOutputStream outStream = new ByteArrayOutputStream();

    GZIPInputStream gzipInStream = new GZIPInputStream(
                new BufferedInputStream(new ByteArrayInputStream(value)));

    int size = 0;
    byte[] buffer = new byte[1024];
    while ( (size = gzipInStream.read(buffer)) > 0 ) {
        outStream.write(buffer, 0, size);
    }
    outStream.flush();
    outStream.close();

    return new String(outStream.toByteArray());
}
public static String decompress(final byte[] compressed) throws IOException {
    final StringBuilder outStr = new StringBuilder();
    if ((compressed == null) || (compressed.length == 0)) {
      return "";
    }
    if (isCompressed(compressed)) {
      final GZIPInputStream gis = new GZIPInputStream(new ByteArrayInputStream(compressed));
      final BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(gis, "UTF-8"));

      String line;
      while ((line = bufferedReader.readLine()) != null) {
        outStr.append(line);
      }
    } else {
      outStr.append(compressed);
    }
    return outStr.toString();
  }

  public static boolean isCompressed(final byte[] compressed) {
    return (compressed[0] == (byte) (GZIPInputStream.GZIP_MAGIC)) && (compressed[1] == (byte) (GZIPInputStream.GZIP_MAGIC >> 8));
  }
반응형
반응형

“entry” — String Vs Array Vs Object

웹펙에는 entry 라는게 있다.
entry 라는게 제일 시작점이다.

“entry”는 root 모듈 또는 시작 지점이 무엇인지 Webpack에게 알려준다. “entry”는 String, Array, Object 형태로 될 수 있다. 이것이 바로 혼란스러운 점인데 다른 타입은 결국 다른 목적에 사용된다고 생각하면 된다.

만약 당신이 시작지점이 1개라면 다음과 같은 output format을 사용할 수 있다.

다른 형식이지만 결국 같은 output

 

entry - Array

만약 당신이 서로간 의존성이 없는 여러개의 파일을 사용하고 싶다면 Array 형식으로 사용하면 된다. 예를 들어 HTML에 “googleAnalystic.js” 가 필요 할수 있다. 그러면 “bundle.js” 끝에 다음과 같이 추가하도록 지정하면 원하는 output이 된다.

의존성 없는 여러 파일 output

 

entry-object

만약 당신이 SPA(Single Page App)가 아니라 다중 페이지 어플리케이션을 개발한다면, entry-object를 사용하여 한번에 다중 bundle을 만들어서 사용 할 수 있다.
아래 설정 파일은 2개의 bundle JS파일을 생성한다.(indexEntry.js , profileEntry.js 가 나오며 index.html, profile.html에 각각에 사용할 수 있다.)

다중 bundle output

Usage:

//profile.html
<script src=”dist/profileEntry.js”></script>

//index.html
<script src=”dist/indexEntry.js”></script>

Note : “entry”의 객체 key가 파일 이름으로 매핑된다.

 

entry-combination

당신은 entry Object안에 Array 타입을 사용 할 수 있다. 예를 들어 아래 설정을 보면 3가지 파일이 생성된다.(3개의 파일이 있는 vendor.js 와 index.js , profile.js가 생성된다.)

Object안에 Array output

output — “path” Vs “publicPath”

-- 작성중

webpack CLI(Command Line Interface) VS webpack-dev-server

-- 작성중

빌드를 해서 할지 웹펙서버를 통해 서비스 하는 차이에 대한 설명. 참고문헌에 있다.

참고문헌

https://github.com/FEDevelopers/tech.description/wiki/Webpack%EC%9D%98-%ED%98%BC%EB%9E%80%EC%8A%A4%EB%9F%B0-%EC%82%AC%ED%95%AD%EB%93%A4 [Webpack의 혼란스런 사항들]

반응형

'프론트엔드' 카테고리의 다른 글

[npm] babel polyfill  (1) 2020.06.14
package.json 값 설명  (0) 2020.06.14
반응형

화면구성상 앞에 절대 위치로 텍스트를 놓는 경우 앞에 텍스트가 뒤를 가려서 클릭이 안되는 경우 가 있다.
텍스트가 앞에 위치해 있어도 뒤가 클릭되게 하려면 pointer-events 속성을 이용해서 뒷 배경을 정상적으로 클릭할 수 있게 할 수 있다.

pointer-events: 클릭 이벤트 허용 여부

pointer-events: none 을 사용하면 앞에 내용이 클릭이 안되고 뒤부터 클릭이 된다.

참고문헌

https://ahnheejong.name/articles/less-famous-css-properties/ [잘 알려지지 않은 유용한 CSS 속성들]

반응형

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] 마우스 커서 모양 포인터로 바꾸기(cursor)  (0) 2020.07.30

+ Recent posts