전체 글

반응형

정적 언어

 

 

개념


자료형(Type)이 고정돼 있는 언어.

정적 언어는 *컴파일 진행할 변수의 타입이 결정된다.

 

*컴파일 : 우리 사용한 언어를 컴퓨터가 알아먹을  있게 바이트코드 라는 것으로 변경하는 작업

 

대표적인 예를 들자면,

Java(자바)

String a = 10; //에러

int b = 10; //성공

var c = 22; //에러

이렇게 코딩을 했을 경우 바로 빨간줄이 그어지면서 에러가 나는데,

 

유치한 상황극

Java : " String인데 정수잖아, 그리고 var 뉘집 개야? 몰라 에러 나는 코드야 컴파일 안해줘 아니 못해줘"

프로 야근러 : " 그러네 미안"

 

이런 식으로컴파일 시에 자료형에 맞지 않은 값이 들어있으면 컴파일 에러가 발생합니다.

 

 

사용 이유


컴파일 시에 타입에 대한 정보를 결정하기 때문에 속도 향상

타입 에러로 인한 문제점을 초기에 발견할 있어 타입의 안정성 보장

 

 

종류


C

C#

C++

Java

Go

Haskell

Kotlin

Rust

Scala 

... 외에 더 있습니다.

 

 

동적 언어

 

개념


자료형이 그것을 처리할 함수(또는 메서드)에 따라 그때그때 바뀌는 언어.

동적 타입 언어의 자료형은 컴파일 시 자료형을 정하는 것이 아니고 *런타임 시에 결정합니다.

대표적인 예를 들자면,

JavaScript(자바스크립트)

function sum(){
var a = 10;
var b= "10";
console.log(a+b);
//"1010" 
}

이런 식으로 정수 10인 a 변수와 문자열 "10"인 b 변수를 더하면 에러를 뱉지 않고, 문자열 "1010"이 된다.

 

유치한 상황극 2

JavaScript : "a랑 b를 더한다고? 음 정수+문자열이긴 한데 정수 값으로 된 문자열이니까 내가 합쳐줘야겠다 여기 1010"

프로 야근러 : "고맙다^^ 근데 내가 원하는 값은 20이야"

 

*런타임 : 프로그래밍 언어가 구동되는 환경


런타임이 실행될 때 타입을 검사한다는 게 무슨 말일까?

JavaScript(자바스크립트) 코드로 알아보자

function calc(){
var a = 'blueHat'-1;
return a;
}

Java 코드였다면 미치고 팔짝 뛰면서 에러를 뱉을 텐데

JavaScript는 아무런 반응이 없다. 컴파일을 통과했다는 소리!

하지만

calc();

함수를 실행한다면? 실행될 때 즉!! *런타임 될 때!!

NaN (TypeError)를 뱉습니다.

 

JavaScript : 이건 너무한 거 아니냐고! 퉤 TypeError

 

 

사용 이유


*런타임(Run time)까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 많은 선택의 여지가 있고,

동적으로 변경되기 때문에 결과가 이상하게 나올지라도 (빨간 글씨만 나오면 심장이 두근대는)

매우 까다로운(?) 자료형 검사를 피할 수 있다.

 

 

종류


JavaScript

Ruby

Python

SmallTalk

Lisp

Lua

Perl

PHP

... 외에 더 있습니다. 

 

 

 

반응형
반응형

안녕하세요 무작정 일단 따라해보는 Spring 커뮤니티 만들기 2탄 시작합니다.

환경

Eclipse 2019-9 Jee 
JDK 1.8_231 
Apache Tomcat 8.5.47

 

Spring 프로젝트 구조

1편에서 만들었던 Spring 프로젝트죠 

굉장히 복잡해보이는데요 한번 간단하게 알아보겠습니다.


src/main/java : 말 그대로 java 파일들이 모여있는 곳 (Controller,Service,DAO)

한마디로 Java 파일을 만들 땐 이 패키지에 만들면 됩니다.


src/main/resources : 서버가 실행될 때 필요한 파일들,배포할 리소스 파일

-XML Mapper(쿼리),로그 설정..등

-Properties 파일


src/main/webapp : 웹 애플리케이션 관련 파일 

src/main/webapp/WEB-INF/views : jsp 페이지 경로


pom.xml : Maven 관련 설정 파일


정말 최고로 간단하게 설명했고,

이 이상은 일단 따라해보는 Spring 프로젝트 취지에 맞지 않기 때문에 다루지 않습니다.

 

 

Controller,Service,DAO package 만들기


src/main/java 폴더 우 클릭 후 -> New -> Package

이렇게 3개(controller,service,dao)의 Package를 만들어주세요.


그리고 기존에 있던 HomeController.java는 삭제해줍시다.

 

최종 src/main/java


Controller 만들기


com.company01.springEx01.controller 패키지 우 클릭 -> New -> Class

Name : ViewController

이렇게 ViewController.java 라는 파일을 만들었는데요 이게 Controller라는걸 컴퓨터는 모르겠죠?

그래서 @Controller 라는 이름표를 붙여줍니다.

@Controller
@RequestMapping("view/*")
public class ViewController {

	@RequestMapping("view/dashboard")
	public ModelAndView dashboard() {
		ModelAndView mav = new ModelAndView();
		
		return mav;
	}
	
}

@Controller : 컨트롤러라는걸 명시하는 어노테이션

@RequestMapping : 클라이언트가 요청한 URL를 누가 처리 할 것인지 결정하는 길잡이 역할

-@RequestMapping("view/*") : URL에 view라는 요청이 들어오면 무조건 ViewController.java으로 보내겠다.

-@RequestMapping("view/dashboard") : URL에 view/dashboard라는 요청이 들어오면 dashboard() 라는 메소드로 보내겠다.


