[Front-end] 개발자 공부

[개발 공부 59일차] 인스턴스, Pull Request, REST API

MOLLY_ 2024. 3. 20. 03:06
728x90

< 목차 >
1.인스턴스(instance)
2. Pull Request (PR)
3. REST API
4. 금일 소감

 

 

1.인스턴스(instance)

: 객체 지향 프로그래밍(OOP)에서 클래스(class)에 소속된 개별적인 객체

 

자바스크립트에서 클래스는 특정한 타입의 객체를 생성하기 위한 일종의 템플릿이라고 할 수 있다. 예를 들어, 만약 '자동차'라는 클래스가 있다면, 이 클래스는 자동차가 가져야 할 기본적인 속성(색상, 모델, 브랜드 등)과 기능(운전하기, 정지하기 등)을 정의한다. 이제 여러분이 특정 자동차를 만들고 싶다고 할 때, 예를 들어 "빨간색 테슬라 모델 S"를 생성하고 싶다면 '자동차' 클래스를 사용해 이 특정 자동차의 인스턴스를 만들 수 있다. 이 인스턴스는 '자동차' 클래스의 속성과 기능을 모두 상속받으면서, 동시에 "빨간색", "테슬라", "모델 S"와 같은 구체적인 정보로 구별된다.

간단히 말해, 인스턴스는 클래스의 구체적인 실현체다. 클래스는 '도면'이고, 인스턴스는 그 도면을 바탕으로 만들어진 '실제 객체'라고 할 수 있다.

 

인스턴스는 추상화된 개념 또는 클래스 객체, 컴퓨터 프로세스 등과 같은 템플릿이 실제 구현된 것이다. 인스턴스는 클래스 내의 객체에 대해 특정한 변형을 정의하고 이름을 붙이고 난 뒤, 그것을 물리적인 어떠한 장소에 위치키는 작업을 통해 만든다.

 

 

[Reference]

http://wiki.hash.kr/index.php/%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4

 

 

 

2. Pull Request (PR)

PR 사용 단계

 

: 팀원에게 내가 수정한 코드가 있으니 내 branch를 가져가 검토 후, 병합해주라고 요청하는 것

PR을 통해 코드 충돌을 최소화할 수 있고, Push 권한이 없는 오픈 소스 프로젝트에 기여할 때 많이 사용한다.

 

 

PR 제목 작성 예시

  • 기능 추가: [기능] 사용자 프로필 페이지 추가
  • 버그 수정: [버그] 로그인 시 발생하는 오류 수정
  • 문서 업데이트: [문서] README 업데이트
  • 리팩토링: [리팩토링] 사용자 서비스 코드 개선
  • 테스트 추가: [테스트] 사용자 생성 API 테스트 코드 추가

제목 앞에 붙는 태그는 PR의 유형을 명확하게 하며, 이어지는 내용은 PR의 주된 작업 내용을 간략하게 설명한다.

 

 

PR 설명 작성 예시

### 변경 사항
- 사용자 프로필 페이지를 추가했습니다. 사용자는 이제 자신의 프로필을 볼 수 있습니다.
- 로그인 시 발생하던 오류를 수정했습니다. 세션 관리 로직을 개선했습니다.

### 영향
- 모든 사용자는 로그인 후 자신의 프로필 페이지에 접근할 수 있습니다.
- 로그인 오류 수정으로 인해 사용자 인증의 안정성이 향상되었습니다.

### 테스트 방법
- 사용자 프로필 페이지 접근: 로그인한 사용자가 프로필 페이지에 접근하면 자신의 정보가 정상적으로 표시되는지 확인했습니다.
- 로그인 오류 수정: 다양한 사용자 시나리오(정상/비정상 로그인 시도)를 통해 로그인 과정이 정상적으로 작동하는지 확인했습니다.

### 스크린샷
![사용자 프로필 페이지](프로필_페이지_스크린샷_URL)

### 추가 정보
- 이 PR은 사용자 경험을 개선하기 위한 일환으로 진행되었습니다. 피드백이 있으시면 언제든지 공유해주세요.

 

 

