div.log('Code Trail')

프로젝트 진행 중 리스트에서 동일한 로그가 반복될 경우 해당 부분을 강조하고싶었다.예를 들면 아래 이미지처럼 'ERROR' 로그가 연속해서 세 번 이상 등장하면 빨간 배경을 추가하는 것이다. 구현 방법내가 구현한 방법은 특정 리스트가 주어졌을 때, 세 번 이상 연속된 목록의 인덱스를 배열에 저장한 뒤 해당하는 요소에 CSS 클래스를 추가하는 방식이다.위 이미지 기준으로 총 11개의 리스트가 주어졌을 때 0번 리스트부터 차례로 순회하며 [4, 5, 6] 배열을 을 저장하는 것이다. 코드// 로그에서 메시지의 상태를 추출const messageLogs=[ 'ERROR', 'DEBUG', 'ERROR', 'INFO', 'ERROR', 'ERROR', 'ERROR', ..

최근 과제를 진행하던 중 useState가 포함된 컴포넌트를 여러번 재사용할 일이 있었다.그동안엔 리스트 목록과 같이 맵핑되는 컴포넌트 위주로 재사용을 했기 때문에 인지하지 못하고 있었는데, useState를 포함하고 있는 컴포넌트를 여러번 호출하려면 부모 컴포넌트에서 상태관리가 되어야 한다. // 숫자 표시 컴포넌트import { useState } from "react";const CurNumber=()=>{ const [number, setNumber]=useState(0); const onClickBtn()=>{ setNumber(number+1); } return ( + {number} );..

리액트 프로젝트를 배포하기 위해선 단순히 호스팅 서버에 소스파일을 파일을 올리기만 해선 안된다.프로젝트 빌드 과정을 거치고 라우터 에러를 방지하기 위해 서버 설정 파일을 손보는 등 추가적인 여러 절차가 필요하다.서버 설정에 관한 공부가 개인적으로 필요하다면 시도해봐도 좋지만, 지금은 프론트엔드 하나로도 충분히 벅찬 상황이라 이번엔 조금 쉬운 방법을 택했다. Vercel이란?프론트엔드 개발자가 쉽게 웹 애플리케이션을 배포할 수 있도록 해주는 클라우드 서비스이다.글로벌 CDN 사용으로 콘텐츠를 빠르게 전송할 수 있고 Git 저장소와 연동해 자동 배포가 가능하며, 개인 프로젝트같은 소규모 앱을 배포한다면 무료로 사용 가능하다. Vercel 가입하기가입은 hobby 플랜으로 진행하면 되고, GitHub 계정과 ..

최근엔 제작중이던 홈페이지의 게시판을 구현하고 있다.하나의 페이지에 총 5개의 게시판이 등장하는 형태이고, 각각의 게시판마다 더보기 버튼을 클릭하면 해당 게시판의 전체 글을 볼 수 있도록 계획했다. 처음엔 완성하는데 1주일 정도 걸릴 것이라 예상했지만 게시판이라는 것이 생각보다 신경써야 할 부분이 많았고, 시간이 꽤 많이 지나버렸다. 😂아직까지도 디테일한 기능은 부족하지만 이 부분은 계속 보완할 예정이다.그리고 이번 포스팅은 지금까지 구현한 모든 내용을 다 다루면 너무 길어지기 때문에 위 이미지의 '정기 모임' 게시판에 글을 올리고 수정, 삭제하는 것을 중점으로 다루려 한다. 게시판의 기본 기능게시판의 필수적으로 CURD 기능이 구현되어야 한다. 작성자가 글을 쓰고(Create), 수정(Update)을..

로그인 기능을 구현하면서 DB 연동까지 마친 상태라 회원 가입을 구현하는 것도  금방 끝낼줄 알았다.회원가입의 필수 기능 중 하나인 '중복 확인' 기능을 동기 방식으로 구현했다면 진작에 완성했겠지만 이왕이면 비동기 방식으로 구현하고싶었다. 동기 방식 VS 비동기 방식우선 동기 방식과 비동기 방식의 차이점은 중복 확인 절차가 사용자의 입력이 끝난 시점에 진행하는지 여부에 있다.쉽게 말해 '중복 확인 버튼'이 있을 경우, 사용자가 입력을 마치고 버튼을 눌러야 중복 확인 절차가 진행되므로 동기 방식으로 처리된다고 볼 수 있다. 반대로 비동기 방식의 경우 사용자가 입력을 하는 동안 서버에서 입력값을 실시간으로 감지해 중복 확인 절차가 진행되는 것을 말한다.최근 만들어진 사이트는 대부분 비동기 방식을 채택했을 것..

