본문 바로가기

분류 전체보기

 (112)
네트워크 용어 정리1 - LAN, WAN, NIC, 인터넷, 허브,스위치, 라우터 ,공유기 LAN, WAN, NIC, 이더넷, 인터넷, 허브, 라우터 등 의 용어에 대해 정리합니다. 1. LAN과 WAN 네트워크의 범위를 구분하는 용어 LAN : Local Area Network 말 그대로 근거리 통신망 "비교적 좁은 범위의 네트워크"를 의미 WAN : Wide Area Network 말 그대로 원거리 통신망 "광역 네트워크"를 의미 인터넷도 넓은 의미에서 WAN의 한 종류라고 볼 수 있다고 함 (전 세계의 LAN을 연결 한 것으로 본다면) 2. 클라이언트와 서버 컴퓨터의 역할을 표현하는 용어이다. 클라이언트 클라이언트는 서비스를 요청 데스크톱, 노트북, 스마트 폰, 태블릿 등 서버 서버는 서비스를 제공 데이터베이스 서버, 웹 애플리케이션 서버, 파일 서버, DNS 등 네트워킹 장치 클라이언트..
[Storybook] 테마&로고 변경 , 공통 스타일 적용, 파비콘 변경 오늘 회사에서 적용하려고 급하게 검색으로 적용한 스토리북 테마 적용에 대해서 간단하게 정리합니다 : ( 아래 코드는 다크모드는 적용하지 않고 라이트 모드만 적용한 예시입니다! 1. 로고 변경, 커스텀 색상 테마 적용 1-1. 테마 정의 파일 작성 .storybook/theme.js import { create } from "@storybook/theming/create"; import logo from "../assets/images/storybook-icon.png"; export default create({ base: "light", colorPrimary: " #aa418c", colorSecondary: "#00526e", // UI appBg: "white", appContentBg: "wh..
[알고리즘] 탐욕, 그리디 (greedy) 탐욕, 그리디 : greedy 현재 상황에서 가장 좋은 것(최선의 선택)을 고르는 알고리즘 탐욕 알고리즘은 여러 경우 중 하나를 결정해야 할 때마다 그 순간에 최적이라고 생각되는 것을 선택해 나가는 방식으로 진행하여 최종적인 해답에 도달한다. 순간마다 하는 선택은 그 순간에 대해 지역적으로는 최적이지만, 그 선택들을 계속 수집하여 최종적(전역적)인 해답을 만들었다고 해서, 그것이 최적이라는 보장은 없다. ❓최적해 제약 조건을 충족시킬 수 있는 해(어떤 문제가 요구하는 값) 가운데 목적 함숫값을 최대 또는 최소로 만드는 값 그리디 특징 탐욕 알고리즘은 항상 최적의 결과를 도출하는 것은 아니지만, 어느 정도 최적에 근사한 값을 빠르게 도출할 수 있는 장점이 있다. 이 장점으로 인해 탐욕 알고리즘은 근사 알..
[Next.js] Hydrate 간단하게 정리 일단 설명하기 전에, react에서 렌더링 되는 과정과 next에서 렌더링 되는 과정의 차이점에 대해서 정리합니다. 1. React.js Html과 JS파일을 한꺼번에 보내고 클라이언트에서 JS코드를 통해 웹 화면을 렌더링 2. Next.js Pre-rendering된 Html을 클라이언트에 전송 그 이후에 번들링된 React 코드(JS)들이 클라이언트에 전송 위 두개가 합쳐짐 = Hydrate 정리 위에 Next.js에 정리된 부분을 보면 먼저 전달받은 Pre-rendering된 Html은 단순하게 html으로만 구성된 화면이고, 자바스크립는 하나도 없는 상태입니다. 웹 화면을 보여주지만, 이벤트 리스너들도 각 DOM요소에 적용되기 전 상태라는 것! 그 이후에 번들링 된 React 코드들이 이전에 보내..
[자료구조] 트라이 (Trie) 트라이 : Trie 검색을 목적으로 하는 트리의 일종 동적인 set, 혹은 서로 관련이 있는 array를 저장하기 위해 주로 사용한다. 자동완성 기능, 사전 검색 등 문자열을 탐색하는데 특화되어있는 자료구조라고 한다. ❓ 자동 완성에서 Trie를 사용하는 과정 참고 https://biewoom.github.io/non%20linear%20ds/advanced%20ds/nodes%20ds/2020/04/14/Trie.html Trie는 문자열들을 하나하나 쪼개어 tree 구조에 넣음으로써 검색을 더 빠르게 한다. 예를 들어 'Datastructure'라는 단어를 검색하기 위해서는 제일 먼저 'D'를 찾고, 다음에 'a', 't', ... 의 순서로 찾으면 된다. 이러한 개념을 적용한 것이 트라이(Trie)..
[자료구조] 힙 (Heap) 손글씨로 패드에 정리하다가 블로그로 옮기는 자료구조.. 전에 패드에 정리한건 천천히 옮겨두어야겠다 힙 : heap 완전 이진 트리의 일종 여러 개의 값들 중 최댓값이나 최솟값을 빠르게 찾아내도록 만들어진 자료구조이다. 데이터들이 우선순위를 가지고 있어 우선순위가 높은 데이터가 먼저 나간다! ❓ 완전 이진트리 1) 완전 이진트리는 마지막 레벨을 제외 하고 모든 레벨이 완전히 채워져 있다. 2) 마지막 레벨은 꽉 차 있지 않아도 되지만, 노드가 왼쪽에서 오른쪽으로 채워져야 한다 ❓반정렬 상태 반정렬 상태라는 것은, 트리 구조를 배열에 저장한 것이므로 배열로만 보았을 때는 완전히 정렬된 상태로 보이지는 않는다. 힙(Heap) 규칙 큐에는 FIFO, 스택은 FILO의 규칙이 있듯 힙(Heap)에도 규칙 있다. ..
[NEXT.js] Missing component: <Head /> 오류 해결 레이아웃 열심히 잡고 있는데, 갑자기 터미널에 아래와 같은 문구가 보였다. 오류 Your custom Document (pages/_document) did not render all the required subcomponent. Missing component: Read how to fix here: https://nextjs.org/docs/messages/missing-document-component _document 파일을 여니.. Head 컴포넌트 잘 있는데 왜그래?? 싶었고 레이아웃 적용은 잘 되고 화면에 잘 보여지는데 console을 여기저기 찍었는데 하~~나도 안보이고 이 문제로 3일을 애썼다.. 원인 In your custom pages/_document an expected sub-..
[FrontEnd] Html 테이블 쉽게 작성하는 사이트 오랜만에 html로 테이블을 여러개 만들일이 생겨서 테이블 변환해 주는 사이트가 있지않을까? 해서 찾다가 발견!!! 사실 편하게 ANTD, MUI같은 라이브러리 사용할 수도 있지만, 그럴 필요도 없는데다가 완전 정적인 페이지를 만드는거고, 테이블도 약간의 스타일을 줘야 했으므로 !! 혹시 또 쓸일은 없겠지만? 근데 너무너무 편해서 정리해둠! 1. 엑셀이나 다른 워드 프로그램처럼 이렇게 열과 행을 지정 할 수 있다. 2.  그냥 엑셀이나 표처럼 작성하고, 병합도 가능하고 정렬, 폰트 등의 지정도 가능하다. 3. 가운데 정렬하고, C1, D1, E1을 병합한 결과 4. 선택한대로 스타일 지정된 결과를 받을수도 있고, 나는 사진처럼 체크해서 css는 제외한 Html만 사용했다 사이트 링크
[JavaScript] 실행 컨텍스트의 생성과정 (Creation Phase, Execution Phase) 아래 영상을 보고 정리한 내용입니다 ! : ) 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 함수단위로 컨텍스트가 생긴다. Creation Phase | 생성단계 1 Activation Object 또는 Variation Object가 생성된다 - Variation Object : 일반 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체 - Activation Object : Variation Object의 종류인데, 전역 스코프 영역에서 생성되는 실행 컨텍스트의 변수 객체 var, let, const로 선언된 변수(명시적 변수)들이 지역,전역 상태에 따라 위의 각 Object에 추가된다. 호이스팅이 일어나는 상황이고, 변수명을 key가 되고, value는 일단 undefind로 할당된다. Exe..
[FrontEnd] SOAP, REST, RESTful까지 한번에 정리 1. SOAP(Simple Object Access Protocol) http, https를 통해 XML기반 메세지를 교환하는 프로토콜 WSDL Doc 웹 서비스를 서비스에 대한 정보를 기술하기 위한 XML 기반 마크업 언어. UDDI 웹 서비스 저장소 SOAP의 한계 WSDL로 정의하고 UDDI에 저장하고 서비스를 UDDI에 요청하여 받아와서 사용 하므로 구조가 복잡하고 http에서 전달되기 무겁다. (프로토콜 자체라 보안이나 메시지 전송 등에 있어서 REST보다 더 많은 표준들이 정해져있기 때문에 조금 더 복잡함) 개발 환경이 필요하고, UDDI(저장소)를 거쳐야 한다. 2. REST(REpresentational State Transfer) ROA를 구현하기 위한 자원을 중심으로 한 애플리케이션 개..

티스토리툴바