코딩병원

Frontend/Javascript

[Javascript] 불변성이란?

자바스크립트는 동적 타입 언어로, 변수에 저장되는 데이터의 타입은 런타임에 동적으로 결정됩니다. 자바스크립트의 데이터 타입은 크게 두 가지 범주로 나눌 수 있습니다. 원시 데이터 타입(Primitive Data Types)과 참조 데이터 타입(Reference Data Types)입니다. 자바스크립트에서 원시타입은 불변하고 참조타입은 가변적입니다. 자바스크립트에서 불변성은 "변하지 아니하는 성질", 말 그대로 바뀌지 않는다는 뜻이며 이 개념은 함수형 프로그래밍에서 중요하게 여겨지는 개념 중 하나입니다. 원시타입 참조 타입 Number Array String Object Boolean Function Undefined Date Nul RegExp Symbol Map, Set ... [원시타입] let a ..

2023. 12. 23.

Frontend/Jest

[Jest] Jest를 사용하는 이유

현대 웹 개발에서 코드의 안정성과 신뢰성은 점점 더 중요해지고 있습니다. 이런 상황에서 코드의 품질을 보장하고 버그를 최소화하기 위해선 강력한 테스트 프레임워크가 필수적입니다. 그중에서도 Jest는 자바스크립트 개발자들에게 널리 사용되는 강력한 도구 중 하나입니다. 이번 글에서는 Jest에 대해 알아보도록 하겠습니다.  테스트의 종류1. Unit Test (단위 테스트)개별 컴포넌트, 함수, 또는 모듈 등 코드의 작은 부분들을 테스트 하는 것 2. Integration Test (통합 테스트)여러 컴포넌트 간의 상호 작용을 테스트하는 것 3. E2E Test (End-To-End 테스트)유저 입장에서 유저의 모든 상황에 대해 시작부터 끝까지 테스트하는 것  Jest란?Jest는 페이스북에서 개발한, 자바..

2023. 12. 17.

Frontend/React

[React] React Query를 사용하는 이유 (vs Redux)

저는 개인적으로 운영 중인 프로젝트에서는 API 통신과 비동기 데이터 관리를 위해 React Query를 적극적으로 활용하고 있습니다. 프로젝트를 처음 진행할 당시에는 Redux의 redux-saga를 주로 사용하여 서버와의 API 통신과 비동기 데이터를 관리하였습니다. 그러다가 불편함을 느끼고 React Query를 도입하여 Redux에서 React Query로 마이그레이션하였습니다. 이번 글에서는 왜 React Query도입을 결정하게 되었는지 정리하려고 합니다. Redux는 Global State Management!Redux는 모두가 알다시피 Redux의 기본 원칙이 존재합니다. 단일 스토어여야 하며, 상태는 불변성을 유지해야 하기 때문에 읽기 전용이어야 하며 순수함수로 상태를 변경해야 합니다. ..

2023. 12. 14.

Frontend/Javascript

[Javascript] Function Declaration과 Function Expression의 차이

JavaScript에서 함수를 정의하는 방법에는 함수 선언형(Function Declaration)과 함수 표현식(Function Expression) 두 가지가 있습니다. 함수 선언형 (Function Declaration) 함수 선언형은 함수 이름과 함수 본문으로 구성됩니다. 함수 선언은 전역 스코프 또는 함수 스코프에서 사용할 수 있으며, 호이스팅(hoisting)이 발생합니다. 이는 함수를 선언하기 전에 호출해도 오류가 발생하지 않는다는 것을 의미합니다. 함수 선언형은 함수 이름이 필수이며, 함수 표현식과 달리 이름을 가지고 있기 때문에 재귀적인 함수 호출에 유용합니다. function greet(name) { console.log(`Hello, ${name}!`); } greet('Star');..

2023. 12. 9.

Frontend/Javascript

[Javascript] 브라우저 렌더링 과정

프론트엔드 기술 면접 1순위로 등장하는 질문이 있습니다. "주소창에 www.google.com을 입력하고 엔터를 치면 어떤 일이 일어나나요?" 네트워크 과정을 지나 브라우저가 HTML 데이터를 받아온 순간부터, 사용자의 눈에 실제 화면이 보이기까지의 과정을 CRP(Critical Rendering Path)라고 합니다. 이 과정을 이해하는 것은 단순히 면접을 통과하기 위함이 아닙니다. 웹 성능 최적화의 출발점이 바로 이 메커니즘을 이해하는 데 있기 때문입니다. 왜 내 사이트의 애니메이션이 버벅거리는지, 왜 초기 로딩이 느린지 알고 싶다면 이 과정을 반드시 파악해야 합니다. 이번 글에서는 브라우저가 어떻게 텍스트 덩어리인 코드를 화려한 픽셀 화면으로 바꿔내는지, 단계별로 상세히 알아보고 최적화 포인트까..

