Jio.log

TIL 10 | 지오 마켓 03 Axios로 네트워크 통신 후 상품 정보 불러오기

Fri, 14 May 2021 08:15:11 GMT

진행 상황

javascript로 서버 구축 전, 포스트맨으로 임시 서버를 만든 상태.

axios.get 사용 전 코드 상태

Axios 네트워크 통신 과정

1. 헤더에 axios 외부 javascript 링크 추가


  
    지오마켓

2. axios.get 추가

URL은 포스트맨에서 만들어둔 mock-server의 값을 사용.

script 태그에 axios 네트워크 통신하는 코드 작성.
비동기 처리, 프로미스 객체이므로 then과 catch 사용.
네트워크 통신이 정상이면 콜백 함수 실행, result 받음.
result.data.products 객체에 접근 후 products 변수에 담고
productsHtml 값에 문자 형태로 태그들을 넣어주고
html 태그 접근 후 innerHTML로 값을 넣어준다.

TIL 09 | JSON?

Fri, 14 May 2021 06:31:27 GMT

JSON은 JavaScript Object Notation의 약자이다. 데이터 저장 또는 전송할 때 많이 사용하는 DATA 형식이다. 즉 네트워크 통신에 필요한 데이터를 주고받거나, 개발 과정에서 간단한 데이터를 저장하는 경우에 사용한다.

JSON은 JavaScript 객체 표현식이 기본이라서 네트워크 통신을 통해 json 데이터를 받으면 JavaScript 객체로 쉽게 변환이 가능하다. 또한 JavaScript 객체를 json으로 변환하는 것도 쉽게 가능하다.

규칙

key : value 형태이다. key는 항상 "" 로 표현한다.
value에는 문자열, 숫자, 배열, 객체를 넣을 수 있다.

값을 나열할 때 , 를 사용하고, 마지막엔 , 를 넣지 않는다.

{
 "name" : "딸기",
 "price" : 150000,
 "seller" : {
     "name" : "지오",
     "email" : "easyone.jio@gmail.com
 }
}

TIL 08 | Postman mock server 만들어보기

Sun, 09 May 2021 14:40:45 GMT

API Test Tool인 Postman으로 mock server를 만들어보았다. 아래의 INITIAL VALUE 값을 URL로 사용할 수 있다.

어떤 응답을 줄 것인가?

통신 결과 받아보기

SEND를 누르면 Body에 위 결과가 나타난다. INITIAL VALUE 값의 URL로 접속하면 위 결과가 나타난다.

TIL 07 | Axios 통신

Sun, 09 May 2021 13:55:55 GMT

외부 라이브러리 사용

axios를 사용하려면 아래 코드를 불러오면 된다. Using jsDelivr CDN:

Axios 통신

axios는 기본적으로 비동기 처리를 하는 promise 객체를 리턴한다.

// 예시
axios.get(url주소) 
axios.post(url주소,data 객체) 

//기axios 메소드는 promise 객체를 return
axios.get(url주소).then(function(result){
    //result 객체에는 status, data와 같은 정보가 들어감.
}).catch(function(error){

})

아래와 같이 사용할수 있다.

Devtools 켜보면 아래와 같이 status code와 data 정보가 나타남.

참고 사이트 https://jsonplaceholder.typicode.com/ https://github.com/axios/axios

TIL 06 | Javascript 비동기 처리 개념

Sun, 09 May 2021 09:45:31 GMT

기본 개념

자바스크립트의 코드 인터프리터는 브라우저 내부에 탑재되어 있다. 자바스크립트 코드를 브라우저에서 실행시키기 위해서다. 그런데 만약 특정 코드에서 결과를 얻기까지 오랜 시간이 걸린다면, 아래 코드는 실행이 안되므로 정상 동작하지 않을 것이다. 대표적으로 네트워크 통신과 복잡한 계산을 실행하는 코드가 있다. 이를 해결하기 위해 자바스크립트는 비동기 방식을 지원한다. 비동기 처리가 적용된 코드는, 실행이 되면 다음 코드가 실행되고, 결과를 얻으면 인터프리터가 다른 코드를 처리하다가, 중간에 비동기 처리의 결과를 처리하게 된다.

//비동기 처리 방식인 setTimeout
setTimeout(function(){
    console.log('3초 후 실행');
}, 3000)
console.log('먼저 실행');

Promise 객체

