COMPMOS

REST API 디자인 가이드의 적용

OnnJE — Tue, 18 Jul 2023 22:18:44 +0900

REST API 디자인 가이드의 적용

목차
1. 현재 API 상태
2. REST API란?
3. REST API의 구성 및 특징
4. REST API 디자인 가이드
5. REST API 디자인 가이드 적용 결과

현재 API 상태

목적	METHOD	PATH
유저 정보 조회	GET	/user/getinfo
전체 게시물 조회		/boards
단일 게시물 조회		/board/{:boardId}
게시물 페이징		/board/post?page=1&size=30&category='유머'
베스트 게시물		/board/best-post?page=0&size=20&category=humor&searchKeyword=null
게시물 검색결과		/board/search?page=1&size=20&searchTerm="term"
댓글 불러오기		/board/{:boardId}/comment
이메일 인증코드 생성		/auth/generateCode
회원가입	POST	/auth/register
아이디 중복확인		/auth/checkUid
닉네임 중복확인		/auth/checkNick
이메일 인증코드 확인		/auth/verifyCode
로그인		/auth/authenticate
자동로그인		/auth/silentRefresh
로그아웃		/auth/logout
게시물 등록		/board/register
게시물 수정		/board/update?id=' '
게시물 삭제		/board/delete?id=' '
게시물 추천/비추천		/board/recommend/{:boardId}
게시물 조회수 증가		/board/view
댓글 등록		/board/{:boardId}/comment
댓글 수정		/board/{:boardId}/comment/edit/{:commentId}
댓글 삭제		/board/{:boardId}/comment/delete/{:commentId}

위는 현재 제작중인 커뮤니티 사이트에서의 클라이언트-서버 간 통신에 사용되는 url path입니다. 이번 글에선 위 api path를 RESTful api 가이드 라인에 맞추어 수정해 보려 합니다.

REST API란?

수정에 앞서 REST api란 무엇일까 짚고 넘어가겠습니다. REST란 소프트웨어 아키텍처 스타일이며 HTTP 프로토콜을 의도에 맞게 활용하기 위해 제시된 제약사항입니다. REST의 원칙은 서비스에 대한 설명과 이해를 보다 쉽게 도우며, REST의 규칙을 준수해가며 만든 서비스를 RESTful하다고 할 수 있습니다.

REST API의 구성 및 특징

REST API는 자원(URL), 행위(Http Method), 표현으로 구성됩니다. 즉, REST에서는 자원을 URL로 표현하고 표현 대상이 되는 자원에서의 행할 행위를 HTTP Mehod로 정의해 표현합니다. 결과적으로 각각의 엔드포인트 자원을 표현하는 URL에 가지며 Method로 표현되는 행위를 처리합니다.

REST API는 아래와 같은 특징/제한조건을 갖습니다.

인터페이스의 일관성(Uniform interface) : URL에 대응하는 리소스에 대한 행위가 일관적인 인터페이스로 분리 된 아키텍처 스타일을 가진다.
무상태(Stateless) : 각 요청 간 클라이언트의 콘텍스트가 서버에 저장되지 않는다. 즉, 서버에서는 들어오는 요청에 대한 단순 처리만 수행하며 작업에 대한 정보를 따로 저장/관리 하지 않는다.
캐시 처리 가능(Cacheable) : 클라이언트는 response를 캐싱할 수 있어야 하며, 이를 통해 클라이언트 - 서버 간 상호작용을 최적화한다.
계층화 (Layered System) : 다중 계층 구조를 가질 수 있으며, 보안, 로드밸런싱, 암호화 계층 및 PROXY, 게이트웨이 등 중간매체를 사용할 수 있다.
클라이언트 - 서버 구조 : 아키텍처를 단순화시키고 작은단위로 분리해 클라이언트 및 서버의 역할을 확실히 구분해 상호 의존성을 줄이고 독립적으로 개선 가능하도록 한다.
자체 표현 구조 : REST API는 각 메시지가 자신을 어떻게 처리해야 되는지에 대한 충분한 정보를 포함해야 한다.즉, 메시지 자체를 통해 구체적인 미디어 타입, 처리방법, 버정 등을 알 수 있어야 한다.

REST API 디자인 가이드

REST API 디자인 가이드에서 가장 중심이 되는 규칙은 아래 두 가지입니다.

URL은 정보의 자원을 표현한다
자원에 대한 행위는 GET, POST, PUT, PATCH, DELETE 등 HTTP Method를 통해 표현한다.

Method	action
GET	리소스 조회
POST	리소스 생성
PUT	리소스 전체 수정
PATCH	리소스 부분 수정
DELETE	리소스 삭제

example)

내용	잘못된 예시	비고	올바른 예시
게시물 조회	GET /post/get/1	행위에 대한 표현은 method로 이용한다	GET /post/1
게시물 추가	GET /post/insert/2	행위에 대한 표현은 method를 이용한다. 행위에 대응하는 method를 사용한다.	POST /post or POST /post/1

참고사항)

'/' 구분자를 통해 계층구조를 나타낸다
URL 마지막에 '/'를 포함하지 않는다
소문자를 사용하며 가독성을 위해 밑줄(_) 대신 하이픈(-)을 사용한다.
파일 확장자는 header를 이용해 표현한다
적절한 상태코드를 반환해 요청의 성공, 실패, 리소스 상태등을 나타낸다 2XX(성공), 4XX(클라이언트에러), 5XX(서버에러)
Accept 필드와 Content-Type 필드를 통해 적절한 데이터 형식을 나타낸다.

REST API 디자인 가이드 적용 결과

목적	Method	PATH	query string or payload
회원가입	POST	/auth/register	{uid, nick, email, pwd}
회원가입	POST	/user	{uid, nick, email, pwd}
회원정보수정	-	-	-
회원정보수정	PATCH	/user	{edited}
회원정보조회	GET	/user/getinfo	-
회원정보조회	GET	/user	-
회원탈퇴	-	-	-
회원탈퇴	DELETE	/user	-
아이디 중복확인	POST	/auth/checkUid	{uid}
아이디 중복확인	POST	/user/check-uid	{uid}
닉네임 중복확인	POST	/auth/checkNick	{nick}
닉네임 중복확인	POST	/user/check-nick	{nick}
이메일 인증코드 생성	GET	/auth/generateCode
이메일 인증코드 생성	GET	/auth/email-authcode
이메일 인증코드 확인	POST	/auth/verifyCode	{authcode}
이메일 인증코드 확인	POST	/auth/email-authcode	{authcode}
로그인	POST	/auth/authenticate	{id, pwd}
로그인	POST	/auth/login	{id, pwd}
토큰 갱신	POST	/auth/silentRefresh
토큰 갱신	POST	/auth/renew-token
로그아웃	POST	/auth/logout	null
로그아웃	GET	/auth/logout
게시물 등록	POST	/board/register	{title, content}
게시물 등록	POST	/board/post	{title, content}
게시물 수정	POST	/board/update?id=' '	{title, content}
게시물 수정	PATCH	/board/post/{post-id}	{title, content}
게시물 삭제	POST	/board/delete?id=' '
게시물 삭제	DELETE	/board/post/{post-id}
단일 게시물 조회	GET	/board/{boardId}
단일 게시물 조회	GET	/board/post/{post-id}
전체 게시물 조회	GET	/boards
전체 게시물 조회	GET	/board
게시물 페이징	GET	/board/post	{page, size, category}
게시물 페이징	GET	/board/posts/{category}	{page, size}
베스트 게시물	GET	/board/best-post	{page, size, category, searchKeyword}
베스트 게시물	GET	/board/posts/best	{page, size}
게시물 검색결과	GET	/board/search	{page, size, searchTerm}
게시물 검색결과	GET	/board/posts/search	{page, size, searchTerm}
게시물 추천/비추천	POST	/board/recommend/{:boardId}	{recommendations}
게시물 추천/비추천	PATCH	/board/post/{post-id}/recommend	{recommendations}
게시물 조회수 증가	POST	/board/view
게시물 조회수 증가	PATCH	/board/post/{post-id}/view
댓글 불러오기	GET	/board/{:boardId}/comment
댓글 불러오기	GET	/board/post/{post-id}/comments
댓글 등록	POST	/board/{:boardId}/comment	{content}
댓글 등록	POST	/board/post/{post-id}/comment	{content}
댓글 수정	POST	/board/{:boardId}/comment/edit/{:commentId}	{content}
댓글 수정	PATCH	/board/post/{post-id}/comment/{comment-id}	{content}
댓글 삭제	POST	/board/{:boardId}/comment/delete/{:commentId}
댓글 삭제	DELETE	/board/post/{post-id}/comment/{comment-id}

