Node.js로 GET, POST, PUT, DELETE 같은 HTTP 메서드를 한번 만들어보기로 했다. 기본적으로는 Express.js를 사용하면 이런 작업을 더 간단하고 효율적으로 할 수 있다. 1. Node.js와 Express 설치우선 당연하지만 설치부터 해줘야 한다.mkdir my-backendcd my-backendnpm init -ynpm install express위부터 차례대로 해주면 된다. 2. Express 서버 코드 작성app.js 파일을 하나 만들어준 후const express = require('express');const app = express();const port = 3000;// JSON 파싱 미들웨어 추가app.use(express.json());// GET 요청 처리..
이 글은 Next.js 의 앱라우터를 공부하며 작성한 글입니다.사용되는 사진들은 인프런 한 입 크기로 잘라먹는 Next.js(15+) 에서 가져오게 되었습니다. 리액트 18버전에 추가된 새로운 유형의 컴포넌트이다. 오직 서버측에서만 실행되는 컴포넌트로 브라우저에서는 실행 안된다. 사용하기 이전에..Page Router버전의 Next.js에서는 쓸대없이 js bundle이 커지는 문제가 있었다. 이를 앱 라우터를 사용하게 되면서 서버 컴포넌트와 클라이언트 컴포넌트로 나눠져 해결이 가능하게 되었다.이처럼 나눠지게 된다.서버 컴포넌트와 클라이언트 컴포넌트의 실행되는 타이밍을 보면서버 컴포넌트 : 서버측에서 사전 렌더링을 진행할 때 딱 한번만 실행 됨클라이언트 컴포넌트 : 사전 렌더링 진행할 때 한번, 하이드레..
이번에 좋은 기회로 스위프라는 곳에서 프로젝트를 하게 되었다주제로 쓰레기통 공공데이터를 활용해 내 주변 쓰레기통을 찾는 서비스를 개발하기로 했다.무려 이 서비스로 스위프 6기중 1등을 했다! 배포된 주소https://www.bin-finder.net/ https://yunsusu.notion.site/binder-11e10563802480c6b924cd53cb7a5fb1노션으로 정리해둔 것도 있다. 6주동안 기획부터 개발완료 후 발표까지 준비해야 하는 프로젝트였다.프론트엔드 개발자로 참여하여 검색페이지와 마이페이지를 맡아서 작업을 하게 되었다.물론 지도도 몇개 개발하고 수정한 부분이 있지만 담당하여 작업하지는 않았다. Next.js로 개발을 하였으며 TS, jotai, scss, RHF 등을 활용하여 제..
최근 프로젝트를 하며 디바운싱에 대해 다시 공부해보게 되는 일이 있었다.디바운싱은 연속된 입력이 들어올 때, 일정 시간이 지나고 나서야 마지막 입력에 대해 실행되는 패턴이다.평소에 리액트로 개발을 하면서 리액트 디바운싱 방법은 대충 알고 있었지만 js디바운싱도 생각해보게 되었다. 간단하게 디바운싱에 대해 알아보고 가기로 했다.리액트 디바운싱리액트 디바운싱은 useEffect를 활용해 사용하게 된다. useEffect(() => { const handler = setTimeout(() => { 일정 시간 뒤 실행할 코드~~ }, 300); return () => { clearTimeout(handler); }; }, [searchInput]);완성한 코드는 이런..
전에 카카오(다음)에서 제공해주는 주소 검색을 가져와 사용하는걸 적었던 적이 있다. 하지만 이번에는 거기서 만들어주는것을 사용하는것이 아닌 카카오에서 제공해주는 주소 검색 api를 활용해 내가 만든 화면에서 사용자가 입력해주는 값에 따라 자동완성이 가능하도록 제작을 해보았다. 우선 당연히 카카오 api를 발급해줘야 한다.이후에 https://dapi.kakao.com/v2/local/search/address.json?query={query}를 활용해 값을 주고 받게 될 것이다. fetch로 보자면fetch(`https://dapi.kakao.com/v2/local/search/address.json?query=${searchTerm}`, { headers: { Authorization: 'Kak..
최근 프로젝트를 하다 푸쉬를 한 후 pr을 올려야 하는데 푸쉬가 안된적이 있다. 에러 메세지를 찾아보니 HTTP 400 에러였다.서버가 요청을 처리할 수 없어서 에러가 난거였는데 gpt선생님에게 물어보니 4가지 정도 의심되는 부분이 있었다. 1. 리모트 URL 확인혹시 잘못되어 있을 수 있으니 확인하라고 했다. 2. 파일 크기 문제오류 메세지에 파일 크기가 적혀있었는데, 서버가 이 크기를 처리할 수 없을 수 있다고 한다.git config http.postBuffer같은것을 사용해서 설정해볼 수 있다. 예를들면git config http.postBuffer 524288000이런식이다. 3. 네트워크 이슈네크워크가 불안정하거나 속도가 매우 느리면 발생할 수 있다. 4. 대역폭 제한사용하는 Git 서버가 파..
프로젝트를 진행하던 중 사용자가 직접 이미지를 잘라서 넣어줘야 할 상황이 생겼다. 그렇게 이것저것 찾아보던 중 DALL-E 와 이미지 편집기를 사용하는 것을 보게 되었다.https://reflowhq.com/learn/image-editor-dall-e-next/ 를 참고하여 배웠고 작성 해본다. next.js는 기본적으로 세팅 되어있다고 보고 들어가보면 1. 이미지 편집기 만들기우선 이미지 편집기를 만들어 줘야 한다.// src/components/ImageEditor.tsximport { useState } from "react";export default function ImageEditor() { const [src, setSrc] = useState(""); return {src && };이..
최근 테스트에 대해 궁금하기도 하고 필요성을 느껴 배워보기로 했다. 혼자 공부하자니 좀 어려운거 같고 해서 강의를 찾아보니 인프런에 강병진님이 올려주신 '2시간으로 끝내는 프론트엔드 테스트 기본기' 강의가 있어 보고 공부하게 되었다. https://www.inflearn.com/course/%EC%A3%BC%EB%8B%88%EC%96%B4-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EA%B8%B0%EB%B3%B8%EA%B8%B0 2시간으로 끝내는 프론트엔드 테스트 기본기 강의 | 강병진 - 인프런강병진 | 테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 ..