커밋 메시지 예시

  • 기능 추가: feat(profile): 사용자 프로필 페이지 추가
  • 버그 수정: fix(login): 로그인 시 발생하는 오류 수정
  • 문서 업데이트: docs(readme): 사용 방법 섹션 업데이트
  • 리팩토링: refactor(user-service): 사용자 조회 로직 개선
  • 테스트 추가: test(user-api): 사용자 생성 API 테스트 코드 추가

커밋 메시지는 변경 사항의 유형(`feat`, `fix`, `docs`, `refactor`, `test` 등)을 시작으로, 변경된 부분(모듈, 기능, 파일 등)과 간단한 설명을 포함한다.

 

 

[참고] Fork와 Clone 차이

  • Fork : 레포지토리를 원격저장소(GitHub)에 복사
  • Clone : 레포지토리를 로컬저장소에 복사

 

[Reference]

https://inpa.tistory.com/entry/GIT-%E2%9A%A1%EF%B8%8F-%EA%B9%83%ED%97%99-PRPull-Request-%EB%B3%B4%EB%82%B4%EB%8A%94-%EB%B0%A9%EB%B2%95-folk-issue

 

 

 

그리고 REST API 정확힌 이해 안 됐어서 한 번 더 정리해야겠다.

 

3. REST API

: 웹에서 자원(데이터, 객체, 서비스 등)을 접근하기 위한 일련의 규칙과 메커니즘을 제공한다.

REST(Representational State Transfer)는 인터넷에서 데이터를 교환하는 방법 중 하나로, 웹의 기본 기술(예: HTTP, URL)을 사용하여 구현된다. 자바스크립트에서 REST API를 사용하는 것은 주로 웹 페이지나 애플리케이션에서 서버로부터 데이터를 요청하고, 받아온 데이터로 사용자 인터페이스를 동적으로 업데이트하는 과정을 포함한다.

 

 

REST API의 기본 구성 요소

  1. 자원(Resource): 웹 상에서의 자원(예: 사용자, 게시물, 이미지 등)은 URL로 표현됩니다.
  2. 메소드(Method): 자원에 대한 행동(조회, 생성, 수정, 삭제 등)은 HTTP 메소드(GET, POST, PUT, DELETE 등)로 정의됩니다.
  3. 표현(Representation): 데이터 교환 형식(주로 JSON, XML 등)으로, 클라이언트와 서버 간에 데이터를 주고받는 형식을 의미한다.

 

자바스크립트에서 REST API 사용하기

자바스크립트에서는 `fetch` 함수나 `XMLHttpRequest`, 라이브러리(예: Axios)를 사용하여 REST API를 호출할 수 있다. 간단한 예로 `fetch` 함수를 사용한 REST API 호출 방법을 봐보자.

 

 

[예문] 사용자 정보 가져오기

fetch('https://example.com/api/users/1', {
    method: 'GET', // HTTP 메소드 지정
})
.then(response => response.json()) // 응답을 JSON 형태로 파싱
.then(data => console.log(data)) // 데이터 처리
.catch(error => console.error('Error:', error)); // 오류 처리


이 코드는 'https://example.com/api/users/1' URL로 GET 요청을 보내 사용자 정보를 요청한다. 서버로부터 응답이 오면, 응답을 JSON 형식으로 변환하고, 최종적으로 받아온 데이터를 콘솔에 출력한다. REST API를 사용하면 웹 애플리케이션에서 서버로부터 데이터를 요청하고, 받아온 데이터로 웹 페이지의 내용을 동적으로 업데이트하는 등의 작업을 수행할 수 있다. 이는 현대 웹 개발에서 매우 중요한 부분이다.

 

 

 

4. 금일 소감

아 너무 졸리다. 오늘은 얼마 전, 정리했던 REST API를 포함해서 개발하면서 정확히 모르겠는 개념에 대해 공부하였다. 개발하면 중간중간 개념적인 부분이나 PR처럼 협업 관련해서 알아야 할 게 많이 생기는데, 이렇게 틈틈이 정리해두면 나중에 찾아서 읽거나 공부하기도 좋은 것 같다. 이번 주도 파이팅하자!!!

 

728x90