프론트엔드
-
[React] useState, useReducer hook개발공부/React 2024. 3. 2. 16:24
본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다. 목차 차이점 useState란? useReducer란? 차이점 useState useReducer 용도 단순한 상태관리 복잡한 상태관리 인터페이스 하나의 상태 값, 그 값을 변경하는 함수 반환 리듀서와 디스패치 함수 반환 가독성과 유지 보수성 직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상 복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우 간단히 정리하면, useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용, useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능..
-
[HTML] 시맨틱 태그 (Semantic Tags)카테고리 없음 2024. 2. 28. 10:44
본 글은 HTML 시맨틱 태그에 대해 다룬 내용입니다. 목차 필요성 시맨틱 태그란? 필요성 시맨틱 태그가 프론트엔드 개발자에게 필요한 이유는 아래와 같다. 검색 엔진 최적화(SEO) 시맨틱 태그를 적절하게 사용하면 검색 엔진이 페이지의 콘텐츠를 더 잘 이해하고, 검색 결과에 노출될 가능성이 높아진다. 웹 접근성(Accessibility) 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 웹 페이지를 더 쉽게 이해할 수 있도록 도와준다. 코드 유지 보수성 콘텐츠의 의미를 명확히 정의하면 다른 개발자들이 코드를 이해하고 수정하는데 도움이 된다. 재사용성 콘텐츠를 독립적인 블록으로 구분하여 재사용할 수 있다. 시맨틱 태그(Semantic Tags)란? 시맨틱 태그는 브라우저와 개발자 모두에게 의미 있는 내..
-
이벤트 전파개발공부/CS 2024. 2. 8. 21:16
본 글을 자바스크립트의 이벤트 전파에 대해 다룬 내용입니다. 목차 1. 이벤트 전파(Event Propagation)란? 2. 이벤트 전파의 종류 (버블링, 캡처링) 프론트엔드 개발자가 이벤트 전파에 대해 이해하면 사용자와의 상호작용을 관리하고, 효율적으로 이벤트를 처리할 수 있다. 1. 이벤트 전파(Event Propagation)란? 이벤트 전파에 대해 간단하게 정리하면 아래와 같다. HTML 문서 내에서 이벤트가 발생하면, 해당 이벤트가 어떻게 처리되는지를 설명하는 개념 위에 내용만 읽어봤을 때는 무슨 말인지 이해 못할 수도 있다. 아래 과정을 통해 이벤트 전파가 어떻게 일어나는지 알아보자! 이벤트 처리 과정 사용자의 상호작용(예: 클릭, 마우스 오버 등)으로 인해 이벤트 발생 → 이벤트 타깃(Ev..
-
[자바스크립트] 자료형 변경하기개발공부/JavaScript 2024. 2. 5. 21:19
본 글을 자바스크립트에서 자료형 변경하는 방법에 대해 다룬 내용입니다. 목차 1. 정수 2. 실수 3. 문자 (문자열) 4. 논리 1. 정수 // 1. Number // 주어진 값을 숫자로 변환, 부동 소수점 숫자로 인식 console.log(Number("123")); // 123 console.log(Number("123.45")); // 123.45 console.log(Number(true)); // 1 console.log(Number("123")); // NaN (숫자로 변환할 수 없는 경우) // 2. parseInt // 주어진 값 하나하나를 정수로 추출, 부동 소수점 이후 숫자는 무시 // 두 번째 매개변수로 기수(진수)를 지정, 생략 시에는 10진수 console.log(parseInt..
-
[자바스크립트] 배열과 집합 ([], set())개발공부/JavaScript 2024. 1. 31. 22:31
본 글은 배열과 집합을 다룬 내용입니다. 목차 1. 배열과 집합을 차이점 2. 성능 3. 배열 4. 집합 1. 배열과 집합의 차이점 개발자는 데이터를 효율적으로 다루고 관리하기 위해 다양한 상황에 적절한 자료구조를 선택하고 활용할 수 있어야 한다. 데이터를 어떻게 관리하는지에 따라 프로그램의 성능이 달라진다. 그래서 우리는 늘 적절한 선택을 해야한다. 데이터 구조의 특징을 잘 기억해야지 적절한 선택을 할 수 있다는 점을 잊지 말고 공부하면 좋겠다! 이제 본론으로 돌아와 배열과 집합의 차이점을 정리하면 아래와 같다. 집합은 중복을 허용하지 않는 고유 값들의 모임 배열은 중복을 허용하고, 순서를 갖는 값들의 모임 여기서 기억해야 할 키워는 중복과 순서이다. 집합은 중복 X, 순서 X 배열은 중복 O, 순서 ..
-
Next.js에서 카카오 지도 사용하기개발공부/Next.js 2024. 1. 25. 20:45
본 글을 Next.js에서 카카오 지도 오픈 API를 사용법을 다룬 내용입니다. 지도 만들기 순서를 간단하게 요약하면 아래와 같다. 카카오 지도 Key 발급 Next.tsx 파일 초기 설정 지도 그리기 카카오 지도 Key 발급 순서: 카카오 지도 페이지 접속 > 카카오로 로그인 > 내 애플리케이션 선택 > 애플르케이션 추가 및 선택 > JavaScript 키 복사 (꼭 JavaScript 키 복사해두기!) Next.tsx 파일 초기 설정 _document.tsx에서 카카오 지도 API 스크립트를 로드해야 한다! (해당 파일에서 스크립트를 로드하면 모든 페이지에 해당 스크립트가 포함되어 초기 로딩 시간 개선, 필요한 경우에만 API 활성화 가능) JavaScript 키는 아까 사이트에서 복사한 값 넣어주..
-
상태 관리개발공부/React 2024. 1. 16. 20:36
여러 가지 프로젝트를 진행하면서 내가 제일 많이 했던 고민이 바로 "상태 관리"이다. 상태 관리를 신경써야 하는 이유는 다양하지만 내가 중요하게 받아드리는 이유는 아래와 같다. 중앙 상태 관리를 통해 컴포넌트 간의 데이터 흐름을 쉽게 관리 가능 코드 유지 보수성 향상 상태의 불변성을 유지함으로서 예측 가능하고 안정적인 어플리케이션 구현 가능 어떻게 상태를 관리하는지에 따라 프로젝트의 성능이 달라진다. 위와 같은 이유로 프론트엔드 개발자는 특히 상태 관리를 잘해야 한다고 생각한다. (직접적인 영향이 있기 때문에) 그래서 오늘은 상태 관리가 뭔지, 어떤 방법으로 하는지에 대해 자세히 알아보려고 한다. 상태란? 우선 상태에 대해 찾아봤다. 어플리케이션 내에서 변경 가능한 데이터 리액트에서는 컴포넌트 내에서 관..
-
ContextAPI와 Recoil개발공부/기타 2024. 1. 15. 16:47
지금 지인들과 진행하고 있는 사이드 프로젝트가 하나있다. 처음에는 관리해야 할 데이터가 별로 없어서 ContextAPI를 사용했는데, 시간이 지날수록 불편한 점들이 있어서 팀원들과 논의한 결과 Recoil을 사용하기로 결정했다! :) 변경한 이유는? ContextAPI를 불편하게 생각했던 이유는 아래와 같다. 코드 간결성 및 가독성 불필요한 리렌더링 발생 코드 간결성 및 가독성 ContextAPI에 로그인 유무를 저장한 변수가 있었는데 분명 boolean으로 저장했는데 console에 찍으면 int이 찍혀있는 것이었다. 디버깅을 통해 원인을 파악해보니 팀원 중 한명이 코드를 잘못 작성해서 int형으로 데이터가 잘못들어갔던 것이다. (주석 참고) export const AuthProvider = ({ ch..