Promise 객체는 javascript에서 비동기 처리를 지원하는 객체 중 하나이다. 정상 실행이 끝난 후 실행되는 then 함수(메소드)와 에러 발생 시 실행되는 catch 함수를 가지고 있다. 대표적으로 사용하는 Promise 객체는 fetch 함수가 있고, fetch는 네트워크 통신 함수이다.

fetch('URL 주소')
.then(function(response){ //then 함수에 callback 함수를 입력
    //응답받을 때 수행하는 코드 작성
    //정상 실행 시 response에는 fetch의 결과가 들어감.
})
.catch(err => {  //catch 함수에는 callback 함수를 입력
    //비동기 작업 실패 시 수행하는 코드 작성
    //err에는 에러 관련 정보들이 들어감.
})
console.log('네트워크 통신 완료 여부 관계없이 바로 실행');
console.log('네트워크 통신 완료 여부 관계없이 바로 실행');

TIL 05 | Javascript 콜백 함수 기본 개념

Sun, 09 May 2021 09:14:44 GMT

함수는 매개변수(Parameter)를 넣을 수 있고, 값을 반환할 수 있다. 콜백 함수는 함수가 나중에 불린다고 해서 붙여진 이름(CallBack)이다. 보통 콜백 함수는 함수의 인자(Argument)에 함수를 넣는 방식으로 사용한다. 콜백 함수는 자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출되도록 사용하는 함수이다. 이때 비동기 처리 방식의 문제점은 특정 코드의 연산이 끝날 때까지 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

function sayHello(){ 
  console.log('안녕하세요 지오입니다.');
}

function sayCallback(callback){ 
  callback(); 
}

sayCallback(sayHello)

sayHello 함수를 만들어 준다.
sayCallback 함수의 파라미터에 callback 함수가 들어간다.
sayCallback의 파라미터인 callback에는 sayHello가 들어가고, 그 결과 sayHello가 실행되므로, 안녕하세요 지오입니다. 가 출력된다.

TIL 04 | 클라이언트와 서버, HTTP 통신 기초 정리

Sun, 09 May 2021 08:37:55 GMT

클라이언트와 서버

클라이언트(Client)와 서버(Server)

클라이언트는 정보를 요청하고, 서버는 요청한 정보를 제공한다. 정보를 불러오고 사용자의 요청을 처리하기 위해 파일 서버, 인증 서버, API 서버와 네트워크 통신을 하게 된다.

HTTP 통신

개요

네트워크 통신은 여러가지 방식이 있다. 이러한 방식들을 묶어서 통신 프로토콜이라 부르고, 메일 주고 받을때 사용하는 SMTP 프로토콜, 파일 전송에 사용하는 FTP 프로토콜 등이 있다. HTTP 프로토콜은 브라우저가 웹 서버와 통신을 하기 위해 생겨난 프로토콜이다. 대부분의 네트워크 통신에 사용하는 대중적인 프로토콜이다. 이때 HTTP 프로토콜을 활용한 통신이 바로 HTTP 통신이다.

요청(request)과 응답(response)

HTTP 통신은 기본적으로 요청(request)과 응답(response)로 나눈다. 요청과 응답 모두 공통적으로 요청 라인, 헤더, 바디의 구조를 지닌다. 요청 라인에는 URL, Method와 같은 핵심 요청 정보가 포함된다. 이는 요청과 응답에 따라 구성 요소가 달라진다. 헤더에는 HTTP 설정 값들이 포함되고, 바디에는 통신에 필요한 데이터가 들어간다. HTTP 통신으로 서버에게 정보를 요청하기 위해서는 몇가지 규칙을 지켜야 하는데, 첫번째로 URL이 있어야 하고, 어떤 방식으로 통신 할것인지에 대한 Method가 있어야 한다.

HTTP Method

클라이언트가 서버에게 HTTP 요청을 하려면, URL 주소와 HTTP Method를 정해야 한다. 서버에서는 Method에 따라 어떤 요청인지 파악이 가능하다. 대표적으로 GET, POST가 존재한다. 재밌는 점은 클라이언트가 서버에게 동일한 URL 주소로 요청하더라도, 서버 입장에서는 Method가 다르면 다른 요청으로 간주하고 처리하게 된다.

GET