2023. 12. 1.

Frontend/Javascript

[Javascript] 런타임 작동 방식

이번 글에서는 Javascript 런타임에 대하여 알아보겠습니다. Javascript 런타임은 Javascript가 구동되는 환경을 말합니다. 즉, Javascript 런타임은 Javascript 코드를 해석하고 실행하며, 필요한 리소스와 API를 제공하여 코드가 다양한 작업을 수행할 수 있게 합니다. Javascript 런타임 구성 요소는 다음과 같습니다. 1. 엔진 Javascript 코드를 실행하는 핵심 구성 요소입니다. 가장 유명한 Javascript 엔진 중 하나는 구글의 *V8엔진으로, Chrome과 Node.js에서 사용됩니다. 브라우저마다 다른 엔진을 사용할 수 있으며 Edge, IE는 Chakra라는 엔진을 사용하고 있습니다. 이러한 엔진은 Javascript 코드를 해석하고 실행하는 역..

2023. 11. 25.

Frontend/Javascript

[Javascript] 클로저(Closure)란?

클로저란? 클로저는 함수가 다른 함수 안에서 정의되고, 그 함수의 외부 변수에 접근할 수 있는 것 - 함수 내 함수 클로저는 함수 내부에 정의된 함수입니다. 이 함수는 외부 함수의 스코프에 접근할 수 있습니다. - 외부 변수 접근 클로저는 외부 함수(자신포함)의 변수나 매개변수에 접근할 수 있으며, 그 값을 읽거나 변경할 수 있습니다. - 스코프 유지 외부 함수가 실행을 완료하더라도 클로저 함수는 여전히 외부 함수의 스코프 정보를 유지합니다. 이것은 클로저 함수가 외부 함수의 변수에 계속 접근할 수 있는 이유입니다. 예시 위의 개념으로만 보면 이해가 잘 안 될 수 있으니 예제를 통해 자세히 살펴보도록 하겠습니다. function outer() { let outerVar = '저는 외부 변수입니다.'; f..

2023. 11. 19.

Frontend/Javascript

[Javascript] 웹 접근성을 높이는 방법

웹 표준과 웹 접근성은 서로 보완적이며, 함께 고려되면 더 나은 웹 경험을 제공할 수 있습니다. 개발자들과 디자이너들은 표준을 준수하고 웹 접근성을 고려하여 웹 사이트를 개발하는 것이 좋습니다. 이번 글에서는 웹 표준과 웹 접근성과 웹 접근성을 높이는 방법에 대하여 알아보겠습니다. [웹 표준이란?] 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격을 말합니다. 반드시 지켜야 하는 것은 아니지만 표준을 따르면 다양한 브라우저와 호환하게 해 주고 개발자들은 일관된 규칙과 구조를 활용하여 빠르게 웹 페이지를 개발할 수 있습니다. 그리고 검색엔진에 노출이 잘 될 확률이 높아집니다. [웹 접근성이란?] 웹 애플리케이션에 대한 모든 사용자, 특히 장애를 가진 사용자들이 동등하게 접근하고 이해할 수 있도록..

2023. 11. 17.

Frontend/Debug Log

Module '"@prisma/client"' has no exported member 'PrismaClient'. 해결 방법

Yarn Berry 환경에서 작업 중인 토이 프로젝트에서 prisma를 사용하려고 했는데 다음과 같은 에러가 발생하였습니다.'"@prisma/client"' has no exported member 'PrismaClient'"@prisma/client"' 모듈에 내보낸 멤버 'PrismaClient'이(가) 없습니다.  [에러 원인]저는 PrismaClient를 통해 스키마에 접근해 데이터를 가져오려고 했습니다. 하지만 '"@prisma/client"' has no exported member 'PrismaClient' 에러가 발생하였습니다. 저의 작업 환경은 Yarn Berry 이다 보니 node_modules 폴더가 아닌 PnP로 되어있는 라이브러리 파일을 참조합니다. 그래서 기본 prisma 설정으..

2023. 11. 12.

Frontend/Javascript

[Javascript] Execution Context란?

1. Execution Context란? Execution Context(실행 컨텍스트)는 실행 문맥이라고도 합니다. Execution Context는 굉장히 추상적인 개념인데요. 자바스크립트 코드가 실행될 때 생성되는 환경 및 실행에 필요한 정보를 관리하는 중요한 개념입니다. 자바스크립트 엔진은 코드를 실행할 때 현재 실행 중인 컨텍스트를 추적하며, 이 컨텍스트에는 코드가 실행되는 동안 필요한 데이터와 정보가 저장됩니다. 이번 글을 통해 Execution Context에 대해 자세히 알아보도록 하겠습니다. 2. Execution Context 종류 컨텍스트는 두 개 이상의 종류가 있고, 종류마다 특정 조건에 생성이 됩니다. 전역 실행 컨텍스트 가장 기본이 되는 실행 컨텍스트 입니다. 자바스크립트 코드가..

2023. 11. 10.

Frontend/Javascript

[Javascript] Callback, Promise 그리고 async/await의 차이점

Callback, Promise, 그리고 async/await은 모두 JavaScript에서 비동기 작업을 다루는 방식입니다. 이번 글에서는 각각의 차이점에 대해 포스팅해 보겠습니다. 비동기 작업을 다루기 전에 동기와 비동기의 차이점부터 작성하였으니 참고해 주세요. 1. Synchronous, Asynchronous - 동기 (Synchronous) 동기 작업은 순차적으로 진행되며, 하나의 작업이 완료될 때까지 다음 작업이 시작하지 않습니다. 동기 코드는 작업이 순서대로 진행되기 때문에 간단하게 이해할 수 있고, 디버깅하기 쉽습니다. 하나의 작업이 끝날 때까지 다른 작업을 수행하지 않기 때문에 성능 문제가 발생할 수 있습니다. 특히 긴 시간이 걸리는 작업은 애플리케이션을 블록 시킬 수 있습니다. - 비동..

2023. 10. 29.

Frontend/React

[React] 카카오 로그인 구현하는 방법

안녕하세요. 이번 글에서는 카카오 로그인을 구현하는 방법에 대하여 알아보도록 하겠습니다. 요새 로그인이 필요한 웹, 앱이라면 너무 쉽게 접근할 수 있는데요, 널리 사용되는 만큼 어렵지 않은 것 같습니다. 예전에 안드로이드로 카카오 로그인을 구현한 적이 있었는데, 그 당시는 자료도 적고 개발 문서만 보고 작업하기에는 어려움을 느꼈었는데 요새는 개발 문서도 잘 나와있고 정리를 잘해주신 분들이 너무 많이 계시네요. 저도 개발자분들께 도움이 되고자 이번 글을 써봅니다.[시작하기 앞서 Auth 개념]카카오 로그인은 OAuth 2.0 기반의 소셜 로그인 서비스입니다. 카카오 로그인을 사용하면 사용자가 카카오톡 또는 카카오계정으로 손쉽게 서비스에 로그인할 수 있습니다. 서비스는 서비스 ID 및 비밀번호를 입력받고 검..

2023. 5. 22.

Frontend/React

[React] S3를 이용한 파일 업로드 구현하기

이번 글에서는 React로 파일 업로드를 하는 방법을 알아보도록 하겠습니다. 저는 파일을 업로드하기 위해 AWS S3를 이용하였습니다. S3는 Simple Storage Service의 약자로 인터넷용 스토리지 서비스입니다. S3를 선택한 이유는 일반적인 파일 서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야 하는데 S3는 이러한 작업을 대행해 줍니다. 트래픽에 따른 시스템적인 문제를 걱정할 필요가 없어지는 거죠. 또 접근 권한도 설정할 수 있어서 외부에서 사용하는 것도 방지할 수 있습니다. 이러한 S3에서 사용되는 주요 용어들은 다음과 같습니다. 객체(object), AWS는 S3에 저장된 각각의 데이터를 객체라고 명명하는데, 하나 하나의 파일이라고 생각하시면 됩니다. 버킷(bucket), ..

2023. 3. 8.

Frontend/Debug Log

Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. 해결 방법

MUI의 DataGrid를 활용한 토이프로젝트 진행 도중 다음과 같은 에러가 발생하였습니다. Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. MUI DataGrid 컴포넌트를 사용하실 땐 MUI 자체에서 행에 고유한 id Props를 설정해줘야 합니다. MUI DataGrid에 고유 id props를 추가해 보겠습니다. MUI DataGrid API 레퍼런스에 가서 보시면 getRowId 프롭스가 있습니다. 바로 이것을 설정 해주시면 됩니다. getRowId 프롭스를 통해 해당 행의 ID를 반환할 수 있습니다. getRowId 타입은 Function이여서 함수형태로 주셔야 합니다. 인..

2023. 2. 10.

Frontend/React

[React] useRef() 여러 개를 한 개로 관리하기

이번 글에서는 여러 개의 useRef를 사용했을 때 효율적으로 useRef를 관리하는 법에 대하여 알아보도록 하겠습니다. 우리는 보통 DOM요소에 접근하거나 저장공간으로 활용하기 위해 useRef를 사용하곤 합니다. 그런데 useRef()가 여러 개인 경우는 어떻게 사용하시나요? 한 개씩 추가하면서 사용하시나요? 아래를 한 번 보겠습니다. [문제 상황] useRef()를 일반적으로 사용하는 아래 코드입니다. input 폼요소에 각각 useRef로 선언을 해서 사용하였습니다. 이때는 사실 개수가 적어 별로 문제가 안된다고 생각이 드실 수 있습니다. const refTel = useRef(null); const refName = useRef(null); 하지만 아래처럼 폼요소가 많거나 계속해서 추가해야될 상..

2023. 2. 2.

Frontend/React

[React] 파일업로드 이미지 미리보기 구현하기

이번 글에서는 React로 이미지 업로드를 하고 업로드한 파일을 미리 보기로 화면에 렌더링 하여 사용자에게 보여주는 작업을 구현하도록 하겠습니다. 간단하게 미리 보기를 구현할 수 있기 때문에 이 글만 읽어도 기능을 구현하고 이해하는 데는 어렵지 않을 것으로 생각이 듭니다. 이 기능은 실제로 정말 많이 사용되고 있고 저 같은 경우는 개인적으로 개발하고 있는 사이드 프로젝트에서 아래와 같이 사용해 봤습니다. 이번 글에서는 단순히 미리보기 기능만 있는 간단한 화면 하나를 개발하고 해당 코드를 보면서 미리 보기를 구현하겠습니다. [구현하기] 파일을 업로드하는 인풋버튼을 하나 만들고, 바로 올린 파일의 이미지를 미리보기로 보여주고 있습니다. 파일을 선택하여 업로드하는 경우, 선언한 FileReader로 업로드한 ..

2023. 1. 28.

Frontend/Debug Log

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결 방법

React로 파일 업로드 작업을 구현하기 위해서 AWS의 S3(Simple Storage Service)를 사용하려고 하였습니다. 제가 생성한 버킷의 경로에 파일 이미지를 추가하려고 하는데 아래와 같은 에러가 발생하였습니다. 저와 같은 에러가 발생하였다면 이 글을 보고 시간 절약해서 빠르게 해결하셨으면 좋겠습니다. has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.    [에러 원인]위에서 발생한 에러는 Cors에러로 현재 도메인의 권한이 허용이..

2023. 1. 22.

Frontend/React

[React] MySQL, Node.js 연동하여 Insert, Update, Delete 구현하기

지난 글에서는 React, MySQL, Node.js를 연동하여 데이터를 조회하는 글을 작성했었습니다. 이번 글에서는 데이터를 추가, 수정, 삭제해 보도록 하겠습니다. 지난번 데이터 조회때와 마찬가지로 시작하기에 앞서 MySQL이 설치되어 있어야 합니다. 이 글에서는 MySQL 설치, 세팅 방법에 대해서는 다루지 않겠습니다. 다운로드 링크만 적어놓을 테니 설치가 안되신 분은 설치 후 세팅하시기 바랍니다. 아래 경로에서 PC 운영 체제에 맞게 다운로드하여 설치 진행하시면 됩니다. 첫 번째 다운로드 링크는 MySQL 설치 파일이고, 두 번째 다운로드 링크는 MySQL을 편리하게 사용할 수 있는 툴입니다. 마지막 링크는 데이터 조회하는 방법입니다. https://dev.mysql.com/downloads/my..

2023. 1. 15.