플레이스토어 병아리게임 출시!!!~~ [많은 이용 부탁드립니다!]

📝빌드

소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정과 결과

📝빌드 관리 툴

Ant, Maven, Gradle

소스 코드를 컴파일하고 테스트하며, 실행 가능한 애플리케이션 또는 라이브러리를 생성하는 과정

📝Maven

• Ant 대체하기 위해 개발
• 라이프 사이클이 존재
• XML 기반

groupId 일반적으로 사이트 도메인을 역순으로 적어 사용 (company.IT → IT.company) [변동이 없음]
artifactId 다른 프로젝트와 구분할 수 있는 id 작성 (programmer_web)
version : 프로젝트 버전
name : 프로젝트 이름
description : 프로젝트 간략한 설명
properties : pom.xml 파일내에서 빈번하게 사용되는 중복 상수 정의 영역
해당 영역의 상수를 사용하기 위해서는 $(태그명)의 형태로 사용하면 됨
dependencies : maven repository에서 가져온 라이브러리 주입 xml 작성
build : 프로젝트 빌드(배포)와 관련된 정보 설정

📝Ant

• XML 기반
• 빌드의 기능만 가짐
• 소규모 프로젝트에서 사용하기 간단하고 쉬움
• 대규모 프로젝트에서 관리하기 복잡해지는 경향이 존재
• 빌드 라이프 사이클이 존재 안 해 직접 처리 필요 

Ant 구조
<project name="MyProject" default="dist" basedir=".">
    <property name="src" location="src"/>
    <property name="build" location="build"/>
    <property name="dist" location="dist"/>

    <target name="init">
        <mkdir dir="${build}"/>
    </target>

    <target name="compile">
        <javac scdir="${src}" destdir="${build}"/>
    </target>

    <target name="dist" depends="compile">
        <mkdir dir="${dist}/lib"/>

        <jar jarfile="${dist}/lib/MyProject-${DSTAMP}.jar" basedir="${build}"/>
    </target>
</project>
출처: https://cornswrold.tistory.com/216 [평범한개발자노트:티스토리]

📝빌드 라이프 사이클

Maven 의 경우 빌드 순서가 있다. 이를 라이프사이클(Lifecycle)이라 한다.

Maven 빌드 라이프 사이클

Clean=> build 후 만들어지는 Target의 디렉터리를 삭제한다.
Validate=> 올바른 Pom.xml인지 확인한다.
Compile=> 의존성들을 가져오고, Target/classes 디렉터리에 빌드한다.
Test=> 테스트 코드를 실행한다.
Package=> Test 상태가 성공적으로 실행된 다음에 실행되며 War 나 Jar 파일같은 결과물을 생성한다. 
Install=> 빌드된 결과물을 내부 메이븐 저장소로 보낸다. 
($HOME/.m2/repository)Deploy=> 결과물을 배포한다.(보통 nexus 같은 사내저장소로 배포)

출처: https://cornswrold.tistory.com/70 [평범한개발자노트:티스토리]

📝Gradle

• Groovy 스크립트 활용한 빌드 관리도구
• 안드로이드 프로젝트 표준 빌드 시스템
• Maven에 비해 더 빠른 처리 속도 (최대 100배)
• Maven에 비해 더 간결한 구성이 가능 (가독성이 좋다)
• 설정 주입시 프로젝트 조건 체크할 수 있어 프로젝트별 주입 설정 가능

repository : 라이브러리 저장된 위치 설정
mavenCentral : 기본 Maven Repository [자사에서 따로 관리하는 게 있으면 그걸 설정할 수도 있다.]
dependencies : 라이브러리 주입
ext : 전역변수 설정

• Gradle Wrapper
  • Gradle을 실행하기 위한 스크립트로, 프로젝트와 함께 배포되며 Gradle을 설치하지 않아도 빌드 작업을 실행할 수 있도록 합니다. (gradle-wrapper.properties 파일에 지정된 gradle 버전을 다운로드하고 실행)
• gradle build
  • 프로젝트를 빌드하기 위해 필요한 모든 작업을 수행합니다.
• gradle clean
  • Gradle의 빌드 환경을 초기화하는 데 사용됩니다. 이전 빌드 결과물을 삭제하여 새롭게 빌드할 수 있도록 합니다.
• gradlew.bat
  • 윈도우 운영 체제에서 Gradle을 실행하는 데 사용되는 배치 파일
• gradlew
  • 리눅스 및 맥 OS X와 같은 유닉스 기반 운영 체제에서 Gradle을 실행하는 데 사용되는 스크립트
