Developer (8) 썸네일형 리스트형 React 테이블 정렬 기능 구현하기 : 클라이언트 정렬부터 was서버까지 -2 2024.11.21 - [Developer] - React 테이블 정렬 기능 구현하기 : 클라이언트 정렬부터 was서버까지 -1 React 테이블 정렬 기능 구현하기 : 클라이언트 정렬부터 was서버까지 -1이번 글에서는 React를 사용하여 게시판 테이블에 정렬 기능을 구현하는 방법을 남겨보도록 하겠습니다. 특히, 이번 글에서는 클라이언트 측 정렬에 초점을 맞추어 작업을 진행합니다. 📌 목표Rpeynes.tistory.com 이전 글에서는 React 클라이언트에서 정렬 상태를 관리하고, 이를 기반으로 데이터를 요청하는 방법을 다뤘습니다. 이번 글에서는 WAS와 SQL 쿼리를 수정하여 클라이언트에서 전달받은 정렬 조건(sortKey, direction)을 기반으로 데이터를 동적으로 반환하는 방법을 설명.. React 테이블 정렬 기능 구현하기 : 클라이언트 정렬부터 was서버까지 -1 이번 글에서는 React를 사용하여 게시판 테이블에 정렬 기능을 구현하는 방법을 남겨보도록 하겠습니다. 특히, 이번 글에서는 클라이언트 측 정렬에 초점을 맞추어 작업을 진행합니다. 📌 목표React에서 테이블 데이터를 특정 열 기준으로 오름차순/내림차순 정렬빈 값(null, undefined, 빈 문자열)을 안전하게 처리모든 컬럼(열)에 동적으로 정렬 기능 추가📂 프로젝트 구조이번 예제에서는 아래와 같은 간단한 구조로 작업합니다:React 컴포넌트: 게시판 데이터를 렌더링하고 정렬 로직을 처리데이터: 간단한 JSON 배열로 가상의 게시판 데이터를 사용🛠️ 구현 단계1️⃣ 초기 데이터 준비하기먼저, 가상의 게시판 데이터를 준비합니다. 이 데이터는 JSON 형식으로 만들어졌으며, 각 항목은 번호(row.. [React]react-device-detect: 기기 감지 라이브러리 React로 프로젝트 진행중에 만들고 있는 웹사이트에서 page또는 router로 화면을 이동시에 사용자가 어떤 기기를 사용하고 있는지, 기기별로 확인하여 사용(?), 페이지 이동을 못하게 조건을 걸어둬야 하는 상황이 생겨났다. 이 라이브러리를 이렇게 해서 사용 하지않고, 대부분 사용자의 device따라서 화면을 다르게 만들때 사용한다는데 필자는 조건문으로 화면 이동을 잠궈야 해서 라이브러리를 사용해보고자 한다.1. react-device-detect란 무엇인가?"react-device-detect"는 react에서 사용자 기기 정보 감지할 수 있게 해주는 라이브러리이다. 예를 들면, 내가 만든 웹페이지를 사용하는 사용자가 스마트폰, 태블릿, 테스크톱등 어떤걸 이용하고있는지 확인하고 그에 맞는 개별 화면.. 초보 개발자인 내가 사용하는 무료 소프트웨어 개발자로서 공부를 하고, 일을 시작한 지 1년이 넘어 2년 차로 가고 있다. 많이들 사용하는 소프트웨어를 나 또한 사용하고 있어서 몇 자 적어보려 한다. 개발자로서 생산성도 올라가고, 작업에 효율적으로 사용할 수 있어서 개발도구가 중요하다.특히 회사에서 제공하는게 아니라면 무료로 제공되는 소프트웨어 중에 고품질의 소프트웨어들도 있기 때문에 비용 절감도 될뿐더러 성능도 나쁘지 않고 좋은 퍼포먼스를 발휘할 수 있다. 이 글에서는 내가 사용하면서 '개발자가 꼭 알아야 할 필수' 이런 건 모르겠고, 내가 사용하는 무료 소프트웨어들 소개하도록 하겠다.1. VSCode (Visual Studio Code) Visual Studio Code (일명 VSCode)는 마이크로소프트에서 2016년 4월달에 정식판이 발표되.. JSP 개념 이해하기 : 기초부터 차근차근 JSP 정의와 개념 : 기초부터 차근차근JSP(JavaServer Pages)는 동적인 웹 페이지를 생성하기 위한 기술입니다. 이 글에서는 JSP의 기본 정의와 개념을 차근차근 이해해 보도록 하자, JSP를 처음 접하는 개발자들이 쉽게 이해할 수 있도록 필자인 나를 업그레이드 시켜야 한다. JSP란 무엇인가?JSP는 Java 기반의 서버 사이드 스크립팅 언어로, HTML 내에 Java 코드를 삽입하여 동적인 웹 페이지를 생성할 수 있게 해준다. JSP는 서블릿 기술을 기반으로 하며, 클라이언트의 요청을 처리하고 동적인 콘텐츠를 생성하여 응답합니다. JSP는 웹 애플리케이션 개발에 널리 사용되며, Java의 강력한 기능과 호환된다.JSP 페이지는 .jsp 확장자를 가지며, JSP 컨테이너가 이를 처리하여 .. [React] App Router, Page Router 비교해보자 React에서 'App Router'와 'Page Router' 확인웹 개발을 시작하고 1년이 됐지만 아직도 잘 모르는 초보자 티를 벗어나지 못한 나다. 그래서 최근 프로젝트를 진행 할때 리액트로 구축하는데 'App Router'하고, 'Page Router'를 비교해서 만들게 되는데... 리액트에서 라우팅은 매우 중요한 요소입니다. 특히, 리액트와 같은 프레임워크에서는 라우팅을 통해 페이지 간의 이동과 데이터 관리를 효율적으로 할 수 있다 합니다.이번 글에서는 React에서 많이 사용되는 'App Router'와 'Page Router' 를 비교하여 공부 해보도록 하겠습니다. 이를 통해 각 라우터의 특징과 사용 사례를 이해할 수 있었으면 좋겠고, 프로젝트에 적합한 라우터를 선택할 수 있는 개발자가 되어.. 구글 번역 googleTranslate API, 웹페이지 번역 2/2 이번에는 번역기능을 구현하는 내용을 작성할까 한다. 이전에 작성하던 내용 중 googleTranslate API의 키를 잘 보관하고 있으니 API 키를 발급 못 받은 사람들은 이전 게시물로 확인해서 발급받아야 한다.https://peynes.tistory.com/entry/%EA%B5%AC%EA%B8%80-%EB%B2%88%EC%97%AD-googleTranslate-API-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B2%88%EC%97%AD-12 구글 번역 googleTranslate API, 웹페이지 번역 1/2작업을 하면서 만들고 있는 웹사이트를 번역을 해야 하는 일이 생겼다. 진행하고 있는 프로젝트는 프론트에 React , Next.js 사용해서 웹페이지를 만들고 있.. 구글 번역 googleTranslate API, 웹페이지 번역 1/2 작업을 하면서 만들고 있는 웹사이트를 번역을 해야 하는 일이 생겼다. 진행하고 있는 프로젝트는 프론트에 React , Next.js 사용해서 웹페이지를 만들고 있다. 구현하기 위해서 개반환경 설정을 node.js v20.10.0을 사용해서 프로젝트를 설정하고, Google Cloud에서 API 키를 생성하는 과정을 기억을 더듬어 과정을 다뤄보겠다.1. Project 초기 설정먼저 node.js하고 npm이 설치되어있어야 하므로 Node.js 공식 사이트에서 버전에 맞춰서 다운로드 후 설치 한다. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScr.. 이전 1 다음