REST API 디자인 가이드라인에 따라 기존 URL을 최대한 Method를 통해 행위를 표현하도록 수정하였습니다. login, logout 등과 같이 URL의 엔드포인트에서 자원을 직접적으로 수정하는 것이 아닌 특정 행위 자체를 표현하는 경우 해당 행위를 최대한 URL를 통해 직관적으로 파악할 수 있도록 했습니다.

HTTP 상태 코드 정리

RESTful API에서는 행위에 대한 결과를 HTTP 상태코드로 반환합니다. 주요 결과에 대한 상태 코드는 아래 표와 같습니다.

성공)

코드	내용
200	OK
201	Created - 요청에 성공 후 새로운 리소스 생성
202	Accepted - 클라이언트의 요청을 받은 후 아직 처리하지 않은 경우(비동기), 작업 완료 후 클라이언트가 해당 작업의 진행 상황을 파악할 수 있도록 URL을 links 필드를 통해 반환한다.

클라이언트 에러)

코드	내용
400	Bad request - 요청이 미리 정의해둔 파라미터를 위반한 경우
401	Unauthorized
403	Forbidden - 접근이 허용되지 않은 자원에 대한 접근
404	Not found
405	Method Not Allowed

서버 에러)

코드	내용
500	서비스 장애

reference

https://velog.io/@haileeyu21/Session-RESTful-API-%EB%9E%80-Path-parameters-Query-string

https://spoqa.github.io/2012/02/27/rest-introduction.html

https://ko.wikipedia.org/wiki/REST

https://meetup.nhncloud.com/posts/92

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

https://sanghaklee.tistory.com/57

성인 아데노이드 절제 수술 후기(편도 x)

OnnJE — Tue, 18 Jul 2023 20:28:47 +0900

23년도 4월 심한 목감기에 걸려 동네 이비인후과를 방문했다 비인두 부분에 혹이 있는 것을 발견했다. 감기로 인해 일시적으로 부은 것일 수도 있으니 약을 복용하며 경과를 지켜보자는 말과 함께 시간이 지났고 상급병원 의뢰와 ct검사 등을 거쳐 결국 아데노이드 절제술을 받게 되었다.

수술 전 처치

링거 라인 잡기 : 수술전날 링거 라인을 잡는다. 주사바늘 자체가 굵어 생각보다 아프다. 나 같은 경우는 한번에 못 잡아서 두번 바늘을 꽂았는데 고통을 받아들이니까 뭔가 편했다.
항생제 알레르기 검사용 주사 : 이 주사는 뭣도 모르고 맞았다. 그냥 설명좀 듣고 '아 그렇구나' 생각하며 맞았는데 그리 아프진 않았다.
단식 : 수술전 단식은 매우 중요하다. 만약 단식을 하지 않는다면 전신마취중 위산이 역류해 폐에 들어갈 가능성이 있고 이는 폐와 관련된 각종 질환을 불러올 수 있다고 한다. 그러니 다들 단식하자.
수술 직전 주사 : 수술 직전에는 신경 안정제와 침, 땀 등의 분비를 억제하는 주사를 맞는다 엉덩이 근육 주사로 맞는데 이게 생각보다 둔탁한 느낌으로 따갑다. 뭔가 엉덩이 근육을 쎄게 맞은 느낌이라고 해야 될까.. 이 두 주사를 맞은 후 침대에 누운채로 수술실로 옮겨지는데 이때 느낌이 참 묘하다. 신경 안정제를 맞아서 그런가 실실 웃음이 새기도 했는데 뭔가 가벼운 감기가 여기까지 온 게 어이가 없었다.

수술 직후

수술은 말그대로 마취제 들어간단 말고 함께 눈떠보니 끝나있었다. 8시 52분쯤 수술실 들어간다는 톡을 했으니 9시 20분쯤 수술이 시작됐을 거고 정신을 차린건 10시 20분 쯤이다. 회복실에서 정신을 차리며 간호사 분들에게서 40분쯤까지 회복실에 있다가 병실로 옮겨질 것이라는 안내를 들었으며, 이후 계속해서 심호흡을 하며 기다렸다. 이때 딱히 큰 통증은 없었으며 그저 입속에서 느껴지는 탄냄새와 칼칼함이 느껴졌다.

병실로 옮겨진 후 마취제의 후유증이 그리 크지않아 여기저기 걷고 호흡하며 마취제를 빼내고자 했다. 특히 걷는게 정신차리는데 효과가 좋았던것 같다. 중간중간 졸음이 오긴 했으나 그리 심하진 않았고 4시간 뒤 식사나 수면에 별다른 주의사항은 없었다.

통증

수술전에 수술 담당 교수님이 다음날 부터 일상생활, 운동 모두 문제없이 가능하다고 했으나 이것저것 찾아보며 '역시 의사가 일상생활 가능하다고 하는건 정말 최소한의 일상생활인가... 개무섭네' 라는 생각을 했었다. 특히 아데노이드 수술 같은 경우는 아데노이드 단독 수술보단 편도 수술과 함께 진행되는 경우가 많기도 하고 주로 아이들을 대상으로 진행되는 수술이다보니 통증을 보다 심하게 오해하기 쉽다.

결론은 정말정말정말 무통이다. 아니 사실 통증이 아예없진 않다. 설명해 보자면 쎈 감기에 걸렸구나를 느끼기 시작할 때의 목의 칼칼함 정도이다. 이마저도 진통제를 복용하니 쉽게 케어된다.

+ 지혈 거즈 관련)

수술 후기들 보면 지혈 거즈 관련 글이 꽤나 있다. 수술 방법의 차이인지 병원의 차이인지, 아니면 출혈량의 차이때문인지는 모르겠지만 나 같은 경우는 지혈 거즈는 사용하지 않았다. 마취제 투여 직전에 거즈 관련 질문을 했었는데 사용하지 않는다는 답변을 받은 걸 생각해 보았을 때 아마 수술 방법에 따라 거즈 사용 여부가 결정되는 것 같다.

식사

수술 후 식사는 두렵다. 특히나 목 부분이니 삼킬때마다 어떤 고통이 있을가 막연히 상상만 될 뿐이다. 나는 수술 후 금식이 풀리자 미온수의 물로 조금씩 테스트를 해봤다. 아니나 다를까 조금의 물을 삼키는데 약간의 불편함이 있었다. 물론 큰 고통은 아니었고 '많이 삼키면 문제 생길수도 있겠는데?'라는 생각을 하게되는 정도의 불편감이었다. 뭐 어찌됐든 물을 마시고 식사를 해야하니 최대한 조금씩 꼭꼭 씹어서 삼켰다.