• gradle/wrapper/gradle-wrapper.properties
  
  • gradle 버전 명시
• gradle/wrapper/gradle-wrapper.jar
  
  • gradle 버전에 맞는 wrapper 설치
• wrapper
  • gradle을 실행시키는 코드가 들어있는 jar파일

동작과정

1. gradle/wrapper/gradle-wrapper.properties에 명시된 gradle 버전을 읽는다
2. gradle 버전에 명시된 대로 gradle 버전을 다운 받는다 → gradle/wrapper/gradle-wrapper.jar
3. gradlew을 통해 실행시키면 필요한 Jar파일을 종속성에 추가한다

📝Groovy 스크립트

• JVM에서 실행되는 스크립트 언어
• 문법이 Java와 매우 유사
• Java와 호환이 되며 Java 클래스 파일을 그대로 Groovy 클래스에 이용 가능

📝스프링 부트

스프링은 기능 사용하기 위해 설정에 많은 시간이 소요 되는 반면(root-context에 xml 많이 적어야하는 경우) 스프링 부트는 자동설정 이용하기 때문에 미리 설정되어 있는 프로젝트를 이용하면 편리 XML 설정 없이 자바 코드를 통해 설정 가능 (버전 관리 해주기 때문에 다양한 패키지 허용) 

package com.lsj.chatting;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.json.JSONArray;
import org.json.JSONObject;

public class testing {

	public static void main(String[] args) {

		Map<String,Object> map = new HashMap<String,Object>();
		List<String> hobbies = new ArrayList<String>();
		hobbies.add("cook");
		hobbies.add("shopping");
		
		map.put("name", "brown");
		map.put("hobbies", hobbies);
		
		System.out.println(map);
		
		JSONObject mapJson = new JSONObject(map);
		System.out.println(mapJson);
		
		// {hobbies=[cook, shopping], name=brown}
		// {"hobbies":["cook","shopping"],"name":"brown"}
		
		JSONArray hobbiesJsonArray = new JSONArray(hobbies);
		System.out.println(hobbiesJsonArray);
		
		// ["cook","shopping"]
		
	}
	
}

List<String> list = new ArrayList<String>();

ArrayList<String> list = new ArrayList<String>();

List = 인터페이스

ArrayList = 클래스

ArrayList를 쓰다가 LinkedList를 써야하는 경우가 오는 경우 코드를 많이 손봐야하는 경우가 생길 수 있다.

(List를 상속받아서 만든 클래스인 LinkedList의 경우 삽입 삭제에 유용)

하지만 인터페이스 객체를 선언하는 경우 DI가 쉬워지고 코드를 객체 선언하는 부분만 바꾸면 된다.

즉, 인터페이스를 통해 객체를 생성하는게 좋다.

📝──── Java Naming ────

• 프로젝트명
  • snake_case
  • 예) shinhan_delivery

• 패키지명
  • com.회사명.프로젝트명 (snake_case)
  • 예) com.naver.advertise_admin

• 클래스명
  • 첫글자 대문자 + camelCase
  • 예) WeaponFactory

• Enum
  • PascalCase
  • 예) Fruit
  • 예) enum Fruit {APPLE, ORANGE, BANANA, PEAR};

• 메소드명
  • (동사 or 전치사) + camelCase  → 한 가지의 역할을 해야 한다
  • 예) getParts, toString
  • 자주쓰이는 동사 → get (가져오다) set (설정하다) find (찾다) init (데이터 초기화) create (생성하다) delete (삭제하다) update (갱신하다)

• Boolean
  • (is, has, can) + (형용사 or 명사) + camelCase
  • 예) boolean isBroken, boolean hasBanana, boolean canFix

• 변수명
  • 명사 + camelCase
  • 예) smartPhone
  • 자주 쓰이는 명사 → total (전체) count (개수)

• 상수
  • screaming_snake_case
  • 예) SHOP_NAME

• 배열
  • camelCase + 복수형
  • 예) fruits → fruits[0] = banana , fruits[1] = apple
• JSONObject
  • camelCase
  • 예) student
  •  
• JSONArray
  • camelCase + 복수형
  • 예) students
•  
• JSON 키
  • calmelCase
  • 예) “shopNm” : “맛있는 짜장면집”
  • 만약 DB에서 조회한 값 그대로 Return해 DB field 네이밍인 snake_case로 내려오는 경우는 그냥 사용
    • 예) “shop_nm” : “맛있는 짜장면집”
