RoseDevlog

Frontend

0. 어느덧 개발을 시작한지도 4년이 다되어간다 ..!  마침 프로젝트가 끝난 김에 이번 블로그에서는 코드리뷰를 할때나 PR을 쓸 때 나왔었던 이야기들, 동아리 세미나 시간에 도움이 되었던 조언들 그리고 현재 하고 있는 고민들과 나름대로 효과있었던 방법들을 정리해보았다.   1. 코드 가독성 향상1. 네이밍변수/함수: camelCase 사용컴포넌트: PascalCase 사용 2. 단어 선택일반적인 단어를 구체적인 단어로 대체비슷해보이지만 다른 의미를 갖는 단어를 구분  2. Styled Components 파일 구성1. 컴포넌트 파일에 Styled-Components가 너무 많아져서 복잡해질 때,무조건 styled.ts 파일을 따로 만드는 것보다 작은 컴포넌트로 분리하는 방향  3. 컴포넌트 구조 설..

2025.02.19

프론트엔드

0. 작업에 앞서 클로바 사이트의 프론트엔드 개발이 마무리 되면서 1년 동안 피땀눈물이 섞인 졸업프로젝트도 이제 끝을 향해가고 있다 ... !! 클로바 사이트는 React로 개발을 했다 이번 블로그에서는 개발 이후의 단계인 1) Vercel 배포, 2) 커스텀 도메인을 붙이기, 3) 개발(dev/테스트) 환경과 운영 환경을 분리하여 배포하기까지의 여정을 소개하려 한다  1. 개발 환경 vs 운영 환경1. Git Flow 전략개발은 develop 브랜치에서 분기하여 페이지별(또는 기능별)로 진행기능이 구현 되면 → develop 브랜치로 머지  main 브랜치는 qa까지 마무리되면 develop에서 최종 머지를 한다 개발 환경develop 에서 분기 되는 배포 사이트 다음 release의 기능들 및 수정 ..

2024.11.13

기능 구현

const [isFile, setIsFile] = useState(null); /* 사진 업로드 */ const fileInputRef = useRef(null); const navigate = useNavigate(); function saveFile(imageFile: File[]) { setIsFile(imageFile); // setUploadLocation(true); navigate("/upload"); } function handleAddPicBtn() { fileInputRef.current && fileInputRef.current.click(); } function handleFileInputChange(e: React.ChangeEvent) { ..

2024.07.18

API 통신

1. axios브라우저와 node.js에서 사용할 수 있는 Promise API를 활용하는 HTTP 비동기 통신 라이브러리* 쉽게 말해 프론트엔드 & 백엔드가 통신을 쉽게하기 위해 사용 사실 자바스크립트에는 fetch api가 존재하지만, 더 많은 기능을 지원하기에 개발자들은 서버 통신에 보다 편리한 axios 를 선호한다.  fetch ko.javascript.info * fetch 사용 코드 const url ='http://localhost3000/test`const option ={ method:'POST', header:{ 'Accept':'application/json', 'Content-Type':'application/json';charset=UTP-8' }, bo..

2024.06.28

AI

1. OpenAI에서 API키 발급https://platform.openai.com/api-keys발급받은 API키는 보안상 이슈로 다시 볼 수 없으므로 따로 로컬에 보관해야한다. 2. 구글코랩에 chat gpt 연동2 -1. 필요한 라이브러리 설치!pip install openai

2024.05.27

AI

0. 작업에 앞서 현재 우리학교 분실물 관리 게시판은 아래와 같이 하루에 하나씩 그날 분실물을 업로드된다. 하지만 게시판은 치명적인 불편함이 있었는데 스타벅스 텀블러라고 검색해도 절대 관련 사진이 나오지 않는다는 것이다.  따라서 졸업프로젝트 주제로 학교 내에서 발생한 분실물을 쉽고 효율적으로 등록, 관리하고 찾을 수 있는 웹서비스를 만들기로 했다. 여러가지 아이디에이션을 거치고 나서 등록 과정에서부터 AI 이미지 인식 자동분류 서비스를 도입하게 된다면 검색 최적화에 도움이 될 것이라 생각했다. 뿐만아니라 사진을 찍기만 하면 AI가 분실물의 특징을 자동으로 입력하여 매번 분실물 정보를 수동으로 입력할 필요가 없어서 학생처에서 수동으로 입력하는 것보다 훨씬 상세히 분류해줄 수 있겠다고 생각했다. 이미지를 ..

2024.05.25

Next JS

https://next-netflix-wine.vercel.app/ Next JS 란 .. ? 1. 파일 시스템 기반 라우터React에서 라우터 → React-Router 라이브러리 사용Next JS에서 라우터 → 파일 구조 기반 2. 서버 사이드 렌더링 (SSR), 정적 사이트 생성 (SSG) 지원SEO 최적화SSG ..?빌드시 pre-rendering: 모든 페이지를 생성해둔다 (정적인 HTML) → 페이지 요청 → 만들어져있는 HTML 파일을 즉시 반환* 장점초기 로딩 매우 빠르다그럼 SSG 사용하지 왜 SSR 사용하는걸까?SSG는 빌드시에 정적으로 HTML을 만들어 놓는 만큼, “최신” 즉 “실시간” 데이터를 반영하지 못한다. 따라서 변경 가능성이 거의 없는 경우 SSG를 사용해야 하는 것!SEO..

2024.05.12

Next JS

**1. 초기세팅# @latest : 최신 버전 설치 npx create-next-app@latest --typescript#.prettierrc 설정npm install -D prettier eslint-config-prettier  ** Next.js + Typescript + Styled-Components 프로젝트 초기 세팅  Next.js + Typescript + Styled-Components 프로젝트 초기 세팅하기안녕하세요, 주인장입니다. 오늘은 Next.js 프로젝트 초기 세팅하는 과정에 대해 알아보려고 합니다. 어느덧 Next.js로 프로젝트 경험을 2번 정도 했군요 React나 Vue.js 설치하는 것보다 초기에 많이velog.io2. svg 적용 next.config.mjs에 코드 ..

2024.05.12

Next JS

https://velog.io/@sean2337/Next.js-Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C%EC%9D%98-%EA%B7%9C%EC%B9%99%EA%B3%BC-%EB%9D%BC%EC%9A%B0%ED%8C%85 [Next.js] Next.js 프로젝트에서의 기본세팅과 라우팅[Next.js] Next.js 프로젝트에서의 기본세팅과 라우팅 방법에 대해 다루었습니다. 또한 Dynamic Route, useRouter, Link등도 다루었습니다. 개념적인 이야기보다는 이해하기 쉽게 정리하였으니 공부하실때velog.io https://nextjs.org/docs/getting-started/installation Getting Sta..

2024.05.06