코딩 기록기

우선 그림 🔥 간단 이해 🔥 차식 방법은 프로그램을 위 그림같이 데이터와 기능(함수)으로 나누어서 기능의 목록을 절차적으로 수행. 객체지향 방법은 데이터(변수)와 기능(메소드)을 가진 독립적인 객체를 만들고, 그 객체들의 집합을 프로그램이라고 함. 이 각각의 객체들 간의 유기적인 상호작용을 통해 로직 구성. 객체지향 (OOP: Object-oriented Language) 프로그래밍 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. 프로그래밍 패러타임 프로그래밍 패러다임(Programming Paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 ..

스코프(Scope) 스코프(Scope)라는 영어 단어 자체는 ‘범위’라는 의미를 가진다. JavaScript 에서도 ‘범위’의 의미를 가지고 있다. 스코프란? 식별자 접근 규칙에 따른 유효 범위 스코프의 정의는 식별자 접근 규칙에 따른 유효 범위이다. 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 범위는 중괄호(블록) 또는 함수에 의해 나눠진다. 그 범위를 스코프라고 부른다. 그래서 각각을 Block Scope와 Function Scope라고 부른다. 스코프의 주의 사항 1. 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만 반대는 불가능하다. 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능하다. 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 없다. 2. ..

HTTP 란? HTTP는 Hypertext Transfer Protocol의 약자로 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 통신 규약을 의미한다. HTTP는 기본적으로 평문 데이터 전송을 원칙으로 하기 때문에 개인의 프라이버시가 오가는 서비스들(전자상거래, 전자메일, 사내 문서 등)에 사용하기 부적합하다. HTTP 장단점 장점 무상태(Connectionsless) 클라이언트가 요청을 서버에 보내고 서버가 적절한 응답을 클라이언트에 보내면 바로 연결이 끊긴다 비연결성이란 특징 때문에 서버 입장에선 통신 연결을 유지하지 않아 리소스 낭비가 줄어드는 장점이 있다 통신마다 새로운 세션을 열어야 하는 작업은 클라이언트가 서버에게 요청 시마다 인증해야 하는 단점이 생겼다 비연결 (Stat..

상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 상태 란? React에서 State는 component 안에서 관리되고 사용자의 액션에 따라 변경될 수 있는 JS객체이다. state는 특징으로 자식 컴포넌트간의 다이렉트 데이터 전달은 불가능하다. 자식 컴포넌트 간의 데이터를 주고 받기 위해서는 부모 컴포넌트가 필요하다. 자식이 많아진다면 상태 관리가 매우 복잡해진다. > Props drilling 이슈 발생 상태관리는 왜 해야하는가? 상태 관리의 복잡성을 해결하기 위해서이다. 예를 들어 A컴포넌트의 상태를 D컴포넌트에서 사용한다면 B,C는 필요하지 않지만 전달위해 Props를 만들어 넘겨주어야하는 문제가 있다. > Props drilling 이슈 발생 평소 state 관리는 어떻게..

랜더링이란 ? 서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다 랜더링 과정 서버로부터 데이터를 응답받아 HTML을 Parsing 하여 DOM트리를 생성한다. DOM트리가 구축되는 동안 브라우저는 Render트리를 구축한다. CSS설정 및 위치를 설정한다. Render트리가 그려지고 브라우저 화면에 표시된다. SSR이란 ? 서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식. 참고로 웹 서버에 요청할 때마다 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지에 대한 ..

TCP TCP는 두 컴퓨터 간에 데이터를 주고받는 신뢰성 있는 양방향 스트림을 제공한다. 인터넷 서비스와 애플리케이션은 TCP를 전송 메커니즘으로 사용하지만, 기능별로 특정한 자신만의 프로토콜을 갖는다. HTTP HTTP는 웹 브라우저와 서버에 사용되는 간단한 프로토콜이다. 사용자가 링크를 클릭하면 브라우저는 서버 80번 포트에대해 TCP/IP 연결을 열고 , 특정 페이지를 요청하는 짧은 메시지를 보낸다 텔넷과 SSH: 원격 로그인 TELNET 원격 접속 서비스로 네트워크를 통해 다른 컴퓨터에 연결하여 그 컴퓨터에서 제공하는 서비스를 받을 수 있도록 하는 인터넷 표준 프로토콜이다. TELNET을 이용하여 파일 전송, 파일 생성, 디렉터리 생성 등 이용할 수 있다. TELNET 서비스를 이용하기 위해서는 ..

CS 스터디 자바스크립트는 어떻게 작동할까? 작동 방식 브라우저가 웹페이지에서 자바스크립트를 발견하면 프로그램의 텍스트를 자바스크립트 컴파일러로 전달한다. 컴파일러는 프로그램에 에러가 있는지 검사하고, 프로그램을 모형 컴퓨터처럼 만들어 낸 컴퓨터의 어셈블리 언어 명령어로 컴파일한다. 모형 컴퓨터 같은 시뮬레이터를 실행하여 자바스크립트 프로그램이 수행하기로 되어 있는 모든 기능을 수행한다. 자바스크립트 동작 구조 자바스크립트의 대표적인 엔진은 Google에서 만든 V8 엔진이다. 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다. Memory Heap은 메모리 할당이 발생하고, Call Stack (호출 스택)은 코드 스택에 따라 하나씩 쌓이는 곳이다. 자바스크립트에서는 수 많은 AP..

기술 표준의 중요성 표준(standard)은 어떤 기술적 산물이 어떻게 만들어지고 어떻게 작동하도록 되어 있는지 명확하고 상세하게 기술한 것이다. '표준'이라는 용어는 무언가가 어떻게 만들어지고 작동하는지 정의하는 정규화된 표현을 뜻한다고 보는 것이 적합하며, 보통은 정부 기관이나 컨소시엄 같은 준 중립적인 단체에 의해 개발되고 유지된다. 알아채지 못할 수 있지만, 우리는 항상 하드웨어 표준의 혜택을 누리고 있다. 우리가 어떠한 가전제품을 사더라도 전원을 연결하는 콘센트의 표준은 똑같다 이는 플러그의 크기와 모양, 제공하는 전압에 대한 표준 덕분이다 (다른 국가에서는 그렇지 않을 수 있다) 서로 경쟁 관계에 있는 표준도 간혹 있는데, 오히려 역효과를 낳을 때가 많다. 역사적 사례를 들어보면 베타맥스 대 ..

이번주 느낀점 이번주는 주특기 숙련 주차를 마치고 주특기 심화 주차를 시작했다. 심화 주차부터는 개인 프로젝트가 아닌 팀 프로젝트를 시작했다 각각의 파트를 나누고 와이어 프레임도 그리고 할 게 굉장히 많았다. 각각의 파트를 나누는 것도 쉬운일이 아니었다 이제부터는 팀 프로젝트만 있는데 막막하다. 어떻게 해야할지 모르겠다. 오늘의 주제는 라이프사이클(클래스형 vs 함수형), react hooks 이다 라이프 사이클 클래스형 vs 함수형 차이점은 ? 클래스형 컴포넌트 라이프 사이클 리액트의 컴포넌트는 모두 라이프 사이클(Life cycle, 혹은 생명주기)을 가집니다. 아래는 주로 사용되는 라이프 사이클 함수들입니다. 리액트 훅이 나오기 전에는 이러한 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를..

어떤 문제가 주어졌을 때, 이 문제를 해결하는 방법을 알고리즘(algorithm)이라 한다. 알고리즘을 평가하는 대표적인 두 가지 기준은 시간복잡도와 공간복잡도이다. 시간 복잡도 특정한 크기의 입력에 대해 알고리즘이 얼마나 오래 걸리는지를 의미한다. 알고리즘을 위해 필요한 연산의 횟수 공간 복잡도 특정한 크기의 입력에 대해 알고리즘이 얼마나 많은 메모리를 차지하는지를 의미한다. 알고리즘을 위해 필요한 메모리의 양 지난 스터디에서 알고리즘 복잡도(complexity)와 실행 시간을 비교하며 몇 가지 알고리즘을 살펴 보았다. 대표적으로 이진 탐색(binary search) : 데이터의 양이 증가함에 따라 일의 양이 천천히 늘어나 효율이 높음 (logN) 선형 탐색(linear search) : 일의 양이 데..