비굴이의 개발일지

백엔드와 프론트엔드가 서로 연결을 할 때 항상 발생하는 문제인 CORS 에러에 대해 알아보려고 합니다. CORS는 Cross Origin Resource Sharing의 줄임말로 교차 출처 자원 공유를 뜻합니다. 프론트엔드와 백엔드가 서로 다른 곳에서 요청을 주고 받기 때문에 필요한 부분이라고 할 수 있습니다. CORS를 이해하기 위해서는 Origin의 뜻을 이해하고 넘어가야 합니다. Origin은 웹 사이트의 주소인 URL에서 프로토콜, 도메인, 포트 번호를 다 합친 것을 의미합니다. 포트 번호 80은 대부분 생략하여 나타냅니다. 동일 출처 정책이라고 하는 SOP(Same Origin Policy)에 의해서 동일한 origin의 요청만 보낼 수 있게 되는데 기술 발전으로 인해 다른 origin과의 연결..

CS 공부 2023. 4. 7. 13:25

제네릭은 자바에서 타입 안정성을 보장하기 위한 개념으로 사용됩니다. 하지만 타입의 안정성을 보장하기 위해서 작성하는 것이기 때문에 타입스크립트에서도 제네릭을 사용할 수 있습니다. 제네릭은 general이라는 단어에서 시작한 단어이니만큼 타입을 일반화한다고 생각하면 될 것 같습니다. 보통은 변수 등을 선언하는 시점에서 타입을 지정해주기 마련인데, 생성 시점에서 타입을 명시하여 하나의 타입이 아닌 다양한 타입을 사용할 수 있도록 해줍니다. 당연히 여러 타입으로 지정한 다음에 타입에 따른 작업을 하기 때문에 코드의 재사용성이 증가한다는 장점이 있습니다. 예시를 들어보겠습니다. 숫자열, 문자열, 불린 값에 따라 다른 작업을 하고 싶다고 가정하겠습니다. function NumberFunc(value: number..

CS 공부 2023. 3. 31. 14:51

MSA는 Micro-Service Architecture의 줄임말로 독립적으로 기능하는 서비스로 나눠서 구성하는 아키텍쳐입니다. 잘 만들어진 MSA는 비지니스 범위에서 하나의 기능씩 수행합니다. Monolithic Architecture MSA와 대조적인 아키텍쳐는 모노폴리 아키텍쳐입니다. 모든 구성요소가 프로젝트에 통합되어 있는 형태입니다. 소규모 프로젝트에서는 해당 아키텍쳐를 도입해도 괜찮지만 규모가 커지면 커질 수록 서비스들이 독립적이지 않기 때문 유지보수의 문제점이 발생합니다. 부분적인 오류 발생이 전체 서비스의 오류로 발전될 수 있습니다. MSA의 단점 서비스별로 구현하기 때문에 복잡성이 높아질 수 밖에 없는 단점이 있습니다. 또한 유닛 테스트에선 장점을 가질 수 있지만 통합 테스트에서는 규모가..

CS 공부 2023. 3. 31. 13:23

DB에서 인덱스의 역할은 이름표 혹은 주소와 같은 역할을 합니다. 당연히 각 데이터가 주소를 가지고 있기 때문에 검색 기능에서 효율성이 높아집니다. 인덱스를 만드는 방법은 테이블의 특정 칼럼을 기준으로 만드는 것인데 데이터를 구분하는 ket와 테이블의 칼럼의 값으로 저장합니다. 아래의 그림이 제일 대표적인 예입니다. Index가 있으면 왜 검색이 빨라지는지 예시를 들어보겠습니다. 서점에 있는 책에 대한 정보가 DB에 저장되어 있다고 가정하겠습니다. 해당 정보는 book = { name : '자바스크립트', category : '학습서', author : '비굴이' } 의 형태를 띄고 있다고 하면 DB에는 등의 형태로 저장될 것입니다. 새로운 데이터는 계속해서 쌓이게 되고 양은 방대해지게 될 것입니다. 이..

CS 공부 2023. 3. 28. 19:29

REST API는 REpresentational State Transfer API의 줄임말로 굳이 번역을 하자면 '표현하는 상태를 전달하는 API' 정도로 번역할 수 있을 것 같습니다. 서버와 클라이언트 사이의 통신을 위한 아키텍쳐 중에 하나인데, 자원을 이름지어 표현(representational)하여 자원의 상태(state). 즉, 정보를 주고 받는 것을 뜻합니다. HTTP 프로토콜을 따르기 때문에 HTTP URI를 통해 자원을 명시합니다. 그리고 HTTP Method(GET, POST, PUT, PATCH, DELETE)를 통해 CRUD를 적용합니다. 장점 ● HTTP 프로토콜을 따르기 때문에 REST API를 위한 별도의 인프라를 구축할 필요가 없습니다. ● HTTP 프로토콜만 따르면 어떤 플랫폼..

CS 공부 2023. 3. 28. 12:19

OOP의 정의 OOP는 Object-Oriented Programming의 줄임말로 말 그대로 객체를 지향하는 프로그래밍을 뜻합니다. C언어로 대표되는 기존의 컴퓨터 프로그래밍은 Procedural Programming의 줄임말인 PP로 절차지향 프로그래밍이었습니다. 명령어의 목록으로 순차적으로 처리하는 기존의 방식인 PP와는 반대로 OOP는 여러 독립적인 단위인 '객체'를 만들고 이들이 상호작용하도록 프로그램 로직을 구성합니다. 객체는 상태와 행동으로 이뤄져 있으며, 객체들 간에는 메시지를 주고 받으며 상호작용합니다. 객체의 구성 상태 : 객체의 상태는 객체가 가지고 있는 데이터를 의미합니다. 최초로 객체가 생성될 때 초기화 되며 객체의 수명 동안 변경될 수 있습니다. 객체의 내부에서 상태는 관리되며 ..

CS 공부 2023. 3. 27. 18:39

처음에 시도하려고 했던 것은 모든 경우의 수를 만들고 그 다음에 비교하여 최솟값을 찾으려고 했습니다. 하지만 이렇게 되면 이중 for문을 사용해야했으며, 비효율적이라는 생각이 들었습니다. 이에 고민을 하다 생각난 것이 결과적으로 최솟값을 구하려면 두 배열 중 하나의 배열에선 최솟값을 다른 하나의 배열에서 최댓값을 곱하여서 더하는 것이 최솟값을 구한다 는 것이었습니다. 이에 sort()를 이용하여 A 배열은 오름차순, B배열은 내림차순으로 정렬해주고 for문을 이용해서 각 배열의 i번째있는 숫자들을 꺼내서 곱하고 답에 더하는 방식을 취했습니다. function solution(A, B) { let answer = 0; A = A.sort((a, b) => a - b); B = B.sort((a, b) =>..

코딩테스트 2023. 3. 23. 14:16

문제는 쉽게 생각하면 모든 단어들의 첫번째 글자를 대문자로 만들고 나머지는 소문자로 만드는 문제입니다. 우선 중간중간에 첫번째 글자가 아님에도 대문자들이 있을 수 있기 때문에 그냥 전체 문자을 소문자로 바꿔주는 작업이 필요했습니다. 숫자는 영향을 받지 않기 때문에 주어진 s 전체를 소문자로 변경했습니다. let s = "foR tHe lAst wEek"; s = s.toLowerCase(); console.log(s) //"for the last week" 그 다음 생각한 것은 우선 띄어쓰기로 나눠져 있는 문자열을 배열로 바꿔줘야 한다는 것이었습니다. 때문에 split()을 사용하여 띄어쓰기를 기준으로 문자열을 나눠줬습니다. let s = "3people unFollowed me" let replaced..

코딩테스트 2023. 3. 23. 13:59