https://developers.facebook.com/docs/instagram/oembed

 

oEmbed - Instagram 플랫폼 - 문서 - Facebook for Developers

Instagram oEmbed Instagram oEmbed 엔드포인트를 쿼리하여 Instagram 게시물의 포함(embed)된 HTML과 기본 메타데이터를 가져오고 다른 웹사이트나 앱에 게시물을 표시할 수 있습니다. 사진, 동영상, 릴 및 가

developers.facebook.com

위 글을 들어가 보면 필요한 정보들이 나오는데, 나는 엄청 헤매서 이것저것 막 테스트 아이디를 넣고 추가하고..뭐 별 쌩쇼를 다했다.. 

테스트 아이디의 경우 Instagram Basic Display 라는 것에 쓰이는 듯하고, 내가 하고 싶은 것은 인스타그램 주소를 넣으면 그것에 해당하는 정보를 가져오는 것이었기에 oEmbed 읽기가 필요했다. 

이를 위해서는 라이브 모드의 Facebook 앱, 액세스 토큰, 앱 검수가 필요하다. 참고로 나는 앱만들 때 소비자 모드로 만들었다. 

라이브 모드로 변환시킬 때 

여기에 서비으 약관 URL 이라든지 개인정보처리방침 URL 이라든지, 앱 이미지를 다 채워줘야한다. 나는 혼자 공부하는 용도이기 때문에 사이트 URL을 localhost:포트번호 로 주었다. 다 넣고 변경 내용 저장하면 라이브로 바꿀 수 있다.

 

 

그리고 앱 검수에 가서 권한 또는 기능 요청에 oembed Read를 클릭하고 뭐 제출하라는 것들을 다 제출하면 된다. 

나는 api 공부용도이기 때문에 그냥 공부라고 쳤다. 

 

이런거 하나 가져오기까지도 엄청 힘들다....ㅠㅠ몇 시간을 헤맨건지~~~ 쨌든 검토 완료가 되면 알림으로 앱 옆에 뜬다.

그러면 앱아이디와

 

설정 -> 고급 설정에 있는 클라이언트 토큰을 oembed 요청시 access_token=앱아이디|클라이언트토큰 으로 엮어서 같이 url이랑 보내주면 된다.. 

 

https://stackoverflow.com/questions/67998234/starting-using-instagram-oembed-feature

 

Starting using Instagram oEmbed feature

