Happy things are always here! ꔷ̑◡ꔷ̑

[Javascript] fetch api로 GET/POST 데이터 전송하기

hiolivia — Thu, 9 Jun 2022 16:43:06 +0900

fetch는 비동기 방식으로 HTTP 요청을 날리고 응답을 받을 수 있는 api입니다.

우리가 fetch 예제를 보면 흔히 다음과 같이 사용할 것입니다.

fetch('http://localhost/project/example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
  	name: 'olly',
    age: 20
  })
})

하지만 example.php에서 다음과 같은 코드를 작성했다면 값을 받아올 수 있을까요?

echo $_POST['name'];
echo $_POST['age'];

결과를 보면 아무것도 출력되지 않습니다. 그 이유는 body에서 데이터를 json 형태로 전송했기 때문에 php에서 post로 데이터를 받아올 수 없었던 것입니다.

fetch를 사용해 GET/POST 전송을 하려면 다음의 코드를 참고할 수 있습니다.

fetch('http://localhost/project/example.php', {
  method: 'POST',
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: new URLSearchParams({
    name: 'olly',
    age: 20
  })
})

이렇게 header와 body 부분을 변경해주면 POST로 보낸 데이터를 잘 받아오는 것을 확인할 수 있습니다.

fetch와 관련된 더 자세한 내용은 아래의 링크에 잘 나와 있습니다.

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() (en-US) 메서드로 네트워크의 리소

developer.mozilla.org

[php] 외부 api 통신을 위한 curl 인증서 설정 (Window/IIS)

hiolivia — Wed, 8 Jun 2022 15:00:51 +0900

외부 api와 통신하는 도중 아무리 해도 값을 받아올 수가 없어서 헤메던 중 curl 통신 시 SSL 인증서 설정이 빠졌다는 것을 알게 되었습니다.

코드에는 전혀 문제가 없는데도 계속 에러가 뜬다면 curl 설정을 확인해보세요

설정이 안되어 있다면 다음의 제가 시도한 방법을 참고하시면 됩니다.

cacert.pem

0.21MB

우선 다음의 인증서를 다운받습니다. 중요한 것은 저장하는 경로인데요, php 파일 안에 ext라는 폴더가 있을거에요. 그 폴더 안에 넣어주세요!

저 같은 경우는 C:\Program Files\PHP\v7.2\ext 폴더에 넣었습니다.

다음은 php.ini 파일을 수정해주어야 합니다.

curl.cainfo = "C:\Program Files\PHP\v7.2\ext\cacert.pem" 

openssl.cafile= "C:\Program Files\PHP\v7.2\ext\cacert.pem"

curl.cainfo, openssl.cafile 이 두가지를 주석 제거해주시고 인증서 다운받은 경로를 정확히 입력해주세요.

마지막으로 웹서버를 다시 시작해주세요.

저는 웹서버로 IIS를 쓰고 있습니다. 오른쪽에 다시 시작 버튼을 눌러주세요.

curl ssl 인증서 등록이 잘되었는지 확인하려면 phpinfo() 출력문에서 curl 설정에 경로가 잘 지정이 되있는지 확인하시거나 다음의 코드를 입력해 어떤 에러가 뜨는지 확인해보시면 됩니다.

try {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, (통신할 외부 api 링크));
    curl_setopt($c, CURLOPT_POST, true);
    curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
    $res = curl_exec($c);

    print "<textarea>";
    print ("curl.cainfo: " . ini_get('curl.cainfo') . PHP_EOL);;
    print("curl error: " . curl_error($c) . PHP_EOL);
    print("result: " . htmlentities($res) . PHP_EOL);    
    print "</textarea>";
} catch (Exception $e) {
    throw $e;
}

이렇게 하면 외부 api를 호출했을 때 응답을 잘 받아오는 것을 볼 수 있습니다.

[SSL] http로 접속 시 https로 리다이렉션 (무한 새로고침 방지)

hiolivia — Tue, 7 Jun 2022 16:10:02 +0900

