728x90
HOT
-
[FE] 상태관리란? 상태관리란? [index] 1. 상태관리란? 2. 상태관리의 역사 3. 상태관리 라이브러리의 종류 1. 상태관리란? State Management 상태 관리는 모던 프론트엔드의 핵심 역량 중 하나로 여겨지며, 효과적인 상태 관리는 개발자의 핵심 역량이 되었습니다. 프론트엔드 개발에서 상태 관리는 다양한 컴포넌트 간 데이터 전달과 이벤트 통신을 효과적으로 관리하는 것이 목표입니다. 상태의 정의 프론트엔드에서 상태는 주로 유저 정보나 UI에 영향을 미치는 동적으로 변화하는 데이터를 말합니다. 또한 프론트엔드에서 상태는 눈에 보이는 UI 요소 뿐만 아니라 서버와의 통신을 통해 변하는 데이터를 포함합니다. 이를 관리하기 위해서는 예측 가능한 변화를 유지하고 상태의 일관성을 유지해야 합니다. React에서는 상태.. -
[ OAuth 2.0 ] Access Token & Refresh Token 으로 보안 강화하기 [ OAuth 2.0 ] Access Token & Refresh Token으로 보안 강화하기 이전에 로그인 기능을 구현했던 방식에서 보완과 관련한 문제점을 발견하여 이를 해결하기 위해 로그인 기능을 수정하게 되었습니다. 이 과정은 기존의 방식이 왜 잘못되었는지를 분석하고, 더 안전한 방식인 [ OAuth2.0 ] Access Token & Refresh Token 방식에 대해 다루고있습니다. 1. 기존의 로그인 구현 방식과 문제점 2. 해결방안 : [ OAuth 2.0 ] Access Token & Refresh Token을 사용하자 3. Refresh Token 이란? 4. Refresh Token의 한계 5. Refresh Token은 어디에 저장해야 안전할까? 6. 기존의 문제점을 해..
-
날짜 및 시간 예약 기능 구현하기 / with react-datepicker 1. 날짜 및 시간 선택 기능 구현하기 구현하려는 기능 1. 현재 날짜를 기준으로 6일 뒤까지만 예약이 가능하도록한다. 2. 예약하고자 하는 날짜를 선택하면 해당하는 날짜의 타임테이블을 불러온다. 3. 전체 타임 테이블 중에서 예약이 가능한 시간만 버튼이 활성화 되도록 한다. 4. 시간을 선택하고 예약하기를 누르면 예약 날짜와 시간을 서버로 보낸다. 내가 생각한 로직 1. 현재 날짜를 기준으로 예약 가능한 날짜 활성화 2. 예약 날짜 선택과 동시에 해당하는 날짜의 타임테이블 불러오기 3. 예약 가능한 시간만 버튼 활성화 4. 예약 시간 선택 5. 날짜와 시간이 모두 선택 될 때만 예약하기 버튼 활성화 6. 예약하기 버튼을 누르면 결제 단계로 이동 2. 구현에 필요한 라이브러리 비교하기 필요한 라이브러리 ..
-
[CSS] Tailwind CSS 분석 + 실제로 프로젝트에 적용해보며 느낀점 Tailwind CSS 분석 [index] 1. Tailwind CSS란? 2. Tailwind CSS 장점 3. Tailwind CSS 단점 4.실제로 프로젝트에 적용해보며 느낀점 1. Tailwind CSS란? https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com Tailwind CSS는 utility-first CSS 프레임워크로서 핵심 개념..
what's new?
- 2025년 AI 트렌드 6가지 – 지금 바로 챙겨야 할 핵심 키워드 2025년 AI 트렌드 6가지 – 지금 바로 챙겨야 할 핵심 키워드2025년은 인공지능이 ‘연구실의 기술’에서 ‘현장의 필수 역량’으로 완전히 자리 잡는 전환점이다. 거대 모델 경쟁은 성숙 단계에 접어들었고, 기업은 구체적 ROI와 규제 대응을 동시에 요구받고 있다. 아래 6가지 트렌드를 통해 시장과 기술의 변곡점을 짚어보자.목차에이전틱 AI로 진화하는 업무 자동화멀티모달 생성형 AI의 대중화테스트타임 스케일링과 고난도 추론엣지로 내려가는 AI: 특화 칩 전쟁합성 데이터의 폭발적 확산AI 규제 시대: EU AI Act 본격 시행1. 에이전틱 AI로 진화하는 업무 자동화“에이전트(Agentic) AI”는 사용자의 지시 없이도 목표 수립 → 계획 → 실행 → 모니터링을 스스로 순환하며 업무를 완결짓는 자율형.. 2025.07.23
- 바이브 코딩(Vibe Coding)이란? 바이브 코딩(Vibe Coding)이란?바이브 코딩은 AI에게 자연어로 원하는 기능을 말하면 AI가 코드를 작성하고, 개발자는 결과를 확인한 후 수정 요청을 반복하며 완성하는 대화형 협업 코딩 방식입니다.1. 왜 필요한가?전통적인 코딩은 기능 하나 구현하더라도 코드 작성, 구조 설계, 디버깅 등 수많은 단계를 거쳐야 합니다. 이러한 과정이 반복될수록 개발 속도는 느려지고, 피로감은 커지기 마련입니다.바이브 코딩2. 무엇인가?이 개념은 2025년 초, 오픈AI 공동 창업자 Andrej Karpathy가 “코드가 존재하지 않는 것처럼 흐름 중심으로 코딩한다”라고 소개하면서 화제가 되었습니다.즉, 개발자가 “로그인 폼 만들어줘”라고 말하면 AI가 코드를 생성합니다. 이후 개발자는 결과를 확인하고, “버튼 색상.. 2025.07.23
- 타입스크립트 기본 문법 정리: 개발 생산성을 높이는 핵심! 안녕하세요! 프론트엔드 개발자라면 이제 선택이 아닌 필수가 되어버린 타입스크립트. 자바스크립트의 유연함에 타입의 안정성을 더해주는 타입스크립트의 기본 문법을 핵심만 콕 집어 정리해 보았습니다.1. 왜 타입스크립트를 사용해야 할까요?타입스크립트는 자바스크립트의 슈퍼셋(Superset) 언어로, 자바스크립트 코드에 타입을 추가하여 개발 단계에서 오류를 미리 발견하고 코드의 가독성을 높여줍니다. 특히 대규모 프로젝트나 여러 개발자와 협업할 때 그 진가가 발휘됩니다.오류 조기 발견: 런타임 오류를 빌드 타임에 잡아낼 수 있습니다.코드 가독성 및 유지보수성 향상: 변수와 함수의 의도를 명확히 파악할 수 있습니다.개발 생산성 증대: IDE의 강력한 자동 완성 및 리팩토링 지원을 받을 수 있습니다.2. 타입스크립트 .. 2025.07.22
- 리액트 훅 (React Hooks) 심층 설명 리액트 훅 심층 설명리액트 훅(React Hooks)은 리액트 16.8 버전에서 도입된 기능으로, 함수 컴포넌트에서도 상태 관리 및 생명주기 관련 기능을 사용할 수 있게 해주는 특별한 함수들입니다. 훅의 등장으로 함수 컴포넌트가 리액트 개발의 표준으로 자리 잡았으며, 실무에서 효율적인 컴포넌트 작성을 위해 훅에 대한 깊은 이해가 필수적입니다.1. useState: 함수 컴포넌트의 상태 관리useState는 함수 컴포넌트 내에서 상태(state)를 선언하고 관리할 수 있게 해주는 가장 기본적인 훅입니다.목적: 컴포넌트 내부에서 변경될 수 있는 데이터를 정의하고, 이 데이터가 변경될 때 컴포넌트가 자동으로 다시 렌더링되도록 합니다.사용법:import React, { useState } from 'react'.. 2025.07.22
- 2025 React 19 주요 기능 완전 정복 — Server Components부터 Actions API까지 React 19 주요 기능 완전 정복 (2025)React 19는 성능과 DX(Developer Experience)를 한 단계 끌어올리는 대규모 업데이트입니다. 이 글에서는 새롭게 추가된 React Compiler, Actions API, Server Components 지원 강화 등 핵심 변화를 살펴보고, 실무에서 바로 써먹을 수 있는 마이그레이션 가이드를 제공합니다.개요Actions APIReact CompilerServer ComponentsuseOptimistic업그레이드 전략마무리React 19, 무엇이 달라졌나?React 19(현재 19.1.0)는 “성능 최적화 자동화”와 “보일러플레이트 최소화”를 목표로 출시되었습니다. Actions API로 폼/데이터 처리를 간소화하고, 서버 컴포넌트가 .. 2025.07.21
- 비전공자 프론트엔드 개발자 취준 회고 | 1년만에 다시 돌아온 회고록 안녕하세요! 작년 8월에쓴 회고록을 끝으로 1년 만에 돌아온 크리스탈입니다~작년 12월을 끝으로 블로그에 따로 글을 올리지 않았는데도 많은 분들이 찾아주셔서 놀랐습니당열심히 써둔 글들이 다른분들께 도움이 되고 있는 것 같아 기쁘네요.마지막 회고록에서 소식이 끊겨 근황을 궁금해 하시는 분들도 계셨는데용이제야 조금 여유가 생겨서 근황을 들고 왔습니당 가장 궁금해 하실 결과부터 말씀드리자면~저는 현재 판교에서 개발자로 일하고 있구용이제 따끈따끈한 3개월차가 되었습니당 헤헤(쏘리쥘러~!!!!!!@!@@!@) 작년 연말 취준을 하면서 여러가지로 일이 많아 블로그를 잠시 멈췄는데요올초까지 계속 취준하면서 바쁘게 지내느라 글을 써두고도 올리지 못했네용취준하는 동안 정리해뒀던 면접 질문 정리본과 면접썰? 같은것 두 .. 2024.06.30
728x90