• 약어
  • number = num
  • address = addr
  • name = nm
  • temp = tmp
  • 약어를 사용할 경우 널리 사용하는 것이 아니면 약어리스트에 추가하고 공통적으로 관리하는게 좋다

솔직히 모든 Naming Convention을 세세한 것까지 지키면서 한 사람이 작성한 것처럼 보이기는 쉽지 않다 하지만 아무리 그래도 위에 정한 큰 틀은 지키는게 좋다

public static void main(String[] args) {

    String document = "삼성전자 LG전자 화웨이 소니 애플 삼성전자(우) 삼성화재";
    String word = "삼성";

    System.out.println(findIndexes(word, document));

}

public static List<Integer> findIndexes(String word, String document) {

    List<Integer> indexList = new ArrayList<Integer> ();
    int index = document.indexOf(word);

    while(index != -1) {
        indexList.add(index);
        index = document.indexOf(word, index+word.length());
    }

    return indexList;
}

// 출처 : https://needneo.tistory.com/96

public class LocationDistance {

	public static void main(String[] args) {

		// 마일(Mile) 단위
		double distanceMile = 
			distance(37.504198, 127.047967, 37.501025, 127.037701, "");
		
		// 미터(Meter) 단위
		double distanceMeter = 
			distance(37.49268,126.78442,37.59084,126.78918, "meter");
		
		// 킬로미터(KiloMeter) 단위
		double distanceKiloMeter = 
			distance(37.49268,126.78442,37.59084,126.78918, "kilometer");
		
		System.out.println(distanceMile) ;
		System.out.println(distanceMeter) ;
		System.out.println(distanceKiloMeter) ;
		
	}
	
	
	/**
	 * 두 지점간의 거리 계산
	 * 
	 * @param shoptLat 지점 1 위도
	 * @param shopLngt 지점 1 경도 
	 * @param userLat 지점 2 위도
	 * @param lon2 지점 2 경도
	 * @param unit 거리 표출단위 
	 * @return
	 */
	
	
	private static double distance(double shoptLat, double shopLngt, double userLat, double lon2, String unit) {
		
		double theta = shopLngt - lon2;
		double dist = Math.sin(deg2rad(shoptLat)) * Math.sin(deg2rad(userLat)) 
				+ Math.cos(deg2rad(shoptLat)) * Math.cos(deg2rad(userLat)) * Math.cos(deg2rad(theta));
		
		dist = Math.acos(dist);
		dist = rad2deg(dist);
		dist = dist * 60 * 1.1515;
		
		if (unit == "kilometer") {
			dist = dist * 1.609344;
		} else if(unit == "meter"){
			dist = dist * 1609.344;
		} 

		return (dist);
	}
	

	// This function converts decimal degrees to radians
	private static double deg2rad(double deg) {
		return (deg * Math.PI / 180.0);
	}
	
	// This function converts radians to decimal degrees
	private static double rad2deg(double rad) {
		return (rad * 180 / Math.PI);
	}
}

출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=akdlakdrn&logNo=221717580886 

📝리액트 React

페이스북에서 만든 자바스크립트 라이브러리이다

Node.js를 이용해 자바스크립트 기반 서버를 만들 경우 백엔드와 프론트를 하나의 언어로 통제가 가능하다는 장점이 있다.

물론 라이브러리이기 때문에 자바로도 기동이 가능하지만 하나의 언어로 통제가 가능하다는 장점을 버리는 것과 같으므로 굳이 그렇게 쓸 이유가 없다.

📝Anuglar.JS

구글에서 만든 Javascript 기반 웹 프레임워크 (종료 됨)

📝Vue.js

프론트엔드 자바스크립트 프레임워크

📝Anuglar

구글에서 만든 TypeScript기반 SPA프레임워크 ( Angular.JS와 Angular는 다르다)

📝TypeScript 타입스크립트

정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환

코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있어 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%가

사전에 타입스크립트로 감지

미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있고 함수 및 내부 변수에 대한 스니펫이 가능하다

타입스크립트는 자바스크립트와 100% 호환됩니다 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있다    .

하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점

📝SDK (Software Development Kit)

프로그래머들을 위해서 제공하는 개발 도구들이다

예를 들면 소프트웨어 프레임워크들, 운영체제, 컴퓨터 시스템, 게임 등을 위한 응용 프로그램을 만들 수 있도록 해주는 도구로 SDK안에는 IDE(통합개발환경)을 포함한다. 즉, 개발에 필요한 모든 자료를 SDK라고 한다 → 라이브러리 등...