현재 가비아에서 호스팅을 쓰고 있는 웹사이트에 SSL을 적용시켜야 할 일이 있었습니다.

원래라면 SSL 인증서 구매 후 웹서버에 직접 적용을 시켜야 하지만 저는 가비아 호스팅을 쓰고 있었기 때문에 웹서버로 적용이 불가했습니다.

www.mywebsite.co.kr로 접속을 하면 자동으로 http://www.mywebsite.co.kr 로 접속이 되었기 때문에 https://www.mywebsite.co.kr 로 이동하도록 리다이렉션 해주었습니다.

여러 가지 방법을 시도해보았지만 무한 새로고침이 되는 것이었습니다...

하지만 구글링하다가 성공했습니다. 제가 성공한 방법은 다음과 같습니다.

해당 프로젝트 root 폴더의 .htaccess 파일을 수정해줍니다. .htaccess 파일이 없다면 그냥 하나 생성해주시면 됩니다.

그리고 다음의 코드를 붙여넣기 해주세요.

RewriteEngine On

RewriteCond %{HTTPS} off

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L

다시 url로 접속해보면 자동으로 자물쇠 아이콘이 보이면서 https로 접속한 것을 확인할 수 있습니다!

[php] composer 설치 및 사용법 on Window

hiolivia — Tue, 31 May 2022 10:32:54 +0900

(생활코딩님의 강의를 참고해 실습해보았습니다 )

composer란 package manger라는 소프트웨어입니다. 다른 사람이 만든 코드를 부품으로 자신의 프로젝트을 빠르게 만들 수 있는 기술이라고 할 수 있습니다.

composer를 사용하기 위해서는 설치가 필요한데요, 아래의 사이트에서 다운로드 받으시면 됩니다.

https://getcomposer.org/

Composer

A Dependency Manager for PHP Latest: 2.3.5 (changelog) Getting Started Download Documentation Browse Packages Issues GitHub

getcomposer.org

설치 중에 developer mode에 체크해주시고, 다운받을 위치는 php가 설치된 경로로 지정하시면 됩니다!

설치가 잘 되었다면 cmd 창을 연 다음, 'cd (php가 설치된 경로)'를 입력해주세요.

저는 다음과 같이 입력했습니다.

cd C:\Program Files\PHP\v7.2

php가 설치된 경로로 들어왔다면 다음의 명령어를 입력해주세요.

php composer.phar

요런게 나오면 설치 성공입니다!

다음의 코드를 터미널에 입력하면 php composer.phar를 다 입력하지 않고 composer만 입력해도 위의 화면이 나옵니다.

echo @php "%~dp0composer.phar" %*>composer.bat

요렇게 파일이 생성된 것을 볼 수 있습니다!

composer를 전역으로 사용하려면 환경변수의 path를 php가 설치된 경로로 등록해주시면 됩니다.

이제 composer를 사용할 준비가 끝났다면 프로젝트 폴더를 생성해주세요.

생성된 프로젝트 폴더에 composer.json 파일을 생성해주겠습니다.

터미널에서 cd (프로젝트 폴더 경로)를 입력해 해당 위치로 간 다음, 다음의 명령어를 입력해주세요.

composer init

json 파일의 설정을 할 수 있는데 필요한 정보는 입력하고 끝까지 엔터 누르면 프로젝트 폴더에 파일들이 생성됩니다.

이제 우리의 프로젝트에 필요한 부품 즉, 라이브러리를 사용하려면 "require" : 부분에 추가하면 됩니다.

원하는 라이브러리는 여기서 찾으실 수 있습니다.

https://packagist.org/

Packagist

Define Your Package Put a file named composer.json at the root of your package's repository, containing this information: { "name": "your-vendor-name/package-name", "description": "A short description of what your package does", "require": { "php": ">=7.4"

packagist.org

예를 들어 monolog라는 라이브러리를 사용해보겠습니다.

