전체 글51 [React] React Hooks 1. React Hooks 란? 리액트 컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나뉜다.리액트 초기에는 일반적으로 함수형 컴포넌트를 사용하였으나, 값의 상태를 관리하거나 Life Cycle Method를 사용해야 할 때 클래스형 컴포넌트를 사용하였다. 하지만 클래스형 컴포넌트의 경우 아래와 같은 단점이 있었다. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.복잡한 컴포넌트들을 이해하기 어렵다.Class는 사람과 기계를 혼동시킨다(this 키워드 등)이와 같은 문제를 해결하기 위해 리액트는 Hook을 도입하여 class를 작성하지 않고 State와 다양한 React의 기능들을 함수형 컴포넌트에서도 사용 가능하게 만든 기능이다.즉.. 2024. 2. 14. [React] React의 특징 V-DOM(Virtual DOM) 1. DOM 이란?DOM은 Document Object Model(문서 객체 모델)의 약자로, 웹 브라우저 안에서 HTML 문서에 "html 태그"들을 JavaScript가 접근과 조작할 수 있도록 메모리에 보관할 수 있는 객체로 만든 것이다. 즉 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미하며 DOM은 HTML과 자바스크립트를 서로 이어주는 역할을 하고 있다.2. 기존 웹 브라우저 렌더링 방식과 발생할 수 있는 문제점2-1. 기존 브라우저 렌더링 방식DOM Tree 형성 : 서버에서 보낸 HTML 파일을 브라우저가 해석(Parsing)하여 DOM 트리를 만든다.CSSOM Tree 형성 : 서버에서 보낸 CSS 파일을 브라우저가 해석(Par.. 2024. 2. 6. [JavaScript] 자바스크립트 기본, 심화 문법 및 엔진 동작 원리 1. 함수형 프로그래밍 패러다임자바스크립트는 함수형 프로그래밍 패러다임을 추구하며, 추가로 객체지향 프로그래밍 패러다임도 지원한다.자바스크립트의 핵심은 함수(함수형 프로그래밍 패러다임)와 객체(객체지향 프로그래밍 패러다임)이다. 객체의 경우 객체지향 프로그래밍 패러다임의 여러 패턴들을 적용하고 싶다면, 클래스를 활용할 수 있다.그 중 함수형 프로그래밍 패러다임에 대해 알아볼 것인데 함수형 프로그래밍은 아래의 2개 조건을 만족하는 것을 의미한다.일급함수 : 함수 변수 할당 + 함수 파라미터 + 함수 반환함수 변수 할당 = 함수 표현식(Expression)함수 파라미터함수 반환순수 함수 : No-Side-Effects (참조 투명성) = Thread-Safe = 함수 정의할 때 완전한 문장을 만들어야한다.기.. 2024. 2. 5. [JavaScript] 우테코 로또 게임 만들기 본 과제는 우테코에서 프리코스에서 진행한 자바스크립트를 활용한 로또 게임 제작하는 프로그래밍 과제를 기반으로 진행하였습니다.1. 과제 내용 과제는 우테코에서 진행한 자바스크립트를 활용하여 간단한 로또 게임을 만드는 프로그래밍 과제로 기능 자체는 간단했지만 아래의 요구사항을 따르며 프로그래밍을 진행해야 했다. 특히 기능을 구현하기 전 기능 목록을 작성하고 기능 단위로 커밋을 하는 방식으로 진행해야 했다.1-1. 기능 요구사항로또 게임 기능을 구현해야 한다. 로또 게임은 아래와 같은 규칙으로 진행된다. - 로또 번호의 숫자 범위는 1~45까지이다.- 1개의 로또를 발행할 때 중복되지 않는 6개의 숫자를 뽑는다.- 당첨 번호 추첨 시 중복되지 않는 숫자 6개와 보너스 번호 1개를 뽑는다.- 당첨은 1등부터 5.. 2024. 1. 31. [JavaScript] map / set / trim / includes / filter / reduce 1. map 활용map() 메서드는 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드로 어떤 배열에 있는 모든 요소들의 값을 콜백 함수를 활용해 변경하여 만든 값들을 모은 배열이 필요할 때 사용한다. map() 메서드의 사용 방법은 매개변수로 배열의 인자를 받고, 해당 인자에 어떤 변화를 준 뒤 반환하는 식으로 사용한다.map은 3개의 매개변수를 가지고 있다.value : 현재 요소index : 요소의 인덱스array : map()을 호출한 원본 배열그렇다면 map의 다양한 사용 예시를 통해 map에 대해서 조금 더 자세히 이해해보자 간단한 배열에서 map을 통해 배열 값을 조작하기let arr = [1, 2, 3, 4];let modifiedArr = arr.map.. 2024. 1. 30. [JavaScript] 호이스팅(Hoisting) 1. 호이스팅(Hoisting)호이스팅(Hoisting)이란 함수내의 변수 및 함수의 선언들을 모두 유효 범위의 최상단으로 끌어올려 주는 JavaScript의 기능 중 하나이다. 실제 코드가 끌어올려 코드의 변화가 있는 것이 아니라 자바 스크립트 parser가 내부적으로 끌어올려 처리한다. 컴파일 단계에서 코드 실행 전 함수와 변수의 선언들을 스캔하여, 모든 함수와 변수 선언들은 렉시컬 환경이라 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다.// 개발자가 작성한 코드 // console.log(a); // undefinedvar a = "A"; // var 변수 // 자바스크립트에서 호이스팅 된 코드 var a; console.log(a);a = "A"; a가 상단으로 호이스팅이 되었기 때문에 .. 2024. 1. 24. [JavaScript] 깊은 복사 / 얕은 복사 들어가기에 앞서 얕은 복사의 경우 주소 값을 복사하고, 깊은 복사의 경우 실제 값을 복사한다고 생각하자. 깊은 복사와 얕은 복사에 대해 알아보기 전 주소 값, 실제 값의 의미를 파악하기 위해 JavaScript의 데이터 타입에 대해 알아보자.JavaScrpit의 데이터 타입의 경우 크게 기본형(원시형, Primitive) 타입, 참조형(Reference) 타입 2종류로 분류할 수 있다. 1. 데이터 타입기본형(원시형, Primitive type) 타입 NumberStringBooleannullundefinedSymbol(ES 6에서 추가)참조형(Reference) 타입 → Object(객체)ArrayFunctionDateRegExpMap, WeakMapSet, WeakSet기본형과 참조형을 구분하는 방법.. 2024. 1. 24. [Docker] Docker의 기본 개념 Docker 사용 이유 : Consistency(일관성)와 Multiple Containers(다중 컨테이너)어플리케이션 동작의 일관성을 갖기위해 (어느 서버나 컴퓨터에서 동작해도 정상적으로 동일한 동작으로 하기 위해)어플리케이션 버전설정 명령어 존재 여부환경변수설정파일 누락 여부실행 환경하나의 서버임에도 다중 컨테이너를 동작시키면 다양한 어플리케이션들을 조합하여 원하는 서버를 구동 가능하다.Docker 개념도커(Docker)는 컨테이너 기반 가상화 플랫폼으로, 응용 프로그램과 그 종속성을 격리된 환경인 컨테이너로 패키징하여 실행하는 기술이다. 이를 통해 응용 프로그램을 서로 다른 환경에서도 일관되게 실행할 수 있고, 개발 환경과 운영 환경 사이의 차이로 인한 문제를 줄일 수 있다. 도커 컨테이너는 가.. 2024. 1. 23. [Git] Git 개념 및 명령어와 브랜치 전략 및 배포 프로세스 0. 로컬 코드 및 협업 시 문제 관리우리는 여러가지 파일을 생성하고 변경한다.이때, 최종, 최최종, 찐최종, 찐찐최종... 등 다양한 이름으로 파일을 구분하면서 계속해서 변경하고는 한다.이러한 파일(코드)를 관리하는 과정과 어떤 방법으로 파일을 수정하고 저장하고 관리하는지 아래의 그림을 통해 확인해보자로컬 코드 관리다양한 버전 : 하나의 코드(파일)에서 다양한 케이스의 구현을 테스트 해볼 때히스토리 추적 : 작업 시 문제 발생했을 때 직전 버전으로 롤백안전히 원격 저장 : 만약 내 노트북(or usb 등)이 도난 당한다면?협업 관리 : 하나의 프로젝트(파일)에 참여하는 사람이 많아진다면 어떻게 관리해야 할까?만약 내가 어떤 변경사항이 있는데 다른 사람도 그것에 대해서 다르게 바꿨다면???? 1. 로컬 .. 2024. 1. 17. 이전 1 2 3 4 5 6 다음
