전체 글10 지금까지 개발하면서 어떤 것들이 나를 힘들게 했을까? OAuth2 로그인 구현 로그인을 하면서 토큰 값을 받아오는 과정은 거의 이해하였으나, 서버에서 토큰값을 받아오는 리다이렉트 과정에서 FE, BE 모두 관련 지식이 없어 일주일을 같은 코드 해결에 열중했던 기억이 있다. 협업 한정적인 프로젝트 기간에서 기능 구현, UI/UX, 성능 최적화 등 여러가지 우리의 과제에서 모든 작업을 다 가져가려 했다보니 완벽하게 구현하지 못한 부분이 있었다. 기록의 아쉬움 기록을 하지 않고 코드만 치는데 집중해서 아쉬움이 있다. 2023. 11. 28. 깃허브에 잔디가 심어지지 않아요 상황 프로젝트를 총괄하는 리포지토리가 있고, 우리는 fork 해서 작업을 한다. 그런데 PR이나 이슈 생성을 제외하고 커밋 내용은 잔디가 심어지지 않는다! 작업하면서 큰 이슈는 아니지만 그래도 커밋 기록이 시각화되면 기분이 좋잖아? 내가 한 방법은 다음과 같다. 새로운 리포지토리 생성 fork한 리포지토리는 우선 내가 메인 권한이 있는게 아니라 건들지 않기로 했다. 그래서 새로운 리포지토리를 생성했다. 리포지토리 복사 복사하고자 하는 리포지토리를 bare clone 한다. 터미널에서 아래 명령어를 실행했다. git clone --bare [기존 리포지토리 주소] 새로운 리포지토리로 Mirror-push 리포지토리 복사 개념이다. cd [기존 리포지토리 주소] git push --mirror [새로운 리포.. 2023. 10. 28. [TypeScript] interface와 type의 차이가 궁금하다! interface 와 type 은 타입스크립트에서 타입을 정의하는 방법으로, 둘 다 유사한 기능을 가졌지만 몇 가지 차이가 있다. 확장성 : interface는 확장이 가능하다. 같은 이름의 interface를 여러 번 선언하면 자동으로 합쳐진다 interface User { name: string; } interface User { age: number; } // User = { name : string; age: number; } 가 된다. 구문 : type은 다양한 구문을 지원한다. 예를 들어 | & 같은 것들이 사용 가능하다. type User = { name: string; age: number; } | { name: string; }; 결론은 개발자의 성향에 따라 다르고 프로젝트의 진행 방향에.. 2023. 10. 26. 새로운 프로젝트의 시작 - 사용할 기술 선정하기 우연히 기존에 하던 팀원분께서 API가 어느정도 완성된 프로젝트에 합류하는 것이 어떻냐고 제의하여 같은 프론트엔드 팀 구성으로 합류하게 되었다. 첫 회의로는 기술 스택을 정하는 것이었는데, 현업 개발자로 근무하시는 것 같은 분께서 어느정도의 조언을 해주었다. 주 회의 내용은 아래와 같다. 라이브러리는 어떤걸 사용하시죠? 저희는 라이브러리를 고를 때 가장 익숙하게 사용하였던 React를 사용할 예정입니다. 왜 익숙한 React를 사용해야만 하나요? vue, next.js 같은 대안을 사용하면 성장에 도움이 되지 않을까요? 이 질문에서 뼈를 맞은듯 했다. 프로젝트를 완성하는 것만 생각했지 새로운 것을 도입할 생각을 하지 못했기 때문이다. 라이브러리나 상태관리, 스타일링 등을 정할 때 각자 장단점을 알아서 오.. 2023. 10. 23. [React] 이미지 선택 Input에서 라벨을 눌렀는데 파일 선택 창이 왜 나올까? 원래는 위처럼 파일 선택 버튼과 선택된 파일 없음이라는 라벨? 이 자동으로 나왔었다. 그러나 저 라벨을 누르면 이미지 선택 창이 나오는 부분이 불편하다고 피드백을 받았다. 원래의 코드는 아래와 같다. import React, { useRef, useState } from 'react'; import axios from 'axios'; import { Modal, ModalOverlay } from '../../assets/Modal.jsx'; import Button from '../../assets/buttons/Button.jsx'; import { CancelButton } from './EditProfile.jsx'; import { useAuthStore } from '../../store/st.. 2023. 10. 1. [React] No Image를 처리해보자 이미지가 처리되지 않으면 alt값과 엑박(?) 이 나오는 부분이 보기 싫었다. img 에 onError 처리를 하면 된다고 했다. 우선 handleImgError.js 라는 파일을 만들고 아래의 함수를 만들었다. export const handleImgError = (e) => { e.target.src = './noImage.png'; }; 그리고 img 요소 부분에 onError 처리를 했다. 아래 화면처럼 렌더링 된다. 그러나 이미지가 꽉 찬 부분이 보기 싫었다. 나같은 경우는 이미지 에러를 처리하는 함수 부분에 스타일을 주었다. export const handleImgError = (e) => { e.target.src = './noImage.png'; e.target.style.width = '.. 2023. 9. 30. [React] 이미지를 서버로 업로드하는데 왜 400 에러가 뜰까? 프로필 수정, 리뷰 작성 기능을 구현하는데 계속 이미지 부분에서 에러가 나서 원인을 찾아봤다. 생각보다 간단한 문제였다. const handleUpload = async (event) => { event.preventDefault(); const formData = new FormData(); formData.append('image', inputRef.current.files[0]); // input 태그를 통해 사용자가 선택한 첫 번째 파일 try { const response = await axios.post( `${process.env.REACT_APP_API_URL}/api/member/image`, formData, { headers: { 'Content-Type': 'multipart/for.. 2023. 9. 29. [Tailwind] 이미지의 정중앙에 텍스트를 넣어보자 위처럼 이미지 가운데에 텍스트를 넣는 방법이다. 흰 박스는 이미지라고 가정한다. 해결법 (tailwind) // 부모 요소에 relative // StoreImage 라는 styled-components를 만들어놨다고 가정 강남구 TOP 10 tailwind 를 이용하면 위처럼 작성하면 된다. 해결법 (css) {/* 부모 요소에 relative */} {/* StoreImage 라는 styled-components를 만들어놨다고 가정 */} 강남구 TOP 10 relative 요소를 원래 있어야 할 위치로부터 상대적으로 ~~만큼 이동한다. 반대로 이동한다고 생각하면 된다. div { position: relative; top: 20px; left: 20px; } 이 코드에선 아래로 20px, 오른쪽으로.. 2023. 9. 28. [React] 해시값을 인식하고 바로 이동하게 하기 메인 페이지에서 즐겨찾기 더보기를 눌렀을 경우 localhost:3000/mypage#favorite 로 이동하게 되는데, 가장 첫 페이지인 리뷰 탭이 보였다. useEffect(() => { const hash = window.location.hash; if (hash === '#review') setCurrentTab('리뷰 관리'); if (hash === '#order') setCurrentTab('주문 내역'); if (hash === '#favorite') setCurrentTab('즐겨찾기'); }, []); 이처럼 해시 값을 받아 브라우저 렌더링 시 해당 해시값으로 이동하도록 수정하였다. 2023. 9. 27. [Tailwind CSS] 가독성 향상을 위해 글씨에 테두리를 넣어보자 이미지에 넣은 글씨 색상이 이미지 색상과 비슷하면 잘 보이지 않는 부분을 그림자를 넣어 개선했다. className="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]" Before After 2023. 9. 26. 이전 1 다음