자 그럼 Controller는 만들었으니 view 라는 폴더를 만들어야겠죠

 

그전에 먼저 기존에 존재하던 home.jsp도 삭제 해줍시다.

 

src/main/webapp/WEB-INF/views/ 마우스 우 클릭 후 -> New -> Folder

Folder name : view

view 폴더가 만들어졌으면, view 폴더 우 클릭 -> New -> JSP File

File name : dashboard

dashboard.jsp 생성 후 ->더블 클릭 -> 코드 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dashboard</title>
</head>
<body>
<p>dashboard 입니다.</p>
</body>
</html>

그런데 지금 HomeControllerhome.jsp가 없기때문에 톰캣 서버를 켰을 때

404 페이지가 출력되는 현상이 발생됬습니다.

 

처음 사이트에 진입하면 보이는 화면을 보통 index 화면이라고 하는데요.

index.jsp를 만들어봅시다.

src/main/webapp/ 폴더 우 클릭 후 -> New -> JSP File

File name : index

 

주의 : views 폴더에 만드는 것이 아닌 webapp 폴더 밑에 만드셔야 합니다. WEB-INF,views 아니고,

        반드시 webapp 밑에 만드셔야 합니다.

index.jsp 생성 후 -> 더블 클릭 -> 코드 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpringEx01 커뮤니티</title>
</head>
<body>
<p>환영합니다 SpringEx01 커뮤니티입니다.(index page)</p>
<a href="/springEx01/view/dashboard">대시보드 보러가기</a>
</body>
</html>

자 그럼 들어가 볼까요?

먼저 Run on Server를 하고 바로 들어온 모습입니다.

index.jsp 페이지가 잘 떴네요.

 

대시보드 보러라기 링크를 클릭해 이동해봅시다.


view/dashboard 라는 URL이 추가되니 dashboard() 메소드가 실행된 겁니다.

dashboard 페이지도 잘 떳습니다.

 

정리

1.Controller 생성 완료

2.@Controller , @RequestMapping 사용법 숙지 완료

3.JSP file 생성 완료


최종 Project Explorer

반응형
반응형

안녕하세요 무작정 일단 따라해보는 Spring 커뮤니티 만들기 1탄 시작합니다.

 

환경

Eclipse 2019-9 Jee
JDK 1.8_231
Apache Tomcat 8.5.47

 

시작하기에 앞서, 이클립스는 기본 템플릿 인코딩이 EUC-KR로 돼있기 때문에,

기본 인코딩 설정을 UTF-8로 바꿔줍시다.

 

[Eclipse]모든 인코딩(Encoding) UTF-8 설정하기

IDE(Integrated Development Environment) : Eclipse Juno 4.10.0 이클립스의 기본 템플릿을 열면 EUC-KR로 charset이 설정되어있음 파일 인코딩 설정 Window - Preferences 클릭 검색창에 Encoding 검색 Content..

java119.tistory.com

 

글은

환경들이 설치 되어있다는 가정하에 진행합니다.

 

STS로 하시는 분들은 1번은 스킵하고 2번부터 하시면 됩니다.

 

 

1.Spring 3.9.6 플러그인 설치하기


다음 사진과 같이 Help -> MarkPlace 클릭

그다음 검색창에 Spring 검색

Spring Tools 4 - for Spring Boot
Spring Tools 3 Add-On for Spring Tools 4.3.9.11.CI
Spring Tools 3 (Standalone Edition) 3.9.10.RELEASE

  개의 플러그인이 대표적으로 뜨는데


우리는 Spring Tools 3 (Standalone Edition) 3.9.10.RELEASE

이걸 설치 해줍니다.

 

Spring 3.9.6 플러그인 Install 버튼 클릭 후.. 기다림

 

지금 Spring Boot 대센데? (기존 MVC를 학습한 뒤 Boot로 넘어가는 게 좋습니다.)


다음 Comfirm 클릭

기다림..

 

다음 동의 버튼 클릭 Next

우측 하단에 Installing Software (??%) 100% 까지 기다려줘야 한다. 


기다려주고 마지막 설치가 됬으니 재시작 한번 해도 될까요? 창에 확인을 눌러줍시다.

 

재시작 이클립스를 다시 키면 UI 조금 달라져있다.

초록색 나뭇잎 아이콘이 보이면 설치된거다.

 

확실하게 확인하려면

Help -> Marketplace… -> Installed

다음 사진과 같이  설치되었다.


 

2.Spring MVC 프로젝트 생성하기


설명 글
사진

설명 글 
사진

이 포맷으로 설명합니다.(헷갈림 주의)


Project Explorer에서 마우스 우클릭 -> New -> Other.. -> Spring -> Spring Legacy Project 클릭 후 Next


기입

Project name : 프로젝트 이름을 정합니다.

(나중에 프로젝트명을 바꾸려면 굉~~ 장히 까다롭습니다 신중히 지으시길 바랍니다.)

Spring MVC Project 선택 후 Next


기입

프로젝트 패키지 이름 : com.(회사명 or 학원명).(프로젝트 이름 or 상징적인 명칭)

기입 후 Finish

Finish 후 우측 하단 Building(%)를 꼭 100%까지 기다려주세요.


짜잔! 벌써 Spring MVC 프로젝트를 만드셨습니다. 축하드립니다.


자 이제 프로젝트를 만들었으면 한번 실행해봐야겠죠

실행하려는 프로젝트 마우스 우클릭 -> Run As -> Run on Server 클릭


미리 설치해놨던 Tomcat v8.5 Server 선택(버전은 여러분에게 맞게 선택해주세요.) -> Next

(저는 위에서 언급했던 대로 8.5.47이니까 8.5로 진행합니다.)


기입