병원밥은 기대했던대로 맛이없다. 죽에 전혀 간이 안되어있더 너무 심심한 맛이다. 그래서 병원 1층 로비의 김밥천국 비슷한 곳에서 파는 죽을 샀는데도 왠걸 이것도 똑같이 맛이 없다. 나름 소고기 채소죽인데 병원 죽이랑 맛이 똑같다니... 아쉬운건 아쉬운거고 어쨌든 죽과 같이 나온 고기를 곁들여 엄청 조금씩 씹어 삼켜봤는데 생각보다 괜찮았다. 수술 다음날이 되자 식사에 대한 불편은 거의 없다고 봐도 무방하다. 오죽하면 돈까스 먹어도 되겠는데 싶은 정도였는데 실제로 교수님이 회진을 돌 때 여쭤보니 그냥 일상생활 하듯이 식사해도 상관없다고 하셨다. 결국 내 나름 야심찼던 여름 입원 다이어트는 물건너 갔고 수술전 꽉꽉 쑤셔넣으며 먹은 음식들에 대한 후회와 더 빡세진 앞으로의 운동 계획만 남았다

느낀점

인터넷을 뒤지다 수술 후 배뇨장애와 관련된 글을 봤다. 그 글을 보고 '아 배뇨장애가 있으면 요관을 꽂는데 난 이거 감당할 자신이 없다'라는 생각을 했고, 전날 12시부터 물을 일체 마시지 않았다. 그런데 이렇게 물을 안마셔 놓으니 막상 수술 후 소변을 제대로 볼 수 있는지 확인하기가 어렵다. 어차피 수술전 단식과 수술후 금식 시간을 다 포함하면 방광이 그리 차지도 않으니 적당히 마시고 수술후에 시원하게 소변을 보자! 어차피 수술시간이 짧아 수술과정중 방광이 차지도 않는다.
안대와 탁상용 선풍기가 있으면 좋다. 안대는 특히 필요하다. 복도 불빛이 다 들어와서 커튼을 쳐도 거슬린다.
머리 감기는 쉽지 않다. 세수 면도까지는 했는데 차마 머리까지 감기엔 귀찮더라. 만약 더 길게 입원했으면 감았겠지만 2박 3일 일정은 그냥 모자쓰고 퇴원하는게 편하다.
수술전에 괜히 몰아 먹지 말자 남는건 후회 뿐이다.

결론

수술전 과정과 수술 후 큰 고통이나 불편함은 없었다.
수술 후 일반식 바로 가능하다
나의 경우 가로 3센치 세로 2센치 정도를 제거했는데 그 동안 노래 부를때 느껴지던 막힌 느낌의 원인이 이거였을까? 이건 완전히 회복한 뒤 테스트해봐야겠다.

[CS] 정리

OnnJE — Tue, 20 Jun 2023 19:22:29 +0900

운영체제

1. 정의

컴퓨터 시스템에서 핵심적인 소프트웨어로 컴퓨터 하드웨어와 사용자 사이에서 자원을 관리하고 작업을 조율하는 역할을 수행하는 시스템 소프트웨어

2. 주요 기능

1) 자원 관리 : CPU, 메모리, 저장 장치, 입출력 장치 등 컴퓨터 자원을 효율적으로 관리한다. 운영체제는 자원을 할당하고 관리하여 다른 프로그램이 자원을 공정하게 사용하도록 하며, 충돌이나 경쟁 상태를 방지한다.

2) 프로세스 관리 : 프로세스는 실행 중인 프로그램의 인스턴스로 운영체제는 프로세스를 생성, 종료, 일시 중지, 재개하는 등의 작업을 관리한다. 이를 통해 CPU를 효율적으로 활용하고 다중 프로세스 간의 스케줄링과 동기화를 담당한다.

3) 메모리 관리 : 운영체제는 컴퓨터 메모리를 관리하여 프로세스에 필요한 메모리 공간을 할당하고, 메모리 사용의 효율성을 높인다. 가상메모리, 페이지 교체, 메모리 보호 등의 기법을 사용하여 다중 프로세스가 메모리를 안전하게 공유할 수 있도록 한다.

4) 파일 시스템 관리 : 파일 시스템은 데이터를 저장하고 관리하는 데 사용되는 구조이다. 운영 체제는 파일 시스템을 관리하여 파일의 생성, 삭제, 읽기, 쓰기 등의 작업을 지원하고 파일의 보안과 접근 제어등을 관리한다.

5) 입출력 관리 : 운영체제는 입출력 장치와의 효율적인 통신을 관리한다. 키보드, 마우스, 디스플레이, 프린터, 네트워크 등 입출력 장치와 프로세스 간 상호작용을 조율하고 입출력 작업을 버퍼링하고 스케줄링 해 시스템의 성능을 향상 시키고 여러 프로세스가 입출력 장치를 공유할 수 있도록 한다.

6) 사용자 인터페이스 : 사용자와 컴퓨터 사이의 상호 작용을 위한 인터페이스를 제공한다. 명령줄 인터페이스(CLI), 그래픽 사용자 인터페이스(GUI) 웹 기반 인터페이스 등 다양한 형태로 제공된다.

7) 보호 및 보안 : 시스템 보안을 유지하고, 사용자 및 자원에 대한 접근 제어를 담당한다. 인증 및 권한 부여, 암호화, 방화벽 설정 등의 기능을 제공하여 시스템과 데이터 안정성을 보장한다.

8) 에러 처리 : 예기치 않은 상황과 에러를 처리하고 복구하는 기능을 제공한다. 하드웨어 오류, 소프트웨어 오류, 네트워크 오류 등 다양한 오류 상황에 대응해 시스템 안정성을 유지한다.

파일 시스템

1. 정의

운영체제에서 사용하는 파일 시스템은 데이터를 저장하고 관리하는 데 사용되는 구조이다. 파일 시스템은 하드 디스크, SSD, 네트워크 저장 장치 등의 저장 매체에 데이터를 저장하고, 파일 및 디렉토리의 생성, 삭제, 읽기, 쓰기 등의 작업을 지원한다. 다양한 운영체제에서 다양한 파일 시스템을 지원한다.

2. 운영체제별 파일 시스템

1) FAT 파일 시스템(File Allocation Table / MS-DOC, Windows) : FAT 파일 시스템은 MS-DOC와 Windows 운영체제에서 주로 사용되는 파일 시스템이다. 파일과 디렉토리의 데이터를 관리하는데 FAT라는 테이블을 사용한다.

2) NTFS 파일 시스템 (New Technology File System / Windows) : NTFS 파일 시스템은 Windows 운영체제에서 사용되는 고급 파일 시스템이다. NTFS는 FAT 파일 시스템보다 안정성과 보안 기능이 뛰어나며, 파일 압축, 암호화, 파일 권한 관리 등 다양한 기능을 제공한다.

3) ext 파일 시스템 (Extended File System / LINUX, UNIX) : ext 파일 시스템은 리눅스 운영체제에서 주로 사용되는 파일 시스템이다. ext2, ext3, ext4 등의 다양한 버전이 있다.

4) HFS+ 파일 시스템 (Hierarchical File System Plus / MAC) : HFS+ 파일 시스템은 macOS 운영체제에서 사용되는 파일 시스템이며, 최근에는 APFS로 대체되고 있다.

5) XFS 파일 시스템 (eXtended File System / LINUX, UNIX) : XFS 파일 시스템은 UNIX 및 리눅스 운영체제에서 사용되는 고성능 파일 시스템이다. 대용량 파일 시스템을 지원하며, 스냅샷, 저널링, 파일 암호화 등의 기능을 제공한다.

