🖥️Frontend34

• 

  [React] 이미지 파일 미리보기 개요사용자가 이미지 파일을 업로드했을 때 해당 이미지를 미리보기 할 수 있도록 하는 기능을 구현하려고 한다. 파일 업로드이미지 파일을 업로드 후 미리보기로 보여주는 페이지를 작성해준다. 업로드한 File 객체를 저장할 상태를 useState()를 사용해서 생성해준다.그리고 파일을 업로드할 수 있게 type이 file인 input 태그를 만들어준다.const Previewer = () => { // 사용자가 업로드한 파일을 저장할 상태 const [ imageFile, setImageFile ] = useState(); return ( {/** 이미지 파일 업로드 버튼 */} );};export default Previewer; 파일 업로드 시 onChange.. 🖥️Frontend/React 2025. 5. 20.

• 

  [Next] 데이터 베이스 연결하기 (feat. MySQL) 서버 API 구현프로젝트 구조 생성'/home' 경로 접속 시 데이터베이스의 user 테이블에서 사용자 정보를 얻어오는 API를 생성한다. 먼저 프로젝트 구조는 다음과 같다. api 폴더 아래에 home 폴더를 생성하고 route.ts 파일을 생성해줬다. 이렇게 하면 localhost:3000/api/home 호출 시 route.ts에 작성된 함수가 호출된다. route.ts먼저 호출할 함수의 HTTP Method 명으로 함수를 생성해준다. 데이터 베이스의 테이블에서 데이터를 호출할 것이기 때문에 GET으로 생성해줬다.export async function GET() { ... } 라이브러리 설치 및 접속 정보 초기화라이브러리 설치필자는 MySQL을 사용할 것이기 때문에 관련 라이브러리를 설치해준.. 🖥️Frontend/Next 2025. 4. 28.

• 

  [Next] 로컬 서버 API 호출하기 서버 API 구현프로젝트 구조 생성app 폴더 내에 api 폴더를 생성하고 path로 사용할 폴더를 하나 생성한 다음 route.ts 파일을 생성한다. 프로젝트의 구조는 다음과 같다. route.ts1. 함수 생성 및 Method 지정먼저 호출할 함수의 HTTP Method의 이름으로 함수를 생성해준다. 필자는 POST로 테스트를 진행하기 위해서 POST로 작성해줬다.export async function POST() {} 만약 POST Method가 아닌 다른 Method로 호출하게 되면 405 에러가 발생하게 된다. 2. Request 객체 사용하기API 호출 시 NextRequest 타입의 객체에 사용자가 보낸 json 데이터를 받아와서 사용할 수 있다. 사용자가 입력한 id와 password 값.. 🖥️Frontend/Next 2025. 4. 27.

• 

  [Next] Next에서 라우팅 구현하기 React의 라우팅React의 경우 페이지 이동을 하려면 react-router-dom 라이브러리를 설치한 후 아래의 코드처럼 Routes에 등록해줬다.import { BrowserRouter } from "react-router-dom";import { Routes, Route } from "react-router";const App = () => { return ( } /> );};export default App; react-router의 작동 방식은 url을 지정하고 사용자가 해당 url에 접근할 때 컴포넌트의 render를 요청하는 것이다. 페이지를 생성할 때마다 url과 해당 url 접속 시 보여줄 페이지를 사용자가 직접 작성해줘야 했다.  .. 🖥️Frontend/Next 2024. 8. 21.

• 

  [Next] 프로젝트 수동 설치하기 React와 Next.js의 차이점React는 라이브러리이고 Next.js는 프레임워크이다. 라이브러리라이브러리는 코드 내에서 사용하려고 설치하는 것이지만 사용하는 주체는 사용자다. 라이브러리를 사용해서 우리가 코드 내에서 원하는 아키텍처를 사용해서 원하는 방식으로 코드를 작성할 수 있다. 파일을 어디에 저장할 지, 폴더 구조를 어떻게 할지 사용자가 모든 결정을 내린다. 예를 들어 그래프를 그리는 기능이 필요하면 우리는 라이브러리를 가져와서 해당 기능을 구현할 것이다. 이렇듯 라이브러리는 우리가 도움이 필요할 때만 가져와서 사용하는 것이다. React 또한 UI 인터페이스를 build하는데 사용하는 라이브러리이다. React가 반응형 사용자 인터페이스를 구축하는데 도움을 주지만 결국 이것에 대한 모든 결.. 🖥️Frontend/Next 2024. 8. 20.

• 

  [React] 검색어와 동일한 단어 강조 개요원티드의 8월 프리온보딩 사전 미션을 진행하면서 간단한 검색창을 구현했다. 검색창에 검색어가 입력되면 해당 단어가 강조되는 기능을 구현해야 했다.  구상처음 생각한 방법은 해당 단어가 있는 문자열을 split() 함수로 자르고 해당 문자열 사이에 단어를 넣는 방법을 생각했다. 하지만 이 방법을 사용하기엔 같은 단어가 여러 번 반복되는 문자열인 경우에는 적용할 수 없다고 판단했다. 그래서 래퍼런스를 찾아보던 중 태그를 사용해서 강조 처리하는 방법을 찾아 적용했다.  코드// 1const highlight = useCallback((text: string, query: string) => { // 2 const parts = text.split(new RegExp(`(${query})`, 'gi').. 🖥️Frontend/React 2024. 7. 30.

