의진이의 개발 어린이 탈출기

이번에 프로젝트를  진행하면서, 리뷰리스트를 ul와 div 중 어떤 태그를 선택할지 고민하다가, 화 x라는 사이트와 무 xx라는 사이트를 참고 하였는데 각각 사용하는 게 달라서 어떤 게 맞는지 알아보았습니다. 우선 각각의 장점? 이 있습니다. 1️⃣ ul > li를 사용하는 게 더 좋은 경우 HTML 의미론인 시멘틱 마크업을 고려할 때 입니다.ul은 관련된 항목들의 목록의 의미합니다.리뷰 리스트는 여러 개의 리뷰 항목으로 구성된 목록이므로, ul > li 가 의미적으로는 더 적절합니다.화면 낭독기(Screen Reader) 사용자의 경우에는 ul은 리스트로 인식되어서 더 명확하게 정보를 제공합니다. 정리하자면,  1. 웹 접근성(Accessibility) 👉 ul은 “리스트”임을 명확히 전달, 스크린 ..

이번에 금정이와 React-TS 프로젝트를 진행하면서 React Hooks에 대해 더 깊이 알아볼 필요성을 느꼈습니다.이전에도 React Hook에 대한 포스팅을 했지만, 각 훅이 무엇이고, 어떻게 동작하는지 깊이 있게 다루지는 않았던 것 같습니다. 이번 기회에 React Hooks를 하나씩 좀 더 깊이 공부하면서 정리하는 포스팅을 연재해 볼 예정입니다.  🤓 useState란 무엇인가 ??useState는 React 훅 중 하나입니다. 함수형 컴포넌트에서 상태를 관리할 수 있게 해 주고, 함수형 컴포넌트는 단순히 입력을 받아출력을 반환하는 함수라 상태라는 것을 갖지 않습니다. 그렇지만 useState를 사용하면 함수형 컴포넌트에도 상태라는 것을 추가할 수 있습니다.여기서 함수형 컴포넌트가 무엇인지 잘..

🤓 웹 접근성(A11Y) 이란?모든 사용자가 장애 유무와 관계없이 웹사이트를 쉽게 이용할 수 있도록 보장하는 것을 의미합니다.정상인뿐만 아니라, 장애를 가지고 있는 사용자들도 웹콘텐츠를 문제없이 이용할 수 있도록 웹사이트를 설계하는 것이 중요합니다.웹 접근성을 개발하면, SEO, 사용자 경험(UX) 브랜드 이미지 개선에도 큰 도움이 된다고 합니다.!!😎 웹 접근성 핵심 개념 웹 접근성의 원칙은 4가지(POUR)로 정리할 수 있습니다.1. 인식가능(Perceivable) : 시각적, 청각적으로 콘텐츠를 인식할 수 있어야 합니다.2. 운용 가능(Operable) : 키보드 음성 스크린리더 등 다양한 방식으로 웹을 조작할 수 있어야 합니다.3. 이해 가능(Understandable) : 사용자 인터페이스와..