Name : 그냥 내버려두시면 됩니다. 

Tomcat installation directory : Browse... 버튼을 클릭해 자기가 다운로드한 톰캣 폴더를 넣습니다.

다 됐으면 Finish 버튼 클릭


떴다!! 하지만 저희가 원하는 브라우저로 실행된 게 아니고,

이클립스 내장 Intenal Web Browser로 실행이 된 모습인데요


이클립스 상단 탭 메뉴 Window -> Web Browser -> Chrome or Internet Explorer 선택

(저는 Chrome 신자이기 때문에 Chrome으로 진행합니다.)


드디어 저희가 원하던 대로 Chrome 브라우저로 저희가 올린 Tomcat 서버가 잘 올라왔군요.

하지만 2019? 11? 3? (?)처럼 인코딩이 깨져서 나오고 있네요 인코딩 설정을 해줘야 합니다.


해당 프로젝트 src 확장 -> webapp 확장 -> WEB-INF 확장 -> web.xml 파일 클릭

저와 같은 화면이 아니라면 당황하지 마시고, 하단에 Design 말고 Source를 클릭하셔야 됩니다.

그리고 이 부분 추가

지금 이 작업은 인코딩을 UTF-8로 설정하는 부분입니다.

<!-- Character Encoding Filter -->
<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>
			org.springframework.web.filter.CharacterEncodingFilter
		</filter-class>

		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>

		<init-param>
			<param-name>forceEncoding</param-name>
			<param-value>true</param-value>
		</init-param>
	</filter>

	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
<!-- Character Encoding Filter -->


항상 프로젝트의 파일들이 바뀌었을 땐 그 파일을 저장 후 켜져 있는 브라우저에서 F5를 누르시거나

서버를 다시 꼈다 키면 적용됩니다.

 


정리

1.Spring MVC Project 설치 완료

2.Tomcat Server 설정 완료

3.브라우저 설정 완료

4.UTF-8 인코딩까지 완료

 

 

반응형
반응형

DB 공부를 혹은 JSON,XML 방식을 사용 할 ,

실전 같은 데모 데이터가 필요하죠.

인터넷에 돌아다니는 예제도 좋지만 자기 입맛대로 바꾸긴 쉽지 않습니다.

 

오늘 소개할 사이트는 Mockaroo라는 사이트인데요

 

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

Paste the header row from your CSV, TXT, or Excel file to create multiple fields at once.

www.mockaroo.com

 

제가 글에도 Mockaroo에서 데모 데이터로 예시를 활용한게 많습니다.

 

그럼 본격적으로 Mockaroo 사용법에 대해 알아볼까요?

 

Mockaroo

데모 데이터를 만들어주는 사이트는 많지만 제가 Mockaroo 고른건

링크를 타고 들어가자마자 보이는 매우 직관적인 UI 때문이였습니다.

굳이 설명을 하지 않아도 Download Data 버튼을 눌러 다운로드하여보면 바로 사용법을 감 잡을 수 있습니다.

 

너무 많아 다 설명하긴 힘들고 대표적인 부분 몇 개만 설명해보겠습니다.

설명


Field Name : 말 그대로 맨 위 상단에 쓰일 이름입니다.

(DB 칼럼 이름과 이름을 맞추는 것이 좋습니다.)

 

Type : 데이터의 타입을 지정합니다.

-Row Number : 데이터의 개수에 따른 숫자 값입니다. 1~100개의 데이터라면 1~100번의 Row Number이 생성됩니다.

 

-Number : 정수(숫자) 값을 생성하는 타입입니다. min, max 박스가 생겨 최솟값, 최댓값을 지정할 수 있습니다.

 

-Date : 날짜 형식 값을 생성하는 타입입니다. 날짜를 어디부터~어디까지 설정할 수 있으며

          다양한 날짜 형식을 지원하고 SQL datetime을 선택하면 시간까지 출력할 수 있습니다.

 

-Time : 시간 값을 생성하는 타입니다. 12시간식부터 24시간식 까지 다양한 형식을 제공합니다.

 

-Boolean : true or false 값의 boolean 형식 값을 생성하는 타입입니다.

 

그 외 타입 143개(후덜덜..)

Options : 데이터를 생성할 때 옵션 값을 설정할 수 있습니다.

-blank : 이 칼럼의 값을 얼마나 빈(empty) 상태로 줄 것인지 설정하는 값이다. (1~100%)

예를 들어 email 컬럼의 blank 값을 50%로 설정하면 데이터 100개 중에 50개는 빈 값으로 나온다.

 

-fx : 사용자 지정 function을 만들어 사용할 수 있다.

예를 들어 upper(this)라는 function 값을 넣으면 그 해당 칼럼의 알파벳이 모두 대문자로 나온다.

그 외에도 this+1 , if문등 다양하게 활용할 수 있다.

 

#Rows : 말 그대로 데이터의 개수를 말합니다. 1~N개까지

(무료 버전은 1000개까지의 Rows만 제공합니다 1000개 이상의 데이터는 유료입니다.)

 

Format : 다운로드할 데이터의 포맷을 정합니다

(CSV, JSON, XML, SQL, Firebase... 등 무려 10개의 포맷 형식을 제공합니다.)

 

Line Ending : 줄의 끝 형태를 정합니다. Unix ( "\ n") or Windows  ( "\ r \ n")

 

 

주의


데이터 1000 Rows 이상부터는 유료다.

한글 변수는 넣을 수 없다.

 

 

이상 Mockaroo 사이트에 대한 소개 및 사용법이었습니다.

다음에는 더욱 유익한 정보로 찾아오겠습니다 감사합니다.

반응형
반응형

먼저 시작하기에 앞서 오늘 예제로 쓰일 테이블

 

