업무 회고11 2025년 5월 개발 회고 유저의 타입을 통해 유저가 접근해도 되는 페이지인지 아닌지를 판별해, 유저가 접근해서는 안되는 페이지라면 접근 불가 페이지를 보여주기. Layout 컴포넌트에서 공통적으로 처리하도록 했다. 다이나믹 링크 기능을 구현했다. (로그인 페이지에서 리다이렉트하기 직전에, 리다이렉트되려는 페이지가 유저에게 접근 권한이 있는지를 판별해서, 권한이 있다면 그대로 리다이렉트하고, 권한이 없다면 기본 랜딩페이지로 이동시키도록 코드 수정)이미지 리사이즈 로직 개선엔터가 쳐져 있는 글 개행 처리 whiteSpace:"pre-line" 사용. 이거 안 쓰면 엔터처리가 적용이 제대로 안됨.useRef를 사용해 아이디를 입력하고 엔터를 누르면 비밀번호로 포커스 이동, 비밀번호를 입력하고 엔터를 누르면 로그인이 가능함import .. 2025. 5. 30. 2025년 4월 개발 회고 게시글 수정 페이지에서, 새로 수정할 값을 입력하고 다른 탭 갔다 돌아온 경우, 새로 수정한 값들이 없어지고 기존에 있던 데이터로 덮어씌워지는 이슈가 있었다. 의존성 배열에 값이 두 개가 들어가 있어서 한 값 때문에 실행되던 함수가 다른 값에 영향을 줘서 다른 페이지를 갔다 올 때마다 새로고침이 되던 거였다. 의존성 배열을 분리해 해결했다.안내 팝업을 띄우고, 유저가 확인을 누르면 일시적으로 팝업이 닫히게, 유저가 다시 보지 않기를 누르면 localStorage를 사용해 팝업을 닫고 영원히 보여주지 않게끔 함 const [showPopup, setShowPopup] = useState(false); const handleCloseForever = () => { localStorag.. 2025. 5. 2. 2025년 3월 개발 회고 화면 너비와 스크롤 여부에 따라 UI가 달라지는 GNB 만들었다. Swiper를 사용해 유저들의 작업물들이 자동으로 스크롤되고 마우스 호버 시 멈추는 UI를 만들었다. 모바일에서는 유저들의 리뷰를 하나하나 넘겨볼 수있게, 그리고 '@ramonak/react-progress-bar' 를 사용해 몇개나 넘겨봤는지를 확인할 수 있게 프로그레스 바를 만들었다. 유저들의 리뷰 또한 자동스크롤, 호버 시 멈추도록 했다. 버튼 클릭 시 파일 다운로드 받을 수 있게 했다. const serviceDownloadHandler = () => { if(router.locale == 'ko') { const link = document.createElement('a'); .. 2025. 5. 2. 2025년 2월 개발 회고 https://kuromi-dev.tistory.com/609 순수 CSS로만 Sticky Scroll Cards 만들기export default function StickyScroll() { return ( 스크롤을 해보겠슴다... 1 2 3 4 스크롤이 끝났습니다... );}kuromi-dev.tistory.comhttps://kuromi-dev.tistory.com/610 { return {reviewData.length > 0 && ( e.currentTarget.querySelector(`.${styles.carousel}`).style.animationPlayState = 'paused'} onMouseLeave={(e) => e.currentTarget.querySelector(`.${sty.. 2025. 3. 4. 2025년 1월 개발 회고 서버 사이드 렌더링을 했다..SCSS를 했다..Zoom이라는 라이브러리를 사용해 사진 확대 기능을 구현했다..textSlicer라는 함수를 만들어서 글자 수를 45글자로 제한하는 기능을 구현했다..MUI의 Accordion을 사용해서 여닫히는 컴포넌트를 구현했다..useEffect의 의존성 배열을 손봐서, 다른 탭으로 갔다와도 정보가 사라지지 않게끔 했다if (!isNaN(parsedValue) && parsedValue .filter와 .some을 활용해 배열의 원소들을 비교하고 필터링했다..이상이다... 벌써 내가 1년 4개월차다.. 시간 빠르다............... 2025. 2. 18. 2024년 11월~12월 개발 회고 - lighthouse 개선- 콘솔에 뜨는 에러 없애기 (Next.js의 현 버전과 맞지 않는다거나, map에 key없다거나 등등)- 기본 세팅 입력을 라디오 버튼 클릭 형태로 받아 그걸 JSON형태로 콘솔에 찍기- JSON 형태로 받은 입력 값을 화면에 예쁘게 렌더링하기- 더미데이터로 우선 디자인대로 구현하고 리얼 데이터 집어넣기 2025. 1. 7. 2024년 9월~10월 개발 회고 로직 개선, 오류 해결, 미디어 쿼리만 계속 해서 이번달과 저번달은 진짜 쓸게 거의 없다 태그를 사용해 i18n 라이브러리를 사용하면서도 글자에 색깔 다르게 입히기SEO를 위해 router.push를 Next Link로 바꾸기QRCode 라이브러리를 사용해 링크를 qrcode로 만들기 2024. 10. 31. 2024년 7월~8월 개발 회고 - Next.js의 getStaticProps를 사용한 서버사이드 렌더링. 서버사이드 렌더링을 어떨 때 쓰는지 알게 됐다.- 크롤링 구현- 구글 캘린더 연동 구현- 크롤링해온 데이터를 구글 캘린더와 연동시켜 유저마다 자신의 개인 구글 캘린더에 전시회 정보를 저장할 수 있게 했음- 범용적으로 쓰이는 레이아웃을 만들어 router별로 다르게 적용할 수 있게 함- 페이지네이션 구현- 연도 내림차순으로 정렬해서 보여주는 코드 작성- 파일 끌어서 넣는 드래그 앤 드롭 구현- 유저의 타입(작가, 갤러리 유저)에 따라 기능(작가 추가 여부)을 다르게 구현- math.random 사용해 랜덤한 숫자를 생성한 후 padding에 랜덤한 숫자를 넣어 사진이 무작위로 놓여있는듯한 레이아웃 만듬- SEO를 위해 페이지의 제목.. 2024. 9. 26. 2024년 5월~6월 개발 회고 - 미디어 쿼리로 웹 버전 / 모바일 버전 만들기- react-beautiful-dnd를 사용해 드래그 앤 드롭 구현- Amplitude라는 툴을 사용하고 코드를 추가해 유저의 리텐션 체크- 아이템을 폴더로 정렬할 수 있게끔 하는 로직 구현- 마케팅 정보 수신 동의 구현- 유저들이 웹사이트 내에서 챌린지를 하나하나 달성해가며 playful한 경험을 할 수 있도록 Playbook 페이지를 개발- 방명록을 만들어 유저들이 방명록을 남길 수 있게 하기 2024. 7. 16. 2024년 4월 개발 회고 - router에서 locale을 받아와, 유저의 현재 지역에 따라 국가를 자동으로 설정할 수 있게끔 했다.- Demo 페이지를 없애고, 회원 가입시 즉시 튜토리얼로 이동시켜, 새롭게 가입한 회원들이 회원가입 직후 웹사이트의 기능을 체험해볼 수 있도록 했다- Mui Datagrid를 Datagrid Premium으로 변경하면서, Datagrid Premium에 맞게 기존 데이터를 이식했다- 아이템들에 폴더를 추가하면서, 폴더의 CRUD를 구현했다- 아이템들의 순서를 변경할 수 있도록 Row Ordering 을 구현했다- 폴더 정렬 모드, 순서 변경 모드를 토글할 수 있도록 했다- 사진 리사이징 및 최적화를 리팩토링 했다- 에 직접 입력해야 했던 아이템의 제작 연도 및 아티스트의 출생 연도를 로 바꿨다- .. 2024. 5. 10. 2024년 2월~3월 개발 회고 지금 회사에서의 1개월 반 동안 발전을 정말 많이 한 것 같다. 좋은 분들과 함께 내가 하고 싶은 일을 열정적으로 하며 개발자로 살고 있다. 내가 구현한 기능- 기존의 텔레그램 API를 사용해, 데모 페이지에서 유저가 이메일 입력 시 사내 텔레그램방으로 알림이 가도록 하기 function reportTelegram(Emaildata) { const today = new Date() const registerMessage = `Lead 생성!\r\n이메일: ${Emaildata}\r\n날짜: ${today.toLocaleString()}\r\nLocale:${router.locale}` api.reportTelegramBot(registerMessage) } - 이미지 최적화con.. 2024. 4. 2. 이전 1 다음
