1. CSS

① 부트스와치 사용법

  • <head>안에 아래 코드 넣어주기
  • <link href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.2/dist/united/bootstrap.css" rel="stylesheet">
  • https://bootswatch.com/

② 반응형 폰트 - 미디어쿼리 rem

  • px : 절대값으로 사용 되는 단위이다. 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않다.
  • rem : rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이를 말한다. 즉, html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다.
  • em : 부모 태그의 영향을 받는 상대적인 길이. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어려울 수 있다.
  • rem 계산해주는 사이트 : https://offroadcode.com/rem-calculator
  • em,px 계산해주는 사이트 : http://pxtoem.com
  • 참고 블로그 : https://www.daleseo.com/css-responsive-typography/

 

③ CSS inline, block, inline-block

 

2. 크롤링

① beautifulsoup - select() vs find()

  • find 메소드는 태그를 이용하여 원하는 부분을 추출합니다. 태그는 이름(name), 속성(attribut), 값(value)로 구성되어 있기 때문에 find로 해당 이름이나 속성, 값을 특정하여 태그를 찾을 수 있습니다.
  • 한편 select 메소드의 경우, CSS Selector로 tag 객체를 찾아 반환합니다. 이는 CSS에서 HTML을 태깅하는 방법을 활용한 메소드입니다. 다음과 같이 다양하게 select()를 사용할 수 있습니다.
  • 더 다양한 조건을 이용하여 더 직관적인 방법으로 태그를 찾기 위해서는 find보다는 select를 사용하는 게 적합합니다.
  • https://velog.io/@jisu0807/%EC%9B%B9%ED%81%AC%EB%A1%A4%EB%A7%81-BeautifulSoup%EC%97%90%EC%84%9C-find%EC%99%80-select-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

② 셀리늄

 

③ 웹드라이브

  • WebDriver는 Selenium IDE와 달리 Firefox, Chrome뿐만 아니라 다른 브라우저에서 테스트를 실행할 수 있는 웹 자동화 프레임 워크입니다.
  • https://testmanager.tistory.com/104

 

3. 새로 사용해 본 함수

  ① charAt() : String으로 저장된 문자열 중에서 특정 글자만 선택해서 char타입으로 변환해주는 메소드

  ② String.toCharArray() : 문자열을 한 글자씩 쪼개서 이를 char타입의 배열에 집어넣어주는 메소드

  ③ String.valueOf() : 어떤한 값이라도 String 문자열로 바꿔줌

  ④ Arrys.toString(), Arrays.deepToString() : 배열의 내용을 출력할 때 사용

 

4. 다른 조 feedback 에서 나온 개념

① 웹소캣 vs SSE(Sever Sent Event)

  • 웹소켓은  Transport protocol의 일종으로 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조입니다. 웹소켓은 단순한 API로 구성되어있으며, 웹소켓을 이용하면 하나의 HTTP 접속으로 양방향 메시지를 자유롭게 주고받을 수 있습니다. 화상 채팅과 같은 기능구현에 사용.
  • SSE(Sever Sent Event) : 서버와 한번 연결을 맺고나면 일정 시간동안 서버에서 변경이 발생할 때마다 데이터를 전송받는 방법입니다.
  • 웹소켓 : https://choseongho93.tistory.com/266
  • SSE : https://tecoble.techcourse.co.kr/post/2022-10-11-server-sent-events/

 

② 웹폰트가 다르게 보이는 문제 - 크로스브라우징

 

③ web API

 

④ 최적화작업

 

⑤ 마크업 (프론트엔드 개발자 기본 역량)

 

⑥ Spring Batch

⑦ 임베디드(Embedded) 방식 vs 레퍼런스(References) 방식

⑧ mongoDB - $lookup ( 몽고디비 Join 하는 법)

 

⑨ 쿼리문이란 ?

 

⑩ 집계함수

'항해99 개발 일지 > [1주차] 풀스택 프로젝트' 카테고리의 다른 글

[06] JWT토큰 로그인/ 회원가입 만들기  (0) 2022.11.20
[05] JWT 토큰 vs 쿠키/세션 비교  (0) 2022.11.20
[04] CRUD vs REST 무슨 의미인가?  (2) 2022.11.20
[03] API  (0) 2022.11.20
[02] 트러블슈팅 모음  (1) 2022.11.17

1. BE (app.py)

 

① 필요한 라이브러리 import

  • 여기서 시크릿키는 서버에서 디코딩을 할 때 사용된다.

 

