728x90
반응형

Front-end/React 49

ESLint와 Prettier: 코드 품질과 스타일을 관리하는 비밀 무기!

ESLint: 린터로 코드 품질 높이기 ESLint는 코드에서 발생할 수 있는 오류를 미리 찾아내고, 코드 품질을 높여주는 자바스크립트 린터예요. 말 그대로 코드의 “문법 검사기” 같은 역할을 하면서 개발할 때 실수를 줄여줍니다. 예를 들어, 변수를 선언하지 않고 사용했거나, 사용하지 않는 변수가 남아있을 때, ESLint가 미리 알려줘요. 에러를 줄여주는 것뿐 아니라, 프로젝트 전반에 걸쳐 코드 스타일을 일관되게 유지해주는 역할도 하죠.ESLint의 주요 기능 • 에러 감지: ESLint는 사소한 오타나 오류를 자동으로 감지해줘서 코드 오류를 줄일 수 있습니다.• 일관성 있는 코드 스타일: 프로젝트 전체에서 일관된 스타일을 유지하게 해 주고, 팀 내에서도 같은 규칙을 적용할 수 있어 협업에 유리해요.•..

Front-end/React 2024.11.14

리액트 작업 환경 설정: Node.js, npm, nvm, 그리고 yarn, 왜 이걸로 시작할까?