• 

  [React + TypeScript] Kakao Map API 적용해보기 개요사이드 프로젝트 진행 중 Kakao Map API를 활용하여 개발을 하고싶었다. 공식 문서와 블로그들을 찾아봤고, 미숙하지만 적용 방법을 작성해 보려고 한다.  Kakao API 사용 신청하기https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 먼저 kakao developers 사이트에서 API 사용을 위해 프로젝트 생성을 해준다.  버튼을 눌러 정보를 입력해서 애플리케이션을 추가해준 후 생성된 애플리케이션 목록을 클릭해준다.  그림2 처럼 우측의 플랫폼 메뉴로 들어가면 Web 플랫폼을 등록할 수.. 🖥️Frontend/React 2024. 7. 3.

• 

  [React] 지정한 시간 마다 백그라운드 이미지 변경하기 (with TypeScript) 개요 프로젝트 진행 중 메인 화면에서 지정된 시간마다 변경된 이미지를 보여줘야했다. 코드 Main.tsx const Layout = styled.div` width: 100%; height: 100%; background: url(${(props) => props.url}); background-size: cover; background-position: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(0, 0, 0, 0.7); `; const Main = () => { const [ activeIndex, setActiveIndex ] = useStat.. 🖥️Frontend/React 2024. 3. 29.

• 

  [React] Vite를 사용해서 React 프로젝트 생성 및 실행 Vite 란? 현재 CRA의 지원이 중단되었고 여러 가지 대체 프레임워크가 추천된다. Vite(비트)는 프로젝트를 CSR(Client Side Rendering)로 생성해주는 ESbuild 기반의 빌드 툴이다. Native ESM을 지원하기 때문에 빠른 HMR(Hot Module Replacement)을 지원한다. ESM을 이용해서 전체 코드를 번들링하지 않고 수정된 모듈만을 반영한 뒤 요청이 오면 해당 모듈만 전달한다. 그러나 CSR로 동작하기 때문에 SEO에 약하다는 단점이 있다. SEO를 우선시 하는 사이트에서는 Next.js 및 Remix 같은 대체 프레임 워크의 사용을 권장하고 있다. 하지만 클라이언트 사이드 핸들링만을 하는 경우에는 Vite 또는 Parcel 사용을 권장하고 있다. Vite로 .. 🖥️Frontend/React 2024. 2. 7.

• 

  [Node] 로그아웃 기능 구현 JWT 토큰 인증 https://tlseoqja.tistory.com/54 [Node] 페이지 접속 시 JWT 토큰 인증 회원 로그인 기능 구현 https://tlseoqja.tistory.com/53 [Node] 회원 로그인, 비밀번호 복호화 및 JWT 토큰 생성 비밀번호 암호화 https://tlseoqja.tistory.com/51 [Node] 회원 가입 시 비밀번호 암호화 MongoDB 연동 및 tlseoqja.tistory.com 로그아웃 로그아웃 기능은 간단하다. 이전에 작성한 auth API를 이용해서 쿠키에 저장된 토큰 값을 복호화한 후 나온 _id값으로 MongoDB에 해당 유저의 존재 여부를 확인하고, 유저가 존재하는 경우 token 값을 공백으로 업데이트한다. index.js auth.. 🖥️Frontend/Node 2023. 12. 1.

• 

  [Node] 페이지 접속 시 JWT 토큰 인증 회원 로그인 기능 구현 https://tlseoqja.tistory.com/53 [Node] 회원 로그인, 비밀번호 복호화 및 JWT 토큰 생성 비밀번호 암호화 https://tlseoqja.tistory.com/51 [Node] 회원 가입 시 비밀번호 암호화 MongoDB 연동 및 회원 가입 기능 구현 https://tlseoqja.tistory.com/49 [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mong tlseoqja.tistory.com JWT 토큰 인증 토큰 인증은 개인 정보 보호를 위해 필수적으로 거쳐야하는 로직 중 하나이다. 서버로 부터 받아온 모든 개인 정보를 저장소에 저장하게 되면 개인 정보를 탈취당하기 쉬울 것이다. 그래서 암호화.. 🖥️Frontend/Node 2023. 11. 30.

• 

  [Node] 회원 로그인, 비밀번호 복호화 및 JWT 토큰 생성 비밀번호 암호화 https://tlseoqja.tistory.com/51 [Node] 회원 가입 시 비밀번호 암호화 MongoDB 연동 및 회원 가입 기능 구현 https://tlseoqja.tistory.com/49 [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mongoose 라이브러리는 MongoDB란 NoSQL DB를 Node.js에서 사용할 수 있게 도와주는 라이 tlseoqja.tistory.com JWT JWT(Json Web Token)은 Json 객체에 인증이 필요한 정보들을 담은 후 비밀키로 서명한 토큰이다. 웹 표준을 따르고 있으며, 공식적으로 인증(Authentication) & 허가(Authorization) 방식으로 사용된다. 필.. 🖥️Frontend/Node 2023. 11. 29.