My Boundary As Much As I Experienced

부정확함 주의! 막 네트워크 공부 시작한 신입 프론트엔드 개발자가 chatGPT와 여러 블로그들을 탐색하며 정리한 글이다. 자의적인 해석이 들어가 있을 수 있으며, 혹여 틀린 부분이 있다면 댓글로 알려주면 감사드리겠다. 웹서버와 프론트 서버가 다른건가? 웹어플리케이션서버(WAS)는 또 뭔데? 웹서버, 프론트 서버, 웹어플리케이션 서버... 사실 알다가도 모르겠는 개념들이다. 지금까지 프론트엔드 배포란 Vercel이나 Netlify, firebase hosting 등을 통해 앗싸리 해왔고 이걸로도 충분하다고 생각했었는데, 그러나 사수님께서 실제로 자신이 ec2 등의 클라우드 서버를 빌려 배포파일을 업로드 하는 경험을 해보란 조언을 해주셨 해보니 쉬울거라고 생각은 안 했지만, 훨씬 어려웠고, 알아야하는 개념..

도메인(Domain)이란? 도메인은 인터넷에 연결된 컴퓨터의 ip를 사람이 쉽게 기억하기 어렵기 때문에 이를 위해서 각 ip에 사람이 쉽게 기억하고 입력할 수 있도록 문자(영문, 한글 등)로 만든 인터넷 주소이다. 도메인 체계 도메인은 “.”또는 루트(root)라 불리는 도메인 이하에 아래 그림과 같이 역트리(Inverted tree)구조로 구성되어 있다. 아래와 같이 3단계로 구분된다. 1단계 : 최상위 도메인(TLD, Top-Level Domain) 도메인 레벨 중에 가장 높은 단계에 있는 도메인이다. 7 개의 일반도메인(com, net, org, edu,, gov, mil, int)과 + 190여개의 국가 도메인(kr, de, jp..)으로 구성되어 있다. 1단계 도메인은 도메인의 목적, 종류, 국..

Flux란? An application architecture for React utilizing a unidirectional data flow. 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍처 Flux아키텍쳐는 Meta(전 Facebook)에서 개발한 단방향 데이터 흐름을 가지는 아키텍쳐이다. MVC구조를 개선하기 위해 만들어졌다. 그 전에 MVC란? (복습) 먼저 MVC구조를 보자면 이와 같은 구조를 가지는데 Controller는 Model의 데이터를 조회하거나 업데이트하는 역할을 하고, Model은 이런 데이터를 View를 통해 반영한다. 또, View는 사용자로부터 데이터를 입력받기도 하기 때문에 사용자의 입력이 Model에 영향을 주기도 한다. 문제는 이러한 구조가 거대한 어플리케이..

MVVM의 탄생기 2004년 마틴 파울러의 프레젠테이션 모델(PM) 패턴 발표 - 프레젠테이션 모델 = 뷰의 추상화 - 뷰는 단지 프레젠테이션 모델의 렌더링에 불과 - 프레젠테이션 모델은 뷰를 자주 업데이트하여 동기화 상태 유지 - 동기화 로직은 프레젠테이션 모델 클래스에 코드로 존재 2005년 - MS사는 마틴 파울러의 아이디어를 수용하여 MVVM 체계화 및 도입 - 두 패턴 모두 뷰의 상태와 동작을 포함해 추상화 - PM 패턴을 WPF 및 Silverlight 플랫폼에 맞게 특화시킨 것 MVVM의 특징 - 과거와 다른 애플리케이션의 UI 개발 환경의 변화 - 코딩을 덜 필요로 하며, 다양한 툴, 언어, 사람, 로직 등에 의해 이루어짐 - 하나의 환경 혹은 하나의 언어를 사용하던 과거와 달리, 현재 트..

최근 '리액트 교과서'를 읽다가 'React는 다른 MVC 프레임워크나 AngularJS의 지시자, Jade, Pug 같은 템플릿 엔진 문법에 비하면 학습 곡선이 얕고 완만하다(React는 MVC가 아니니 이러한 비교는 이쯤에서 그만 두겠다).' 라는 문장을 발견했다. 여기서 MVC가 무엇인가? 그리고 무엇이길래 MVC 프레임워크들이 즐비한가? MVC란? MDN에서 이를 찾아보았다. https://developer.mozilla.org/ko/docs/Glossary/MVC MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더나은 ..