CREATE TABLE computerValue(

id int,
cpu_value int,
memory_value int,
graphics_card_value int,
time_value datetime

)

 

실험 대상 : MariaDB 10.1.41 설치 돼있는 DB 서버

목적 : 데모데이터를 위한 1000 rows 데이터가 들어있는 csv 파일 import 하기

 

LOAD DATA INFILE

 

개념


텍스트 파일을 읽어서 테이블로 데이터를 입력하는(import 하는) 명령어이다.

 

사용 이유


일일이 INSERT 구문을 쓰는 노가다(반복작업) 방지.

기본 INSERT 구문을 쓰는 것보다 15~20배 정도 속도가 빠름.

DB to DB 데이터 마이그레이션 작업 사용

 

 

조건


파일 이름은 알파벳 문자열로 주어져야 한다.

import 하려는 파일 ,데이터로 쓰려고 하는 파일의 권한을 가지고 있어야됨

 - 데이터베이스 디렉토리에 존재

 - 누구나 읽을수 있는 파일 권한

 

 

문법


표준 양식

LOAD DATA INFILE '{file_name}'

    INTO TABLE {table_name}
    CHARACTER SET utf8
    FIELDS
       TERMINATED BY '{field_terminator}'  # 각 필드 구분 문자 (예: CSV라면 컴마)
        OPTIONALLY ENCLOSED BY '"'  # 필요할 경우, 따옴표(")로 구분
    LINE TERMINATED BY '\n'
    IGNORE 1 LINES  # 제목이 포함된 첫 번째 줄은 생략
    (col1, col2, ... )  # 컬럼명

 

상황1. Linux(리눅스)

/usr/local/garaDate.csv 라는 파일 import 하기

LOAD DATA INFILE '/usr/local/garaData.csv'
REPLACE INTO TABLE `testDB`.`computerValue` COLUMNS TERMINATED BY ',' ENCLOSED BY '"'
LINES TERMINATED BY '\n' IGNORE 1 LINES
(@id, @cpu_value, @memory_value,@graphics_card_value,@time_value)
SET `id` = @id, `cpu_value` = @cpu_value, `memory_value` = @memory_value,
`graphics_card_value` = @graphics_card_value,
`time_value` = STR_TO_DATE(@time_value,'%Y-%m-%d %H:%i');

주의 : LOAD DATA LOCAL INFILE 아니라 LOAD DATA INFILE 입니다.

 

LOAD DATA LOCAL INFILE

 

개념


Local 옵션을 넣을 있다.

그대로 Linux(리눅스) DB 서버에 있는 파일을 넣는게 아닌

Local 있는 파일, 사용자의 노트북,컴퓨터 디스크에 존재하는 파일을 넣을 사용한다.

 

오해의 소지가 있을 있는데 DB 서버에 로컬 파일을 넣을 있습니다.

 

조건


local 명령어를 추가해서 사용할 경우에는 서버와 클라이언트

모두 local-infile 옵션이 on으로 되어 있어야만 사용가능 

local-infile 옵션 설정 확인 커맨드

show variables like 'local%';

 local-infile 옵션 ON으로 설정 하는법

mysql -u 아이디 -p -h 서버명 DB명 --local-infile=1

 

문법


표준 양식

LOAD DATA LOCAL INFILE 'file_name'
    [REPLACE | IGNORE]
    INTO TABLE tbl_name
    [CHARACTER SET charset_name]
    [{FIELDS | COLUMNS}
        [TERMINATED BY 'string']
        [[OPTIONALLY] ENCLOSED BY 'char']
        [ESCAPED BY 'char']
    ]
    [LINES
        [STARTING BY 'string']
        [TERMINATED BY 'string']
    ]
    [IGNORE number LINES]
    [(col_name_or_user_var,...)]
    [SET col_name = expr,...]

 

상황2. 로컬 윈도우

바탕화면에 있는 "garaData.csv" 라는 파일 원격 DB 서버에 import 하기

LOAD DATA LOCAL INFILE 'C:/Users/juju(사용자이름)/Desktop/garaData.csv'
REPLACE INTO TABLE `localtest`.`computervalue`(테이블이름)
COLUMNS TERMINATED BY ',' ENCLOSED BY '"'
LINES TERMINATED BY '\n' IGNORE 1 LINES
(@id, @cpu_value, @memory_value,@graphics_card_value,@time_value)
SET `id` = @id, `cpu_value` = @cpu_value, `memory_value` = @memory_value,
`graphics_card_value` = @graphics_card_value,
`time_value` = STR_TO_DATE(@time_value,'%Y-%m-%d %H:%i');

주의 : 윈도우 파일경로는 \(역슬래쉬) 아니라 /(슬래쉬)이다.

        LOAD DATA INFILE 아니라 LOAD DATA LOCAL INFILE 입니다.

C:\Users\user\Desktop (X)

C:/Users/user/Desktop (O)

만약 \(역슬래쉬)를 사용하고 싶다면 \\
C:\\Users\\user\\Desktop (O)

 

 

 

LOAD DATA INFILE 최근 에러 확인 명령어


가장 최근 1건만 확인 가능하다.

show warnings;

 

 

대표 예외(오류)


권한 거부 오류


/* SQL 오류 (29): File 'C:\Users\juju\Desktop\garaData.csv' not found (Errcode: 13 "Permission denied") */

local-infile 옵션 설정 확인 커맨드

show variables like 'local%';

 

 local-infile 옵션 ON으로 설정 하는법

mysql -u 아이디 -p -h 서버명 DB명 --local-infile=1

 

 

데이터에 포맷 오류


String 타입을 date 넣거나

int 타입의 허용 범위를 넘거나 나는 오류이다.

 

주로 날짜 date , datetime 진짜 많이 나는 에러이다.

 