오늘은 리액트 훅에 대해서 포스팅해 보겠습니다.React에서 훅은 함수형 컴포넌트에서 상태(state)와 생명주기 기능을 사용할 수 있도록 해주는 기능입니다. 원래 React에서는 클래스 컴포넌트에서만 상태 관리와 생명주기 메서드를 사용할 수 있었지만,React 16.8부터 useStatue, useEffect 같은 훅을 사용하여 함수형 컴포넌트에서도 이를 활용 가능 하게 되었습니다. 📌 1️⃣ React Hook의 종류React Hook은 크게 기본 훅, 추가 훅, 그리고 커스텀 훅으로 나뉩니다.기본 훅useState : 컴포넌트 상태 관리(state)useEffect : 컴포넌트 생명주기 관리(side effects, API 요청 등)useContext : 전역 상태 관리 (React Context..

이번에는 Next.js 프로젝트를 진행하기 전에, Next.js와 React의 차이점을 공부하면서 *SSR(서버 사이드 렌더링)*과 *CSR(클라이언트 사이드 렌더링)*이 주요 키워드로 많이 언급되는 것을 알게 되었습니다. 이에 대해 학습한 내용을 정리하여 포스팅해보려고 합니다.  🏗️ SSR(Server-Side Rendering) – 서버 사이드 렌더링 SSR은 서버에서 HTML을 미리 렌더링 하여 클라이언트에 전달하는 방식입니다.즉, 사용자가 요청을 보내면 서버에서 HTML을 생성한 후 브라우저로 전송하며, 이후 JavaScript가 실행되면서 인터랙티브 기능이 활성화됩니다. 위 그림 대로 정리를 하자면,1. 사용자가 웹사이트에 요청을 보냅니다.2. 서버는 렌더링이 가능한 HTML 파일을 만듭니다..

오늘은 타입스크립트의 type에 대해서 포스팅해보겠습니다. TypeScript는  Javascript compiler입니다.TS는 Strongly type 언어이고, JS에서 발생할 수 있는 오류를 미리 감지하고 경고합니다.이 말은 즉 TS에서 오류가 없다면 JS에서도 오류가 없다는 뜻입니다 TypeScript는 암묵적 Type와 명시적 Type를 모두 지원합니다.Type는 변수를 선언할 때 명시적으로 지정해줘야 합니다. 만약 지정을 안 해준다면. 변수 선언 하고 난 뒤"처음"으로 할당될 때를 기준으로 Type가 추론됩니다. 처음 할당된 변수의 Type와 다른 Type를 추후에 섞어서 쓰게 된다면 에러가 뜨게 됩니다. 변수의 Type은 기본적으로 클론(:) 뒤에 기재하는 방식을 통해 명시적으로 지정합니다..

안녕하세요!오늘은 LG 유플러스 유레카 SW 교육과정에서 진행했던 융합 프로젝트를 리팩토링하면서,검색엔진최적화(SEO) 100점 달성 과정을 정리해보려고 합니다. 우리 4조 나쵸팝콘콜라 프로젝트는 본선에 진출한 만큼, 서비스 품질을 높이는 리팩토링 과정을 진행하고있습니다..(금정이와 둘이..)그중에서도 SEO 점수를 100점으로 올리는 것이 목표였고,Google Lighthouse 기준 SEO 100점 달성을 위해 여러 가지 최적화를 진행했습니다. 우선 리팩토링 하기전 LightHouse 검색 엔진 최적화 점수 입니다 ㅠㅠ.. 개선 전  개선 후  이미지가 너무 많으면 글이 조잡해보여서 조금만 이미지 첨부하겠습니다. 나머지 페이지에서도 전부 비슷한 점수가 나왔는데요.  어떻게 모든 페이지 100점을 적용..

안녕하세요오늘은 자바스크립트의 기본 중에 기본인 DOM에 대해서 포스팅 해보겠습니다. DOM(Document Object Model)DOM(Document Object Model) 은 웹 문서의 구조화된 표현입니다.이것은 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작합니다.자바스크립트에서 웹페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용됩니다.DOM의 주요 특징1. 트리 구조 : DOM은 트리 구조로 표현되며, 각 노드는 웹페이지에서 문서, 요소, 속성, 텍스트, 주석 을 나타냅니다.2. 라이브 특성 : DOM은 라이브라는 특성이 있습니다. DOM에 대한 변경은 즉시 웹페이지에 반영됩니다.3. 조작 가능 : 자바스크립트를 사용하여 DOM 요소를 선택 수..

안녕하세요 오늘은 자바스크립트의 원시타입 그리고 참조 타입의 차이에 대해서포스팅해보겠습니다. JavaScript 변수 타입 자바스크립트의 변수 타입에는 크게 원시타입 그리고 참조타입으로 나뉩니다. 원시타입 변수는 데이터 복사가 일어나면 메모리 공간을 새로 확보해 독립적인 값을 저장하고,참조타입은 메모리에 직접 접근이 아닌 메모리의 위치(주소)에 간접적인 참조를 통해 메모리에 접근을 합니다. 자바스크립트의 원시(Primitive) 타입 자바스크립트의 원시타입으로는 number, bigint, string, boolean, null, undefined, symbol총 7개가 존재하며, 이들의 공통접은 object가 아니며 따로 메서드를 가지지 않습니다.(여기서 symbol은 ES6에서 추가된 원시타입으로, ..

안녕하세요 오늘은 html 시멘틱 태그에 대해서포스팅하겠습니다. 우선 포스팅을 하게 된 계기는웹 개발 공부를 하면서 문서를 구조화하는 HTML 태그의 중요성을 느끼게 되었습니다. 특히 취업 준비를 위해 UI/UX 최적화와 접근성(Accessibility)에 대해 알아보던 중 **시맨틱 태그(Semantic Tag)**라는 개념이 눈에 들어왔습니다. HTML5에서 추가된 시맨틱 태그는 단순히 웹페이지의 구조를 정의하는 것뿐만 아니라, 검색 엔진 최적화(SEO), 접근성 향상, 유지 보수성에 있어서도 중요한 역할을 한다는 것을 알게 되었습니다. 그래서 시맨틱 태그의 필요성과 이를 활용하는 방법에 대해 깊이 알아보기로 했습니다. 우선 시멘틱 태그란?태그 이름만으로 해당 태그가 담당하는 역할이나 의미를 명확히 ..