Q. JWT의 장단점? JWT는 인증에 필요한 정보가 담긴 토큰을 클라이언트에서 저장하기 때문에 DB조회를 하지않아도 되고 서버 확장성에 좋다. 그러나 이러한 장점은 클라이언트에서 토큰이 탈취될 수 있다는 단점이 되기도 하다. AccessToken 인증시, 필요한 정보가 담긴 토큰으로 인증을 통과할 수 있는 key라고 보면 된다. 인증에 필요한 정보가 담기기 때문에 탈취에 대한 위험을 줄이기 위해 토큰의 유효기간이 매우 짧다. (30분 ~ 1시간) RefreshToken 유효 기간이 짧은 Access Token을 보조해주는 토큰으로 Access Token보다 유효기간이 길며, Access Token을 발급하는데 사용된다. 유효 기간은 2주 ~ 1달 정도 잡는거 같다. JWT 특징 1. AccessToke..

초창기 웹 초창기에는 모든 웹페이지가 정적인 페이지였다. 화면에 어떠한 변화를 주려고 화면을 전환하면 그 때마다 서버로부터 새로운 HTML을 전송 받아서 다시 렌더링 해야 했다. 당연히 성능적인 문제도 많았고 사용자 경험 측면에서도 좋지 못했다. 1. CSR (Client Side Rendering) React와 같은 다양한 프론트엔드 프레임워크들이 유행하면서 브라우저(클라이언트)에서 전적으로 웹 렌더링을 책임지는 방식이 보편화되었다. 이제 서버(프론트엔드 프로그램)에서 아무 내용이 없는 빈 HTML 껍데기를 보내면 클라이언트(브라우저)에서 동적으로 태그들과 스타일을 생성하여 페이지를 채운다. 이렇게 되면 최초에 HTML을 받는 것 외에는 페이지 렌더링을 위해서 별도의 HTTP 통신을 할 필요가 없어진다..

뜻: Development + Operations의 합성어 소프트웨어 개발자와 정보기술 전문가 간의 소통, 협업 및 통합을 강조하는 개발 환경이나 문화를 의미한다. 개발과 운영의 이해관계 우리는 서비스를 만들때 기획 -> 개발 -> 빌드 -> 테스트 -> 릴리즈 -> 배포 -> 운영 과같은 단계를 거친다. 이때 각각의 역할이 있게 된다 개발팀: 개발, 빌드 운영팀: 테스트, 릴리즈, 운영 개발팀 입장에서는 잦은 배포로 더 많은 기능들을 추가하여 더 좋은 서비스를 제공하고 싶어한다 하지만 운영팀의 입장에서는 잦은 배포는 그만큼 많은 버그와 오류에 대한 걱정과 스트레스가 커지게 된다. 이 개발팀과 운영팀 사이의 중간자적인 역할을 하면서 CI/CD를 책임진다. CI/CD란? CI: 지속적통합(Continuou..

명령형 프로그래밍(절차지향, 객체지향) 상태와 상태를 변경시키는 관점에서 연산을 설명하는 방식. 알고리즘을 명시하고, 목표는 명시하지 않음 절차지향 프로그래밍: 수행되어야 할 순차적인 처리 과정을 포함하는 방식 (C, C++) 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현 (C++, Java, C#) 선언형 프로그래밍 How보다는 What을 설명하는 방식 (어떻게보단 무엇을) 알고리즘을 명시하지 않고 목표만 명시함 함수형 프로그래밍: 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 하스켈, 리스프) 함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다. 함수형 프..

시큐어 코딩 안전한 소프트웨어를 개발하기 위해, 소스코드 등에 존재할 수 있는 잠재적인 보안약점을 제거하는 것 보안 약점을 노려 발생하는 사고사례들 SQL 인젝션 취약점으로 개인유출 사고 발생 인증함수(입력값) 입력값으로 "truthy) //주석" 같은걸 주면 인증함수(truthy) //주석) ... 로 되어 나머지 코드는 주석처리되어 뚫린다고 합니다. URL 파라미터 조작 개인정보 노출 URL파라미터에 중요한 개인정보 등이 있을 때 이를 유추하여 빼오는 기술 무작위 대입공격 기프트카드 정보 유출 Brute Force로 특정 값 유추해오기 안전하지 않은 코드 String query "SELECT * FROM users WHERE userid = '" + userid + "'" + "AND password..