What is the correct way to start using Instagram oEmbed feature? Documentation (https://developers.facebook.com/docs/instagram/oembed/) claims that I have to pass App Review to start using the feat...

stackoverflow.com

 

그래도 몇 일 동안 헤맸던 것을 해결해서 기분이 좋다

 

이렇게 가져올 수 있었다 !! 

https://github.com/sophia9999/ssgtudy

 

GitHub - sophia9999/ssgtudy: 스터디모임을 위한 플랫폼, 쓱터디(ssgtudy)

스터디모임을 위한 플랫폼, 쓱터디(ssgtudy). Contribute to sophia9999/ssgtudy development by creating an account on GitHub.

github.com

프로젝트를 진행하면서 이벤트관련도 내가 맡게되었는데, 이벤트에 응모하기 위해서는 오늘 날짜는 마감일보다 적거나 같아야 했다. 이를 프론트단 JavaScript로 막으려고 했는데, 서버에서 Model lottoDate로 'YYYY-MM-DD' 의 형식으로 마감일을 보내준다. 이것을 끊어서 서로 비교하려고 했는데, substr 와 substring이 헷갈렸다.

console.log() 로 확인했을 때도 substr(8, 10) 이라 해도 31이라고 나와서 특히 뭔 차이가 있는지 모르겠다는 생각을 했었다. 

JavaScript 에서 substr는(자를 곳 시작인덱스, 자를문자 갯수) 즉 substr(0, 4) 이면 0부터 4개를 뽑는다는 의미. (문자열의 길이가 4) 

subString(자를 곳 시작 인덱스, 자를 곳의 끝 인덱스). 즉 substring(5, 7) 이면 문자열의 길이가 2이다.

 

'정보 > Language' 카테고리의 다른 글

Kotlin : Hello, world!  (0) 2023.07.20
Enum을 사용한 메뉴관리  (0) 2022.08.26
java.util.HashMap  (0) 2022.07.29
JavaScript가 뭔가요 ?  (0) 2022.01.17
BufferedReader / BufferedWriter 클래스 알아보기  (0) 2022.01.05

뒤에 jdbcType=INTEGER 와 같이 명시해주어야한다.

 

 

 

 

프로젝트를 만들 때 Dependencies 를 선택하는 창이 나온다.

Web Programming을 할 것이니까 Web 탭에서 Rest Repositories(RESTful 사용), Spring Web Services 를 선택하자.

SQL탭에서는 MyBatis를 사용할 것이기에 이것을 선택했고 그 외는 사용할 DB의 Driver를 선택한다.

Server 를 따로 설치하지 않기 때문에 (이 전 Spring Tool 3에서는 톰캣을 직접 넣어주었으나 여기서는 No) Boot 에서 JSP 실행을 위해 embedded tomcat을 maven repository 에서 검색한 후 version은 boot가 관리하기 때문에 version을 지운 후 넣는다.

html, css, JSP를 위해서는 상단 바 help에서 Marketplace에 들어가고 

이 것을 다운 받아준다.

매퍼의 위치를 지정해준다.

 

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sp.app.mapper.BoardMapper">

xml 파일에 위 내용이 들어가야한다. namespace는 Mapper의 위치를 쓰면된다. 그 이후 BoardMapper.java 에 있는 메소드 명과 같이 id를 주면 된다.

 

https://mybatis.org/mybatis-3/ko/getting-started.html

 

MyBatis – 마이바티스 3 | 시작하기

Copyright © 2009–2021MyBatis.org. .

mybatis.org

 

자세한 사항은 공식문서 확인하기

 

 

표현 언어(Expression Language) 란?

- 스크립트 요소의 사용 없이 JSP 페이지에 값을 표현할 수 있는 태그 기반의 스크립트 언어이다.

- 표현 언어는 JSP 2.0버전부터 추가되었다.

- JSP 2.2(Tomcat 7.0) 부터는 EL에서 객체의 메소드를 직접 접근 할 수 있는 기능이 추가 되었다.

- 표현 언어는 JSP의 스크립트 요소 (스크립트 릿, 표현식, 선언부)를 제외한 나머지 부분에서 사용될 수 있다.

- EL 2.0은 JSP 2.2(Tomcat 7.0), EL 3.0은 JSP 2.3(Tomcat 8.0)에서 지원한다.

 

기능

- JSP의 네 가지 기본 객체가 제공하는 영역의 속성 사용

page, request, session, application에 binding된 attribute나 그 attribute의 property 값 출력

- collection 객체에 대한 접근 방법 제공

- 수치 연산자, 관계 연산자, 논리 연산자 등의 EL연산자 제공

- 자바 클래스의 메소드 호출 기능 제공

- EL 내장 객체 제공

 

형식

${expression}

- 중괄호에 있는 표현식은 런타임에 평가되고 출력 스트림으로 전송된다. 

 

 

ch10

ex01 - 사칙연산 및 연산

더보기
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>EL</h3>

<p>사칙연산</p>
<p> ${3+5} <!-- 8 : Long형 --> </p>
<p> ${3+"5"} <!-- 8 : Long형 --> </p>
<p> 3+null의 결과는 0 (null은 0으로 변환되어 연산) : Long형 --> </p>
<p> ${10/5} <!-- 2.0 : Double형 --> </p>
<p> ${13/5} <!-- 2.6 : Double형 --> </p>
<p> ${13 mod 5} <!-- 3 --> </p>
<p> ${13 % 5} <!-- 3 --> </p>
<p> EL에서는 "A"+"B" 처럼 문자열 결합을 하면 에러가 발생한다. </p>
<hr>

<p>비교/논리 연산</p>
<p> 3 == 4 : ${3==4 }, 3 eq 4 : ${3 eq 4 } </p>
<p> 3 != 4 : ${3 !=4 }</p>  <%-- 3 ne 4 : ${3 ne 4 } 이것도 됨 --%> 
<p> 3 lt 4 : ${3 lt 4 }, ${ 3<4 }</p>
<p> 3 gt 4 : ${3 gt 4 }, ${ 3>4 }</p>
<p> 3 le 4 : ${3 le 4 }, ${ 3<=4 }</p>
<p> 3 ge 4 : ${3 ge 4 }, ${ 3>=4 }</p>

<p> empty name : ${empty name}</p> <!-- 속성이름에 name이 없으므로 true -->
<!-- empty는 값이 null, 빈문자열, 길이가 0인 배열은 true -->

<p>  ${10%2==0?"짝수":"홀수" }</p>

<p> 기타 연산 </p>
<p> 문자열 결합 : +=, ${"서울" += "경기"}</p>
<p> 세미콜론연산자 - a;b 에서 a는출력 되지 않고 b만 출력</p>
<p> ${1+2; 2+5 } - 결과 : 7</p>
<p> 할당 연산자 : 할당연산 자체도 출력 </p>
<p> ${a=10 } ${a} - 결과 10 10</p>
<p> ${a=10; a } - 결과 : 10 </p>

</body>
</html>

 

ex02 EL 내장객체

더보기
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>EL 내장 객체</h3>

<p> pageContext : 현재 페이지의 설정 정보</p>
<p> ContextPath : <%=request.getContextPath() %> </p>
<p> ContextPath : ${pageContext.request.contextPath } </p>
<hr>

<p> header : 요청 헤더 정보 </p>
<p> User-Agent : ${header["user-agent"]} </p>

</body>
</html>

 

ex03 - 객체 EL 로 표현

더보기
<%@ page import="ch10.user.User" %>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	request.setCharacterEncoding("utf-8");

	User dto = new User("홍길동", 10, "010-1111-1111");
	request.setAttribute("vo", dto);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<jsp:forward page="ex03_ok.jsp">
	<jsp:param value="서울" name="city"/>
</jsp:forward>


</body>
</html>
<%@page import="ch10.user.User"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<!-- 
	EL의 주 사용 목적은 request, pageContext, session 등에서 
	설정한 속성(attribute)을 출력하기 위해 사용한다. 
-->

<h3>EL을 사용하지 않는 경우</h3>
<%
	User vv = (User)request.getAttribute("vo");
	String city = request.getParameter("city");
%>
	<!-- 필드의 값이 null인 경우 null로 출력 된다. -->
<p> <%=vv.getName() %>, <%=vv.getAge() %>, <%=vv.getTel() %>, <%=vv.getSubject() %></p>
<p> <%=city %> </p>

<h3>EL을 사용하는 경우</h3>
	<!-- 필드의 값이 null인 경우 아무것도 출력되지 않는다. -->
<p> ${vo.name}, ${vo.age}, ${vo.tel}, ${vo.subject } </p>

<!-- 파라미터는 param이라는 내장 객체 -->
<p> ${param.city} </p> <!-- request.getParameter("city"); 와 유사 -->

</body>
</html>

 


JSTL(JSP Standard Tag Library) 이란?

- JSP에서는 사용자가 태그를 정의해서 사용하는 것이 가능하며, 이런 사용자 정의 태그를 커스텀 태그라고 하는데 이들 중 자주 사용하는 것을 표준으로 만들어 놓은 것이 JSTL 이다.

- JSTL은 JSP의 공통적인 핵심 기능을 캡슐화한 태그 모음이다.

- JSTL은 반복(iteration) 및 조건문, XML문서 조작을 위한 태그, 국제화 태그 및 SQL 태그와 같은 일반적인 구조 작업을 지원한다.

- JSTL과 커스텀 태그 및 JSP액션태그는 XML 기반에서 작성이 되었기 때문에 모든 태그는 시작 태그와 종료 태그의 쌍으로 이루어져야 한다.

- 시간, 날짜, 숫자의 포맷이나 문자열 가공 등의 처리에서 비즈니스 로직과 프리젠테이션 로직을 분리할 수 있다.

- JSTL은 EL(Expression Language)를 사용하여 표현한다.

- JSTL 1.2버전은 Tomcat 6.0부터 사용 가능하다.

 

JSTL 사용을 위한 jar

- JSTL은 커스텀 태그의 일종으로 자바로 작성된 tag이므로 다음의 라이브러리가 필요하다.

- jstl-1.2.jar의 maven dependency

<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jstl</artifactId>

<version>1.2</version>

</dependency>

 

taglib 지시어

- 사용자 정의 태그나 JSTL사용을 위한 태그 라이브러리를 지정한다.

- taglib 지시어는 사용자 정의 태그, JSTL의 라이브러리 위치를 식별하고 JSP 에서 사용자 정의 태그 및 JSTL을 식별하기 위한 방법을 선언한다.

- 형식

<%@taglib uri="uri" prefix = "prefixOfTag">

- 속성

uri : 태그 라이브러리 URI 또는 태그 라이브러리 디스크립터 파일의 URI

prefix : 사용자 정의 태그 접두사(태그를 식별하기 위한 이름)

- 사용 예

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

ex04 - core 태그 사용 c:if

더보기
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	request.setCharacterEncoding("utf-8");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<!-- form 태그에서 action을 생략하면 자신의 주소가 action이 된다. -->
<form method="post" action="ex04.jsp">
<p>
	<input type="text" name="num" placeholder="숫자" required="required" pattern="\d+">
	<button type="submit">확인</button>
</p>
</form>

<!-- c:if 태그는 조건이 참인 경우에 실행하며, else 구문은 존재하지 않는다. -->
<c:if test="${ not empty param.num }">
	<p>
		${param.num} : ${param.num % 2 == 0 ? "짝수":"홀수"}
	</p>
</c:if>

<c:if test="${ not empty param.num }">
	<p>
		<c:if test="${param.num%2==0}">
			짝수
		</c:if>
		<c:if test="${param.num%2==1}">
			홀수
		</c:if>
	</p>
</c:if>

</body>
</html>

 

ex05 - c:choose 다중 선택구문

더보기
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>c:choose : 다중 선택 구문</h3>

<form action="ex05.jsp" method="post">
<p>
	<input type="text" name="num" placeholder="숫자" required="required" pattern="\d+">
	<button type="submit">확인</button>
</p>
</form>
<hr>

<c:if test="${not empty param.num }">
<p>
	<c:choose>
		<c:when test="${param.num%3==0 && param.num%4==0 and param.num !=0}">
			${param.num} : 3과 4의 배수
		</c:when>
		<c:when test="${param.num%3==0 && param.num !=0}">
			${param.num} : 3의 배수
		</c:when>
		<c:when test="${param.num%4==0 && param.num !=0}">
			${param.num} : 4의 배수
		</c:when>
		<c:otherwise>
			${param.num} : 3 또는 4의 배수가 아님
		</c:otherwise>
	</c:choose>
</p>
</c:if>

</body>
</html>

 

로그를 찍히게 하기 위해 pom.xml 에 추가해야 하는 dependency가 있다.

 

<!-- https://mvnrepository.com/artifact/ch.qos.logback/logback-classic -->
<dependency>
    <groupId>ch.qos.logback</groupId>
    <artifactId>logback-classic</artifactId>
    <version>1.2.10</version>
    <scope>test</scope>
</dependency>

 

scope를 runtime으로 바꿔주어야 다 찍힌다.

 

pom.xml 에서 자바 버전과 스프링프레임워크의 버전을 바꿔줄 수 있다. 

 

dependency를 확인할 수 있는 사이트 : https://mvnrepository.com/

jdbc와 transaction을 위한 dependency를 추가했는데, 버전부분을 ${org.springfrwamework-version} 으로 바꾸면 위에서 보았던

<properties>

  :

   <org.springframework-version>5.3.13</org.springframework-version>

 

</properties>

<org.springframework-version> 태그 안의 값으로세팅되기 때문에 나중에 버전을 일일히 바꿀 필요가 없어서 좋다.

프로젝트를 생성하고 나서는 Project Facets 에서 자바 버전을 맞춰주어야한다. 내가 깔은 자바 버전은 1.8 이기때문에 바꿔주었다. Dynamic Web Module 의 경우도 Servlet 3.1을 쓰기 때문에 바꿔주었다.

 

여기서 설정한 환경 변수가 classpath:/의 위치이다.

DB연결을 위한 JDBC, DBCP, Pool dependency도 검색해서 추가.

MariaDB 사용을 위한 dependency 추가 maven repository 에서 검색해서 넣어주면 된다.

오라클을 사용하려면 위 dependency를 추가한다.

mybatis 를 쓸 것이기 때문에 pom.xml 에 관련 사항도 추가해주자.

이 두개의 xml 이 객체 생성의 역할을 맡는다. 

mybatis의 객체생성을 위해서 root-context.xml 에 import 태그로 mybatis 를 연결해 객체생성을 할 수 있도록 한다.

 

 

 

POST 방식으로 통신하게 될 때 한글 깨짐 현상을 방지하기 위해서 POST방식을 UTF-8로 인코딩설정하기

하나라도 오타가 있으면

이렇게 ???로 한글이 깨져서 들어가게된다. 

주의할 것

 

이외 JSP, HTML, CSS 등 인코딩을 UTF-8로 바꿔주고

workspace의 인코딩도 UTF-8로 바꿔준다.

 

웹 브라우저를 Chrome 으로 선택하기

 

 

환경설정은 아무래도 처음 깔았을 때 빼고는 안하다 보니까 + 처음에는 선생님께서 하라는 대로 했기 때문에 자세히 기억이 안났는데 다시 처음부터 하다 보니까 오히려 이게 이렇게 필요한 거구나 하면서 알게되었던 것들이 있다. 

 

 

+ Recent posts