일반적으로 정보를 받아올때 사용한다. 요청 시 Method 설정을 안하면 기본 Method로 GET이 들어간다. 웹서버에서 웹을 다운받거나, 상품 정보들을 받아올때 GET을 사용한다. GET 방식은 서버에 데이터를 전송해야 할 때 url 끝에 query 라는 것을 붙인다. query는 key=value 형태로 구성되어 있다.

POST

새로운 자원을 생성할때 사용한다. 대표적으로 로그인, 상품 업로드, 결제하기 등 정보를 담아서 보내야하는 경우 많이 사용한다. POST도 GET과 마찬가지로 URL 뒤에 query를 붙일 수 있다. 또한 GET은 Body에 데이터를 담을 수 없지만, POST는 HTTP Body 부분에 데이터를 담을 수 있다. Body는 HTTP 통신에 구조적으로 데이터를 담아서 전송할수 있게 도와주는 역할을 한다.

HTTP 응답

응답 규칙은 아래와 같다.

어떤 상태인지에 대한 정보 Status Code
Body에 요청 결과를 담아야 함.

이때 Status Code 는 200~ 500 번까지 있으며 서버의 응답에 대한 상태를 표현한다. 요청 코드를 크게 나눠보면 아래와 같다.

200 ~ 정상적으로 응답을 했을 때. 400 ~ 클라이언트가 요청을 잘못했을 때. 500 ~ 서버에서 에러가 발생했을 때.

대표적인 응답 코드는 아래와 같다.

200 : 정상 404 : URL 요청을 처리 불가 500 : 서버 에러 발생

https://developer.mozilla.org/ko/docs/Web/HTTP/Status 더 많은 HTTP 상태 코드는 위 공식 문서에 정리되어 있다.

TIL 03 | Mac OS 아나콘다 Jupyter Notebook Lunch 경로 에러 해결하기

Thu, 06 May 2021 14:07:30 GMT

Mac OS 아나콘다 Jupyter Notebook 경로 오류 해결 방법을 작성하였다.

코드를 한 줄씩 작성 및 실행하여 결과 확인 가능하고, 문서처럼 코드를 작성하여 정리해 볼 수 있는 유용한 툴인 Juptyter Notebook 활용하고자 아나콘다를 설치했다. 아나콘다는 파이썬 컴파일러 또는 Juptyter Notebook과 같은 주요 라이브러리를 한꺼번에 설치해 주므로 편리하다.

그런데 사진 속 Juptyter Notebook의 Lanch를 눌렀더니, 아나콘다 no such file or directory 오류로 실행이 안 되었고, 해결 방법을 정리하게 되었다.

원인

정확한 것은 아니지만 아나콘다 네비게이터 설치 시, 대상 디스크 선택란에 사용자 본인 전용과 특정 디스크에 설치가 존재했고, *사용자 본인 전용으로 설치한 게 문제가 된 것 같다. *

발생한 오류가, https://youngq.tistory.com/78 해당 블로그의 현상과 가장 유사하여, 환경 변수 설정에 문제가 있는 것 같아 추가 조사 중, https://acdongpgm.tistory.com/120 블로그를 발견하였고, 참고하여 아래와 같이 해결하였다.

해결 순서

(선택)아나콘다 라이브러리 업데이트

conda upgrade --all

환경 변수 설정 문제와 크게 관련 없어 보이지만, Mac OS로 아나콘다를 설치하고 Jupyter Notebook을 실행하면 500 error 발생하여 사용하기도 전에 엄청 고생했다는 포스팅을 발견하여 라이브러리 업데이트를 해주었다.

1. 아나콘다 설치 경로로 이동

환경 변수 설정을 해야 하기 때문에 우선 아나콘다가 설치된 경로로 이동해 준다.

/Users/사용자 이름/opt/anaconda3

2. 환경변수 설정

터미널에 아래와 같이 입력해 준다.

$ echo 'export PATH="/Users/사용자 이름/opt/anaconda3/bin:$PATH"' >> ~/,bashrc
$ echo 'export PATH="/Users/사용자 이름/opt/anaconda3/bin:$PATH"' >> ~/,zshrc
$ source ~/.bashrc
$ source ~/.zshrc

3. 재실행

성공!

TIL 02 | 지오 마켓 02 Javascript로 HTML CSS 조작하기

Thu, 06 May 2021 06:56:37 GMT

인프런 강의에서 학습한 내용을 정리하고 복습한다.