6) UDF 파일 시스템 (Universal Disk Format) : 광학 디스크에 사용되는 파일 시스템이다. 다양한 운영 체제와 장치간의 호환성을 제공하며 ISO 9660과 함께 널리 사용된다.

하드웨어

1. CPU

1) 정의

컴퓨터의 동작과 데이터 처리를 담당하는 하드웨어이다. 명령어를 해석하고 실행해 프로그램 처리를 수행한다.

2) 구성

(1) 제어 장치 : CPU 내부 구성 요소들을 제어하고 명령어의 실행 순서를 조정한다. 명령어를 해석하고 필요한 동작을 실행하기 위해 다른 구성 요소들과 상호 작용 한다.

(2) 산술 논리 장치(ALU, Arithmetic Logic Unit) : 산술 연산과 논리 연산을 수행한다. ALU는 데이터 처리와 계산을 담당한다.

(3) 레지스터 : cpu 내부에 위치한 작은 기억 장소로, 데이터나 명령어를 일시적으로 저장한다. 매우 빠른 속도로 데이터에 접근 할 수 있어 중간 계산 결과나 주요 데이터를 저장하는데 사용된다.

3) 특징

CPU는 프로그램 명령어를 순차적으로 가져와 해석하고 실행하는 과정을 반복한다. 이러한 과정은 클럭 신호에 의해 도익화 되며, 클럭 신호에 따라 명령어 실행 주기가 결정된다.

CPU는 명령어 집합 구조(Instruction Set Architecture)에 따라 동작하며, 이는 CPU가 이해하고 실행할 수 있는 명령어 종류와 형식을 정의한다. 대표적인 ISA로는 x86, ARM, MIPS 등이 있다.

CPU는 캐시라는 고속 메모리를 포함한다. 캐시는 주기억장치(RAM)와 CPU간의 속도 차이를 극복하기 위해 사용되며, 빈번하게 참조되는 데이터를 저장하여 성능을 향상 시킨다.

2. 메모리

1. 메모리는 컴퓨터 시스템에서 데이터 및 명령어를 저장하는 물리적인 장치이다. 프로그램이 실행되거나 데이터가 처리될 때 필요한 정보들이 메모리에 저장되어 CPU에 의해 접근되고 치러된다.

2. 종류

1) 주기억 장치

(1) RAM : 데이터와 메모리를 일시적으로 저장하는 장치로 CPU가 직접 접근할 수 있는 메모리이다. 읽기와 쓰기가 가능하며 전원이 꺼지면 데이터가 사라진다. 실행중인 프로그램과 관련된 데이터와 명령어를 저장하여 해당 데이터에 CPU가 빠르게 접근할 수 있도록 한다

(2) Cach Memmory : CPU와 주기억 장치 사이에 위치한 고속의 메모리로서 CPU가 자주 참조하는 데이터를 저장해 CPU 성능을 향상 시킨다.

2) 보조 기억 장치

(1) HDD : 대용량의비휘발성 저장장치로 데이터를 기계적으로 기록하고 읽는다. 저렴하고 대용량이지만 상대적으로 느리다.

(2) SDD : 하드 디스크와 비슷한 기능을 제공하지만 기계적 부품대신 플래시 메모리를 사용해 데이터를 저장하고 읽는다. SSD는 보다 빠른 속도와 내구성을 갖는다.

(3) DVD, CD : 레이저를 사용해 데이터를 읽고 쓰는 장치, 주로 음악, 영화, 소프트웨어 등의 데이터를 저장한다.

(4) 플래시 드라이브(USB) : 플래시 메모리를 사용해 데이터를 저장하는 이동식 저장장치. 휴대성이 우수하며 데이터 휘발성이 없어 안정적인 저장이 가능하다.

3. 버퍼란?

버퍼(Buffer)는 컴퓨터 시스템에서 임시로 데이터를 저장하는 메모리 영역을 말한다. 버퍼는 데이터의 효율적인 전송을 도와주며, IO 작업에서 데이터의 일시적인 저장 및 처리를 담당한다. 이러한 버퍼는 데이터를 입출력하는 과정에서 발생하는 속도 차이나 처리 지연을 완화하기 위해 사용된다.

일반적으로, 데이터를 입출력하는 IO 작업은 버퍼를 통해 이루어진다. 데이터를 송신하기 전에 버퍼에 임시로 저장하고, 일정량의 데이터가 모이면 한 번에 전송함으로써 데이터 전송 속도가 개선되고, CPU의 부하를 줄일 수 있도록 한다. 또한, 버퍼는 입출력 장치 간에 데이터 전송 속도 차이로 인해 발생할 수 있는 지연을 완화하는 역할도 수행하는데, 예를 들어, CPU는 데이터를 빠르게 처리할 수 있지만, 외부 장치와의 데이터 전송 속도는 느릴 수 있는 경우, 버퍼는 CPU와 외부 장치 간의 데이터 전송을 조절하여 처리 속도의 불일치를 해결한다.

이러한 버퍼는 주로 메모리의 일부 영역으로 구현되며, 일반적으로 FIFO(First-In, First-Out) 방식으로 동작한다. 데이터는 버퍼에 저장되고, 버퍼가 가득 차면 데이터가 외부 장치로 전송되어 비워진다. 이러한 방식으로 데이터의 일시적인 저장과 전송을 원활하게 처리할 수 있도록 한다.

3. IO장치

1) 정의

컴퓨터와 외부 장치 또는 사용자 사이의 데이터 및 신호를 입력하거나 출력하는 역할을 수행하는 장치

2) 종류

키보드
마우스
모니터
프린터
스캐너
스피커
디스크 드라이브
네트워크 가드

4. GPU

1) 정의

주로 그래픽 작업을 처리하는데 사용되는 하드웨어이다. 현재에는 다양한 분야에서 병렬 처리 작업을 수행하기 위한 계산 장치로 널리 사용되고 있다. CPU와는 구조적으로 다른 설계를 갖고 있으며, CPU는 일련의 명령어를 순차적으로 처리하는 데 특화되어 있지만 GPU는 대규모 데이터를 동시에 처리하는데 특화되어 있다. 즉, 수백 수천개의 작은 코어로 구성되어 있으며, 이러한 다중 코어 구조는 병렬 처리에 탁월한 성능을 발휘할 수 있도록 도와준다.

2) 주요 기능

(1) 그래픽 렌더링 : 2D 및 3D 그래픽 작업을 처리하는데 특화되어 있다. 게임 컴퓨터 그래픽스, 가상 현실 등 높은 그래픽 성능이 요구되는 작업을 수행한다.

(2) 병렬처리 : 동시에 많은 데이터를 처리하거나 복잡한 계산 작업을 효율적으로 수행한다.

(3) 과학 및 연구 : 대규모 데이터 집합의 병렬처리, 수치 해석, 머신 러닝, 딥러닝 등의 작업을 가속화 하는데 사용된다.

(4) GPGPU(General-Purpose GPU) : 일반 목적을 병렬 처리 장치로 활용. CPU에 비해 높은 연산 성능을 제공하며, 병렬 처리가 필요한 다양한 응용 프로그램에서 사용될 수 있다.

5. 마더보드

1) 정의

마더보드는 컴퓨터 시스템에서 다른 하드웨어 구성 요소들을 연결하고 상호 작용할 수 있도록 하는 주요한 회로 기판이다.

2) 구성 요소

CPU 소켓
메모리 슬롯
확장 슬롯
칩셋
BIOS
연결 포트

6. 전원 공급 장치

