study/100 days (100일 챌린지) (37) 썸네일형 리스트형 [웹개발 100일] Day 52~55 - 프로필 마우스오버 조회 팝오버 기능 작업 시간: 2시간 남의 프로필 간단 조회 팝오버를 만들었어엽 !!!!!클릭하면 다른 사람 바이오를 구경할 수 있도록 바이오 페이지도 구현 예정입니다. 조회 가능하도록 할 데이터 목록- 프로필 사진- 유저네임- 바이오- 오늘의 무드, 요즘 최애 음악, 최근 접속일- 생일- 작성한 글 목록- 참여한 이벤트 목록 shadcn UI의 Tooltip 사용했어요!!import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@/components/ui/tooltip";type User = { id: number; username: string; profileImageUrl: string;};interface ProfilePopo.. [웹개발 100일] Day 50~51 - 게시글 업로드 페이지 UI 구현 (shadcn 사용) 게시글 업로드 페이지를 리뉴얼 했습니당.아직 에디터는 안 넣었어요.shadcn을 써보고 싶어서 새로 설치하고 적용해봤어요. 🚀 요약작업 시간: 2시간✅ 게시글 업로드 페이지 UI 구현🚀 게시글 업로드 페이지 UI 구현 import { Button } from "@/components/ui/button";import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "@/components/ui/select";import { ParticipantMultiSelect } from "@/components/MultiSelect";import { DateRangePicker } from "@/components/Dat.. [웹개발 100일] Day 47~49 - 게시글 업로드 페이지 UI 구현 (진행중) 이제 이미지 업로드가 가능하니 게시글 작성 기능을 구현할 차례겠지요.일단 오늘은 너무 대충 만들어놓은 UI를 좀 손봤습니다.본문 작성란은 에디터 라이브러리를 가져다 쓸 듯한데 Tiptap을 고려하고 있어요. 🚀 요약작업 시간: 3시간✅ 게시글 업로드 페이지 UI 구현 (진행중) 🚀 게시글 업로드 페이지 UI 구현 (진행중) 아직 미완입니당카테고리, 참석자, 모임 날짜를 정할 수 있게 하고 발행 버튼을 추가할 거예요. 일단 지금까지 구현한 거라도 놓고 갑니다.import { useRef, useState } from "react";const EventUpload = () => { const [content, setContent] = useState(""); const textareaRef =.. [웹개발 100일] Day 45~46 - 클라이언트의 이미지 업로드 요청 처리해서 Cloudinary 라이브러리에 저장하기 프로필 사진 변경 기능을 위해 클라이언트~클라우디너리 라이브러리까지 이미지를 보내는 로직을 구현해봤어요. 🚀 요약작업 시간: 3시간✅ 프로필 사진 변경 기능 구현 🚀 프로필 사진 변경 기능 구현 로직 흐름은 이렇습니다. 1. 사용자가 파일 선택2. 임시 url을 만들어 preview 보여줌3. 사용자가 저장 버튼 클릭 시 이미지를 Cloudinary에 업로드4. 업로드 후 반환된 url을 DB에 업데이트 사용자가 파일을 선택할 때마다 바로바로 클라우드에 업로드 하면 최종 선택한 이미지를 제외하고 모두 올펀 에셋 (orphan essets)이 됩니다. 때문에 저장 버튼 클릭 이후에 클라우드로 전송하는 게 데이터 관리 측면에서 효율적일 수 있겠죠. 프로필 이미지 프리뷰를 보여주는 컴포넌트imp.. [웹개발 100일] Day 44 - 클라우드 이미지 업로드 서비스 Cloudinary 사용하기 이제 게시물 작성 & 프로필 사진 변경을 위해 이미지 업로드 기능을 만들 차례가 온 듯하다.최대한 유지비용을 줄이고 싶어서 초기에 저렴하게, 또는 무료로 이용할 수 있는 서비스를 찾아봤다. 지피티가 정리해줬고 이 중에서 Cloudinary를 사용하기로 했다.이미지 최적화 처리를 제공하고 초기 10GB까지 무료로 이용할 수 있다는 점에서 선택했다! 🚀 요약작업 시간: 2시간반✅ Cloudinary 가입하고 샘플이미지 띄워보기✅ 프로필 사진 변경 기능 구현 (진행중) 🚀 Cloudinary 가입하고 샘플이미지 띄워보기 클라우디너리 가입하고 Getting Started 페이지 읽어보기 npm i @cloudinary/url-gen @cloudinary/reactSDK 설치 import React f.. 여러분 그간 여러분?그간 소원했습니다? 일주일간 안 보인 사이 뭘 했냐.. 주식 했습니다 그냥 어느날 아침 갑자기음.주식에 도전해봐야겠다!하고 급발진으로 시작해 열흘 정도 단타 연습을 해보았는데요10만원 넘게 번 날도 훅훅 잃은 날도 있었고 결국 플마제로 정도의 결과를 얻었습니다. 나름 재밌는 경험이었구요초보가 본전 정도면 잘했다고 생각합니다일단 계획대로라면 이번주 금요일까지 하고 그만둘 생각입니다.직장 다니면서 재테크 공부를 너무 안 해서 솔직히 좀 걱정이었는데한 번 손대본 경험으로 만족하고요 그만두는 이유는1. 원래 일주일만 하려고 했음2. 시간과 노력이 많이 들어서 다른 걸 할 수가 없음3. 그냥 근로소득이 더 보람참이상으로 차라리 능력과 경험을 키워 근로소득으로 받는 돈을 높이는 게 더 저에게.. [웹개발 100일] Day 34~35 - 프로필 (마이페이지) 수정사항 저장 기능 프로필 페이지에서 내 정보를 수정하고 저장할 수 있는 기능을 만들었어요. 🚀 요약작업 시간: 1시간✅ 내 정보 수정 기능 구현 🚀 내 정보 수정 기능 구현이제 프로필 창에서 유저명이랑 비밀번호를 바꿀 수 있어요!! public async Task UpdateUserProfileAsync(int userId, User updatedUser){ var user = await _context.Users.FindAsync(userId); if (user == null) return false; updatedUser.Username = HttpUtility.HtmlEncode(updatedUser.Username); user.Username = !string.IsNullOrWhiteS.. [웹개발 100일] Day 33 - 1주차 주간 정리 죄송,회사에서 일 너무 많이 하고 이틀 연속 늦게 퇴근해서 진심으로 작업하기 싫었어요대신 1주차 랩업 글을 썼어요 https://chie202020.wordpress.com/2025/03/18/100-days-of-code-week-1-wrap-up/ 100 Days of Code: Week 1 Wrap-UpWeek 1 Overview The first week of my 100 Days of Code challenge was all about laying the foundation for my personal project which is a web app for capturing and sharing memories with friends. While…chie202020.wordpress.com .. 이전 1 2 3 4 5 다음