② 토큰을 받은 후, playload와 user_info 정보를 통해 토큰이 만료되거나 디코딩 에러가 있을 때 메시지를 response 해주는 부분

 

 

③ 회원가입 - 비밀번호를 암호화해서 저장하는 부분

  • 아이디, 비밀번호, 닉네임을 받아서 DB 저장
  • 비밀번호를 암호화처리 해서 저장해준다.

 

④ 로그인  

  • 받은 비밀번호를 암호화한다.
  • 암호화된 정보로 해당 유저를 찾는다.
  • 유저를 찾으면 JWT토큰을 발행한다. (만료시간도 같이 설정해 준다.)

 

⑤ 로긘된 유저만 call 할 수 있는 API

 

 

2. FE ( 로딩 페이지, 회원가입 페이지, 로그인 페이지 )

 

① 로딩페이지

② 회원가입 페이지

 

 

 

③ 로그인 페이지

 

'항해99 개발 일지 > [1주차] 풀스택 프로젝트' 카테고리의 다른 글

[07] 미니프로젝트 사용 함수, 새 개념 정리  (0) 2022.11.20
[05] JWT 토큰 vs 쿠키/세션 비교  (0) 2022.11.20
[04] CRUD vs REST 무슨 의미인가?  (2) 2022.11.20
[03] API  (0) 2022.11.20
[02] 트러블슈팅 모음  (1) 2022.11.17

 

  • JWT(JSON Web Token)이란 인증에 필요한 정보들을 암호화시킨 토큰을 의미한다.
  • JWT 기반 인증은 쿠키/세션 방식과 유사하게 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별한다.

 

  • 쿠키/세션 인증의 경우 쿠키를 포함한 요청이 외부에 노출되더라도 세션 ID 자체는 유의미한 개인정보를 담고 있지 않지만 해커가 이를 중간에 탈취하여 클라이언트인척 위장할 수 있다는 한계가 존재한다. 그리고 서버에서 세션 저장소를 사용하므로 요청이 많아지면 서버에 부하가 심해지는 단점이 있다.

 

  • 이에 반해 JWT토큰의 경우 Header와 Payload를 가지고 Signature를 생성하므로 데이터 위변조를 막을 수 있기 때문에 보안성이 우수하고, JWT는 토큰에 대한 기본 정보와 전달할 정보 및 토큰이 검증됬음을 증명하는 서명 등 필요한 모든 정보를 자체적으로 지니고 있기 때문에 인증 정보에 대한 별도의 저장소가 필요없다는 장점이 있다. 즉, 클라이언트 인증 정보를 저장하는 세션과 다르게, 서버는 무상태가 됩니다.

 

'항해99 개발 일지 > [1주차] 풀스택 프로젝트' 카테고리의 다른 글

[07] 미니프로젝트 사용 함수, 새 개념 정리  (0) 2022.11.20
[06] JWT토큰 로그인/ 회원가입 만들기  (0) 2022.11.20
[04] CRUD vs REST 무슨 의미인가?  (2) 2022.11.20
[03] API  (0) 2022.11.20
[02] 트러블슈팅 모음  (1) 2022.11.17
  • CRUD와 REST는 API(Application Program Interface) 업계에서 가장 널리 사용되는 두 가지 개념 
  • REST는 클라이언트와 서버 간의 HTTP 프로토콜 인터페이스를 표준화하기 위해 만들어졌으며 웹 API에 널리 사용되는 디자인 스타일 중 하나 
  • 반면에 CRUD는 데이터베이스 응용 프로그램에서 실행되는 네 가지 기본 작업을 나타내는 데 사용되는 약어
  • REST와 CRUD는 CRUD가 REST 환경 내에 존재할 수 있기 때문에 함께 작동하며, 이들의 기능은 종종 서로 일치하지만 동일하지는 않다. 
  • 이들을 구별하는 가장 좋은 방법은 REST가 표준 (API 아키텍처)이고 CRUD가 함수 라는 점을 기억하는 것 

REST 란 무엇입니까? 

  • REST는 Representational State Transfer의 약자입니다. 
  • 시스템이 상호 작용하는 방식을 지시하는 웹상의 컴퓨터에 대한 표준을 제공하는 소프트웨어 아키텍처 스타일입니다. 

 