1) 정의

전원 공급 장치는 컴퓨터 시스템에 전원을 공급하는 장치이다. PSU는 외부 전원원으로부터 AC 전기를 입력받아 컴퓨터의 다른 하드웨어 구성 요소들에 안정적인 DC 전압을 제공한다.

2) 구성 요소

변압기
정류기
커넥터
보호장치

7. 네트워크 장치

1) 정의

컴퓨터 네트워크에서 데이터 통신을 가능하게 하는 기기들을 말한다. 이러한 장치들은 네트워크 구성과 용도에 따라 다양한 역할과 기능을 수행한다.

2) 구성 요소

(1) 네트워크 어댑터 : 네트워크 어댑터, 네트워크 인터페이스 카드(NIC)는 컴퓨터와 네트워크 간의 연결을 담당한다. 컴퓨터에 내장되거나 외부에 연결되는 카드 형태로 제공되며 이더넷, 와이파이, 블루투스 등 다양한 네트워크 기술을 지원할 수 있다.

(2) 스위치 : 네트워크에서 데이터를 전송하고 다른 장치들 간의 통신을 관리하는 역할을 수행한다. 여러개의 포트를 가지고 있으며, 각 포트는 컴퓨터, 서버, 프린터 등 네트워크 장치에 연결된다. 스위치는 데이터를 목적지로 전달하는데 사용되며, 이를 통해 네트워크 내의 효율적 데이터 전송을 가능하도록 한다.

(3) 라우터 : 라우터는 네트워크 간의 연결을 관리하고 데이터 패킷을 전송하는 역할을 수행한다. 다른 네트워크 가능 경로를 결정하여 패킷을 전달하며, 인터넷과 같이 여러 네트워크 간의 통신을 가능하게 한다. IP 주소를 기반으로 패킷을 전달하고 네트워크 보안 및 패킷 필터링 등의 기능을 제공한다.

(4) 모뎀 : 모뎀은 디지털 신호와 아날로그 신호를 상호 변환하여 네트워크와으 통신을 가능도록 한다. 일반적으로 모뎀은 인터넷 서비스 제공업체와의 연결을 위해 사용되며, 전화선, 케이블, 광케이블 등 다양한 통신 매체를 통해 데이터를 전송한다.

(5) 방화벽 : 방화벽은 네트워크의 보안을 유지하기 위해 사용되는 장치이다. 네트워크 트래픽을 모니터링하고, 외부로부터의 불법적인 접근이나 악성 행위를 차단하는 역할을 수행한다. 네트워크 데이터 흐름을 제어하고, 인가된 사용자들만이 네트워크에 접근할 수 있도록 설장할 수 있다.

데이터 양자화

1. 정의

디지털 데이터를 표현하는 과정에서 연속적인 값들을 일정한 간격의 이산적인 값들로 변환하는 기술. 주로 아날로그 신호나 연속적인 데이터를 디지털 형태로 변환하는 과정에서 사용된다.

2. 양자화의 단계

1) 양자화 단계

연속적인 신호를 일정한 간격의 작은 구간으로 나눕니다. 이 작은 구간을 양자화 간격 또는 양자화 레벨이라고 합니다

2) 양자화 값 선택 단계

각 구간의 대표값 중 하나를 선택하여 해당 구간의 모든 샘플을 그 값으로 대체

3. 특징

작은 양자화 간격을 선택하면 원본 데이터와 더 유사한 표현이 가능하지만, 더 많은 비트가 필요하게 되어 저장 공간 또는 전송 대역폭이 더 많이 필요해지며, 큰 양자화 간격을 선택하면 저장 공간 또는 전송 대역폭을 절약할 수 있지만, 원본 데이터와의 차이가 더 크게 나타날 수 있다.

일반적으로 데이터 양자화는 복원 가능한 과정으로 양자화 간격과 양자화 값의 수준에 따라 복원 데이터의 일치도가 달라진다. 작은 양자화 간격과 많은 수준의 양자화 값이 사용될수록 원래 데이터와의 일치도가 높아진다.

데이터 패킷

1. 정의

컴퓨터 네트워크에서 정보를 전송하기 위해 사용되는 작은 조각이다. 데이터를 전송할 때, 일반적으로 큰 데이터를 작은 패킷으로 나누어 전송하고, 이러한 데이터 패킷은 네트워크를 통해 전송될 때 다양한 경로로 전송될 수 있다. 수신측에서는 수신받은 패킷들을 받아 순서대로 재조립하여 원래 데이터를 복원한다.

2. 구성

1) 헤더

헤더는 패킷의 메타데이터를 포함하며, 패킷의 출발지와 목적지 주소, 패킷의 크기 및 순서 등과 같은 정보를 담는다.

2) 페이로드

페이로드는 실제 데이터를 포함하며, 전송되는 파일, 메시지, 웹 페이지 내용 등이 페이로드에 포함된다.

3. 사용 시 이점

1) 대용량의 데이터도 작은 패킷으로 나누어 전송 가능하다

2) 패킷 기반 통신은 패킷의 독립성을 보장하므로, 특정 패킷의 손상이나유실이 발생해도 다른 패킷들은 영향을 받지 않고 전송 가능하며, 이럴 바탕으로 데이터 전송의 신뢰성을 향상 시킬 수 있다.

3) 패킷 기반 통신은 다양한 토폴로지(네트워크 연결 방식)에서 유연하게 작동 가능하며, 여러 경로를 통해 패킷을 전송해 전체적인 효율성을 높일 수 있다.

계층모델

1. 정의

네트워크에서 데이터 전송을 위해 사용되는 프로토콜과 기술들의 기능과 역할을 조직화하고 계층적으로 분리한 것

2. 종류

1) OSI 모델 (Open Systems Interconnection Model)

국제표준화 기구 ISO에서 개발한 7개의 계층으로 구성된 모델

(1) 물리 계층(Physical Layer): 물리적인 데이터 전송 매체를 통해 비트 단위의 데이터를 전송한다.

(2) 데이터 링크 계층 (Data Link Layer) : 인접한 노드 사이에서 오류 제어, 흐름 제어 등 데이터를 안전하게 전달한다. 이 계층에서는 MAC 주소를 사용하여 네트워크 장치들을 식별한다.

(3) 네트워크 계층 (Network Layer) : 데이터 패킷의 경로 설정과 라우팅을 수행한다. IP주소를 사용하여 데이터를 전송하고 목적지까지 경로를 결정한다.

(4) 전송 계층 (Transport Layer) : 신뢰성 있는 데이터 전송을 담당한다. 데이터 분할, 재조립, 흐름제어, 오류 복구 등을 수행하며, TCP와 UDP가 이 계층에서 동작한다.

(5) 세션 계층 (Session Layer) : 세션 관리, 동기화 등을 제공하여 통신 세션을 설정하고 유지한다.

(6) 표현 계층 (Presentation Layer) : 데이터의 형식 변환, 암호화, 압축 등의 데이터 표현을 담당한다.

(7) 응용 계층 (Application Layer) : 사용자와 네트워크 간의 상호작용을 위한 프로토콜을 제공한다.

2) TCP/IP 모델 (Transmission Control Protocol/Internet Protocol Model)

인터넷을 기반으로 한 네트워크에서 사용되는 프로토콜 스택을 기술하며 4개의 계층으로 구성된다.

(1) 네트워크 인터페이스 계층 (Network Interface Layer) : 물리적인 네트워크와 데이터 링크 계층을 결합하여 네트워크에 연결한다.

(2) 인터넷 계층 (Internet Layer) : IP프로토콜을 사용하여 데이터 패킷의 전송과 라우팅을 처리한다.