/* SQL 오류 (1292): Incorrect datetime value: '2018-11-23 10:47

' for column `localtest`.`computervalue`.`time_value` at row 1 */

 

잘못된 구분-String인데 Datetime 넣을려고 시도

`time_value`= @time_value (X)

 

올바른 구분-String to Datetime으로 변경 데이터 삽입

`time_value` = STR_TO_DATE(@time_value,'%Y-%m-%d %H:%i'); (O)

 


 

LOAD DATA INFILE 사용법

MariaDB 공식 홈페이지

https://mariadb.com/kb/en/library/load-data-infile/

MySQL 공식 홈페이지

https://dev.mysql.com/doc/refman/5.7/en/load-data.html

 

반응형
반응형

JSON(JavaScript Object Notation) 모른다면 선행 해야

 

[IT용어] JSON(JavaScript Object Notation)

JSON(JavaScript Object Notation) 개념 경량(Lightweight)의 DATA-교환 형식이다. 경량(Lightweight)의 DATA-교환 형식~ 경량(Lightweight)의 DATA-교환 형식~~!! 속성-값 쌍 || 키-값 쌍으로 이루어진 데이터 오..

java119.tistory.com

JSON 개념은

글에서 설명하였으니, 먼저 보시기 바랍니다.

 

저도 처음에 JSON 데이터를 다룰 상당히 삽질을 많이 했는데요.

그러한 피해자(?) 없게 문법 정리정리해보았습니다.

 

다양한 예제를 제공하니 하나 하나 직접 해보시면서 이해하길 바랄게요.

바로 문법 진행하겠습니다.

 

문법


key : value 형식

 

문법 양식


 {

    "key": "value",
    "key": "value",
    "key": "value"

}

key : value 기억하자

 

문법 제공


1. 쉬운예제

2. 복잡한예제 1,2,3 유형

3.json 파일 형태 데이터 추출

4.json 형식 ajax 통신 데이터 추출

 

 

JavaScript에서 JSON 데이터 뽑기,추출하기


쉬운 예제

 

JSON 형태 데이터

var param1= {

    "fruit": "Apple",
    "size": "Large",
    "color": "Red"

}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){

console.log(param1.fruit);
console.log(param1.color);
}        

결과

간단 설명


처음 하신분들이 많이 당황하는게 굉~장히 복잡한 포맷 때문인데

자세히 보면 아주 쉽습니다.

 

먼저 JSON 형식 데이터를 param1이라는 변수에 담았으니 param1.으로 시작하는게 맞는거죠 이해 됐죠잉

Map에서 배웠다시피 객체를 뽑을 "key" 뽑는다고 했죠 "key"~

 

그리고 JSON은 key : value 포맷이라고 했죠

그래서 param1.key , param1.fruit , param1.size , param1.color가 되는 겁니다.

(간단 설명은 쉬운 예제에만 제공됩니다 다른 예제들은 보면서 감을 익히시면 됩니다.)

 

 

복잡한 예제

 

JSON 형태 데이터

var param2 = {
    "quiz": {
        "sport": {
            "q1": {
                "question": "Which one is correct team name in NBA?",
                "options": [
                    "New York Bulls",
                    "Los Angeles Kings",
                    "Golden State Warriros",
                    "Huston Rocket"
                ],
                "answer": "Huston Rocket"
            }
        },
        "maths": {
            "q1": {
                "question": "5 + 7 = ?",
                "options": [
                    "10",
                    "11",
                    "12",
                    "13"
                ],
                "answer": "12"
            },
            "q2": {
                "question": "12 - 8 = ?",
                "options": [
                    "1",
                    "2",
                    "3",
                    "4"
                ],
                "answer": "4"
            }
        }
    }
}

JavaScript

$(document).ready(function(){
jsonTest();
})

function jsonTest(){
console.log(param2.quiz["sport"].q1.question);
console.log(param2.quiz["sport"].q1.options[2]);
console.log(param2.quiz["sport"].q1.answer);

console.log(param2.quiz["maths"].q1.question);
console.log(param2.quiz["maths"].q2.question);
}

결과

 

복잡한 예제 2

 

JSON 형태 데이터

var param3 = {"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){
console.log(param3.menu.popup.menuitem[1].value);
console.log(param3.menu.popup.menuitem[0].onclick);
}

결과

 

복잡한 예제 3

JSON 형태 데이터

var param4 = {

    "glossary": {
        "title": "example glossary",
"GlossDiv": {
            "title": "S",
"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
  "para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
                    },
"GlossSee": "markup"
                }
            }
        }
    }
}

JavaScript

$(document).ready(function(){

jsonTest();

})

function jsonTest(){
console.log(param4.glossary.GlossDiv.GlossList.GlossEntry.GlossDef.para);
console.log(param4.glossary.GlossDiv.GlossList.GlossEntry.GlossDef.GlossSeeAlso[0]);
}

결과


방법은 jQuery 플러그인이 필수로 필요합니다.

jQuery(JavaScript)에서 .JSON 파일로 import(파일 데이터 뽑기,추출하기)

 

js_jsonEx1.json 파일의 경로 (Spring MVC 기준입니다 참고바랍니다.)

 

파일 내용