REST의 간략한 역사

  • 2000년 REST 프로토콜이 출시되기 전에 웹 개발자는 웹 API를 개발하거나 사용하는 방법에 대한 표준이 없었습니다. 
  • 그 당시에는 많은 프로토콜이 사용되었지만 수행하기에는 너무 지루하고 복잡한 것으로 판명되었습니다. 
  • 동료들과 함께 Roy Fielding은 이 문제를 해결하기 위해 노력했고 오늘날 REST 프로토콜로 알려진 것을 개발했습니다. 
  • REST의 개발로 두 개의 서버가 전 세계적으로 데이터를 교환할 수 있게 되었습니다. 
  • REST 호환 시스템을 RESTful 시스템이라고 합니다. 
  • 이러한 시스템은 상태 비저장 및 클라이언트와 서버 문제의 분리가 특징입니다. 

 

CRUD란?

  • CRUD는 CREATE, READ, UPDATE, DELETE의 약자입니다. 이 네 가지 데이터베이스 명령 은 CRUD의 기초입니다. 
  • 많은 프로그래밍 프로토콜과 언어에는 이름이 다르고 기능이 약간 변경된 CRUD 버전이 있습니다. 
  • 좋은 예는 Insert, Select, Update 및 Delete를 사용하는 SQL(구조적 쿼리 언어)입니다 . 
  • 또한 전자 상거래 사이트(Amazon, Mango 등)의 구매자와 같은 동적 웹 사이트에는 CRUD 주기가 있습니다. 
  • 사용자는 계정 을 만들고 정보를 업데이트 하고 장바구니에서 항목을 삭제할 수 있습니다. 
  • CRUD 프레임워크를 사용하는 다른 프로그래밍 언어로는 Java(JOOQ, iBAtis), Phyton(Django), PHP(Propel, Doctrine) 및 .NET(NHibernate, LLBLGEN Pro) 등이 있습니다.

 

CRUD의 짧은 역사

  • CRUD 약어는 구조적 쿼리 언어(SQL)에서 사용되는 데이터베이스 기능을 설명하기 위해 1980년대에 만들어진 것으로 생각됩니다. 이 용어는 1983년 James Martin 의 책 Managing the Database Environment 에서 처음 알려지게 되었습니다 . CRUD 작업에 대한 첫 번째 언급은 Haim Kilov의 1990년 기사 "From Semantic to Object-Oriented Data Modeling"에 있습니다. 
  • CRUD 주기는 종종 이를 시작한 프로세스보다 오래 지속되는 데이터베이스로 영구 저장소를 향상시키는 일련의 기능으로 설계되었습니다. 최신 소프트웨어 프로그래밍 및 개발에서 CRUD는 함수로서의 시작을 넘어 SQL, DDS 및 HTTP 프로토콜과 같은 응용 프로그램에 대한 설계 원칙을 제공했습니다. 

 

REST와 CRUD의 유사점은 무엇입니까?

일부 순수주의자는 REST와 CRUD가 서로 관련이 없다고 주장할 수 있습니다. 그러나 그들이 사용하는 명령을 자세히 살펴보면 둘 사이의 유사점을 알 수 있습니다. 

 

REST 명령

  • POST – 데이터베이스에 새 레코드를 생성합니다.
  • GET – 이 요청은 데이터베이스에서 가져온 정보를 읽습니다.
  • PUT/PATCH – 개체를 업데이트합니다.
  • DELETE - 데이터베이스에서 레코드를 제거합니다.

CRUD 명령

  • CREATE – INSERT 문을 통해 새 레코드를 생성합니다. REST에서 이것은 POST 명령입니다. 
  • READ/RETRIEVE - 이 프로시저는 입력 매개변수를 기반으로 데이터를 가져옵니다. REST에서 이는 GET 명령과 동일합니다.
  • UPDATE  – 데이터를 덮어쓰지 않고 업데이트합니다. REST에서 이것은 PUT 요청입니다. 
  • DELETE- 데이터베이스에서 데이터를 제거합니다. REST는 동일한 요청을 사용하여 데이터를 삭제합니다. 

 

REST와 CRUD의 차이점은 무엇입니까?