(3) 전송 계층 (Transport Layer) : TCP와 UDP 프로토콜을 이용하여 데이터 신뢰성과 흐름제어를 수행한다.

(4) 응용 계층 (Application Layer) : HTTP, FTP, DNS, SMTP 등과 같은 프로토콜을 포함하며, 사용자 응용프로그램과 네트워크 간 상호작용을 담당한다.

네트워크 프로토콜

1. 정의

네트워크 프로토콜은 컴퓨터 네트워크에서 컴퓨터나 장치 간 효율적이고 안정적인 통신을 유지하기 위해 사용되는 규칙 세트이다. 이러한 프로토콜은 데이터 전송방식, 통신 프로세스, 오류 처리, 보안 등 다양한 측면을 정의한다.

2. 종류

1) 인터넷 프로토콜 스위트 (Internet Protocol Suite : TCP/IP) : TCP/IP는 인터넷을 기반으로한 가장 기본적인 네트워크 프로토콜이다. 인터넷 프로토콜(IP)와 IP를 보완하는 전송 제어 프로토콜(TCP)로 구성된다. TCP는 데이터 전송의 신뢰성을 담당하고 IP는 패킷의 라우팅과 주소 지정을 담당한다.

2) 이더넷 (Ethernet) : 이더넷은 LAN(Local Area Network)에서 사용되는 가장 일반적인 유선 네트워크 기술이다. 이더넷은 데이터 링크 계층에서 동작하며, MAC 주소를 사용하여 컴퓨터 간에 데이터를 전송한다.

데이터 링크 계층 : OSI(Open Systems Interconnection) 모델에서 네트워크 계층과 물리 계층 사이에 위치한 계층. 물리적인 네트워크 매체를 통해 데이터를 전송하기 위해 프레임 단위로 데이터를 구성하고 제어하는 역할을 수행한다. 또한 네트워크에 연결된 계별 장치 간 직접적인 통신을 관리하고 에러감지, 정정, 흐름제어 등의 처리를 한다.

MAC 주소 : Media Access Controll Address는 데이터 링크 계층에서 사용되는 고정적인 물리적 주소이다. MAC 주소는 네트워크에 연결된 각 네트워크 인터페이스 카드(네트워크 어댑터)에 할당되며, 이를 통해 장치를 고유하게 식별하도록 한다. 이러한 MAC 주소는 6바이트(48비트)의 길이를 가지며 16진수로 표현된다. 첫 24비트는 제조사 식별자, 나머지 24비트는 제조사에서 할당한 고유한 식별자이다.

3) 포인트 투 포인트 프로토콜 (PPP) : PPP는 시리얼 라인을 통해 두 장치 간에 포인트 투 포인트 연결을 만들기 위해 사용되는 프로토콜이다. 주로 인터넷 접속에 사용되며 TCP/IP와 함께 널리 사용된다.

4) 전송 제어 프로토콜 (TCP) : TCP는 신뢰성 있는 데이터 전송을 위한 연결 지향 프로토콜로서 TCP/IP 프로토콜 스위트에 포함된다. 데이터의 순서를 유지하고, 손실이나 손상을 검출하고 복구하는 기능을 제공한다.

5) 사용자 데이터그램 프로토콜 (UDP) : UDP는 비연결성 프로토콜로, TCP/IP 프로토콜 스위트에 포함되어 있다. TCP보다 빠르고 간단하며 지연 시간이 적지만 신뢰성이 낮다.

3. 인터넷 프로토콜 스위트

1) 정의

인터넷을 구성하는 핵심 프로토콜의 모음으로 컴퓨터 네트워크에서 데이터 전송과 통신을 가능하게 하는 규칙과 프로토콜을 제공한다. TCP/IP는 인터넷을 지원하는 기본 프로토콜 스택으로 널리 사용되며 다양한 네트워크 및 인터넷 서비스의 기반이 된다.

2) 종류

(1) 인터넷 프로토콜 (IP) : IP는 네트워크 계층에서 작동하는 프로토콜로 데이터 패킷 전달과 라우팅을 처리한다. IP는 주소 지정 및 패킷의 경로 선택을 담당하며 IPv4, IPv6 두 가지 버전이 있다.

(2) 전송제어 프로토콜 (TCP) : TCP는 전송 계층에서 동작하는 연결 지향 프로토콜로, 데이터의 신뢰성과 순서 보장을 담당한다. TCP는 데이터를 세그먼트로 나누어 전송하고, 수신측에서 재조립해 데이터의 정확한 전달을 보장한다.

(3) 사용자 데이터그램 프로토콜 (UDP) : UDP는 전송 계층에서 동작하는 비연결성 프로토콜로, 데이터의 신속한 전달을 중시한다. UDP는 데이터를 데이터그램 형태로 전송하며 신뢰성을 보장하지 않는다.

(4) 인터넷 제어 메시지 프로토콜 (ICMP) : ICMP는 네트워크 계층에서 동작하는 프로토콜로, 네트워크 상태 및 오류 메시지를 전송하는 데 사용된다. 예로 Ping 메시지를 사용해 네트워크 호스트의 응답 여부를 확인하는데 사용된다.

(5) HTTP (Hypertext Transfer Protocol) : 웹 브라우저와 웹 서버 간에 웹 페이지 및 기타 리소스를 정송하는 데 사용되는 프로토콜이다. 클라이언트-서버 모델을따르며 브라우저(클라이언트)에서 요청을 보내고 서버에서 응답을 반환하는 방식으로 동작한다.

(6) HTTPS (Hypertext Transfer Protocol Secure) : HTTP의 보안 버전이다. SSL(Secure Soket Layers) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 통신을 암호화하고 인증하는데 사용된다. HTTP는 데이터의 기밀성과 무결성을 보호하며 안전한 통신을 제공한다. 이러한 HTTP 프로토콜의 버전중 하나는 HTTP/2이며 TCP 위에서 동작하는 프로토콜이다. 이러한 HTTP/2는 다중화 기능을 제공해 여러개의 요청과 응답을 동시에 처리 할 수 있으며, 헤더 압축, 서버 푸시 등의 기능을 제공해 웹 페이지 로딩 속도를 개선한다.

3) IP 주소

IP는 데이터 그램 형태로 데이터를 전송한다. 데이터그램은 패킷화된 데이터 단위를 나타내는 말로, 송신자로부터 수신자까지 전달되는 독립적인 패킷을 나타낸다. 각 데이터그램은 IP 헤더와 페이로드로 구성되며 헤더는 메타데이터, 출발지와 목적지의 IP주소, 패킷읠 크기, 순서등을 페이로드는 파일, 메시지, 웹 페이지 등 실제 데이트를 담는다.

(1) 옥탯 규칙

옥탯 규칙은 IP 주소를 8비트로 나누어 표현하는 방식이며 IPv4 IPv6에서 모두 사용된다.

(1) IPv4

IP 주소 체계 중 하나로 32비트로 구성되어 있으며, 8비트씩 4개의 옥텟(octet)으로나누어 표현한다. 각 옥텟은 10진수로 표현되며 점으로 구분된다. 예를들어, "192.168.0.1"과 같은 형식을 가진다. 각 옥탯은 0 부터 255사이의 값을 가질 수 있다.

(2) IPv6

IP 주소 체계 중 하나로 128비트로 구성되어 있으며, 16비트씩 8개의 옥텟으로 나누어 표현한다. 각 옥텟은 16진수로 표현되며, 콜론으로 구분된다. 예를들어 "2001:0db8:85a3:0000:0000:8a2e:0370:7334"와 같은 형식이며, 각 옥텟은 0부터 FFFF까지의 값을 가질 수 있다.