[{"id":1,"first_name":"Eolanda","last_name":"Druce","email":"edruce0@cbsnews.com","gender":"Female"},
{"id":2,"first_name":"Hyman","last_name":"Steely","email":"hsteely1@columbia.edu","gender":"Male"},
{"id":3,"first_name":"Mommy","last_name":"Ghirardi","email":"mghirardi2@rambler.ru","gender":"Female"},
{"id":4,"first_name":"Darnall","last_name":"Earry","email":"dearry3@irs.gov","gender":"Male"},
{"id":5,"first_name":"Lionello","last_name":"Le Franc","email":"llefranc4@home.pl","gender":"Male"},
{"id":6,"first_name":"Chastity","last_name":"Egle","email":"cegle5@linkedin.com","gender":"Female"},
{"id":7,"first_name":"Moe","last_name":"Pryde","email":"mpryde6@clickbank.net","gender":"Male"},
{"id":8,"first_name":"Erminia","last_name":"Brigden","email":"ebrigden7@dedecms.com","gender":"Female"},
{"id":9,"first_name":"Ingram","last_name":"Nestoruk","email":"inestoruk8@weibo.com","gender":"Male"},
{"id":10,"first_name":"Joanie","last_name":"Von Der Empten","email":"jvonderempten9@bloomberg.com","gender":"Female"}]

파일 제공


js_jsonEx1.json
0.00MB

 

 

JavaScript

$.getJSON('/resources/external_json/js_jsonEx1.json', function(data) {

for(key in data){
    console.log("first Name :"+data[key].first_name+" , last Name :"+data[key].last_name);
		}
    });

결과

 