REST와 CRUD의 유사성 때문에 동일한 기능을 가진 것으로 착각하기 쉽습니다. 그러나 그것은 사실과 거리가 멀다. 조금 더 깊이 파고 들면 그들 사이의 차이점을 탐구합니다. 

  • REST는 HTTP 명령을 사용하는 리소스 및 Hypermedia를 중심으로 한 아키텍처 시스템입니다. CRUD는 데이터베이스 설정에서 레코드를 유지하기 위한 주기 입니다. 기본 형식에서 CRUD는 응용 프로그램의 기능을 설명하는 정보를 조작하는 방법입니다. REST는 HTTP 명령을 통해 데이터를 제어합니다. 사용자의 정보를 생성, 수정, 삭제하는 방법입니다. 
  • CRUD 기능은 REST API에 존재할 수 있지만 REST API는 CRUD 기능으로 제한되지 않습니다. CRUD는 REST 아키텍처 내에서 작동할 수 있지만 REST API는 CRUD와 독립적으로 존재할 수 있습니다. 예를 들어 REST API를 사용하면 클라이언트가 CRUD 기능에 해당하지 않는 경우에도 서버를 재부팅할 수 있습니다. REST는 적절한 HTTP 메서드를 사용하는 한 이 작업을 수행할 수 있습니다. 
  • REST는 일반적으로 HTTP 명령을 통해 데이터를 사용하는 것을 말합니다. 사용자가 화면상의 데이터와 서버에 저장되는 정보를 조작하는 방법을 용이하게 하는 교리입니다. 프로그래머는 필수 CRUD 기능을 처리할 수 있는 REST API를 만들 수 있지만 그 반대의 경우도 마찬가지입니다. 
  • REST와 CRUD의 기능은 유사하지만(위에서 설명한 대로) 동일하지는 않습니다. PUT 은 아직 존재하지 않는 리소스를 포함하여 리소스를 대체합니다. POST 는 새 리소스를 추가합니다. 이 두 명령 모두 새 리소스를 생성하지만 PUT 은 일반적으로 이미 있는 리소스를 업데이트하는 데 사용됩니다. PATCH 는 주로 리소스의 일부를 업데이트하는 데 사용되지만 PUT 은 전체 리소스를 교체하여 업데이트하는 데만 사용됩니다. 

 

REST와 CRUD는 함께 작동하지만 동일하지는 않습니다.

REST와 CRUD는 CRUD가 REST 환경 내에 존재할 수 있기 때문에 함께 작동하며, 이들의 기능은 종종 서로 일치하지만 동일하지는 않습니다. 이들을 구별하는 가장 좋은 방법은 REST가 표준 (API 아키텍처)이고 CRUD가 함수 라는 점을 기억하는 것 입니다. 이 본질적이지만 직접적인 차이점을 이해하는 것은 두 가지 모두를 이해하는 데 필요합니다.

 

 

출처

https://www.logicmonitor.com/blog/rest-vs-crud

 

REST vs CRUD

CRUD and REST are two of the most popular concepts in the API industry. Learn what REST and CRUD are, the basic principles that govern them, and their similarities and differences.

www.logicmonitor.com

 

'항해99 개발 일지 > [1주차] 풀스택 프로젝트' 카테고리의 다른 글

[06] JWT토큰 로그인/ 회원가입 만들기  (0) 2022.11.20
[05] JWT 토큰 vs 쿠키/세션 비교  (0) 2022.11.20
[03] API  (0) 2022.11.20
[02] 트러블슈팅 모음  (1) 2022.11.17
[01] 와이어프레임, 화면단  (0) 2022.11.15

API란 무엇인가요?

  • API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다.
  • 예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있습니다. 휴대폰의 날씨 앱은 API를 통해 이 시스템과 ‘대화’하여 휴대폰에 매일 최신 날씨 정보를 표시합니다.

 

API는 무엇을 의미하나요?

  • API는 Application Programming Interface의 줄임말입니다.
  • API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다.
  • 인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다. 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의합니다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있습니다.

 

API는 어떻게 작동하나요?

  • API 아키텍처는 일반적으로 클라이언트와 서버 측면에서 설명됩니다.
  • 요청을 보내는 애플리케이션을 클라이언트라고 하고 응답을 보내는 애플리케이션을 서버라고 합니다.
  • 따라서 날씨 예에서 기상청의 날씨 데이터베이스는 서버이고 모바일 앱은 클라이언트입니다. 

 

API 작동 방식 4 가지

 

① SOAP API 

이 API는 단순 객체 접근 프로토콜을 사용합니다. 클라이언트와 서버는 XML을 사용하여 메시지를 교환합니다. 과거에 더 많이 사용되었으며 유연성이 떨어지는 API입니다.

 

② RPC API

이 API를 원격 프로시저 호출이라고 합니다. 클라이언트가 서버에서 함수나 프로시저를 완료하면 서버가 출력을 클라이언트로 다시 전송합니다.

 