해당 라이브러리를 다운 받기 위해 다음의 명령어를 입력해주세요.

composer require monolog/monolog

저는 바로 VS code 터미널을 열어 입력했습니다. 설치가 되면서 require 부분에 다음과 같이 추가가 자동으로 되었습니다.

이렇게 해서 composer 설치와 의존성을 설정하는 것까지 성공했습니다! 다음 포스팅에서는 이 라이브러리를 어떻게 적용시킬 수 있는지 해보도록 하겠습니다.

[Javascript] JS session 세션 활용하기

hiolivia — Sat, 28 May 2022 11:56:36 +0900

JS 세션 활용법은 아주 간단한데요, 다음과 같습니다.

sessionStorage.setItem('name', 'olly'); //key, value
sessionStorage.getItem('name'); //olly
sessionStorage.length; //1
sessionStorage.key(0); //name
sessionStorage.removeItem('name'); // 파라미터 삭제
sessionStorage.claer(); // 세션 초기화

간단하게 세션을 활용할 수 있습니다!

[Javascript] url 파라미터 추출하기

hiolivia — Fri, 27 May 2022 10:42:04 +0900

우리가 GET 요청을 날릴 때 파라미터를 추출할 때가 있는데요, new URL() 객체를 사용해 할 수 있습니다.

현재 url 가져오기

window.location.href

현재 url의 파라미터만 가져오기

window.location.search

현재 url의 특정 파라미터를 지정해 값 가져오기

new URL(원하는 url).searchParams.get('파라미터키');

모든 파라미터의 키 얻기

const keys = new URLSearchParams(url).keys()
for(const key of keys) {
  console.log(key);
}

모든 파라미터의 값 얻기

const values = new URLSearchParams(url).values()
for(const value of values) {
  console.log(value);
}

파라미터 추가/변경/삭제 하기

new URLSearchParams(url).has("파라미터키") //파라미터가 있는지 체크
new URLSearchParams(url).append("파라미터키","파라미터값") //파라미터 추가
new URLSearchParams(url).set("파라미터키","파라미터값") //파라미터 수정
new URLSearchParams(url).delete("파라미터키") //파라미터 삭제

[Javascript] 시계(시,분,초) 구현하기

hiolivia — Mon, 23 May 2022 14:42:54 +0900

오늘은 다음과 같은 시, 분, 초로 구성되어 있는 시계 기능을 JS로 구현해보겠습니다!

function clock(){
  var date = new Date();
  var h = date.getHours();
  var hour = h<10 ? '0'+h : h;
  var m = date.getMinutes();
  var minute = m<10 ? '0'+m : m;
  var s = date.getSeconds();
  var second = s<10 ? '0'+s : s;
  $(".clock .time").text(hour+':'+minute+':'+second);
}
clock();
setInterval(clock,1000);

clock이라는 함수 안에 현재 시간을 구하는 함수들을 선언하고 setInterval을 사용해 1초에 한번씩 함수를 실행시켜줍니다. 그 결과, 초 단위까지 보이는 시계를 구현할 수 있습니다!

[React] fetch()로 restful API 구현

hiolivia — Fri, 20 May 2022 10:57:26 +0900

리액트에서 자바스크립트 메소드인 fetch()를 사용해 resful API를 구현해볼텐데요, fetch의 사용법은 다음과 같습니다.

fetch(url, {options})
//url: api 통신을 위해 접근할 url
//options: 매개변수, method를 지정

options에는 request (요청), response(응답)의 인터페이스가 들어갑니다.

request

- method

method는 우리가 알고 있는 HTTP method가 들어가는데요, 다음의 형식을 따릅니다.

C : POST

R : GET

U : PUT

D: DELETE

- header

header에는 request header를 지정해줍니다.

ex) "Content-Type": "application/json"

- body

body에는 전송할 데이터를 넣어주는데, 객체 타입으로 들어갑니다.

예제1 ) POST

- 영단어장에 새로운 단어 등록하기

