순수나라

1.4 클로저더보기더보기리액트의 클래스 컴포넌트에 대한 이해- 자바스크립트의 클래스, 프로토타입, this 함수 컴포넌트에 대한 이해- 클로저1.4.1 클로저의 정의클로저는 함수와 함수가 선언된 어휘적 환경의 조합어휘적 환경function add() { const a = 10 function innerAdd() { const b = 20 console.log(a + b) } innerAdd() // 30}add()🔖 add 함수 내부에 innerAdd가 있고, innerAdd 함수는 내부에서 b 변수를 선언한 뒤, 자신의 함수 외부에 있는 a와 b를 더해서 정상적으로 30을 출력🔖 a 변수의 유효 범위는 add 전체이고, b의 유효 범위는 innerAdd의 전체🔖..

1.3 클래스더보기더보기16.8 버전이 나오기 전까지는 리액트에서는 모든 컴포넌트가 클래스로 작성1.3.1 클래스란 무엇인가?자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 탬플릿과 같은 개념특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것자바스크립트에서 클래스로 하는 모든 것들을 함수로도 동일하게 표현할 수 있음class Car { constructor(name) { this.name = name } honk() { console.log('${this.name}이 경적을 울립니다!') } static hello() { console.log('저는 자동차입니다') } set age(value) { this.car..

1.2 함수1.2.1 함수란 무엇인가?자바스크립트에서 함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것function sum(a, b) { return a + b}sum(10, 24)리액트에서 컴포넌트를 만드는 함수도 기초적인 형태를 따름함수를 선언하고 매개변수로는 일반적으로 props라고 부르는 단일 객체를 받으며 return 문으로 JSX를 반환Component(props) 형태로 호출하지만, 리액트에서의 함수 컴포넌트는 와 같이 JSX 문법으로 단일 props별로 받거나, 같은 형태로 모든 props를 전개 연산자로 받는다는 차이가 있음1.2.2 함수를 정의하는 4가지 방법함수 선언문함수 선언문은 표현식이 아닌 일반 문(stat..

React에서 state와 props는 둘 다 컴포넌트에서 데이터를 다루는 데 사용되지만, 목적과 사용 방법에서 차이가 있다.📖 State컴포넌트 내부에서 관리되는 값으로서 변경 가능이 값은 컴포넌트가 렌더링되는 동안 변할 수 있으며, 변경될 때마다 컴포넌트가 다시 렌더링즉, React에서 state는 컴포넌트 내에서 관리되는 상태 데이터이며, 컴포넌트 내부에서 변경할 수 있고 컴포넌트의 렌더링 결과 결정 장점컴포넌트의 내부 상태를 유지동적인 UI를 구성예) 상태 데이터를 사용하여 사용자 입력에 대한 반응을 보여주거나, 외부 API에서 데이터를 가져와서 화면을 업데이트React의 렌더링 성능을 최적화React는 컴포넌트의 상태가 변경될 때만 렌더링을 다시 수행상태 데이터를 사용하여 불필요한 렌더링을 방..

1.1 자바스크립트의 동등 비교더보기더보기의존성 배열에 대한 고민 : 보통 리액트에서 제공하는 eslint-react-config에 선언돼 있는 react-hooks/exhaustive-deps의 도움을 받아 해당 배열을 채우는데, 실제로 이것이 어떤 식으로 작동하는지, 또한 왜 이러한 변수들을 넣어야 하는지 이해하지 못하는 경우가 많음렌더링 관점 : 리액트 컴포넌트의 렌더링이 일어나는 이유 중 하나가 바로 props의 동등 비교에 따른 결과 리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링할지를 판단하는 방법, 변수나 함수의 메모이제이션 등 모든 작업은 자바스크립트의 동등 비교를 기반으로 함1.1.1 자바스크립트의 데이터 타입원시타입(primitive type)boolean참과 거짓..

​위의 코드처럼 required로 프론트에서 validation 하는 것과 백에서 validation 하는 것에 대해서 어떤 점이 다른지 자세히 알아보고 싶었다.사실 프론트 or 백에서 하는데 왜 백 or 프론트에서 검증을 또 해야할까? 라는 의문이 생겼다 💡 먼저, 프론트엔드와 백엔드에 대한 개념 정리를 해봅시다프론트엔드란?사용자가 웹 페이지를 열었을 때 볼 수 있는 화면을 만드는 작업입니다.즉, 프론트엔드는 사용자가 1차적으로 보는 인터페이스이기 때문에 사용하기 쉽고 보기 편해야하므로 사용자 경험을 핵심 가치로 삼아 직관적이고 사용하기 쉬운 UI(User Interface)를 구축해야 합니다. 백엔드는?사용자가 웹 페이지를 사용하면서 필요한 비즈니스 로직을 만드는 작업입니다.즉, 프론트에서 받은 사..

혼자 쇼핑몰 개발해보면서 Devops를 적용해야하는지에 대한 고민이 생겼다.특히 CI에 대해서 필요한가에 대해 궁금해져서 관련 글들을 찾아 보았다. 💡 먼저, Devops와 CI에 대해서 간단히 정리해보겠습니다.Devops란?Development Operations의 약어로, 소프트웨어 개발과 운영을 통합하여 효율성, 협력, 속도, 안정성을 개선하는 개발 및 운영 방법론입니다. Devops는 소프트웨어 개발부터 배포, 운영, 모니터링까지의 전체 생명주기를 관리하며, 개발과 운영 간의 협업을 강화하여 릴리즈 주기를 단축하고 문제를 신속히 해결할 수 있도록 돕습니다. 이를 통해 조직은 고객에게 더 빠르고 안정적인 제품 및 서비스를 제공할 수 있습니다. 이러한 Devops를 가능하기 위한 사례로 CI가 있습..

싱글톤 패턴에 대해서 공부하다가 싱글톤 패턴이 데이터베이스에서 커넥션 풀(Connection Pool) / 쓰레드 풀(Thread Pool)에서 왜 활용되는지 궁금해졌다. 💡 먼저, 싱글톤 패턴이란?특정 클래스에 객체 인스턴스가 하나만 만들어지도록 해 주는 패턴입니다.즉, 클래스 인스턴스를 하나만 만들고, 그 인스턴스로의 전역 접근을 제공합니다. 💡 자원 풀 - 커넥션 풀(Connection Pool) / 스레드 풀(Thread Pool)이란?시스템의 자원을 효율적으로 관리하기 위해 사용됩니다. 커넥션 풀이란?- 데이터베이스 커넥션을 미리 생성해두고 필요할 때 재사용함으로써 데이터베이스 연결과 해제에 소모되는 자원과 시간을 절약하는 기술스레드 풀이란?- 작업 처리를 위한 스레드들을 미리 생성해 두고 ..