이전에 커뮤니티 기능을 위해 MySQL과 리액트를 연동하는 방법을 포스팅했다.이제 가장 먼저 구현해볼 것은 로그인 기능이다.React(클라이언트)에서 입력한 ID와 PW를 Server로 넘겨 SQL 쿼리문으로 해당 ID, PW를 가진 회원이 있는지 확인하고 결과를 반환하면 된다. 최상위 컴포넌트에 로그인 유저 정보 Context 생성//App.jsximport { useState, createContext } from 'react';export const LoginUserInfoContext=createContext();// 로그인 할 유저의 초기 상태const loginUserInit={ userId:'', nickname:'', email:'', car:'', isLogin..

진행중인 중고차 홈페이지 제작 프로젝트에서 커뮤니티 기능을 추가하려고 한다.사실 처음엔 여기까지 진행할 생각 없이, 검색과 찜하기 기능만 구현되면 새로운 프로젝트를 시작하려 했었다.하지만 미완성 프로젝트의 개수를 늘리기보단 하나의 홈페이지를 만들어도 제대로 만들어야겠다는 생각이 들었고, 어차피 하나의 특정 브랜드 제품만을 취급하기는 사이트이기 때문에 커뮤니티 기능을 도입하는것도 나쁘지 않다고 판단했다. 그럼 구현은 어떻게...?커뮤니티 사이트를 구현하려면 당연히 회원가입, 로그인, 게시물 작성, 수정, 삭제 등 여러가지를 고려해야 한다.기능을 구현하는 것에 대해선 큰 문제가 없지만, 데이터를 어떻게 저장하고 사용해야 하는지에 대해 고민이 많았다.백엔드에 대해서는 아주 무지한 상태라 db를 사용해서 구현하..

Fancybox는 이미지 갤러리를 만드는 JS 라이브러리이다. 간단하게 요약해서 이미지를 클릭하면 전체화면으로 확대해주는 기능을 제공한다.아래 예시처럼 갤러리 형태의 이미지들 중 작은 이미지를 클릭하면 전체화면의 큰 이미지가 뜨고 같은 그룹의 이미지들을 스와이프 할 수 있다. 사실 Fancybox 사용법 자체는 어렵지 않은데 설치 방법을 명확하게 이해하지 못해서 너무 시간을 오래 보냈다.CDN을 쓰거나 아예 소스파일 자체를 로컬에 저장해서 불러와도 되긴 하겠지만 리액트에선 좋은 방법이 아닌것 같아 어떻게든 import를 활용하려 했다. Fancybox 설치하기# Fancybox 설치$ npm install --save @fancyapps/ui 가장 먼저 npm으로 Fancybox 모듈을 설치한다.이후 과..

리액트를 사용하지 않고 홈페이지를 만드는 경우엔 보통 메인 페이지 html 파일과 서브 페이지 html 파일을 폴더로 구분해 작성하며, 링크 주소 또한 폴더 구조에 따라 정해진다.하지만 SPA(Single Page Application) 방식의 웹을 제작하는 리액트에선 각 페이지를 폴더 구조에 따라 구분하지 않는다. SPA가 뭔데?이번 포스팅은 SPA 개념을 설명하기 위한 것은 아니기에 간단하게 요약하자면, 웹이 최초로 구동되었을 때 웹페이지에 필요한 모든 리소스를 다운받고, 이후 사용자의 요청이 있을 때 마다 하나의 페이지에서 필요한 영역만 리렌더링하는 방식이다.자세한 설명은 아래의 링크를 참고하면 좋을것 같다. https://www.tcpschool.com/react/intro_understandin..

인터넷 쇼핑을 하다보면 소위 말하는 위시리스트, 즉 찜하기 기능을 접할 수 있다.상품을 바로 구매하지 않더라도 나중에 쉽게 찾아볼 수 있게 해주는 편리한 기능이기 때문에 물건을 판매하는 사이트에는 필수적인 기능이다. 관심 매물을 표시할 컴포넌트 추가 (Interest.jsx)우선 찜하기 기능은 앞서 포스팅한 검색 기능과 달리 별도의 페이지에서 매물들이 표시되도록 만들었다.Home.jsx 페이지에서 찜하기 버튼을 클릭하면 Interest.jsx 페이지에서 확인이 가능하게 만들 예정이다.function App() { return ( } /> } /> )}export default App Interest.jsx..