twingkle

너무 늦게 시작한 포스팅이지만......지금이라도 블로깅을 시작해본다..! 숫자로 변환시켜줌! (e => +e) 비트연산자 http://www.tcpschool.com/c/c_operator_bitwise 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com getDay() const birthday = new Date('August 19, 1975 23:15:30'); const day1 = birthday.getDay(); // Sunday - Saturday : 0 - 6 console.log(day1); // expected output: 2 https://developer.mozilla.org/ko/docs/Web..

Webpack에서의 모듈 Webpack?? 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러. ※모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 저합해 하나의 묶음으로 번들링하는 도구 **번들링: 여러제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 Webpack은 왜 필요할까? 웹페이지를 구성하는 코드의 양이 많아지면 우리는 흔히 무겁다고 표현한다. 이렇게 웹페이지가 무거워질수록 로딩속도와 성능은 저하가 되므로 유저들은 기다리지않고 이탈해버린다. 웹팩이 없다면 각 자원들을 일일히 서버에 요청해 얻어와야 하지만, 웹팩이 있다면, 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다. 그래서 웹팩..

개념정리 리플로우 어떤 웹 인터렉션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것. 즉, 렌더링을 다시 하는 것. 배치를 위한 연산을 해야해서 실제로 cpu를 많이 차지. 리페인트 페인트 과정을 반복해 수행하는 것. 즉, 페인트를 다시 하는 것. 픽셀을 다시 화면에 찍어 그려야 하기 때문에 GPU를 많이 차지. =>프레임 드랍현상과 연관 예) DOM 조작 최적화 불필요한 레이아웃은 줄이기 레이아웃 과정에서 불필요하게 계산해야 할 것이 많아지면 엔진도 결국 컴퓨팅 파워에 기대기 때문에 과부하가 불가피하게 생기게 때문에 이런 레이아웃을 발생시키는 속성을 피하면 해당 과정이 발생하는 횟수를 줄일 수 있다. CSS에서 레이아웃, 페인트를 발생시키는 속성들 리플로우시 리페인트는 필연적으로 일어..

여러개의 점들이 서로 복잡하게 연결되어 있는 관계 구조 - 직접적인 관계가 있는 경우 두 점 사이를 이어주는 선이 있다. -간접적인 관계라면 몇 개의 점과 선에 걸쳐 이어진다. -하나의 점을 그래프에서는 정점이라고 표현하고, 하나의 선은 간선이라고 한다. Graph의 표현 방식 인접행렬 서로 다른 정점들이 인접한 상태인지를 표시한 행렬로 2차원 배열의 형태로 나타낸다. ex) A와 B가 이어져 있다면 1(true), 이어져 있지않다면 0(false) if) 가중치 그래프라면 1대신 관계에 서 의미 있는 값을 저장한다. 가장 빠른 경로를 찾고자 할 때 주로 사용된다. 인접리스트 각 정점마다 하나의 리스트를 가지고 있으며, 이 리스트는 자신과 인접한 다른 정점을 담고 있다. 메모리를 효율적으로 사용하고 싶을..

단방향 그래프의 한구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아 있다고 해서 트리구조 라고 부른다. 사이클이 없는 하나의 연결 그래프 부모노드 : A는 B와 C의 부모노드 자식노드 : B와 C는 A의 자식노드 리프노트 : 자식이 없는 노드 깊이(depth) 루트로부터 하위 계층의 특정 노드까지의 깊이. 예) A의 depth: 0 / B,C의 depth: 1 / D,E,F,G의 depth : 2 레벨(level) 같은 깊이를 가지고 있는 노드를 묶어서 레벨로 표현한다. 높이(Height) 리프 노드를 기준으로 루트까지의 높이 부모노드 : 자식 노드의 가장 높은 height값에 +1 한 값 위 그림에서 H, I, E, F, J의 높이 : 0 D, G 의 높이 : 1 B, C 의 높이 :..