간단 설명


 $.getJSON('/resources/external_json/js_jsonEx1.json', function(data)

해당 url 매개변수에 '/resources/external_json/js_jsonEx1.json' 들어가서 경로를 확인 파일에 있는 내용을 스캔합니다.

스캔된 내용을 function(data) 데이터 인자에 넣어줍니다.

 

여기서 $.getJSON('/resources/external_json/js_jsonEx1.json', function(data) 부분의 data 파일이 스캔된 데이터를 인자로 넘겨받는거기 때문에 이름이 data 아니여도 됩니다.

예를 들어

$.getJSON('/resources/external_json/js_jsonEx1.json', function(people) {

for(key in people){
    console.log("first Name :"+people[key].first_name+" , last Name :"+people[key].last_name);
	}
    });

data -> people 변경하여도 정상적으로 동작합니다.

 

 

 

ajax JSON 데이터를 받으신다구요? 알겠습니다.

jQuery(JavaScript)에서 ajax 통신 JSON 형태로 데이터 뽑기,추출하기

function jQueryajaxJSON(){

$.ajax({

url : "/jquery/jqueryData",
dataType : "json",
success:function(data){

for(key in data){
console.log(data[key].first_name);
console.log(data[key].last_name);
console.log(data[key].email);
}
}
})
}

결과


+추가(20191206)

 

JSON(Object) 키만 추출하기

 

REST API를 조회해서 뽑거나 .json 파일을 받았다면 데이터가 와장창 쏟아져 나오게 되는데요,

당황하지 않고 뽑으려면 Object의 KEY만 추출해서 데이터 가공을 한다면 훨씬 수월합니다.

 

 

JSON KEY 추출


첫 번째 방법

Object.keys(ObjData)

두 번째 방법

Object.getOwnPropertyNames(ObjData)

 

JSON(Object) length 추출


var obj_length = Object.keys(ex_obj).length;

 

 

JSON 형태의 String(스트링) 값 JSON으로 변환

String -> JSON


JSON.parse(text[, reviver])

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

주의 : 모든 String이 변환되는 것이 아니라 JSON 형태로 된 String만 변환됩니다. 에러가 뜨셨다면 문법을 확인해주세요.

 

 

JSON -> String


JSON.stringify()
JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

 

내가 받아온 값의 타입이 String인지 JSON(Object)인지도 모른다면?

console.log(typeof '타입확인할값');

typeof 쓰시면 됩니다.

 

이 정도만 알고 있어도 JSON 데이터를 JavaScript/jQuery로 뽑는데 문제없다고 봅니다.

만약 자기가 원하는 방법이 없으신 분들은 덧글 남겨주세요. 글 업데이트하겠습니다 

 

JSON 모의(가짜) 데이터 만드는 사이트

https://www.mockaroo.com/

 

 

반응형
반응형

JSON(JavaScript Object Notation)

 

개념


경량(Lightweight)의 DATA-교환 형식이다.

 

경량(Lightweight)의 DATA-교환 형식~

경량(Lightweight)의 DATA-교환 형식~~!!

 

속성- || - 으로 이루어진 데이터 오브젝트를 전달하기 위해

인간이 읽을 있는 텍스트를 사용하는 *개방형 표준 포맷.

포맷이랍니다. 포맷

 

JSON이라는게 대단한게 아니고 프로그래밍 언어도 아니고

 

그냥 데이터 주고 받을 트래픽을 최소화하기 위한

데이터가 들어있는 가벼운 종이 같은 개념으로 보시면 됩니다.

 

시작은 JavaScript로부터 파생됐지만(그래서 JavaScript 문법) 언어 독립형 포맷이다.

수년 지배 해왔던 XML 대체 있는 아주 매우 완전 주요 데이터 포맷

 

보통 ajax rest api에서 XML , JSON 형식으로 많이 받죠

쓰이는 JSON JSON 맞습니다.

 

프로그래밍 언어의 제약이 거의 없습니다

C,JAVA,Rudy 등 거의 모든 언어에서 사용 가능합니다.

 

공식 미디어 타입(MIME 타입) : application/json

파일 확장자 : .json

 

*개방형 표준 : 문서가 공개되어있는 표준 , 사용이 자유로움 , 로열티를 지불할 필요 없음

 

문법 종류


수(Number) : number는 8진수와 16진수 형식을 사용하지 않는것을 제외하면 C와 Java number 처럼 매우 많이 비슷하다.

 

문자열(String): 0개 이상의 유니코드 문자들의 연속. 문자열은 큰 따옴표(")로 구분하며 역슬래시 이스케이프 문법을 지원한다.

 

참/거짓(Boolean): true 또는 false 

 

배열(Array): 0 이상의 임의의 종류의 값으로 이루어진 순서가 있는 리스트. 대괄호로 나타내며 요소는 쉼표로 구분한다.

 

객체(Object): 순서가 없는 이름/값 쌍의 집합으로, 이름(키)이 문자열이다.

 

null: 빈 값으로, null을 사용한다.

 

사용 이유


JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용

 

특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공

 

제일 중요한 사용 이유는 데이터를 전송할 최소한의 용량으로 전송하기 위함.

 

ajax rest api 통신 자주 받는 데이터 형식인 만큼 필수적으로 알아야 합니다.

반드시 개념을 숙지하시길 바랍니다.

문법이 없는 이유는 Java JavaScript 나눠서 올릴 예정입니다.

 

 

 

정리

1.DATA 교환하는 형식 그대로 DATA 주고 받을 , 편지를 주고 받을

보통 종이를 쓰는거 처럼 DATA 받을땐 JSON 형식

2.JSON 쓰는데 프로그래밍 언어의 제약이 거의 없다. C,Java,Rudy... 여러 종류 가능

2.공식 미디어 타입(MIME 타입) application/json이다

 

 

설명이 미흡하다고 느끼신 분들은

JSON 공식 홈페이지 참조 http://www.json.org/json-ko.html

반응형
반응형

아직도!!!!!!!!!!!!!!

Calender Date 사용하려는 혹은 사용하고 있는 저 같은분들을 위해 준비한 글입니다.

 

Java 8 부터 java.time(joda.time) api 출시 됐기 때문에,

Java version 8 이상만 가능합니다.

 

Java 시간 API 시대 흐름순


java.util.Date > java.util.Calendar > java.time(org.joda.time)

 

 

LocalDate

 

 

개념


로컬 날짜 클래스로 날짜 정보만 필요할 때 사용

날짜 정보만 출력됩니다 날짜 정보만~

 

 

문법


// 로컬 컴퓨터의 현재 날짜 정보를 저장한 LocalDate 객체를 리턴
LocalDate currentDate = LocalDate.now();
// result : 2019-11-13

// 파라미터로 주어진 날짜 정보를 저장한 LocalDate 객체를 리턴한다.
LocalDate targetDate = LocalDate.of(2019,11,12);
 //결과 : 2019-11-12

 

 

LocalTime

 

 

개념


로컬 시간 클래스로 시간 정보만 필요할 때 사용

 

시간 정보만 출력됩니다 시간 정보만~

 

 

문법


// 로컬 컴퓨터의 현재 시간 정보를 저장한 LocalDate 객체를 리턴. 
LocalTime currentTime = LocalTime.now();   
// 결과 : 18:34:22

// 파라미터로 주어진 시간 정보를 저장한 LocalTime 객체를 리턴.
LocalTime targetTime = LocalTime.of(12,33,35,22); 
// 끝에 4번째 매개변수는 nanoSecond 인데 선택 값이다 굳이 쓰지 않아도 된다.
// 결과 : 12:32:33.0000022

 

 

LocalDateTime

 

 

개념


날짜와 시간 정보 모두가 필요할 때 사용.

날짜와 시간 정보 출력~

 

 

문법

 


// 로컬 컴퓨터의 현재 날짜와 시간 정보
LocalDateTime currentDateTime = LocalDateTime.now();    
// 결과 : 2019-11-12T16:34:30.388

LocalDateTime targetDateTime = LocalDateTime.of(2019, 11, 12, 12, 32,22,3333);
// 여기도 second,nanoSecond 매개변수는 필수가 아닌 선택입니다.
// 결과 : 2019-11-12T12:32:22.000003333

 

날짜 더하기

LocalDateTime currentDateTime = LocalDateTime.now();
// 더 하기는 plus***() 빼기는 minus***()
// currentDateTime.plusYears(long) or minusYears(long)
currentDateTime.plusDays(2)
// 결과 : 2019-11-14T12:32:22.000003333

리턴 타입

메소드(매개변수)

설명

java.time.LocalDateTime

plusYears()

java.time.LocalDateTime

plusMonths()

java.time.LocalDateTime

plusWeeks()

java.time.LocalDateTime

plusDays()

java.time.LocalDateTime

plusHours()

java.time.LocalDateTime

plusMinutes()

java.time.LocalDateTime

plusSeconds()

java.time.LocalDateTime

plusNanos()

밀리초

빼기도 동일합니다. minusYear(),minusMonths() …

 

플러스 마이너스... 정말 직관적이다 대박 굿 완전 굿

 

 

실전 예제


 

날짜 비교

LocalDateTime startDateTime = LocalDateTime.now();  
// 결과 : 2019-11-12T12:32:22.000003332
LocalDateTime endDateTime = LocalDateTime.of(2019, 11, 12,12, 32,22,3333);
// 결과 : 2019-11-12T12:32:22.000003333

// startDateTime이 endDateTime 보다 이전 날짜 인지 비교
startDateTime.isBefore(endDateTime);    
// 결과 : true

// 동일 날짜인지 비교
startDateTime.isEqual(endDateTime);
// 결과 : false

// startDateTime이 endDateTime 보다 이후 날짜인지 비교
startDateTime.isAfter(endDateTime); 
// 결과 : false

주의 : 나노초가 존재할 경우 나노초의 시간까지 비교합니다.

 

시간 비교

LocalTime startTime = LocalTime.now();  
// 결과 : 23:52:35
LocalTime endTime = LocalTime.of(23, 59, 59);
// 결과 : 23:59:59

// startTime이 endTime 보다 이전 시간 인지 비교
startTime.isBefore(endTime);    
// 결과 : true

// startTime이 endTime 보다 이후 시간 인지 비교
startTime.isAfter(endTime); 
// 결과 : false

 

날짜 차이 계산

LocalDate startDate = LocalDate.now(); 
// 결과 : 2019-11-12
LocalDate endDate = LocalDate.of(2019,12,13);
// 결과 : 2019-12-13

Period period = Period.between(startDate, endDate);

period.getYears();      // 0년
period.getMonths();     // 1개월
period.getDays();       // 1일 차이

주의 : startDate와 end가 31일 차이가 나서 리턴이 31일이 되는 것이 아니라 1개월 1일로 반환됩니다.

무심코 period.getDays()로 비교했다간 다칠 수 있습니다.

 

그렇다면 31일을 반환 하려면?

 

전체 시간을 기준으로 차이 계산하기

LocalDate startDate = LocalDate.now(); 
// 결과 : 2019-11-12
LocalDate endDate = LocalDate.of(2019,12,13);
// 결과 : 2019-12-13

ChronoUnit.DAYS.between(startDate, endDate); 
// 결과 : 31 (1개월 1일)

클래스

설명

ChronoUnit.YEARS

전체 년 차이

ChronoUnit.MONTHS

전체 월 차이

ChronoUnit.WEEKS

전체 주 차이

ChronoUnit.DAYS

전체 일 차이

ChronoUnit.HOURS

전체 시간 차이

ChronoUnit.SECONDS

전체 초 차이

ChronoUnit.MILLIS

전체 밀리초 차이

ChronoUnit.NANOS

전체 나노초 차이

 

시간 차이 계산

LocalTime startTime = LocalTime.now();  
// 결과 : 17:14:55
LocalTime endTime = LocalTime.of(18,17,35);
// 결과 : 18:17:35

Duration duration = Duration.between(startTime, endTime);
duration.getSeconds();      
// 결과 : 3742
duration.getNano();
// 결과 : 922000000

 

날짜 포맷

LocalDateTime now = LocalDateTime.now();
DateTimeFormatter dateTimeFormatter = DateTimeFormatter.ofPattern("yyyy년 M월 d일 a h시 m분");
String nowString = now.format(dateTimeFormatter);   
// 결과 : 2019년 11월 12일 오후 7시 2분

LocalDateTime now2 = LocalDateTime.now();  
DateTimeFormatter dateTimeFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm:ss");
// 결과 : 2019-11-12 07:26:12

주의 : 포맷의 두번째 예제에 07는 19시입니다. 24시간 표기가 아닙니다. 


날짜 변환

 

LocalDate -> String

LocalDate.of(2020, 12, 12).format(DateTimeFormatter.BASIC_ISO_DATE);

LocalDateTime -> String

LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));

LocalDate -> java.sql.Date

Date.valueOf(LocalDate.of(2019, 12, 27));

LocalDateTime -> java.util.Date

Date.from(LocalDateTime.now().atZone(ZoneId.systemDefault()).toInstant());

LocalDateTime -> java.sql.Timestamp

Timestamp.valueOf(LocalDateTime.now());

String -> LocalDate

LocalDate.parse("1995-05-09");
LocalDate.parse("20191224", DateTimeFormatter.BASIC_ISO_DATE); 

String -> LocalDateTime

LocalDateTime.parse("2019-12-25T10:15:30");
LocalDateTime.parse("2019-12-25 12:30:00", DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));