리액트를 개발하려면 몇 가지 기본 도구를 먼저 세팅해야 해요. 이런 도구들이 뭐고 왜 필요한지 알면 작업 환경이 훨씬 깔끔해지겠죠? Node.js, npm, nvm, 그리고 yarn이 리액트와 어떻게 연관되는지 차근차근 알려드릴게요! Node.js: 리액트의 든든한 배경 우선 Node.js는 자바스크립트 런타임 환경이에요. 원래 자바스크립트는 브라우저에서만 돌아갔지만, Node.js 덕분에 서버나 로컬 컴퓨터에서도 자바스크립트를 실행할 수 있게 됐죠. 리액트 프로젝트를 만들고 실행하려면 Node.js가 기본적으로 필요해요. 설치 방법: Node.js 공식 사이트에서 최신 LTS 버전을 다운로드해서 설치하면 됩니다. npm: 패키지 관리의 필수 도구 Node.js를 설치하면 **npm(Node Packag..

Front-end/React 2024.11.13

리액트의 가상 DOM과 진짜 DOM: 과연 DOM이 느린 걸까?

DOM이 느리다? 그게 정말일까? 흔히 “DOM 조작은 느리다”라고 하는데, 사실은 조금 달라요. DOM 자체가 느린 건 아니지만, 복잡한 업데이트를 반복해서 할 때 성능이 떨어질 수 있어요. 예를 들어, 화면에서 여러 요소를 한꺼번에 계속해서 바꾸는 상황이 발생하면, 브라우저가 DOM 트리를 계속 갱신해야 해서 부담이 커지죠. 리액트는 이런 부담을 줄이기 위해 가상 DOM(Virtual DOM)을 사용해요. 가상 DOM은 메모리 상에서 HTML의 “사본”을 만들어 놓고, 이걸 먼저 업데이트하면서 변경 사항을 파악해 필요한 부분만 실제 DOM에 반영합니다.리액트의 목표: 지속적으로 변화하는 데이터와 대규모 애플리케이션을 위한 최적화 리액트가 가상 DOM을 쓰는 이유는 바로 “대규모 애플리케이션”에서 성능..

Front-end/React 2024.11.12

리액트의 렌더링, 초기 렌더링, 그리고 Reconciliation

리액트를 다루다 보면 렌더링에 대해 많이 듣게 될 거예요. 리액트에서 렌더링은 단순히 “화면에 그림을 그린다” 수준이 아니라, 최대한 효율적으로 DOM 업데이트를 최소화해서 전체적인 성능을 챙기는 데 초점을 맞춥니다. 그래서 처음 화면을 그릴 때와, 상태가 바뀌어 재렌더링할 때, 리액트가 다르게 동작하죠.  1. 초기 렌더링: 첫 화면을 DOM에 주입하기 처음 앱이 로드되면, 리액트는 컴포넌트를 쭉 읽으면서 HTML을 문자열 형태로 생성합니다. 그 후 특정 DOM 노드에 HTML을 주입해 첫 화면을 그려요. 예를 들어, document.getElementById('root') 같은 특정 DOM에 만들어진 내용을 넣는 방식입니다. 이때 이벤트도 설정해서 사용자와 상호작용할 수 있도록 준비하죠.import ..

Front-end/React 2024.11.11

[React] 왜 리액트인가? 알아보자! 🤔

왜 리액트인가? 알아보자! 🤔왜 하필 리액트? 자바스크립트만으로는 도대체 뭐가 문제길래?대규모 앱을 자바스크립트로만 관리하려고 해보면… 뭔가 삐걱거리는 느낌이 들 거예요. 자잘한 상태 관리부터 DOM 직접 조작까지 일일이 해줘야 하니까, “내가 이걸 왜 하고 있지?” 하는 생각이 절로 들죠. 특히나 사용자 많고 데이터도 복잡한 대규모 프로젝트라면 더더욱 힘들어져요.자바스크립트만으로는 어려운 점상태 관리와 반응성여기저기서 컴포넌트끼리 데이터를 주고받고 상태에 따라 화면을 즉각 업데이트해줘야 하는데, 자바스크립트만으로는 그 과정이 복잡해지고 코드도 금세 엉망진창 되기 딱 좋습니다.유지보수와 확장성개발이 진행될수록 코드가 길어지고 여기저기서 고쳐야 할 부분이 생기는데, 자바스크립트로 DOM 조작을 직접 하다..

Front-end/React 2024.11.10

로그인 구현하기 - 4. 프론트와 백엔드의 협력 포인트

로그인 구현하기의 마지막 파트로,실무에 있어서 백엔드 개발자와 프론트엔드 개발자가 함께 협력하여 확인해야 하는 부분들을 정리했다.1. API 엔드포인트 설계로그인 엔드포인트: /login메서드: POST요청 본문: { "username": "example", "password": "example" }응답: { "token": "JWT_TOKEN_HERE" }회원가입 엔드포인트: /register메서드: POST요청 본문: { "username": "example", "password": "example" }응답: { "message": "User registered successfully" }보호된 리소스 엔드포인트: /protected메서드: GET헤더: Authorization: Bearer JWT_..

Front-end/React 2024.07.01

로그인 구현하기 - 3. 보안 조치와 안전성 높이기(Node.js, React)

로그인 구현 1은 프론트 과정에서 구현해야하는 툴을, 로그인 구현 2에선 JWT 토큰을 구현하는 틀을 다뤘다.1과 2는 기본적인 틀만 다룬 것이기 때문에 실제론 더더 많은 보안 조치와 오류 처리가 필요했다.애플리케이션의 안전성과 안정성을 높이는 것이 매우 중요하기 때문에 백과 프론트에서 적용할 수 있는 몇 가지 보안 조치와 오류 처리 방법을 다루는 글이 되겠다.백엔드 보안 조치:환경 변수 사용강력한 비밀번호 정책JWT 만료 시간 설정리프레시 토큰 사용HTTPS 사용입력 데이터 검증CSRF 보호로그 및 모니터링프론트엔드 보안 조치:JWT 저장 위치자동 로그아웃비동기 요청 오류 처리입력 검증HTTPS 사용XSS 방지Nodejs 백엔드 보안 조치와 오류 처리환경 변수 사용:JWT 시크릿 키와 같은 민감한 정보..

Front-end/React 2024.07.01

로그인 구현하기 - 2. JWT 생성하는 과정(React & Node.js)

1탄은 로그인을 인증하는 틀을 담았다. 2탄은 인증하기 위해 사용하는 JWT 토큰을 생성하는 과정이다.JWT (JSON Web Token) 토큰을 만드는 방법을 React 애플리케이션과 Node.js 백엔드를 사용하여 구현하는 과정으로 나눴다.백엔드 (Node.js) 설정: 사용자 인증 및 JWT 생성Express 서버 설정JWT 생성 및 검증사용자 등록 및 로그인 엔드포인트 구현프론트엔드 (React) 설정: 로그인 폼 및 JWT 저장 및 사용로그인 폼 구현JWT를 이용한 인증 요청보호된 리소스 접근1. 백엔드 설정Step 1: Node.js 프로젝트 초기화 및 필요 패키지 설치먼저, Node.js 프로젝트를 초기화하고 필요한 패키지를 설치한다.mkdir jwt-auth-examplecd jwt-aut..

Front-end/React 2024.06.30

React로 로그인 기능 구현하기 (1): 프론트엔드 처리 과정 🚀

로그인 기능 구현 (1): 프론트엔드 처리 과정 🚀로그인 기능은 거의 모든 웹 애플리케이션에서 필수적으로 사용됩니다. 이번 글에서는 React를 사용하여 로그인 기능을 구현하는 과정을 친절히 설명합니다. 토큰 기반 인증 방식과 상태 관리를 이해하며, 로그인 로직을 어떻게 처리해야 하는지 단계별로 살펴보겠습니다.0️⃣ 로그인 기능의 기본 원리로그인 기능은 사용자가 입력한 아이디와 비밀번호를 인증 서버에 전달하여 유효성을 검증한 후, 성공적으로 인증되었을 때 토큰을 반환받는 방식으로 작동합니다.로그인 흐름 🔄사용자가 로그인 폼에 아이디와 비밀번호를 입력합니다.입력 데이터를 서버로 전송하여 인증을 요청합니다.서버는 데이터를 검증하고, 유효한 경우 Access Token 및 Refresh Token을 반환합..

Front-end/React 2024.06.30
728x90
반응형