두 주소 체계의 차이점은 크기와 표현 가능한 주소의 개수이다. IPv4의 경우 32비트로 표현되기에 약 43억개의 주소를 가질수 있다. 이러한 주소 체계는 인터넷의 성장과 함께 주소가 부족하게 되었다. 이를 보완하기 위해 IPv6가 도입되었으며, IPv6의 경우 128비트로 표현되기 때문에 약 340 undecillion (3.4 * 10^38) 개의 주소로 거의 무한대의 가까운 주소공간을 제공한다.

DNS(Domain Name System)

1. 정의

DNS는 인터넷에서 도메인 이름과 IP주소를 매핑하는 역할을 담당하는 시스템이다. DNS는 계층적인 구조를 가지고 있으며, 여러 개의 DNS 서버로 구성되어 있다. 이 서버들은 전 세계적으로 분산되어 있으며, 사용자의 요청에 따라 도메인 이름과 IP주소를 조회하고 전달한다.

2. 계층 구조

1) 루트 서버 (Root Server) : DNS 계층 구조의 최상위에 위치한 서버로 모든 DNS 질의의 시작점이다. 루트 서버는 전 세계적으로13대가 운영되고 있으며, 각 서버는 고유한 IP주소를 가지고 있다. 루트 서버는 최상위 도메인(.com, .net, .org 등)을 관리하는 DNS 서버들의 위치 정보를 제공한다.

2) 최상위 도메인 서버 (Top-Level Domain Server) : 틀정 최상위 도메인(.com, .net, .org 등)을 관리한는 DNS 서버이다. 각 최상위 도메인 서버는 해당 도메인의 하위 도메인을 관리하는 책임을 갖는다. 즉, .com 도메인 서버는 google.com과 같은 도메인에 대한 정보를 제공한다.

3) 네임 서버 - 권한 있는 도메인 서버 (Authoritative Domain Server) : 특정 도메인의 DNS 정보를 관리하는 서버이다. 각 도메인은 자체적으로 하나 이상의 권한 있는 도메인 서버를 가지며, 해당 도메인의 DNS 정보를 저장하고 제공한다. 이러한 서버들은 도메인 소유자 또는 관리자에 의해 운영되며, 도메인 이름과 IP 주소의 매핑 정보를 포함한다.

4) 네임 서버 - 캐시 서버 (Cahcing Server) : DNS 정보를 일시적으로 저장하여 빠른 응답을 제공한다. 사용자의 DNS 요청에 대한 응답을 받은 후, 캐시 서버는 해당 정보를 자체적으로 저장하여 다음동일한 요청에 대해 직접적인 DNS 질의를 수행하지 않고도 정보를 제공할 수 있게 한다. 이를 통해 네트워크 트래픽을 줄이고 응답 시간을 개선할 수 있다.

3. 작동 방식

DNS란? (도메인 네임 시스템 개념부터 작동 방식까지) - 하나몬

이 게시물의 중요 포인트 DNS(도메인 네임 시스템)이 사람이 읽을 수 있는 도메인 이름(www.hanamon.kr)을 IP 주소로 변환하는 시스템이라는 것은 쉽게 알 수 있습니다. 이번 글에서는 이렇게 도메인

hanamon.kr

[ NodeJS ] Cannot find module ... import from ...

OnnJE — Mon, 29 May 2023 16:06:38 +0900

상황

nodejs에서 routesSetup을 위해 별도의 .js 파일에 정의한 router 객체를 import 했을 "Cannot find module ... import from ..." 에러 발생. 아래 조치도 효과 x

node_module, package-lock.json 삭제후 재설치
캐시 삭제
디렉토리 변경 및 확인

원인

"import A from "./src/A""

nodejs는 package.json의 type을 module로 설정한 경우 위 코드는 'import A from "./src/A.mjs" '로 인식하기 때문에 확장자명이 .js인 파일을 못찾음

해결법

import할 모듈의 확장자 명을 .mjs로 변경 혹은 import 구문에 확장자명까지 명시

[ Backend ] 프로젝트 디렉토리 정리

OnnJE — Mon, 29 May 2023 01:03:57 +0900

app.js 파일에서 middleware setup, routes setup, error handling middleware setup. express app을 모듈로 export하여 server.js 에서 사용 server.js 파일에서 app을 import하여 리스닝 포트 설정 (이거 돌리면 서버 열릴듯)

서버 구동중 리퀘스트 발생시 플로우

server.js에서 설정된 리스닝 포트에서의 리퀘스트 감지
app.js에서의 routesetup의 "app.use("path", router)"에 따라 미들웨어 router 실행
routers의 대응되는 router.js에서 controllers에 정의된 로직을 import하여 req 프로세싱 및 res생성
controllers 파일에 정의된 controller.js의 로직에서 model의 메서드를 사용해 db와 인터렉션
services의 경우 보다 고차원의 로직을 수행
utile의 경우 capitalize, isEmpty와 같은 재사용 가능한 함수들을 정의

[ Git ] 자주쓰는 명령어 정리

OnnJE — Sun, 28 May 2023 16:44:53 +0900

저장소 생성

git init

.gitignore 생성

db비밀번호, api key 등 민감한 정보를 공개하지 않도록 설정합니다.

리모트 저장소 연결

git remote add {리모트 저장소 이름 / origin으로들 설정함} {remote repository 주소 / github repository 주소}

리모트 저장소 이름 변경

git remote rename {리모트 저장소 이름} {변경할 이름}

리모트 저장소 삭제

git remote rm {리모트 저장소 이름}

리모트 저장소 브랜치 삭제

git push {리모트 저장소 이름} --d {브랜치명}

브랜치 생성

git branch {생성할 브랜치명}

브랜치 삭제

git branch -d {삭제할 브랜치명}

브랜치 확인

git branch

* 옵션 : -r (리모트 브랜치 확인) -a (로컬 및 리모트의 모든 브랜치 확)

현재 작업중인 브랜치 변경

git switch {이동할 브랜치명}

변경 사항을 커밋 전 스테이징 영역으로 이동

git add {파일 / 디렉토리 경로}

* 모든 변경사항을 스테이징 하고 싶을 경우 "git add -A"을 사용합니다.

* 현제 디렉토리 이하에서 발생한 모든 변경사항을 스테이징 하고 싶을 땐 "git add ."을 사용합니다.

* 개별 변경사항을 확인하며 스테이징 하고 싶을 땐 "git add -p"를 사용합니다.

add 및 commit 상태 확인

git status

커밋

git commit -m "{description}"

브랜치 병합

git merge {수정될 브랜치} {병합될 브랜치}

로컬 => 원격 저장소 업로드

git push {원격 저장소 이름} {올릴 로컬 브랜치 이름}

원격 => 로컬 저장소 다운로드

git pull {원격 저장소 이름}

저장소 내 폴더/파일 이름 변경

git mv {대상 디렉토리} {바꿀 디렉토리}

* 폴더 이름을 바꾸려고 했는데 바로 안되서 루트에 위치하도록 변경한다음에 다시 원위치로 복귀했더니 됐습니다.

커밋 취소

git reset HEAD^

[ MongoDB ] 기본 CRUD

OnnJE — Thu, 11 May 2023 20:13:56 +0900

import { MongoClient } from "mongodb";

export async function insert(dbName, collectionName, data) {
  //create 생성
  const client = new MongoClient(process.env.URL);

  try {
    //client 연결
    await client.connect();
    
    //database, collection 설정
    const database = client.db(dbName);
    const collection = database.collection(collectionName);

    //
    try {
      await collection.insertMany([data]);
      console.log("insertion complete");
    } catch (err) {
      console.error(`ERROR: ${err}`);
    }
  } catch (err) {
    console.log("Error occurs when connecting: ", err);
  } finally {
    //연결 해지
    await client.close();
  }
}