java.util.Date -> LocalDateTime

LocalDateTime.ofInstant(new Date().toInstant(), ZoneId.systemDefault());

LocalDateTime -> LocalDate

LocalDate.from(LocalDateTime.now());

LocalDate -> LocalDateTime

LocalDate.now().atTime(2, 30);

 

날짜 변환 [jekalmin의 블로그] 참조

 

 

해당 월에 마지막 날짜 찾기

String targetDate = "2020-02-02";

YearMonth targetYearMonth = YearMonth.from(LocalDate.parse(targetDate, DateTimeFormatter.ofPattern("yyyy-MM-dd")));

//해당 월의 일 수(int)
System.out.println(targetYearMonth.lengthOfMonth()); // 29

//해당 월의 마지막 날(LocalDate)
System.out.println(targetYearMonth.atEndOfMonth()); // 2020-02-29

해당 주차의 날짜 찾기

final long calendarWeek = 34; //34주차 입력
LocalDate desiredDate = LocalDate.now()
            .with(IsoFields.WEEK_OF_WEEK_BASED_YEAR, calendarWeek)
            .with(TemporalAdjusters.previousOrSame(DayOfWeek.MONDAY));
//결과 : 2020-08-17 
//DayOfWeek.MONDAY = 해당 주차에 월요일

 

TMI((Too Much Information)


위에 예제처럼 LocalDateTime startDateTime = LocalDateTime.now(); 하게 되면

// 결과 : 2019-11-12T12:32:22.000003332 이러한 결과가 나오는데 여기서 중간에 T는 뭘까?

바로 ISO 형식 시간표기법이다.

 

그 말은 즉, String으로 날라온 매개변수를 LocalDateTime로 파싱할때

'T'가 없으면 java.time.format.DateTimeParseException이 발생한다는 뜻입니다.

 

반짝 예시

String date = "2019-11-12 12:30:54"
LocalDateTime localdatetime = LocalDateTime.parse(date);
// 결과 : java.time.format.DateTimeParseException

String date = "2019-11-12T 12:30:54";
LocalDateTime localdatetime = LocalDateTime.parse(date);
// 결과 : parse 성공

 

ISO 자세히 알기

 

[ISO] ISO 8601 개념

ISO 날짜 형식이란? 정식 명칭 Date elements and interchange formats - Information interchange - Representation of dates and times 미쳤다.. 현재 제일 최신 버전 ISO 8601 구버전 ISO 8601:2000, ISO 8601:..

java119.tistory.com

반응형

+ Recent posts