1편에서 HTML과 CSS로 상품 레이아웃을 연습하고 마켓 제작에 필요한 자바스크립트 기초를 학습하였다. 오늘은 학습한 자바스크립트를 활용하여 정적인 데이터들을 동적인 데이터로 바꿔보았다.

진행한 내용을 정리해두니 정리하는 과정에서 한번 더 생각하게 되고, 자기 전에 복습 용도로 활용이 가능할 뿐 아니라, 이동 중에도 모바일로 볼 수 있어서 큰 도움이 되고 있다.

현재 듣고 있는 인프런 강의 과정이 모두 끝나면 프론트와 백엔드 중 집중 학습할 분야가 정해질 것 같다. 현재 얇고 넓게 학습하는 이유는 재밌고 흥미 있는 분야를 찾기 위해서다. 그러려면 직접 해보는 것이 중요하다. 일단 스스로가 재밌어야 꾸준히 할 수 있다. 꾸준히 지속 가능한 환경과 학습 방향을 찾아가는 것이 목표다.

마음 끌리는 분야가 정해지면 다시 기초부터 관련 기술 스택들을 T자형으로 깊게 학습할 예정이다.

정적 데이터와 동적 데이터

위 사진은 1편에서 만들었던 HTML 구조와 웹에 보이는 모습이다. product-img, product-name, product-price, product-seller, product-avatar 정보들은 HTML과 CSS 연습을 위해 임의로 적어둔 데이터들이다. 해당 정보를 지우면 안 보이고 다시 값을 넣으면 보이는 정적인 데이터이다.

그런데 신상품(2편에서는 특가 상품으로 이름 변경) 신상품 아래 상품들은 마켓 특성상 언제든 바뀔 수 있고, 바뀌어야 한다. 상품 업로드 기능을 구현하게 되면 그때마다 상품들이 자동으로 바뀌어야 하므로 HTML 구조 또한 자동으로 바뀌어야 한다.

따라서 마켓 기능을 갖추기 위해 1편에서 학습한 자바스크립트 기초 문법을 활용하여 상품 정보를 정적인 데이터에서 동적인 데이터로 만들어보았다.

script에 배열 만들기

나중에 네트워크 통신을 통해 상품 데이터를 받을 예정이다. 우선 상품 데이터를 받았다고 가정하고 script 안에 배열을 만들어 준다. 앞서 배운 자바스크립트 기초 문법을 지오 마켓 제작에 활용한 것이다.

자바스크립트로 HTML, CSS 조작하기

위에 만들어둔 products 데이터를 바탕으로 상품 정보들을 만들기 위해선 자바스크립트로 HTML과 CSS 조작이 필요하다. 현재 조작 필요한 콘텐츠는 우측 사진 product-list 안의 콘텐츠이다. 해당 콘텐츠를 조작하기 위해 document.querySelector와 innerHTML을 활용하였다. 아래와 같이 변수와 반복문을 활용하여 productsHtml에 태그들을 더하고, 변경된 데이터가 나타날 수 있도록 만들어보았다.

TIL 01 | 지오 마켓 01 HTML CSS Javascript Basics

Thu, 06 May 2021 06:08:54 GMT

인프런 강의에서 학습한 내용을 정리하고 복습한다.

HTML CSS

HTML 요소들을 자유자재로 배치하기 위한 방법에는 여러 가지가 있는데, Flex를 활용하여 HTML 요소를 정렬했다. Flex의 핵심은 Container(부모)와 Item이라 생각되고, Container(부모)의 첫째 자식인 Item들을 Flex를 통해 정렬할 수 있다. Flex 정렬은 Container(부모) 기준으로 자식을 정렬하기 때문에 이점을 고려해서 사용해야 한다. 위 HTML 코드는 상품을 나타내고 정렬시키기 위한 뼈대이다. product-list라는 id 선택자에 상품 정보를 담을 수 있는 product-card class를 만들었고, 그 안에 img, contents, name, price, seller, avatar와 같은 요소들을 클래스로 만들었다.

product-list라는 선택자를 제외한 요소들은 지오 마켓에서 공통적으로 사용할 상품 뼈대이므로 class를 활용했고, 1개의 뼈대를 잡아두면 나머지 상품들은 복사 붙여 넣기로 추가가 가능했다.

product-list라는 Container(부모) 안에, product-card라는 첫째 자식이 있고, 정렬 필요한 부분은 아래와 같다.

상품 이미지(product-img)

