오늘도 조으네💜

컴퓨터 공학 지식/CS, 웹

HTTP : HyperText Transfer Protocol 웹 상에서 데이터를 주고 받기 위한 프로토콜이다. HTML, TEXT, IMAGE, 음성, 영상, 파일, JSON, XML(API) 등 거의 모든 형태의 데이터 전송 가능 서버 간에 데이터를 주고 받을 때에도 대부분 HTTP 사용 HTTP 특징 클라이언트 서버 구조 무상태 프로토콜(스테이스리스), 비연결성 HTTP 메시지 단순함, 확장 가능 클라이언트 서버 구조 Request Response 구조 클라이언트는 서버에 요청을 보내고, 응답을 대기 서버가 요청에 대한 결과를 만들어서 응답 무상태 프로토콜 - 스테이스리스(Stateless) 서버가 클라이언트의 상태를 보존X 장점: 서버 확장성 높음(스케일 아웃) 단점: 클라이언트가 추가 데이터 전..

2022. 12. 28.

컴퓨터 공학 지식/자료구조, 알고리즘

Object 객체는 정렬되어 있지 않은 데이터 구조이다. 모두 key와 value값이 짝을 이뤄 저장되어 있다. 객체는 언제 사용하나? 데이터가 정렬되어 있을 필요가 없을 때 빠른 접근, 입력, 제거를 원할 때 (입력, 제거, 접근하는 시간이 상수 시간이다. 탐색은 선형 시간이다.) 👉 Insertion = O(1) 👉 Removal = O(1) 👉 Searching = O(n) 👉 Access = O(1) 빅오 표기법 관점에서의 객체 메서드 👉 Object.keys = O(n) 👉 Object.values = O(n) 👉 Object.entries = O(n) 👉 hasOwnProperty = O(1) Array 배열은 정렬되어 있는 데이터 구조이다. 배열은 언제 사용하나? 데이터가 정렬되어야 할 때 ..

2022. 12. 23.

컴퓨터 공학 지식/CS, 웹

IP : 인터넷 프로토콜 지정한 IP 주소에 데이터를 전달 패킷(Packet)이라는 통신 단위로 데이터를 전달 URI : Uniform Resource Identifier Uniform : 리소스 식별하는 통일된 방식 Resource : 자원, URI로 식별할 수 있는 모든 것(제한 없음) Identifier : 다른 항목과 구분하는데 필요한 정보 URL : Uniform Resource Location 리소스가 있는 위치를 지정 URN : Uniform Resource Name 리소스에 이름을 부여 위치는 변할 수 있지만, 이름은 변하지 않는다. 전체 문법 scheme://[userinfo@]host[:port][/path][?query][#fragment] https://www.google.com:4..

2022. 12. 23.

TypeScript

String Javascript와 마찬가지로 문자열 데이터를 둘러싸기 위해 큰 따옴표 “ ” 나 작은 따옴표 ‘ ’ 를 사용한다. let str: string = 'hi'; 위와 같이 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다. ES6에서 추가된 Template String도 사용할 수 있다. 템플릿 문자열을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있고, ${expr}과 같은 형태로 표현식을 포함시킬 수 있다. let fullName: string = "Mark Lee"; let sentence: string = `Hello, My name is ${fullName}.`; Number Javascript와 같이 TypeScript의 모..

2022. 11. 28.

컴퓨터 공학 지식/자료구조, 알고리즘

빅오 표기법(big-O notation) 빅오 표기법은 알고리즘의 효율성을 표기해주는 표기법이다. 알고리즘의 효율성은 데이터 개수(n)가 주어졌을 때 덧셈, 뺄셈, 곱셈 같은 기본 연산의 횟수를 의미한다. 빅오 표기법은 보통 알고리즘의 시간 복잡도와 공간 복잡도를 나타내는데 주로 사용 된다. 시간 복잡도 : 속도에 해당하는 알고리즘의 수행시간 분석결과 공간 복잡도 : 메모리 사용량에 대한 분석결과 👉 일반적으로는 중요도는 실행속도가 메모리 사용량보다 중요하다. 👉 알고리즘의 성능을 판단하는 데 있어서 중요한 것은 '최악의 경우'이다. O(1) 입력 데이터의 크기에 상관없이 언제나 일정한 시간이 걸리는 알고리즘. 데이터가 증가해도 성능에 영향을 거의 미치지 않는다. O(1)을 상수 시간이라고 부른다. n의..

2022. 11. 18.

Javascript

const values = ['banana', 'apple', 'orange', 'orange', 'apple']; const count = values.reduce((acc, cur) => { acc[cur] = (acc[cur] || 0) + 1 return acc; }, {}) 배열의 reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 리듀서 함수는 네 개의 인자를 가진다. 누산기 (acc) 현재 값 (cur) 현재 인덱스 (idx) 원본 배열 (src) 리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다. 구문 arr.reduce(callback[, initialValu..

2022. 11. 17.

React

리액트 상태 관리에 대해 리덕스까지 개념을 익히고 나니 혼란이 왔다.. 상태관리에 도움을 주는 기능에는 useReducer, Context, Redux…들이 있는 것 같은데.. 언제 어떨 때 이 중 하나를 골라 쓰면 되는 건지, 결국 다 상태 관리 역할을 하는 것 같은데..그럼 이 기능들을 이렇게 분리하고 있는 이유는 뭔지..? 에 대한 궁금함이 생겨 이들의 차이점에 대해 찾아보았다. 📌 React Context 일단 리액트에서 props를 전달하는 방식은 탑-다운(부모에서 자식으로)으로 진행이 된다. 전달되는 props의 양이 많아지고 컴포넌트의 깊이가 깊어지면 관리가 번거로워질 수 있다. Context Tree는 컨텍스트 안에 포함된 모든 레벨에서 명시적으로 props를 전달하지 않고, 어디에서든 상..

2022. 11. 16.

HTML5 , CSS3

보통 레이아웃을 짤 때, 요소 사이들의 공간을 주기 위해 margin을 사용했었다. margin은 인접한 요소들의 존재 여부와 상관없이 항상 스타일이 적용된다는 특징이 있다. 의도된 여백이라면 괜찮겠지만,, 그렇지 않은 경우에는 이를 해결하기 위해 불필요하게 특정 요소에는 여백이 생기지 않게 추가로 제어해주어야 하는 번거로움이 있었는데, 이를 해결할 수 있는 방법이 있다, 바로 Gap!! 갭이다!! gap은 인접한 요소가 있을 때만 여백을 만든다! gap은 내부 children 요소들이 일적한 간격으로 떨어져 위치하도록 사용하는 속성이다. margin과 비슷한 역할을 하는 것 같지만, gap은 엘리먼트 요소 사이에만 공간을 만든다는 차이가 있다. 예전에는 gap 속성을 지원하는 브라우저가 많지 않았기에 ..

2022. 11. 15.