y.developer

2023.11.24 금 SPA(Single Page Application)는 전통적인 다중 페이지 웹 애플리케이션과는 다르게, 페이지 전환이 일어나면서 전체 페이지를 새로고침하지 않고 동적으로 업데이트된다. 이러한 특성 때문에 SPA는 일부 검색 엔진에 대한 최적화에 어려움을 겪는다. 그래서 SEO(Search Engine Optimization)를 위해서는 몇 가지 고려해야 할 사항이 있다. SPA에서 SEO를 최적화하기 위한 몇 가지 전략을 알아보자. 1. 서버 사이드 렌더링(SSR) 도입 SPA는 클라이언트 측에서 JavaScript를 사용하여 페이지를 동적으로 렌더링하므로, 검색 엔진이 페이지 콘텐츠를 수집하는 데 어려움이 있다. 따라서 서버 사이드 렌더링(SSR)을 도입하여 초기 페이지 로딩 시..

2023.11.23 목 현재 파이어베이스를 다루는 프로젝트에서 음악 커뮤니티를 만들고 있다. 카테고리 별로 주소값을 부여하는데 'R&B'라는 카테고리가 존재한다. 이 값이 주소에 들어가게 되면 쿼리스트링에서 문법적 요소인 '&'이 충돌하여 원하는 값이 추출되지 않는 문제가 있었다. 쿼리스트링을 통해서 주소값에 부여된 값을 가져올 때 원하는 값을 잘 가져올 수 있는 방법을 알아보자! Query String (쿼리스트링) URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법이다. 웹개발에서 데이터를 요청하는 방식 중 주로 GET방식으로 데이터를 요청할 때 쓰이는 방법. encodeURI() vs encodeURIComponent() encodeURI()와 encodeURIComponent..

2023.11.22 수 React는 가상 DOM(Virtual DOM)을 기반으로 하는 자바스크립트 라이브러리로, 사용자 인터페이스를 효율적으로 구축하고 관리할 수 있게 해준다. 이를 위해 React에서 제공하는 여러 기능 중 useRef, className, document.querySelector에 대한 사용 방법을 알아보자! useRef와 className의 목적 React에서 useRef와 className은 각각 다른 목적으로 사용된다. useRef 주로 DOM 요소에 접근할 때 사용된다. 함수 컴포넌트에서 클래스 컴포넌트의 this와 유사한 역할을 한다. useRef를 사용하여 DOM 요소에 접근할 수 있으며, 해당 정보 값을 통해서 DOM을 수정할 수 있다. import React, { us..

2023.11.21 화 React Router의 navigate 함수를 사용할 때 주의할 점이 있다. 특히, 상대 경로와 음수 값을 사용할 때의 주의사항을 다뤄보려고 한다. navigate 함수의 사용 React Router에서는 페이지 간 이동을 처리하기 위해 useNavigate 훅을 제공한다. 이를 사용하여 다양한 경로로 이동할 수 있다. import { useNavigate } from 'react-router-dom'; function MyComponent() { const navigate = useNavigate(); // 부모 경로로 이동 { navigate("../") }}>Move // 이전 페이지로 이동 { navigate(-1) }}>Back } 주의할 점 navigate 함수와 음수..

2023.11.20 월 React에서 상세페이지로 이동할 때 사용되는 React Router DOM의 대표적인 요소 `Link`와 `useNavigate`가 있다. 페이지를 이동한다는 목적은 같은데 과연 어떤 방법으로 사용되며, 그 차이점은 무엇일지 궁금해졌다. Link 선언적인 페이지 이동 React Router DOM에서 제공하는 `Link` 컴포넌트는 페이지 간의 선언적인 링크를 생성하는 데 사용된다. JSX 안에서 사용되며, 사용자가 클릭할 수 있는 링크를 만들어준다. 이를 통해 페이지 간 이동이 클라이언트 측에서 처리되므로 전체 페이지가 다시 로드되지 않아 부드러운 전환을 제공할 수 있다. 간단한 예를 들어보자. 홈 페이지에서 상세 페이지로 이동하는 링크를 생성하는 코드 상세 페이지로 이동 us..

2023.11.17 금 수정중... 스타일 컴포넌트 조건부 렌더링에서 발생하는 오류들 React.memo] export default React.memo(Box1); 스냅샷을 저장하고 그대로 불러와서 불필요한 렌더링을 하지 않게한다. 무거운 작업에서 필수 yarn add axios fetch then async await useEffect 컴포넌트 렌더링이 완료된 후 실행되도록 ♠ 누구에게 보내실 건가요? { return { if () { // 안됨! } }; }; export default App; A) 그 이유는, JSX의 설계 목적 자체가 우리가 의도한 UI를 선언적으로(지난 시간에 잠깐 다뤘었죠) 표현하기 위해서 그렇습니다. UI를 그리는 데에 초점이 맞춰져야 할텐데 우리가 너무 많은 제어 흐름 ..

2023.11.16 목 현재 작업 중인 그룹 아티스트 팬레터함 홈페이지에 배경음악을 넣어보기로 했다. 영상을 다루는 방법은 알고 있었지만, 음악은 처음이었다. 그리고 리액트에서는 또 약간은 다른 방법으로 작동을 해서 음악을 재생시키는 것부터 컨트롤박스를 디자인하는 것까지 쉽지는 않았지만 완성했다. 전체적인 콘셉은 '신곡 발표 홈페이지'로 정했다. 르세라핌의 신곡인 'Perfect Night'를 소개하는 페이지. 각 멤버들에게 팬레터를 작성할 수 있다. 신곡 발표라는 콘셉에 적합하게 음악을 넣어보면 좋겠다는 생각이 들어서 만들게 되었다. 음악 준비 일단 음악 파일과 코드를 작성할 컴포넌트를 만들어 준다. 음악은 mp3 형식으로 준비했으며, Music.jsx 컴포넌트를 만들어주었다. 컴포넌트 파일에 음악 파..

GlobalStyles] 전역 스타일링 : 프로젝트 전체를 아우르는 스타일 불러오기 : import { cerateGlobalStyle } from "styled-components" 사용 : 새로운 컴포넌트(jsx파일) 생성 ex)GlobalStyle.jsx const GlobalStyle = cerateGlobalStyle `` 사용할 컴포넌트에서 import 사용할 함수안에서 컴포넌트 적어주기 Sass(Syntactically Awesome Style Sheets)] CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어 코드의 재사용성을 높이고, 가독성을 향상 - 변수를 사용할 수 있다. - 중첩할 수 있다.(Nesting) - 다른 style 파일을 import 할 수 있다. ♠ ht..