③ Websocket API

Websocket API는 JSON 객체를 사용하여 데이터를 전달하는 또 다른 최신 웹 API 개발입니다. WebSocket API는 클라이언트 앱과 서버 간의 양방향 통신을 지원합니다. 서버가 연결된 클라이언트에 콜백 메시지를 전송할 수 있어 REST API보다 효율적입니다.

 

④ REST API

오늘날 웹에서 볼 수 있는 가장 많이 사용되고 유연한 API입니다.

  • 클라이언트가 서버에 요청을 데이터로 전송합니다.
  • 서버가 이 클라이언트 입력을 사용하여 내부 함수를 시작하고 출력 데이터를 다시 클라이언트에 반환합니다.

 

REST API란 무엇인가요?

  • REST는 Representational(*구상적인) State Transfer의 줄임말입니다.
  • REST는 클라이언트가 서버 데이터에 액세스하는 데 사용할 수 있는 GET, PUT, DELETE 등의 함수 집합을 정의합니다.
  • 클라이언트와 서버는 HTTP를 사용하여 데이터를 교환합니다.
  • REST API의 주된 특징은 무상태입니다. 무상태는 서버가 요청 간에 클라이언트 데이터를 저장하지 않음을 의미합니다.
  • 서버에 대한 클라이언트 요청은 웹 사이트를 방문하기 위해 브라우저에 입력하는 URL과 유사합니다.
  • 서버의 응답은 웹 페이지의 일반적인 그래픽 렌더링이 없는 일반 데이터입니다.

 

웹 API란 무엇인가요?

  • 웹 API 또는 웹 서비스 API는 웹 서버와 웹 브라우저 간의 애플리케이션 처리 인터페이스입니다.
  • 모든 웹 서비스는 API이지만 모든 API가 웹 서비스는 아닙니다.
  • REST API는 위에서 설명한 표준 아키텍처 스타일을 사용하는 특수한 유형의 웹 API입니다.

 

API 통합이란 무엇인가요?

  • API 통합은 클라이언트와 서버 간의 데이터를 자동으로 업데이트하는 소프트웨어 구성 요소입니다.
  • API 통합의 몇 가지 예로 휴대폰 이미지 갤러리에서 클라우드로 데이터 자동 동기화 또는 다른 시간대 여행 시 노트북에서 시간 및 날짜 자동 동기화가 있습니다. 기업은 또한 API 통합을 사용하여 많은 시스템 함수를 효율적으로 자동화할 수 있습니다.

 

 

API 유형

 

API는 아키텍처와 사용 범위에 따라 분류됩니다. API 아키텍처의 주요 유형은 이미 살펴보았으므로 사용 범위를 살펴보겠습니다.

① 프라이빗 API : 기업 내부에 있으며 비즈니스 내에서 시스템과 데이터를 연결하는 데만 사용됩니다.

② 퍼블릭 API : 일반에 공개되며 누구나 사용할 수 있습니다. 이러한 유형의 API와 관련된 권한 부여와 비용이 있을 수도 있고 없을 수도 있습니다.

③ 파트너 API : 이는 B2B 파트너십을 지원하기 위해 권한이 부여된 외부 개발자만 액세스할 수 있습니다.

④ 복합 API : 복합 API는 두 개 이상의 서로 다른 API를 결합하여 복잡한 시스템 요구 사항이나 동작을 처리합니다. 

 

 

 

출처

https://aws.amazon.com/ko/what-is/api/

 

API란 무엇인가요? - API 초보자를 위한 가이드 - AWS

GraphQL은 API용으로 특별히 개발된 쿼리 언어로서, 클라이언트에게 요청한 데이터만 제공하는 것을 우선으로 합니다. 또한 API를 빠르고 유연하며 개발자 친화적으로 만들도록 설계되었습니다. RES

aws.amazon.com

 

'항해99 개발 일지 > [1주차] 풀스택 프로젝트' 카테고리의 다른 글

[06] JWT토큰 로그인/ 회원가입 만들기  (0) 2022.11.20
[05] JWT 토큰 vs 쿠키/세션 비교  (0) 2022.11.20
[04] CRUD vs REST 무슨 의미인가?  (2) 2022.11.20
[02] 트러블슈팅 모음  (1) 2022.11.17
[01] 와이어프레임, 화면단  (0) 2022.11.15

+ Recent posts

티스토리툴바