본문 바로가기

전체 글

http와 https의 차이 "HTTP에 SSL을 더하면 HTTPS가 된다" 1. HTTP웹 서버 웹 브라우저 간에 데이터를 전송하는 데 사용되는 표준 프로토콜이다. 데이터가 암호화되지 않아 보안상 취약하다. HTTP를 사용하면 데이터가 네트워크를 통해 전송될 때 중간에 누군가가 가로채거나 조작할 수 있다.2. SSLSSL(Secure Sockets Layer)은 공개키-개인키를 사용하여 데이터를 암호화 및 해독하는 방식이다. 클라이언트와 서버 간의 통신에서 서버가 공개키로 데이터를 암호화하고, 클라이언트는 이를 개인키로 해독하여 안전하게 통신한다.SSL은 최근에 TLS(Transport Layer Security)로 대체되었다. TLS는 SSL의 후속 버전이며, 보안 및 성능 측면에서 더욱 개선되었다고 한다. 그러나 많은 사람들.. 더보기
보안 표준 이해하기 (SSO, SAML, OAuth, RBAC) SSO, SAML, OAuth, RBAC는 모두 인증 및 권한 부여와 관련된 주요한 개념들입니다. SSO (Single Sign-On): SSO는 사용자가 여러 시스템 또는 애플리케이션에 대해 단일 자격 증명으로 로그인할 수 있는 인증 메커니즘입니다. 사용자가 한 번 로그인하면 다른 모든 시스템에 자동으로 인증됩니다. 이것은 사용자 경험을 향상시키고 보안을 강화합니다. 기업 내부에서 여러 개의 서비스 또는 애플리케이션을 사용하는 경우, 한 번의 로그인으로 모든 서비스에 액세스할 수 있습니다. 예를 들어, 회사의 이메일, 업무용 소프트웨어, 그룹웨어 등 여러 서비스에 대해 단일 로그인을 사용할 수 있습니다. Google: Google Workspace를 통해 Gmail, Google Drive, Googl.. 더보기
사내 github에 내 package를 게시해보자 (github packages) 배경우리 회사는 차트IQ라는 라이브러리를 사용하고 있었고, 최근에 내가 맡은 프로젝트에서 트레이딩뷰 라는 새로운 차트를 도입했다.거래소 페이지가 Angular로 되어있는데 일정에 맞춰 빠르게 개발하다보니.. Angular와 강결합 된 상태의 결과물이 나왔다. 이는 두 가지 포인트에서 문제가 있었는데1. Angular -> Next로 프레임워크를 전환하고 있다.2. 이 차트가 현재 웹에만 도입됐는데, 언제 앱에 도입될지 모른다.이러한 포인트 때문에, 프레임워크와 결합되지 않은 상태로 모듈화(패키지화) 시켜야 한다는 결론에 다다랐다. 패키지화 순서사내 private package로 만들어서, npm install로 사용하는 것이 가장 이상적이라고 생각했다.우리 회사는 github enterprise를 사용하.. 더보기
React 18 알아보기 목차사전 준비주요 기능자동 배치동시성useTransitionSuspense새로운 훅useIduseDeferredValue 사전 준비 React 18의 새로운 기능을 사용하기 위해서는 createRoot를 통해 앱을 렌더해야 한다.기존의 ReactDOM.render는 deprecated 된다.※ ReactDOM의 import 경로도 달라졌으니 주의하자.// AS-ISimport React from 'react';import ReactDOM from 'react-dom';ReactDOM.render( , document.getElementById('root')); // TO-BEimport React from 'react';import ReactDOM from 'react-dom/clien.. 더보기
자바스크립트 Prototype 이해하기 const numbers = [4, 2, 1];numbers.sort();console.log(numbers); // [1, 2, 4]Q. array 자료형에 .sort()를 붙일 수 있는 이유가 뭘까? Array.prototype 이라는 부모로부터 sort라는 메서드를 물려받았기 때문 = 상속자바스크립트에서 상속을 어떻게 구현하는지 살펴보자. Prototype의 뜻은? "원형"자바, 파이썬 등 클래스 기반 언어는 클래스를 정의하고 -> 객체를 생성한다.자바스크립트는 클래스가 없는 대신 프로토타입이 있다. (ES6에서 프로토타입을 class로 쓸 수 있게 문법 추가됨)자바스크립트는 프로토타입으로 클래스의 상속을 흉내낸다.(상속: 자식 클래스에서 부모 클래스의 모든 프로퍼티와 메서드를 사용할 수 있는 것).. 더보기
이벤트 루프와 비동기 이해하기 (자바스크립트 동작원리) 자바스크립트는 싱글 쓰레드 언어이다. 코드가 순차적으로 실행된다.(멀티 쓰레드: C/C++ 등)싱글 쓰레드의 단점은 무엇일까?처리하는데 엄청난 시간이 걸리는 함수가 있다고 치자 (ex. 복잡한 이미지 변환 알고리즘)함수가 끝날 때 까지 앱이 멈춘다.이러한 단점을 극복하는 해결책이 브라우저의 '비동기 처리'이다.(자바스크립트의 런타임 = 실행환경 = 브라우저)(동기: 순차적 / 비동기: 순차적이지 않음) 브라우저는 '이벤트 루프'를 통해 비동기 처리를 한다.브라우저의 구성요소를 보자.힙에서 메모리 할당이 발생한다. (변수, 함수 등..)함수 호출시 콜 스택에 쌓인 후, 쌓인 순서대로 실행된다. (= 싱글 쓰레드)이러한 함수 중 Web API에 해당하는 함수들은, 바로 실행되는 것이 아니라 콜백 큐에 쌓인다.. 더보기
Create-React-App에 대해 알아보자 https://create-react-app.dev/👆공식 사이트Create-React-App이 뭘까?여러 패키지를 조합하여 리액트 개발 환경을 구축해준다. (바벨, 웹팩, 테스트, ES6+, CSS 후처리 등)줄여서 cra라고 부르기도 한다.기본 디렉토리 구조npx create-react-app cra-test위 명령어로 프로젝트를 생성하면, 아래와 같은 디렉토리 구조가 생겨난다.cra-test/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg serviceWorke.. 더보기
RxJs를 쓰는 이유가 뭘까? 이직을 하면서 앵귤러 프로젝트에 참여하게 되었다.앵귤러는 RxJs를 사용하여 비동기 처리를 하는데, 리액트의 useEffect와 유사하다고 느꼈다.어떤 점이 유사할까?RxJs는 한마디로 옵저버 패턴이다.옵저버는 특정 객체의 상태변화를 관찰하고 (구독)객체에 상태변화가 있을때마다, 객체가 옵저버에게 자동 전파한다. 객체의 상태변화는 Observable이라는 형태로 전달된다.(상태변화 ex: 비동기 통신, 이벤트 처리, 타이머 등) RxJs의 장점은 여기서 나온다.- 모든 상태변화가 Observable이라는 형태로 통일되기 때문에, 일관적인 프로그래밍이 가능하다.- 또한 Observable은 immutable(변경불가)이므로 더 안전하다.상태변화를 구독하면 데이터 스트림을 결과값으로 얻게 된다.아래는 aja.. 더보기

티스토리툴바