📝CORS (Cross-Origin Resource Sharing)

https://domain-a.com → https://domain-b.com/data.json

프론트에서 백엔드로 호출 할 때 서로 다른 프로토콜 (HTTPS, HTTP) 또는 아이피 또는 포트가 다를 경우 Same-Origin Policy를 적용받아 Cross-Site HTTP Request가 제한된다 → 호출을 못한다

📝엔드포인트

API를 요청할 때 URI를 의미한다 → http://localhost:8080/getUserInfo

📝Origin

https://naver.com:80 [프로토콜 + 포트번호 포함]  참고로 유사한 거 같은 도메인 개념은 (naver.com)

📝크로스체크

서로 업무 내용을 파악하는 걸로 동일하게 이해했는지 확인해 오류 범하는 걸 줄인다

📝RFP (Request For Proposal)

제안서

📝trade off

일장일단 즉, 양립할 수 없다

📝노드 서버

Node.js로 구현한 서버 (express 객체로 만든 서버 등..)

📝SPA (Single Page Application)

전체 페이지가 아니라 필요한 부분만 다시 로드 하는 것 

예) 인스타그램 좋아요 누를 때 좋아요 숫자만 로드 되는 것

📝MPA (Multi Page Application)

페이지가 전체 다시 로드 하는 것

예) 인스타그램 좋아요 누를 때 페이지 전체가 새로고침 되는 현상

📝CSR (Client Side Rendering) (React, Angular, Vue)

• SPA방식에서 사용한다
  • 정적 리소스 초반에 전부 다운로드 후 필요한 부분에 데이터만 받아 클라이언트에서 다시 그려준다
• 유저 → 웹사이트방문 → 서버에 컨텐츠요청 → 뼈대HTML → JS다운로드 → 동적 DOM 생성 
  • JS 다운과 동적 DOM 생성때문에 초기 로딩 속도가 느림 하지만 이후 구동속도는 빠름
• 서버에 부하가 적다
• 검색엔진최적화에 불리하다
  • 빈 뼈대에 React 따위가 스크립트로 JS 다운 받아 붙이는 형태이기 때문에 JS 다운 받아 동적 DOM 생성 전까지는 아무것도 정보가 없어서 검색엔진이 HTML 파일을 읽어 수집할 내용이 없다
• 화면 깜빡임이 없음
• 사용자에게 보여줘야 하는 데이터의 양이 많을 때 로딩창을 띄울 수 있는 장점이 있다
• 웹 페이지와 사용자의 상호작용(이벤트 핸들링)이 많은 경우 CSR 활용
  • 아예 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리

📝SSR (Server Side Rendering) (PHP, JSP, Next)

• MPA방식에서 사용한다
  • 요청시 서버에서 렌더링한다
• 검색엔진최적화에 유리하다
• 서버 부하가 있다
• 첫 화면 렌더링이 빠르게 필요한 경우 SSR 적합
• 웹 페이지와 사용자의 상호작용(이벤트 핸들링)이 적은 경우 SSR 활용
• 참고로 Next의 경우는 그릴 수 있는 건 SSR 그 외에는 CSR처리하게끔 한다

📝TTV (Time To View)

사용자가 웹을 볼 수 있다 → 자바스크립트로 인한 동작은 안 됨

📝TTI (Time To Interact)

클릭 등 인터랙션이 가능해진다 → 자바스크립트로 이벤트 처리

📝SSG (Static-Site-Generator)

• HTML을 빌드타임에 각 페이지 별로 생성하고 해당 페이지 요청이 들어올 경우 이미 생성된 HTML 문서를 반환
• 동적요소 추가가능하고 페이지들이 많이 있기는 하지만 내용들이 변할 일은 크게 없고 동적요소들은 적은 블로그 같은 것에 활용한다
  • Gatsby, NextJS 등의 라이브러리를 활용하면 CSR에 특화된 리액트로 정적으로 웹페이지를 생성하여 서버에 미리 배포해둘 수 있다
• 검색 페이지의 경우 같은 검색 키워드이지만 위치에 따라 결과가 다르던가 할 경우 SSG를 사용하면 다른 결과마다 페이지를 만들기 때문에 엄청난 양의 HTML이 만들어지니 진짜 정적인 곳만 유의해서 사용해야한다

📝SEO (Search Engine Optimization)

웹페이지들을 검색엔진이 수집해 분석 후 검색해 나오는 검색 결과들의 우선순위를 정하는데 사용된다.