본문 바로가기

분류 전체보기

 (27)
[Docker] 도커를 써보자 지난 3주간 팀프로젝트를 하면서 항상 겪었던 불편함이 있었다. 팀원들간에 개발환경이 안맞는 것. npm 버전이 서로 다르기 때문에 같은 리액트 라이브러리를 설치해도 package.json 이나 package-lock.json 의 내용이 달랐다. 그래서 항상 브랜치 병합 과정에서 충돌이 생겼다. 이에 대한 해결책으로 리액트 라이브러리 설치시 서로에게 알리고 package.json 파일은 한명만 올리기로 했다. 그러면 나는 git pull 을 받아와서 실행할 때마다 npm install 을 해야하고, 개발 후에 commit을 할 때는 package.json 을 discard 시킨 후에 올려야 했다. 정말 너무 불편했다!! 이게 끝이 아니다. pip 라이브러리중 pymssql을 설치해야 했는데, 각자 환경에 ..
[CORS] CORS는 무엇일까? 풀스택으로 웹 개발 프로젝트를 진행하면서 CORS라는 에러를 마주쳤다. 살면서 처음보는 에러였다. CORS는 대체 뭐하는 녀석일까? 풀 네임은 Corss-Origin Resource Sharing이다. 보안상의 이유로 JavaScript에서 보내는 교차 출처의 HTTP 요청을 제한하는 정책이다. 대부분의 브라우저에 이 CORS라는 것이 적용되어있다. 교차 출처라는 것이 무엇인지 정확히 몰라서 찾아봤더니 예시를 들어보면 이렇다. http://localhost:3000 에서 http://www.example.com/ 이라는 곳에 요청을 보내면 CORS 에러가 발생한다. 요청의 출처는 localhost:3000 인데 동일한 출처가 아닌 www.example.com 에 요청을 보냈기 때문이다. 같은 출처가 아닌..
[Network] HTTP 통신과 Socket 통신 HTTP 통신에 대해 공부하다가 문득 엘리스 코치님께서 하신 말씀이 떠올랐다. 스트리밍 서비스나 업비트 처럼 실시간으로 업데이트가 필요한 웹 서비스는 HTTP 통신이 아니라 Socket 통신을 이용한다고 하셨다. 생각해보니 주식 사이트같은 경우는 1초 단위로 주가가 업데이트 되는데, HTTP처럼 매번 서버에 요청을 보내고 받아오기에는 그 속도가 말이 안된다. 분명 어떤 방법이 있을 것인데, 그것이 바로 Socket 통신이었다. 그럼 HTTP 통신과 Socket 통신에는 어떤 차이가 있는가? HTTP 통신 Hyper Text Transfer Protocol의 약어로 웹 통신 프로토콜이다. 대부분의 웹 사이트는 HTTP 통신을 한다. 클라이언트가 서버에게 요청을 보내면 서버는 들어온 요청에 따라 응답을 보낸..
[Framework] ASP.NET은 무슨 프레임워크인가? 요즘 많이 사용되는 웹 개발 프레임워크로 Django, Node.js, Spring 등이 있다. 각각 어떤 프레임워크인지는 대충 알고있다. Django는 실제로 사용해봤고, Spring은 요즘 공부중이고, Node.js는 예전에 살짝 배워볼까하고 입문 단계 정도만 맛 본적이 있다. 그런데 ASP.NET은 처음들어봤다. 알게된 경로는 비밀이다. 그래서 ASP.NET은 어떤 프레임워크인지 알아봤다. 일단 .NET 이라는 게 있는데 이것은 앱, 웹 등의 서비스를 빌드하는데 사용되는 프레임워크라고 한다. ASP.NET은 .NET의 하위집합으로 Microsoft에서 개발한 웹 개발 프레임워크다. ASP는 Active Server Page의 약자이다. 동적인 웹 서비스를 쉽게 만들 수 있도록 도와준다. CLR(Co..
[디자인패턴] MVC 패턴 컴파운드 패턴 개요 소프트웨어 개발에서는 하나의 디자인 패턴만을 사용하지 않고 여러 가지 패턴을 섞어 사용한다. 일반적으로 여러 패턴을 합쳐 목적을 달성한다. GoF에 따르면 ‘컴파운드 패턴은 2개 이상의 패턴을 합쳐 문제를 해결’하는 패턴이다. 하지만 컴파운드 패턴은 단순히 여러 패턴의 조합이 아닌 문제를 해결하는 독립적인 솔루션이다. 모델(Model)-뷰(View)-컨트롤러(Controller) 패턴 MVC 패턴은 유저 인터페이스를 구현할 수 있는 유지보수가 용이한 디자인 패턴이다. MVC 패턴은 애플리케이션을 모델과 뷰, 컨트롤러로 나눠 구성한다. 각 파트는 맞물려 있으며 요청의 처리와 표현을 분리한다. MVC 패턴의 원리 모델은 데이터와 비즈니스 로직을 처리하고 뷰는 데이터의 시각적 표현을 담당하..
[JAVA] enum 이란 무엇일까? '스프링 시큐리티 OAuth2' 에 대해 공부중에 나온 개념이다. 스프링 부트 1.5 방식에서 2.0 방식으로 넘어오며 CommonOAuth2Privder라는 enum이 추가되었다고 한다. 따라서 구글, 깃허브, 페이스북, 옥타의 OAuth2를 이용할 때는 access token이나 authorization을 위한 url을 직접 입력해줄 필요가 없다고 한다. 여기서 enum이란 무엇일까? 정의부터 보자면 enum은 관련있는 상수의 집합이라고 할 수 있다. enum은 흔히 열거형이라고 부른다. 이해를 위해 바로 예시를 들어보자. 만약 요일과 관련된 상수 집합을 클래스로 만들려고 하면 다음과 같이 만들 수 있다. class Day{ public final static Day MONDAY = new Day()..
[OAuth2] 구글 로그인 기능 레이서 포트폴리오에는 구글 로그인 기능이 있다. 구글 로그인은 당연하게도 OAuth2를 이용해 구현되었다. 내가 이해한 OAuth2란 무엇인지 정리해보고 이번 프로젝트에서 구글 로그인 기능을 어떻게 구현했는지 정리해보자. 유저를 관리하는 사이트라면 보안을 위해서 신경써야할 것이 많다. 그러다보니 개발자의 실력에 따라 보안 수준이 천차만별이다. 그러면 보안 수준이 어느 정도 검증된 타사의 사이트에게 인증 과정을 떠넘기면 어떨까? 이때 사용하는 것이 OAuth2 다. OAuth2는 인증 과정을 타사에게 위임하는 인증 방식이다. OAuth2를 이용할 수 있는 대표적인 사이트로는 구글, 네이버, 카카오, 페이스북 등이 있다. 요즘 운영되는 사이트에 들어가보면 '구글 계정으로 로그인하기', '네이버 계정으로 로그..
[Azure] 클라우드 스토리지를 사용해보자 프로필 이미지를 등록하는 기능을 구현하다가 아주 비효율적인 성능 이슈를 만나게 되었다. 포트폴리오의 학력, 수상이력 같은 항목들은 String 타입으로 데이터를 직접 서버와 주고 받는 방식으로 구현되어 있었다. 그래서 당연히 이미지도 Bytes 타입으로 서버랑 직접 주고 받으면 되겠거니 하며 당차게 코딩을 시작했다. 이미지 등록 과정은 다음과 같다. 클라이언트에서 서버로 이미지 파일 전송 -> 서버에서 파일을 읽음 -> 파일을 Bytes 타입으로 인코딩 -> 인코딩 된 데이터를 서버 디렉토리 내에 이미지로 저장 -> 데이터베이스에 이미지 이름 저장 클라이언트에서 유저 아이디 전송 -> 서버에서 유저아이디에 해당하는 이미지 이름을 데이터베이스에서 검색 -> 이미지 이름을 서버 디렉토리 내에서 탐색 -> 이..

티스토리툴바