FIFO(First In First Out) 티켓을 사려고 줄을 서서 기다리는 모습, 고속도로를 통과하는 자동차들과 같이 먼저 들어간 자료가 먼저 나오게 됩니다. Queue의 특징 1.FIFO 2. 데이터는 하나씩 넣고 뺄 수 있습니다. 3. 두개의 입출력 방향을 가지고 있습니다. =>가장 앞에 있는 데이터를 꺼내오기 때문에 그 다음 인덱스의 데이터들을 한 칸씩 모두 이동해야 하는 단점이 ㅇㅆ다. Queue의 사용처 컴퓨터와 연결된 프린터의 인쇄 컴퓨터 장치들 사이에어 데이터를 주고받을 때, 각 장치 사이에 존재하는 속도의 차이나 시간의 차이를 극복하기위해 임시 기억장치의 자료구조로 Queue를 사용. 이것으 통틀어 버퍼(buffer)라고 한다. ++원형 큐(Circular Queue) 원형 큐는 선형큐..

LIFO(Last In First Out) or FILO(First In Last Out) 자동차가 줄지어 들어가다가 막다른골목을 맞이했을때, 유턴해서 순서대로 나오는것이 아니라 마지막으로 들어온 자동차가 후진해서 나오고 그 전에 들어간 자동차가 후진으로 나와서 마지막으로 나오는 자동차는 가장 먼저 들어간 자동차가 되는 것처럼, 후입선출방식이다. PUSH : Stack에 데이터를 넣는 것 POP : Stack에 데이터를 꺼내는 것 Stack의 특징 1. LIFO 후입선출의 방식입니다. 2. 데이터는 하나씩 넣고 뺄 수 있습니다. 3. 하나의 입출력 방향을 가지고 있습니다. 4. 저장되는 데이터는 유한하고 정적이어야 합니다. 5. 스택의 크기는 제한되어 있습니다. 활용하는 곳은? 브라우저의 뒤로가기, 앞으..

IP Packet의 한계 -비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 -비신뢰성 중간에 패킷이 사라질 수 있음 패킷의 순서를 보장할 수 없음 TCP/IP 패킷 ※채팅 메세지 순서 1. HTTP 메세지 생성 2.Socket을 통해 전달 (Socket: 네트워크 환경에 연결할 수 있게 만들어진 연결부) 3. IP 패킷을 생성하기 전 TCP 세그먼트 생성 4. LAN 카드와 같은 물리적 계층을 지나기 위해 이더넷 프레임 워크에 포함되어 서버로 전송 TCP(Transmission Control Protocol) 의 특징 -연결지향. TCP 3 way handshake(가상연결) : 1. 클라이언트는 서버에 접속을 요청하는 SYN 패킷을 보낸다. : 2.서버는 SYN 요청을 받고 클라이언..

웹표준 W3C에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙' 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법을 담고있다. 웹개발에 사용되는 언어인 HTML(화면의 구조), CSS(표현), JavaScript(동작) 등의 기술을 다룬다. 웹표준의 장점 유지 보수의 용이성/ 웹 호환성 확보/ 검색 효율성 증대/ 웹 접근성 향상 Semantic HTML Semantic: 의미가 있는 HTML: 화면의 구조를 만드는 마크업 언어 왜?! 왜 시맨틱한 HTML이 필요한 걸까? 1. 개발자간 소통 만일 와 으로만 작성된 코드를 보면 각 요소가 어떤 기능을 하는지 전혀 파악할 수가 없기 때문에 주석을 작성하거나 id, clas..

Refactoring Questions ☞결과를 바로 확인할 수 있나요? ☞결과를 다른 방식으로도 도출할 수 있나요? ☞해결한 방식외의 다른 방식을 생각할 수 있나요? ☞한눈에 보고 이해할 수 있나요? ☞해결책이 얼마나 직관적인가요? ☞이 해결책이 얼마나 성능적인가요?(시간,공간 복잡도) ☞이 문제를 다른 사람들은 어떻게 풀었나요? 예시 코드 charCount 는 str의 각 문자가 몇개있는지 객체로 return하는 함수이다. function charCount(str){ //return 할 객체 let result = {}; //각각의 element를 확인하기 for(let i = 0; i 0){ result[char]++; //그렇지않으면, result의 key 추가하고 value는 1로 넣어라. }e..