이때 아래와 같이 product-list라는 Container(부모)에 display: flex;를 줘야, 상품 이미지(product-img)의 부모인 product-card 요소가, flex 상태가 되면서 원하는 정렬이 가능해진다. 만약 부모를 flex로 만들지 않고, 중앙 정렬을 시키고 싶다면, 아래와 같이 중앙 정렬시키고 싶은 요소의 margin 값을 0 auto로 주면 된다. 상황에 따라 적절하게 사용하면 좋았다.

Javascript

변수&자료형

변수 선언

변수 선언은 어떤 변수를 사용할지 정하는 작업이다. javascript는 const, var, let을 사용한다.

변수 정의

변수 정의는 선언된 변수에 값을 넣는 작업이다.

변수 선언&정의 정리

변수명(camelCase와 snake_case)

변수명은 영문과 숫자로 지어야 하고, 띄어쓰기와 특수문자는 불가하다. 변수명 작성은 camelCase 또는 snake_case 형태로 짓는 게 좋다.

자료형

기본 자료형(Primitive Type)은 모든 프로그래밍 언어의 공통된 요소이다. string(문자), number(숫자), boolean(참/거짓)이 존재하고, javascript에는 null과 undefined 자료형도 존재한다. 보통 null은 값이 없을 때 사용하고 undefined는 변수를 선언만 하고 정의하지 않은 상태일 때 사용한다. 또한 변수의 자료형을 확인하는 문법으로 typeof 가 존재한다.

Array(배열)

Array는 object(객체)의 종류 중 하나로 object 자료형이다. 배열 또는 리스트(List)로도 불리는데, 데이터를 순차적으로 담을 때 사용한다. 지오 마켓 상품 정보들을 사용자에게 보여주려면, 상품 정보들이 배열에 담겨야 한다. 배열을 사용할 때는 Bracket([])을 사용하는데, 배열의 길이를 알고 싶다면. length, 값을 조회하려면 [순서], 새로운 값을 추가하려면. push(값)을 사용하면 된다. [추가할 순서]도 사용이 가능하지만, 선호하는 방식은 아니다. 또한 배열에는 숫자형, 문자형과 같은 모든 자료형을 넣을 수 있고, 배열 안에 배열 또한 가능하다.

객체(object)

객체는 key, value 형태로 자료를 저장하는 자료형이다. 지오 마켓 상품에는 상품 제목, 가격 등의 데이터가 들어갈 텐데 product라는 객체 안에 상품 이름(name)과 가격(price)을 넣게 된다. 예를 들어 아래와 같은 객체를 생성하고 name 값을 가져오고 싶다면, 배열에서 값을 가져오는 방식처럼 [] 안에 key 값을 넣어준다. 또는 객체. key 방법으로도 값을 가져올 수 있다. 과정을 살펴보면, 먼저 name, description, price 정보가 담긴 product라는 객체를 생성하였다. 이후 객체 안의 name 정보인 딸기를, productName 변수에 넣어주기 위해 배열에서 값을 가져오는 방식처럼 product ['name'];을 해주었다. 따라서 productName에 product 객체 안의 name값이 저장되어 딸기가 출력된다.

또한 객체. key 방법으로도 값을 가져올 수 있다. 생성된 객체는 위와 동일하고, productDescription 변수에 객체의 description 값인 싱싱한 딸기를 넣어주기 위해 product.description을 하였다. 따라서 값이 저장되었으므로 productDescription을 하면 싱싱한 딸기가 출력된다.

object, array 자료형을 이용해서 배열 만들기

두 개의 배열을 만들었고 만약 1번째 배열의 price를 가져오고 싶다면 아래와 같다.

연산자

기본 연산자

비교 연산자

부정 연산자

논리 연산자

조건문

반복문

함수

선언식과 표현식

파라미터와 리턴

파라미터란 함수의 () 내부에 입력하는 값을 의미한다. 함수의 파라미터를 활용하면 함수를 좀 더 확장성 있게 사용이 가능하고, 문자+숫자 형태로 활용할 수 있다. 리턴(return)으로 함수의 값을 반환할 수 있다. string, nubmer, 배열, 객체뿐 아니라 함수 또한 return이 가능하고, 함수에서 return 하게 되면 return 아래 있는 코드는 실행되지 않는다. 또한 함수 안에 선언된 변수는 밖에서 사용이 불가하고, 함수 밖에서 선언된 변수는 함수 안에서 사용이 가능하다.