스스로 하는 개발 공부

최신글

• 

  프로토타입과 객체지향 프로그래밍 프로토타입이란? JavaScript는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성하지만, 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있습니다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있기 때문에, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 이 때, 부모 객체를 Prototype(프로토타입)이라고 하고, Prototype은 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. 이는 객체를 생성할 때, 그 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 [[proto.. 댓글 1 2024.03.20

• 

  클라이언트 사이드 렌더링(CSR) vs 서버 사이드 렌더링(SSR) 브라우저 렌더링이란? 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(View)에 표시해주는 작업을 말한다. 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려준다. 브라우저 렌더링은 크게 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 방식으로 나누어진다. 클라이언트 사이드 렌더링(CSR) CSR은 "Client-Side Rendering"의 약어로, 클라이언트 측에서 페이지를 렌더링하는 방식을 말한다. CSR은 서버로부터 받아온 데이터를 클라이언트에서 JavaScript를 통해 동적으로 조작하여 렌더링한다. 클라이언트에서 데이터를 받아오고 렌더링하기 때문에 초기 로딩 속도는 느리지만, 이후에는 페이.. 댓글 0 2023.04.17

• 

  동기(Synchronous)와 비동기(Asynchronous) 동기(Synchronous)와 비동기(Asynchronous)는 프로그래밍에서 매우 중요한 개념이다. 동기(Synchronous) 동기는 호출하는 함수가 반환하기 전에 작업이 완료될 때까지 기다리는 것을 의미한다. 즉, 호출한 함수는 결과가 반환될 때까지 블로킹(blocking)되며, 결과가 반환된 후에야 다음 코드를 실행할 수 있다. 이러한 특성 때문에, 동기 방식은 순차적인 처리를 보장하고, 코드가 간단하고 직관적이다. 하지만, 작업이 끝날 때까지 대기해야 하기 때문에, 시간이 오래 걸리는 작업을 수행할 때는 성능 이슈가 발생할 수 있다. function func1(){ console.log('func1'); func2(); } function func2(){ console.log('func2'); .. 댓글 0 2023.04.16

• 

  Base64 인코딩이란? Base64 인코딩을 알아보기 전, 인코딩에 대해서 먼저 알아봐야한다. 인코딩(encoding)이란? 인코딩(encoding)은 컴퓨터를 이용해 영상 · 이미지 · 소리 데이터를 생성할 때 데이터의 양을 줄이기 위해 데이터를 코드화하고 압축하는 것이다. 즉, 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 처리 혹은 그 처리 방식을 말한다. Base 64란? 컴퓨터 분야에서 쓰이는 Base 64 (베이스 육십사)란, 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다. Base64 인코딩은 8비트 .. 댓글 0 2023.04.16

• 

  HTML의 inline 요소와 block 요소 HTML의 인라인(inline) 요소와 블록(block) 요소는 웹페이지의 레이아웃과 구조를 결정하는 데 중요한 역할을 한다. 인라인(inline) 요소 인라인 요소는 텍스트나 이미지 등과 같은 작은 내용을 표시하는 데 사용된다. 인라인 요소는 컨텐츠가 차지하는 공간 만큼만 공간을 차지한다. 즉, 다른 요소와 함께 한 줄에 표시될 수 있다. ex) , , , , 등 이것은 인라인 요소입니다. 이것은 인라인 요소입니다. 이것은 인라인 요소입니다. See the Pen inline 요소 by Jo Sujeong (@suzzeong) on CodePen. 블록(block) 요소 블록 요소는 대형 콘텐츠, 예를 들어 단락, 제목, 목록 등과 같은 구조적 요소를 나타내는 데 사용된다. 블록 요소는 자신의 줄을 차.. 댓글 0 2023.04.07

• 

  ul 요소와 ol 요소의 자식 요소는 li 요소 , HTML에서 요소와 요소 모두 목록을 나타내기 위한 요소다. 하지만, 두 요소의 차이점은 목록의 형태다. 요소 요소는 비순서 목록(unordered list)을 나타내며, 목록 항목이 순서 없이 나열된다. 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 정사각형 모양으로 표현된다. 요소 요소는 순서 목록(ordered list)을 나타내며, 목록 항목이 순서대로 나열된다. 이 때 목록 항목은 숫자, 알파벳, 로마 숫자 등과 같은 순서 지시자로 표시된다. 목록이 어떻게 표시되어야 하는지에 따라 과 중에서 선택하여 사용하면 된다. 요소와 요소의 자식 요소는 목록 항목을 나타내는 요소이어야 한다. 요소는 왜 , 요소의 자식 요소여야만 하나? HTML 명세에서 정의된 규칙으로,.. 댓글 0 2023.04.07

• 

  Semantic HTML의 필요성 시멘틱 태그(Semantic Tag)는 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. Semantic HTML Semantic HTML은 웹 페이지의 구조와 의미를 더 명확하게 표현하는 데 도움이 되는 HTML 마크업 방식이다. 이를 사용하면 웹 페이지가 보다 이해하기 쉽고, 접근성이 향상되며, 검색 엔진 최적화(SEO)에도 도움이 된다. ex) 웹 페이지의 제목 This is a top level heading // Non Semantic This is a top level heading // Semantic 제목은 웹페이지에서 가장 중요한 역할을 한다. Semantic HTML을 사용하지 않고, 제목을 단순히 스타일링하.. 댓글 1 2023.04.06

• 

  React의 state와 props React는 상태(state)와 속성(props)이라는 두 가지 개념을 중심으로 구성된 JavaScript 라이브러리다. props 와 state 는 React 에서 데이터를 다룰 때 사용하는 개념이다. State(상태) React 컴포넌트에서 state는 컴포넌트 내부에서 관리되는 값으로서 변경 가능하다. 이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링된다. 즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고, 컴포넌트의 렌더링 결과를 결정한다. State 사용 방법 1. State 초기화하기 import React, { Component } from 'react'; class Counter extend.. 댓글 0 2023.04.05

• 

  순수 함수 (feat. 불변성, 사이드 이펙트) 함수형 프로그래밍 Funtional Programming은 순수함수를 중심으로 Side-Effect가 없도록 프로그래밍을 하는 것을 말한다. 순수함수 (Pure Function) input : 어떠한 함수에서 외부의 데이터를 직접적으로 사용하지 않고, 파라미터로 받는다. output : input값에 의해 output이 결정되기 때문에 외부의 값들이 변경되더라도 함수 자체에는 외부에 영향을 받지 않기 때문에 Side-Effect가 없다. 순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수를 말한다. 즉, 함수 내부에서 어떤 값이 변경되지 않으며, 외부에서 관찰 가능한 상태에도 영향을 주지 않는 함수다. ex) 더하기 함수 function add(x, y) { r.. 댓글 0 2023.04.05

• 

  Cookie의 MaxAge, Expires 옵션 Session cookies - 웹브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐 → MaxAge와 Expires 옵션 중 하나라도 설정하지 않을 때 Permanent cookie - 웹브라우저를 껐다 켜도 유지됨 Permanent cookie 기간 설정할 때 쓰이는 옵션이 바로 MaxAge와 Expires 이다. MaxAge와 Expires 옵션은 둘 다 쿠키의 수명을 결정하는 데 사용된다. MaxAge 쿠키가 유지되는 시간(초)을 정의한다. 이 값은 현재 시간에서 더해져서 쿠키의 만료 시간이 계산된다. 예를 들어, MaxAge가 3600으로 설정되어 있으면, 쿠키는 1시간 동안 유지된다. Expires 쿠키가 만료되는 날짜와 시간을 정의한다. 이 값은 HTTP Date 형식의 문자열로 설정된.. 댓글 0 2023.04.04

IT 지식

• 

  클라이언트 사이드 렌더링(CSR) vs 서버 사이드 렌더링(SSR) 브라우저 렌더링이란? 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(View)에 표시해주는 작업을 말한다. 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려준다. 브라우저 렌더링은 크게 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 방식으로 나누어진다. 클라이언트 사이드 렌더링(CSR) CSR은 "Client-Side Rendering"의 약어로, 클라이언트 측에서 페이지를 렌더링하는 방식을 말한다. CSR은 서버로부터 받아온 데이터를 클라이언트에서 JavaScript를 통해 동적으로 조작하여 렌더링한다. 클라이언트에서 데이터를 받아오고 렌더링하기 때문에 초기 로딩 속도는 느리지만, 이후에는 페이.. 댓글 0 2023.04.17

• 

  Base64 인코딩이란? Base64 인코딩을 알아보기 전, 인코딩에 대해서 먼저 알아봐야한다. 인코딩(encoding)이란? 인코딩(encoding)은 컴퓨터를 이용해 영상 · 이미지 · 소리 데이터를 생성할 때 데이터의 양을 줄이기 위해 데이터를 코드화하고 압축하는 것이다. 즉, 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 처리 혹은 그 처리 방식을 말한다. Base 64란? 컴퓨터 분야에서 쓰이는 Base 64 (베이스 육십사)란, 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다. Base64 인코딩은 8비트 .. 댓글 0 2023.04.16

• 

  Cookie의 MaxAge, Expires 옵션 Session cookies - 웹브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐 → MaxAge와 Expires 옵션 중 하나라도 설정하지 않을 때 Permanent cookie - 웹브라우저를 껐다 켜도 유지됨 Permanent cookie 기간 설정할 때 쓰이는 옵션이 바로 MaxAge와 Expires 이다. MaxAge와 Expires 옵션은 둘 다 쿠키의 수명을 결정하는 데 사용된다. MaxAge 쿠키가 유지되는 시간(초)을 정의한다. 이 값은 현재 시간에서 더해져서 쿠키의 만료 시간이 계산된다. 예를 들어, MaxAge가 3600으로 설정되어 있으면, 쿠키는 1시간 동안 유지된다. Expires 쿠키가 만료되는 날짜와 시간을 정의한다. 이 값은 HTTP Date 형식의 문자열로 설정된.. 댓글 0 2023.04.04

• 

  브라우저 저장소(local storage, session storage, cookie) 브라우저 저장소란? 브라우저 저장소는 웹 애플리케이션에서 데이터를 저장하기 위한 방법으로, 주로 사용자의 프로필 정보, 로그인 상태, 사용자 환경 설정 등을 저장하고 유지하는 데 사용된다. 브라우저 저장소는 HTML5부터 지원되며, JavaScript를 사용하여 사용자의 로컬 브라우저에 데이터를 저장할 수 있다. 대표적으로 로컬 스토리지, 세션 스토리지, 쿠키가 있다. 로컬 스토리지(Local Storage) 일반적으로 키-값 쌍으로 구조화된 방식으로 데이터를 저장한다. 로컬 스토리지는 브라우저 내부에 데이터를 저장할 수 있는 영구 저장소다. 데이터는 클라이언트 측 컴퓨터에 저장되며 데이터를 수동으로 지우지 않는 이상 영구적으로 보관이 가능하다. 사용자가 웹 사이트를 나가더라도 데이터가 유지된다. 저장된.. 댓글 0 2023.03.31

• 

  [Web] HTTP와 HTTP 메시지 구조 HTTP란? HTTP는 HyperText Transfer Protocol(하이퍼텍스트 전송 프로토콜)의 약자로, HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜이다. 즉, 인터넷에서 데이터를 주고 받는 데 사용되는 프로토콜이다. HTTP는 클라이언트와 서버 간에 데이터를 전송하고 웹페이지, 이미지, 비디오, 오디오 등을 요청하고 전송하기 위해 사용된다. HTTP는 TCP/IP 프로토콜을 기반으로 하며, 보통 80번 포트를 사용한다. 클라이언트는 HTTP 요청을 서버에 보내고, 서버는 이 요청에 대한 응답을 보낸다. HTTP 요청과 응답에는 여러 가지 종류가 있으며, 가장 흔한 종류는 GET 요청과 200 OK 응답이다. HTTP는 무상태(Stateless) 프로토콜이다. 이.. 댓글 0 2023.03.30

• 

  캐시(Cache) 캐시(Cache)란? 캐시(Cache)는 시스템의 성능을 향상시키기 위해 데이터나 값을 미리 저장해 놓는 임시 저장소다. 캐시는 원래 데이터를 접근하는 시간이 오래 걸리거나, 값을 다시 계산하는 시간을 절약하고 싶을 때 사용한다. 특히 웹 서비스에서는 사용하는 이미지, CSS 및 자바스크립트 파일을 매번 네트워크를 통해 불러오지 않고 최초에만 다운로드하여 캐시에 저장해 두고, 그 이후 요청때 저장해 둔 파일을 사용할 때 유용하다. 캐시의 궁극적인 목표 불필요한 데이터 전송을 줄여, 네트워크 요금 비용을 줄여준다. 네트워크 병목을 줄여준다. 원 서버(origin server)에 대한 요청을 줄여주어, 더 빨리 응답할 수 있게 된다. 거리로 인한 지연을 줄여준다. 캐시의 종류 캐시 종류 설명 웹 캐시(Web.. 댓글 0 2023.03.29

• 

  프레임워크 vs 라이브러리 프레임워크란? 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미한다. 프레임워크는 애플리케이션의 설계도를 제공하는 프로그램의 골격들이지 완성된 제품은 아니다. 결과적으로 프레임워크는 애플리케이션의 기본 바탕을 제공해 주면서 개발자들에게 어디를 수정해서 사용해서 쓸지를 알려주는 것이라고 할 수 있다. 그래서 프레임워크 자체가 소프트웨어 개발의 업무 흐름을 정의하고 있으며 개발자들에게 무엇이 필요한지 알려주고 필요한 경우 개발자들의 코드를 호출하여 사용하는 구조다. 프레임워크를 사용하는 이유 적은 코드 길이 코드 재사용 쉬운 디버깅과 애플리케이션 모니터링 단순화된 DB 연결 향상된 보안 대표적인 프레임워크 Angular Angular 는 싱글 페이지 .. 댓글 0 2023.03.29

• 

  Restful API RESTful API란? RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스다. API란 애플리케이션 프로그래밍 인터페이스로, 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙이다. 개발자는 다른 애플리케이션이 프로그래밍 방식으로 애플리케이션과 통신할 수 있도록 API를 표시하거나 생성한다. 웹 API는 클라이언트(웹에서 정보에 액세스하려는 사용자)와 웹 리소스(다양한 애플리케이션이 클라이언트에게 제공하는 정보) 사이의 게이트웨이라고 생각할 수 있다. REST는 Representational State Transfer로, API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처다. API 개발자는 여러 아키텍처를 사용하여 API를 설계할 .. 댓글 0 2023.03.27

기술개발

• 

  프로토타입과 객체지향 프로그래밍 프로토타입이란? JavaScript는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성하지만, 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있습니다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있기 때문에, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 이 때, 부모 객체를 Prototype(프로토타입)이라고 하고, Prototype은 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. 이는 객체를 생성할 때, 그 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 [[proto.. 댓글 1 2024.03.20

• 

  동기(Synchronous)와 비동기(Asynchronous) 동기(Synchronous)와 비동기(Asynchronous)는 프로그래밍에서 매우 중요한 개념이다. 동기(Synchronous) 동기는 호출하는 함수가 반환하기 전에 작업이 완료될 때까지 기다리는 것을 의미한다. 즉, 호출한 함수는 결과가 반환될 때까지 블로킹(blocking)되며, 결과가 반환된 후에야 다음 코드를 실행할 수 있다. 이러한 특성 때문에, 동기 방식은 순차적인 처리를 보장하고, 코드가 간단하고 직관적이다. 하지만, 작업이 끝날 때까지 대기해야 하기 때문에, 시간이 오래 걸리는 작업을 수행할 때는 성능 이슈가 발생할 수 있다. function func1(){ console.log('func1'); func2(); } function func2(){ console.log('func2'); .. 댓글 0 2023.04.16

• 

  HTML의 inline 요소와 block 요소 HTML의 인라인(inline) 요소와 블록(block) 요소는 웹페이지의 레이아웃과 구조를 결정하는 데 중요한 역할을 한다. 인라인(inline) 요소 인라인 요소는 텍스트나 이미지 등과 같은 작은 내용을 표시하는 데 사용된다. 인라인 요소는 컨텐츠가 차지하는 공간 만큼만 공간을 차지한다. 즉, 다른 요소와 함께 한 줄에 표시될 수 있다. ex) , , , , 등 이것은 인라인 요소입니다. 이것은 인라인 요소입니다. 이것은 인라인 요소입니다. See the Pen inline 요소 by Jo Sujeong (@suzzeong) on CodePen. 블록(block) 요소 블록 요소는 대형 콘텐츠, 예를 들어 단락, 제목, 목록 등과 같은 구조적 요소를 나타내는 데 사용된다. 블록 요소는 자신의 줄을 차.. 댓글 0 2023.04.07

• 

  ul 요소와 ol 요소의 자식 요소는 li 요소 , HTML에서 요소와 요소 모두 목록을 나타내기 위한 요소다. 하지만, 두 요소의 차이점은 목록의 형태다. 요소 요소는 비순서 목록(unordered list)을 나타내며, 목록 항목이 순서 없이 나열된다. 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 정사각형 모양으로 표현된다. 요소 요소는 순서 목록(ordered list)을 나타내며, 목록 항목이 순서대로 나열된다. 이 때 목록 항목은 숫자, 알파벳, 로마 숫자 등과 같은 순서 지시자로 표시된다. 목록이 어떻게 표시되어야 하는지에 따라 과 중에서 선택하여 사용하면 된다. 요소와 요소의 자식 요소는 목록 항목을 나타내는 요소이어야 한다. 요소는 왜 , 요소의 자식 요소여야만 하나? HTML 명세에서 정의된 규칙으로,.. 댓글 0 2023.04.07

• 

  Semantic HTML의 필요성 시멘틱 태그(Semantic Tag)는 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록(=의미가 통하는, semantic) 만든 태그들이다. Semantic HTML Semantic HTML은 웹 페이지의 구조와 의미를 더 명확하게 표현하는 데 도움이 되는 HTML 마크업 방식이다. 이를 사용하면 웹 페이지가 보다 이해하기 쉽고, 접근성이 향상되며, 검색 엔진 최적화(SEO)에도 도움이 된다. ex) 웹 페이지의 제목 This is a top level heading // Non Semantic This is a top level heading // Semantic 제목은 웹페이지에서 가장 중요한 역할을 한다. Semantic HTML을 사용하지 않고, 제목을 단순히 스타일링하.. 댓글 1 2023.04.06

• 

  React의 state와 props React는 상태(state)와 속성(props)이라는 두 가지 개념을 중심으로 구성된 JavaScript 라이브러리다. props 와 state 는 React 에서 데이터를 다룰 때 사용하는 개념이다. State(상태) React 컴포넌트에서 state는 컴포넌트 내부에서 관리되는 값으로서 변경 가능하다. 이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링된다. 즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고, 컴포넌트의 렌더링 결과를 결정한다. State 사용 방법 1. State 초기화하기 import React, { Component } from 'react'; class Counter extend.. 댓글 0 2023.04.05

• 

  순수 함수 (feat. 불변성, 사이드 이펙트) 함수형 프로그래밍 Funtional Programming은 순수함수를 중심으로 Side-Effect가 없도록 프로그래밍을 하는 것을 말한다. 순수함수 (Pure Function) input : 어떠한 함수에서 외부의 데이터를 직접적으로 사용하지 않고, 파라미터로 받는다. output : input값에 의해 output이 결정되기 때문에 외부의 값들이 변경되더라도 함수 자체에는 외부에 영향을 받지 않기 때문에 Side-Effect가 없다. 순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하며, 외부 상태를 변경하지 않는 함수를 말한다. 즉, 함수 내부에서 어떤 값이 변경되지 않으며, 외부에서 관찰 가능한 상태에도 영향을 주지 않는 함수다. ex) 더하기 함수 function add(x, y) { r.. 댓글 0 2023.04.05

• 

  const - 요소나 속성을 추가할 수 있는 이유 const란? const 선언은 블록 범위의 상수를 선언한다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다. 즉, const로 선언된 배열이나 객체의 경우, 해당 변수를 다른 값으로 재할당하는 것이 불가능하다. 또 다른 말로는, const로 선언된 변수에 다른 값을 할당하려고 하면 에러가 발생한다는 것이다. 하지만, 배열이나 객체의 요소나 속성에 대한 수정은 가능하다. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 const가 변수 자체를 불변으로 만드는 것이 아니라 변수가 참조하는 값의 변경을 막는 것이기 때문이다. 배열이나 객체는 참조 타입이고, const로 선언된 변수가 참조하는 메모리 공간 자체는 변경되지 않는다. 따라서 변수가 참조하는 배열이나 객체의 요소나.. 댓글 0 2023.04.03

ETC

• 

  VSCode 기본 터미널 변경 컴퓨터 하드가 날아가서 다시 vscode를 설치했는데 터미널이 계속 powershell로 떠서 불편하다 그래서 vscode에서 터미널을 cmd로 변경할 것이다 방법은 간단하다 1. 설정창 들어가기 (Ctrl + ,) [파일] - [기본설정] - [설정] 단축키 Ctrl+, 를 누르시면 더 간단히 들어갈 수 있다 2. windows 검색해서 Terminal > Integrated > Default Profile: Windows 찾기 설정에 들어가서 windows라고 검색하면, Terminal > Integrated > Default Profile: Windows 라고 적혀져 있는 것을 찾을 수 있다 기존에는 null로 설정되어있어서 powershell이 떴었나보다 3. 원하는 터미널로 변경해주기 나는 이것.. 댓글 0 2023.03.11

• 

  [에러] warning: LF will be replaced by CRLF in src/App.js.The file will have its original line endings in your working directory 깃허브(GitHub)에 코드 업로드 하기 위해 git add . 라는 코드를 입력했더니 경고 알림이 떴다. 경고 알림이지만, 난 평소에 이런 알림이 떠도 git add .을 다시 해주면 제대로 작동 되었기 때문에 그냥 진행했었다. 하지만 계속해서 아래처럼 경고 알림이 뜨니, 왜 이런 알림이 뜨는 건지, 어떻게 해결하는지 찾아보기로 했다. warning: LF will be replaced by CRLF in src/App.js. The file will have its original line endings in your working directory 단어 정리 LF(Line-Feed): 커서는 그 자리에 그대로 둔 상황에서 종이만 한 줄 올려 줄을 바꾸는 동작 Mac, Linux (Unix 계열) 줄.. 댓글 0 2023.01.13

• 

  Commit message 커밋(Commit)은 프로젝트 시 파일의 변화가 있는 시점을 메시지와 함께 저장할 수 있는 기능이다. 커밋 메시지(Commit message)는 프로젝트를 효율적으로 관리하기 위해 작업단위를 구분할 수 있도록 도와준다. 커밋 메시지의 7가지 규칙 1. 제목과 본문을 빈 행으로 구분 2. 제목을 50글자 내로 제한 3. 제목 첫 글자는 대문자로 작성 4. 제목 끝에 마침표(.) 넣지 않기 5. 제목은 명령문으로 사용하며 과거형을 사용하지 않기 6. 본문의 각 행은 72글자 내로 제한 7. 어떻게 보다는 무엇과 왜를 설명하기 커밋 메시지 구조 [적용 범위(선택 사항)]: [본문(선택 사항)] [꼬리말(선택 사항)] 커밋 메시지 구성요소 (, 본문, 꼬리말) build: 시스템 또는 외부 종속성에 영향을 미치.. 댓글 0 2023.01.08

• 

  [깃허브] 코드가 있는 vscode에서 github 연결 1. github에 새 repository를 만든다. - 레포지토리 이름을 정한 다음, 공개 여부를 체크한다. - 이때, Add a README file 을 체크하지 않으면 더 편하다!!! 2. 두번째 "...or push an existing repository from the command line" 차례대로 입력 세줄 짜리를 차례대로 vscode 터미널에 입력하면 끝!!!! 3. 만약 Add a README file에 체크를 했다면, 당황하지말고~ code 카테고리를 클릭하면, 초록색 버튼으로 code라고 적혀있는 것이 보일 것이다. 저기서 저 주소를 복사해서 위와 같이 똑같이 적어주면 된다. git remote add origin 깃헙코드 주소 복사한 거! git branch -M main git.. 댓글 0 2022.10.17

• 

  내가 쓰려고 올리는 color name 000000 black 검정 2f4f4f darkslategray 어두운푸른빛회색 708090 slategray 푸른빛회색 778899 lightslategray 밝은푸른빛회색 696969 dimgray 칙칙한회색 808080 gray 회색 a9a9a9 darkgray 어두운회색 c0c0c0 silver 은색 d3d3d3 lightgrey 밝은회색 dcdcdc gainsboro ffffff white 백색 fff5ee seashell 바다조가비 fffafa snow 설백 f8f8ff ghostwhite 허깨비백색 fffaf0 floralwhite 꽃의백색 f5f5f5 whitesmoke 백색연기 f0f8ff aliceblue 엷은잿빛바탕에푸른빛 f0ffff azure 하늘색 fdf5e6 oldlace 낡.. 댓글 0 2022.07.23