fetch(`http://localhost:3001/words`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    day: day.current.value,
    eng: eng.current.value,
    kor: kor.current.value,
    isDone: false,
  }),
}).then((res) => {
  if (res.ok) {
    alert("저장이 완료되었습니다.");
    navigate(`/list/${day.current.value}`);
  }
});

요청을 날렸을 때 응답으로 ok, 즉 true를 반환한다면 alert 창을 띄우고, navigate를 사용해 링크를 이동시킵니다.

예제2 ) GET

- 영단어장 가져오기

fetch("http://localhost:3001/words")
  .then((val) => {
    return val.json();
  })
  .then((data) => console.log(data));

데이터를 json 형식으로 파싱해준 다음 사용합니다.

예제3) PUT

- 단어 수정하기

fetch(`http://localhost:3001/words/${props.word.id}`, {
   method: "PUT",
   headers: {
     "Content-Type": "application/json",
   },
   body: JSON.stringify({
     ...props.word,
     isDone: !done,
   }),
 }).then((res) => {
   if (res.ok) {
     setDone(!done);
   }
 });

해당 단어 학습 완료 시 완료 체크를 하면 상태 수정이 됩니다. props로 전달받은 state의 값을 변경해주기 위해 props.word를 복사해준 다음, isDone을 수정해주었습니다.

예제4) DELETE

- 단어 삭제하기

fetch(`http://localhost:3001/words/${props.word.id}`, {
  method: "DELETE",
}).then((res) => {
  if (res.ok) {
    setDel({ id: 0 });
  }
});

DELETE에는 전송할 데이터가 없기 때문에 body가 필요없습니다.

이렇게 fetch를 이용해 restful API를 구현할 수 있었습니다!

[HTML] meta 태그를 이용해 링크 전송 시 썸네일, 정보 수정하기

hiolivia — Thu, 19 May 2022 09:33:01 +0900

카카오톡이나 다른 방법을 이용해 링크를 전송할 때 뜨는 썸네일과 제목 등의 정보를 수정해보겠습니다!

meta 태그를 사용해 정말 간단하게 지정해줄 수 있습니다 :)

<meta property="og:url" content="http://dhffl.dothome.co.kr/">
<meta property="og:title" content="PORTFOLIO">
<meta property="og:description" content="안녕하세요 매일 성장하는 웹 개발자 Olly입니다✨">
<meta property="og:type" content="website">
<meta property="og:image" content="./img/olly.png">

저는 제 포폴 웹사이트에 지정해주었는데요, 어떻게 적용되는지 확인해보겠습니다.

썸네일과 제목, 웹사이트 설명 칸에 잘 들어간 것을 볼 수 있습니다! meta 태그를 이용해 간단하게 설정해주었습니다.

[php] php mysql 중복되지 않는 랜덤 숫자 생성하기

hiolivia — Tue, 17 May 2022 10:01:42 +0900

프로젝트 중 중복되지 않는 랜덤 숫자를 생성해 GET 요청을 날려야 했는데요, rand() 함수를 통해 해결했습니다!

*php와 mysql에는 rand() 함수가 있지만 서로 사용법이 다릅니다. 제가 사용한 rand()는 php 함수입니다.

사용법은 이러합니다.

rand(최솟값, 최댓값)

제가 구현해야 하는 건 두가지였는데요,

1. 6자리의 랜덤 숫자를 생성한다.

2. 중복되지 않는지 체크한다.

다음의 코드를 참고하시면 됩니다.

while(true){
    $rand = rand(100000,999999); //랜덤숫자 생성
    $id = $this->db->query("SELECT * from (테이블명) where (랜덤숫자 컬럼명) = $rand");
    if($id->num_rows()==0){ //중복 체크
        break;
    }
}

랜덤 숫자를 생성한 후 해당 컬럼에 그 숫자가 존재하는지 확인합니다. 있으면 다시 반복문을 돌리고, 없으면 반복문을 종료하고 생성된 랜덤 숫자를 사용합니다.

간단히 해결했습니다