본문 바로가기

분류 전체보기

 (136)
SEO 처리하기 SEO(Search Engine Optimization, 검색 엔진 최적화)란?- 검색 엔진은 웹사이트에서 사용자가 검색한 키워드와 관련된 가장 적절한 결과를 제공하기 위해 웹 사이트의 컨텐츠와 구조를 분석하- 검색 엔진 최적화는 웹에 올리는 컨텐츠가 구글, 네이버와 같은 웹사이트의 검색 엔진에서 검색 결과에서 상위에 노출되도록 최적화하는 과정을 말한다. 문제정의- You-Together 프로젝트의 기능을 구현하고 크롬 개발자 탭의 Lighthouse를 통해 웹 페이지의 성능을 측정해본 결과, SEO 항목에서 72점이라는 낮은 점수가 기록된 것을 확인했다.- 기존에 CSR을 사용하는 React만을 사용했던 프로젝트에서는 SEO에 대해 단점을 가질 수 밖에 없다고 생각했지만, 이번 프로젝트는 nextjs..
[기능 구현] requestAnimationFrame을 활용한 애니메이션 목표 - 뉴스스탠드 프로젝트에서 화면 상단의 뉴스 헤드라인이 5초마다 무한으로 롤링되는 애니메이션의 구현이 필요했다. - 즉, A, B, C, D, E라는 뉴스 헤드라인이 있을 때, 사용자에게 보여지는 헤드라인은 1개이며 처음에는 A가 보이고 5초가 있으면 B가 보이며 E 다음에는 다시 A가 보여야 한다. - 무한으로 E 다음에 다시 A가 나타나는 로직 또한 고민이 필요한 부분이었지만, 이번 글에서는 5초마다 다음 뉴스의 헤드라인이 애니메이션과 함께 나타나는 기능에 대한 내용을 다뤄보려고 한다. 문제정의 - JavaScript를 공부하면 일정 시간마다 반복되는 기능을 사용할 때 가장 먼저 setInterval() 메서드를 생각할 수 있고 나 역시 setInterval() 메서드를 사용하여 5초마다 헤드라..
데이터 크롤링 및 json-server 활용 데이터 크롤링 - 뉴스스탠드 프로젝트는 네이버의 뉴스스탠드를 클론 코딩하는 프로젝트였다. - 처음 기획서를 보고 네이버의 뉴스 데이터를 어떻게 가져올 수 있을까 대한 고민이 생겼고, 동료의 도움으로 데이터 크롤링에 대해서 학습하고 사용했다. - 데이터 크롤링은 웹상의 정보들을 탐색하고 수집하는 작업을 의미하며 주로 규칙에 따라 자동으로 웹 문서를 탐색하는 컴퓨터 프로그램, 웹 크롤러(Crawler)를 사용한다. - 나는 네이버 PC 메인 화면에서 개발자 도구에서 DOM 요소를 선택하여 정보를 수집하는 방법을 사용했고, 실제 프로젝트에서 사용한 크롤링 코드와 db.json의 모습은 다음과 같다. // 데이터 크롤링 코드 const result = []; // DOM 요소를 선택하여 정보를 수집 docume..
Sass/Scss - 코드스쿼드 두 번째 개인 프로젝트인 News-stand를 CSS 전처리기 Sass/Scss를 활용했다.- 먼저 CSS 전처리기는 자신만의 특별한 syntax를 가지고 CSS 생성하며 중복 코드를 제거하고 재사용성을 높일 수 있다.- 여기서는 Sass/Scss를 사용하면 여러 장점들이 있지만, 실제 프로젝트에서 사용한 부분들을 다루도록 하겠다.믹스인(mixin)- 믹스인(mixin)은 코드 블록을 만들어 재사용 가능한 스타일을 정의할 수 있는 기능이다.- @mixin으로 선언하고 @include로 사용한다.- 다음은 실제 프로젝트에서 font 스타일을 정의하는 믹스인(mixin)을 선언하고 사용한 코드이다./* mixin 선언 */@mixin font($size, $weight) { font-size..
옵저버 패턴 - 코드스쿼드 두 번째 개인 프로젝트인 News-stand를 진행하면서 옵저버 패턴이라는 학습키워드를 접하게 되었고, 프로젝트에 적용해보았다. - 옵저버 패턴은 프론트엔드 개발에서 자주 사용되는 디자인 패턴으로, 모듈간의 의존성을 낮게 하기 위해 사용된다. - 옵저버 패턴은 간단하게 말해 "구독"과 "발행" 개념으로 표현되며 View는 Model을 구독하고 Model의 상태가 변경되면, 이를 구독하고 있는 View의 렌더링 함수(혹은 등록해놓은 함수)가 실행된다. - 즉, Model의 상태가 변경함에 따라서 해당 Model을 구독 중인 View가 자동으로 렌더링이 되는 구조이다. Observer pattern 코드 및 사용 - 옵저버 패턴에서 옵저버를 구현해보자. - 옵저버는 다음과 같은 역할을 한다. ..
[Trouble Shooting] UUID를 사용한 고유한 키 값 사용 문제정의 - 프로젝트에서 상품 정보를 수정했을 때, 수정(작성)페이지에서 선택된 지역을 설정하는 기능을 수정하고 있었고 개발자 도구에서 전혀 예상하지 못한 경고를 발견했다. - 애플리케이션은 정상적으로 동작하고 있었기 때문에, 개발자 도구에서의 경고는 당황스러웠고 찾아보니, 동일한 키를 가진 요소가 있다는 의미였다. - 리액트에서 map과 같이 반복문을 사용할 때는 고유한 key 값을 사용해야하는 것은 알고 있었고, 이를 코드에 적용했었는데 어느 부분에서 발생한 에러인지 확인해보니 DB에서 받아온 상품의 이미지를 map을 통해 렌더링을 하고 있는 부분이었다. - 먼저 상품의 이미지를 렌더링하는 코드는 위와 같다. images 배열을 map으로 통해 렌더링하면서 각 요소들의 key 값으로는 image의 n..
[Trouble Shooting] 사용자 디바이스에 따른 다수의 이미지 조회 방법 문제정의 - 프로젝트의 기획에는 상품의 조회(상세페이지)에서 상품의 이미지가 1개 이상인 경우, 모바일 기기의 슬라이드 기능으로 다수의 이미지를 조회할 수 있게 되어있었다. - 하지만, 모바일 기기가 아닌 웹에서 접근시에는 다수의 이미지를 조회할 수 있는 기능이 누락되어 있었고, 이에 사용자의 디바이스에 따라 다수의 이미지 조회 방법을 다르게 구현하는 작업이 필요했다. - 해당 작업을 위해서는 먼저 사용자의 디바이스를 조회해야했고, 기존 슬라이드 기능 외에 추가로 캐러셀 기능 구현이 필요했다. 시도한 방법 및 해결방안 1. 사용자의 디바이스 조회 ⭕️ - 사용자의 디바이스 조회는 window.navigator의 userAgent 속성을 사용했다. - userAgent는 HTTP 요청을 보내는 디바이스와 ..
[기능 구현] 동적 portal 만들기 portal이란? - 리액트(React)에서 portal은 컴포넌트 트리 내에서 다른 위치로 자식 요소를 렌더링할 수 있는 기능이다. portal은 주로 모달 창, 팝오버, 툴팁과 같은 오버레이 컴포넌트를 구현하거나, 외부 DOM 요소에 컴포넌트를 렌더링할 때 사용된다. - portal을 사용하면 자식 요소는 DOM 트리의 지정된 위치로 이동되지만, 해당 자식 컴포넌트는 여전히 컴포넌트 트리의 일부로 유지된다. - portal을 사용하면 컴포넌트가 렌더링되는 위치와 실제로 화면에 표시되는 위치를 분리할 수 있으며, 레이아웃, 스타일링, 이벤트 처리 및 zIndex 관리를 보다 쉽게 할 수 있게 해준다. - portal은 보통 모달창을 구현할 때, 많이 사용된다. - 프로젝트에서도 모달창을 구현할 때, p..

티스토리툴바