분류 전체보기
-
CORS 정책을 고려한 API 작성하기Server/기타 2023. 4. 21. 21:23
CORS 정책을 고려한 API 작성하기 현재 토이프로젝트로 운영하고 있는 서비스에서는 로그인/회원가입 시 accessToken을 반환한다. 여기에 추가로 refresh token을 cookie로 전송하기로 결정했다. 그런데 기능을 개발하던 중 CORS 정책으로 인해 쿠키를 전송하는 것에 어려움을 겪었다. 원인을 찾아보니 CORS정책 때문이었다. frontend는 vercel로 server를 배포했고, api server는 별도의 도메인을 구매하여 배포했기 때문에, 서로 다른 도메인이어서 쿠키를 주고받는 것이 안되었던 것이다. 'CORS를 잘 모르면 삽질을 많이 하게 될 것이다.', 'BackEnd의 도움 없이 FrontEnd가 CORS를 해결하는 것은 불가능하다.'는 이야기를 들어왔던 터라, 이번 기회에..
-
인증/인가 과정에서 XSS, CSRF 보안 개선 사례Server/기타 2023. 4. 21. 19:44
인증/인가 과정에서 XSS, CSRF 보안 개선 사례 프로젝트 개선 과정에서 'accessToken이 로컬스토리지에 저장되는 것이 옳은가?' 생각해보게 되었다. accessToken은 JWT로 만들어졌는데, 페이로드에는 권한 인증을 위한 개인정보가 담긴다. 따라서 accessToken을 로컬스토리지에 저장하는 것은 접근, 탈취의 위험이 있어 좋은 방법같지 않았다. 그래서 accessToken이 로컬스토리지에 저장되었을 때, 그리고 탈취됐을 때 발생할 수 있는 문제에는 무엇이 있는지 알아보았고 XSS 공격에 취약하다는 점을 알게되었다. 해당 공격에 대한 자세한 내용은 별도로 작성한 글에서 확인할 수 있다. XSS 공격을 대비하기 위해, accessToken을 브라우저에서 접근할 수 없도록 로컬스토리지에 저..
-
let's Git it 프로젝트 회고Project 2023. 4. 21. 01:42
let's Git it 프로젝트 회고 let's Git it은 현재(2023년 4월 기준) 운영 중이며, 실제 사용자의 피드백(버그, 의견 등)를 받아 서비스를 개선하였습니다. 서비스 운영을 시작하며, 서비스 개발 이전에 학습한 내용과 운영 과정에서 들었던 고민들을 정리해둘 필요를 느껴 회고를 작성합니다. 자세한 내용은 게시물로 정리해두었으며 각 항목에 링크를 걸어두었습니다. 링크가 있는 항목은 밑줄이 그어져 있습니다. 클릭하시면 자세한 회고를 확인하실 수 있습니다. 아직 추가되지 않은 회고는 내용이 정리 되는 대로 수시로 업데이트 될 예정입니다. 📌 기획의도 유저의 피드백을 받고, 서비스를 개선해보는 경험을 하고 싶었기 때문에, 사용자가 가볍고 재미있게 이용해볼 수 있는 서비스를 기획하고자 했습니다. ..
-
SOLID : 객체지향 프로그래밍의 5대 원리OOP 2023. 4. 20. 15:52
SOLID : 객체지향 프로그래밍의 5대 원리 프로젝트를 시작 할 당시, 객체지향적으로 코드를 작성하거나 아키텍쳐에 대해 잘 몰랐기 때문에 처음부터 객체지향적인 설계는 엄두도 못냈다. 프로젝트 배포를 끝내고 기능을 변경하거나 코드를 리펙토링 하는 과정에서 고쳐야 할 것들이 눈에 너무 띄었다. 그때는 객체지향의 개념을 몰랐기 때문에, 그냥 느낌적으로 '기능 별로 묶어 놔야겠다.', '이 함수 기능이 너무 복잡한데 기능을 좀 나눠야겠다. 이 기능만 다른 누군가 쓸 수도 있잖아?' 이런 생각으로 리펙토링을 했었다. 그런데 아는 만큼 보인다고 했던가. 객체지향의 4가지 특징과 SOLID에 대해 반복 학습하고 나니 이제는 내가 작성한 코드가 뭐가 잘못 되었는지 보이기 시작했다.(어쩌면 대부분 스파게티 코드 일지도..
-
Relational data model & Relational databaseDatabase 2023. 4. 15. 03:00
Relational data model Set 수학의 집합과 같은 개념이다. 서로 다른 elements를 가지는 collection 하나의 set에서 elements의 순서는 중요하지 않다. e.g. {1, 3, 11, 4, 7} Relation in mathematics binary relation은 cartesian product의 부분집합이다. 이것이 수학에서 말하는 relation의 개념이다. 3개의 list로 이루어진 relation은 n개의 set에 대한 cartesian product의 부분 집합이다. 그리고 각각의 list를 tuple이라고 부를 수 있다. ✅ 즉 정리하면, 수학에서의 relation은 Cartesian Product의 부분집합(subset of Cartesian Produ..
-
OSI 7 Layer - 2계층Network 2023. 4. 15. 01:44
OSI 7 Layer - 2계층 2계층에서 하는 일 2계층은 하나의 네트워크 대역 즉, 같은 네트워크 상에서 존재하는 여러 장비들 중에서 어떤 장비가 어떤 장비에게 보내는 데이터를 전달하고 추가적으로 오류제어, 흐름 제어를 수행한다. 2계층은 하나의 네트워크 대역(LAN)에서만 통신할 때 사용한다. 다른 LAN과 통신할 때는 항상 3계층이 도와주어야 한다. 3계층의 주소와 3계층의 프로토콜을 이용하여야만 다른 네트워크와 통신이 가능하다. 2계층에서 사용하는 주소 : MAC MAC 장비(랜카드)가 실질적으로 부여받은 고유 주소로 총 48bit(6byte)로 이루어져 있다. 📌 16진수로 표기하며 1바이트 마다 - 또는 :로 표기한다. 📌 e.g.) 80:69:1A:00:00:00 📌 MAC = OUI + ..
-
네트워크란 무엇인가?Network 2023. 4. 15. 01:40
네트워크란 무엇인가? 네트워크란 노드들이 데이터를 공유할 수 있게 하는 디지털 전기 통신망 📌 노드 : 네트워크에 속한 컴퓨터 또는 통신 장비를 뜻하는 말 인터넷이란 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 네트워크 웹이란 인터넷 네트워크를 이용하여 통신되는 정보의 집합 네트워크의 분류 크기에 따른 분류 📌 LAN(Local Area Network) : 가까운 지역을 하나로 묶은 네트워크 📌 WAN(Wide Area Network) : 먼 지역을 묶은 네트워크, 즉 LAN과 LAN을 다시 하나로 묶은 것 📌 MAN(Metropolitan Area Network) 📌 VLAN, CAN, PAN 등등 연결 형태에 따른 분류 📌 Star형 : 중앙 장비에 모든 노드가 연결 일반적..
-
원티드 프리온보딩 : 도커를 활용하는 클라우드 서비스Server/기타 2023. 4. 12. 01:09
컨테이너 오케스트레이션이란? 출처 : https://www.hpe.com/kr/ko/what-is/container-orchestration.html 일반적으로 애플리케이션은 의도에 따라 애플리케이션이 실행되게 하기 위해 네트워킹 수준에서 정리가 필요한 개별적으로 컨테이너화된 구성 요소(주로 마이크로 서비스로 칭함)로 구성됩니다. 이러한 방식으로 다수의 컨테이너를 정리하는 프로세스를 컨테이너 오케스트레이션이라고 합니다. 오늘날의 개발에서, 애플리케이션은 더 이상 하나의 통일체가 아니라 특정 애플리케이션이 설계 의도대로 기능하도록 함께 작동해야 하는 수십 또는 수백 개의 느슨하게 결합되고 컨테이너화된 요소로 구성됩니다. 컨테이너 오케스트레이션은 개별 구성 요소와 애플리케이션 계층의 작업을 정리하는 과정을 ..
-
Database 기본 개념Database 2023. 4. 12. 00:06
Database 기본 개념 DB 전자적으로 저장되고 사용되는 관련있는 데이터들의 조직화된 집합 ✅ 관련있는 데이터 : 같은 출처나 같은 목적, 서비스 안에서 생성되는 데이터들을 관련 있는 데이터라고 설명할 수 있다. ✅ 조직화된 집합 : 찾고자 하는 데이터들을 더욱 빨리 찾을 수 있게, 불필요한 데이터가 중복되어 생성 되는 것을 막고 데이터의 불일치를 막기 위해 관련있는 데이터들 끼리 잘 조직화 해야 한다. DBMS(Database Management System) 사용자에게 DB를 정의하고 만들고 관리하는 기능을 제공하는 소프트웨어 시스템 ✅ 데이터베이스를 사용하다보면 부가적인 정보(metadata)가 생성된다 ✅ metadata : 데이터베이스를 정의하거나 기술하는 데이터, 즉 데이터를 위한 데이터 ..
-
DFS(Depth-First Search)Algorithm | Data structure/Theory 2023. 4. 11. 14:27
DFS(Depth-First Search) DFS는 깊이 우선 탐색이라고도 부르며 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘 DFS는 스택 자료구조(혹은 재귀함수)를 이용하며, 구체적인 동작과 과정은 다음과 같다. 탐색 시작 노드를 스택에 삽입하고 방문 처리 스택의 최상단 노드에 방문하지 않은 인접 노드가 하나라도 있으면 그 노드를 스택에 쌓고 방문 처리. 방문하지 않은 인접 노드가 없으면 스택에서 최상단 노드를 꺼낸다. 더 이상 2번의 과정을 수행할 수 없을 때 까지 반복 DFS 동작 예시 function dfs(graph, idx, visited) { // 현재 노드를 방문 처리 visited[idx] = true; console.log(idx); // 현재 노드와 연결된 다른 노드를 재귀적..