export async function read(dbName, collectionName, findQuery) {
  const client = new MongoClient(process.env.URL);
  
  try {
    await client.connect();

    const database = client.db(dbName);
    const collection = database.collection(collectionName);

    try {
      const cursor = await collection.find(findQuery);
      console.log(cursor);
    } catch (err) {
      console.error(`ERROR: ${err}`);
    }
  } catch (err) {
    console.log("Error occurs when connecting: ", err);
  } finally {
    client.close();
  }
}

export async function update(dbName, collectionName, findQuery, updateDoc) {
  const client = new MongoClient(process.env.URL);

  try {
    await client.connect();

    const database = client.db(dbName);
    const collection = database.collection(collectionName);

    try {
      await collection.findOneAndUpdate(findQuery, updateDoc, {
        returnOriginal: false,
      });
    } catch (err) {
      console.error(`ERROR: ${err}`);
    }
  } catch (err) {
    console.log("Error occurs when connecting: ", err);
  } finally {
    client.close();
  }
}

export async function remove(dbName, collectionName, deleteQuery) {
  const client = new MongoClient(process.env.URL);

  try {
    await client.connect();

    const database = client.db(dbName);
    const collection = database.collection(collectionName);
    try {
      await collection.deleteMany(deleteQuery);
    } catch (err) {
      console.error(
        `Something went wrong trying to delete documents: ${err}\n`
      );
    }
  } catch (err) {
    console.log("Error occurs when connecting: ", err);
  } finally {
    client.close();
  }
}

React 프로젝트 디렉토리 정리

OnnJE — Tue, 9 May 2023 12:44:33 +0900

How to better organize your React applications?

I’ve been working on very large web applications for the past few years, starting from ground zero and, with a dozen other developers…

alexmngn.medium.com

결론 : 컴포넌트 타입별 정리가 아닌 기능별로 정리하자

type(좌) feature(우) 에 따른 디렉토리 정리

타입에 따른 정리는 프로젝트가 커질수록 유지 보수에 어려움을 겪는다. 기능에 따른 정리는 위 예시 중 우측에 해당하는데 관련된 기능에 따라 그룹화하고 필요에 따라 중첩하여 컴포넌트를 보다 유연하게 다룰 수 있다. 즉, 각 컴포넌트를 스스로 동작할 수 있도록 그룹화 하여 독립 가능토록 한다.

이러한 각 그룹화된 컴포넌트가 제대로 동작하기 위해선 아래의 규칙을 준수해야 한다.

각 컴포넌트는 종속된 컴포넌트 혹은 서비스를 정의할 수 있으나 scene는 사용하거나 정의해서는 안된다.
scene는 종속된 컴포넌트, scene, 서비스를 정의할 수 있다.
서비스는 종속된 서비스를 정의할 수 있으나 컴포넌트나 scene를 사용할 수 없다.
종속된 feature는 오직 부모에서만 사용 가능하다.

component

root level에서는 button, form field, thumbnails, listComments, formComposer 과 같은 주된 컴포넌트만 정의한다.

scene

scene은 앱의 page를 나타낸다. 일반적인 컴포넌트와 같다고 볼 수 있지만 구분해서 다루는 것이 좋다. 예를들어 react-router-dom을 사용한다면 index.js파일에 scene를 모두 임포트하여 route 세팅을 할 수 있다.

scene는 scene, 컴포넌트, 서비스를 종속하여 사용 가능하며, 이러한 각 요소는 오직 scene 폴더자체에서만 사용 가능해야함을 주의하자.

[ JS ] 요소의 좌표

OnnJE — Sat, 15 Apr 2023 21:32:02 +0900

요소의 좌표는 창 기준(client), 문서 기준(page) 이 두 기준을 따라 계산됩니다. 즉 문서 기준인 pageX, pageY는 스크롤에 영향받지 않지만 clientX, clientY는 스크롤에 따라 그 값이 변경됩니다.

요소의 좌표 얻기

요소의 좌표는 element.getBoundingClientRect()를 통해 얻는 DOMRect 클래스의 인스턴스를 통해 얻을 수 있습니다. DOMRect의 주요 프로퍼티는 아래와 같습니다.

x와 y – 요소를 감싸는 네모의 창 기준 X, Y 좌표
width와 height – 요소를 감싸는 네모의 너비, 높이(음수도 가능)

아래는 파생 프로퍼티입니다.

top과 bottom – 요소를 감싸는 네모의 위쪽 모서리, 아래쪽 모서리의 Y 좌표
left와 right – 요소를 감싸는 네모의 왼쪽 모서리, 오른쪽 모서리의 X 좌표

즉,

left = x
top = y
right = x + width
bottom = y + height

elementFromPoint(x,y) - 고정된 좌표의 요소 얻기

document.elementFromoPoint(x, y) 호출 시 창 기준 좌표 (x, y)에 가장 가까운 중첩 요소를 반환합니다. 즉 아래와 같은 코드로 창 정중앙에 위치한 태그를 반환받을 수 있습니다.

let centerX = document.documentElement.clientWidth / 2;
let centerY = document.documentElement.clientHeight / 2;

let elem = document.elementFromPoint(centerX, centerY);

[ JS ] 브라우저 창 사이즈와 스크롤

OnnJE — Sat, 15 Apr 2023 20:57:04 +0900

브라우저 창 사이즈

JS에서 브라우저 창의 너비와 높이를 얻기 위해서는 document.documentElement.clientHeight와 같이 window가 아닌 document.documentElement를 사용합니다. 그 이유는 window.innerHeight와 같은 방식이 스크롤바를 차지하는 영역을 고려하지 않기 때문입니다.

window.inner... : 전체 창 너비
document.documentElement.client... : 전체 창 너비 중 스크롤바가 차지한 영역을 제외한 너비

문서 전체의 크기(가려져 있는 부분까지)를 구할 경우에 아래와 같이 구해야합니다. 그 이유는 아주 오래전부터 논리적이지 않은 방식이로 이어져온 것이기에 알아볼 필요가 없으니 그냥 받아들이시면 됩니다.

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

스크롤 정보

스크롤 정보는 scrollLeft, scrollTop으로 계산 가능하지만 브라우저간 호환성을 고려했을 때 window객체의 pageXOffset, pageYOffset을 사용하는게 추천됩니다. 이 두 프로퍼티는 모두 scrollLeft, scrollTop과 유사하게 스크롤링에 의해 가려진 영역의 크기를 반환합니다.

스크롤 상태 변경

window.scrollBy(x, y) : 인자로 주어진 값만큼 현재 위치에서 상대적으로 변경
window.scrollTo(x, y) : 절대 좌표를 기준으로 페이지 스크롤 상태를 변경, 즉, 문서 전체의 왼쪽 위 모서리를 기준으로 인자로 주어진 (x, y) 좌표로 변
element.scrollintoView() : 이 메서드를 호출하면 페이지 스크롤이 움직여 대상 element가 눈에 보이도록 조정됩니다. 인수의 기본값은 true인데 이 경우 element가 창 상단 부분에 위치하며 false일 경우 창 하단에 위치합니다.
스크롤을 막고 싶다면 document.body.style.overflow를 hitdden으로 설정합니다. 이때 스크롤바가 삭제되며 발생하는 너비의 변경은 padding을 스크롤바와 동일한 크기로 주어 막을 수 있습니다.