인기글

[SSAFY] 수료 앨범 촬영 후기 (시현하다 비즈니스 단체 촬영)
·
SSAFY
안녕하세요. 11기 SSAFYcial 입니당! 벌써 자율 프로젝트만 남았다니 시간이 너무 빨리 흐르는 거 같아요..! 싸피가 이제 끝난다니 시원섭섭한 느낌이네요..😓 좀 지쳐서 프로젝트 그만하고 싶기도 하고 근데 싸피 끝나면 뭐 하나 싶기도 하고,, 싸피에서 최근에 수료 기념 촬영을 진행하는데 무려 시현하다에서 촬영하러 오셨어요!! 처음에 시현하다에서 온다는 소식을 듣고 놀라서 난리난리~~~ 싸피 혜택 중에 젤 좋았어요ㅎㅎㅎ 🖼 시현하다 시현하다 레코더즈Record Your Moments.sihyunhada.com 증명사진이라는 소재로 진행한 1000인 프로젝트를 통해 사진관의 흐름과 인식을 바꾸었습니다. “누구나 고유의 색이 있다”라는 슬로건을 통해 기존의 사진관들이 진행해왔던 보편적인 미인상에 맞는 ..
[SSAFY] 11기 2학기 자율 프로젝트 (+ 우수팀 선정)
·
SSAFY
안녕하세요. 11기 SSAFYcial 입니다😁싸피 2학기가 되고 공통 프로젝트, 특화 프로젝트에 이어 자율 프로젝트까지 끝이 났네요.다들 반년 동안 세 번의 프로젝트를 하시느라 고생 많으셨고 앞으로 좋은 일만 남으셨길 바랍니다 :)그럼 제가 진행한 자율 프로젝트의 소개와 회고를 시작하겠습니다! 📍 기획저희 팀의 기획은 한 팀원의 아이디어로부터 시작되었어요. 한 팀원이 대학 시절 학부연구생을 했었고, 그때 느꼈던 불편한 점을 우리 프로젝트로 해결하고자 했어요.그래서 저희 프로젝트의 대상자는 AI 개발자예요.블록 코딩으로 쉽고 간편하게 AI 모델을 만들고 학습과 분석까지 함께 할 수 있도록 하고자 했어요.  📍 프로젝트 소개🔹 주제블록 코딩 방식의 AI 모델 개발 소프트웨어🤖 손쉬운 AI 모델 개발..
Notion으로 알고리즘 정리하기 (+ 템플릿 공유)
·
SSAFY
안녕하세요 ~~~~~ ㅎㅎㅎ자바 전공자 트랙은 이제 싸피에서 1학기 알고리즘 구간이 끝났습니다!알고리즘 수업은 끝났지만.. 알고리즘은 계속 이어나가야겠죠?(템플릿 공유는 글의 마지막 부분에 있어요😮) 다들 알고리즘 풀이할 때나 풀이 이후에 정리하시나요?알고리즘 한 번 풀면 쭈우우욱 기억하면 좋겠지만...전 풀었던 문제도 나중에 보면 또 새롭더라구요... 과거에 파이썬으로 알고리즘 풀 때 노션에 정리했었는데 최근에는 급급하게 문제 푸느라 따로 정리를 안 했었어요..!그랬더니 비슷한 유형의 문제를 봤을 때 희미하게 생각나서 풀었던 거 다시 보고 싶을 때 정확히 어떤 문제인지도 헷갈렸어요..ㅠ^ㅠ 예전엔 이런 방식으로 정리했었는데 점점 문제가 많아질수록 찾기도 힘들고 보기도 힘들더라구요..ㅋㅋ저때는 노션..
SQLD 공부법 : 전공자 하루 벼락치기 합격 후기
·
자격증
또 벼락치기ㅠ 변명을 하자면.. 시험 접수할 때만 해도 벼락치기하려는 건 아니었는데..어쩌다 보니 시험 접수일과 시험일 사이에 라섹을 하게 됐어요..ㅋㅋㅋㅋㅋㅋㅋㅋ그래서 아프고 잘 안 보여서 공부를 못함... 회복도 느린 편이었음 ㅠ시험 볼 때도 내 시험지 빼곤 잘 안 보였음 ㅎ;;라섹하고 일주일 조금 넘어서 시험 봤는데 시험 볼 때도 인공눈물 넣어가면서 봤답니다..(감독관님께 미리 여쭤봄) 일단 제 상황은여..기본적인 SQL은 어느 정도 짤 수 있었고.. 이론은 거의 까먹은 상태아프고 안 보인다고 미루고 미뤄서 희망이 있을까 싶었지만 sqld 접수비 5만 원ㅜ아ㅜ까ㅜ워ㅜ서ㅜ 몇 시간이라도 공부해 봄 ✏️ 공부법당일 새벽에 공부 시작해서 밤새고 시험 보러 갔으니까.. 공부시간은 대충 4시간 ~ 6시간쯤일..
[SSAFY] 11기 1학기 관통 프로젝트 (+ 최우수상)
·
SSAFY
🧐관통 프로젝트?1학기 마지막에는 싸피에서 1학기에 배운 내용을 '관통'한다는 의미에서 관통 프로젝트를 진행해요~!이전에도 관통 프로젝트를 위한 관련 실습을 진행하긴 하지만, 찐 관통 프로젝트는 싸피에 와서 처음 진행하는 프로젝트예요.전공자 반의 경우에는 여행, 부동산 중에 주제를 선택하는데, 저희팀은 여행을 주제로 선택했습니다!아무래도 여행을 좋아하기도 하고, 집을 구해본 경험도 없기에 여행을 주제로 한 프로젝트가 더 재미있게 진행할 수 있을 것 같았어요!  🎈 프로젝트 개요1. 인원2인반에서 팀을 정하기 때문에 미리미리 반에서 누구랑 할지 정해놓으면 좋아요. 저희 반에서는 학기 초에 조사했을 때, 프론트엔드 지망자가 저밖에 없었는데요. 그래서인지 팀 정하는 시기가 왔을 때 페어오빠가 먼저 제안해 ..
[Next.js] Next 15에 MSW(Mock Service Worker) 세팅하기
·
Next.js
1. MSW란?MSW(Mock Service Worker)는 API를 흉내 내는(mocking) 라이브러리이다.Service Worker를 활용해서 네트워크 요청을 가로채고 응답을 가짜로 돌려준다.MSW를 쓰면 백엔드 API가 준비되지 않은 상태에서도 프론트엔드에서 미리 개발이 가능하다. MSW 공식문서를 보면서 따라해보자!다만 Next.js에서는 MSW가 완벽하게 연동되지 않는다.SSR Fetch를 위해 추가적으로 작성해줘야 하는 코드가 있다.MSW에서 제공하는 Next.js + MSW 예제가 있는데 이거랑 Next.js(MSW 포함) 강의 들었던 거랑 다 참고해서 세팅했다. 2. 패키지 설치일단 msw 패키지부터 설치한다.npm i msw --save-dev 3. 클라이언트 환경(브라우저) 설정moc..

최신글

Optimistic Update 방식으로 좋아요 버튼 구현하기 (TanStack Query)
·
Next.js
현재 하고 있는 프로젝트에서 좋아요 버튼을 구현하려고 한다. 🧩 요구사항게임 목록 페이지에서 특정 게임 카드를 클릭하면 이러한 게임 상세 모달이 뜨는 구조이다. API 응답받은 좋아요 여부에 따라 isLiked가 true면 채워진 좋아요 아이콘을, false면 비워진 좋아요 아이콘을 띄운다. 이런 식으로.. 좋아요 버튼 옆에는 좋아요 개수도 같이 표시한다. 🚀 옵티미스틱 업데이트(Optimistic Update) 방식원래 그냥 구현하면 좋아요 버튼을 클릭하면 → 백엔드에 요청을 보내고 → 응답이 성공하면 업데이트하는 방식이다.모르는 정보들을 불러오는 것도 아니고 그저 좋아요 on/off인데 응답이 올 때까지 기다려야 하면 사용자 입장에서 답답할 수 있다.Optimistic Update 방식은 백엔드..
[Next.js] 모달 열릴 때 스크롤이 하단으로 가는 문제 해결하기
·
Trouble Shooting
🚨 문제 상황Next 15에서 Parallel Routes & Intercepting Routes로 모달을 구현했다.아래처럼 게임 카드 리스트가 존재하고 특정 게임 카드를 클릭하면 모달이 열려야 한다. 문제는 모달을 열면 뒷배경이 페이지의 하단으로 내려간다...아직 UI 구현 단계라 api 연동을 하지 않아 데이터가 좀 이상한데 첫 번째 줄에 있던 게임 카드를 클릭했는데 스크롤이 아래로 내려간 상황이다.모달을 닫으면 다시 원위치로 돌아오기는 하지만, 게임 카드 리스트가 무한 스크롤로 구현되어 있기에 모달을 열고 스크롤이 내려가는 과정에서 다음 게임 리스트 네트워크 요청이 가는 문제가 있다... 챗지피티한테 물어보니 모달이 열릴 때 body 태그의 overflow 스타일을 hidden으로 설정했다가 모달..
[Python] 백준/BOJ 20207번: 달력 (Gold 5)
·
백준 (BOJ)
💻 Problem문제 보러 가기 수현이는 일 년의 날짜가 1일부터 365일로 표시되어 있는 달력을 가지고 있다. 수현이는 너무나도 계획적인 사람이라 올해 일정을 모두 계획해서 달력에 표시해 놨다. 여름이 거의 끝나가자 장마가 시작되었고, 습기로 인해 달력에 표시한 일정이 지워지려고 한다. 지워지는 것을 막고자 수현이는 일정이 있는 곳에만 코팅지를 달력에 붙이려고 한다. 하지만 너무 귀찮았던 나머지, 다음과 같은 규칙을 따르기로 한다. 연속된 두 일자에 각각 일정이 1개 이상 있다면 이를 일정이 연속되었다고 표현한다. 연속된 모든 일정은 하나의 직사각형에 포함되어야 한다. 연속된 일정을 모두 감싸는 가장 작은 직사각형의 크기만큼 코팅지를 오린다. 달력은 다음과 같은 규칙을 따른다. 일정은 시작날짜와..
[Python] 백준/BOJ 17124번: 두 개의 배열 (Silver 3)
·
백준 (BOJ)
💻 Problem문제 보러 가기 정수 배열 A와 B가 있다. A는 총 n개의 서로 다른 양의 정수를 포함하고 B는 총 m개의 서로 다른 양의 정수를 포함한다. A, B를 이용해서 길이가 n인 새로운 배열 C를 만들어보자. C[i] 는 배열 B에 있는 값 중 A[i] 에 가장 가까운 값 (절댓값 차이가 가장 작은 값)으로 정의된다. 만약 이 조건을 만족하는 값들이 여럿 있는 경우, 그 중 가장 크기가 작은 값으로 정의된다.예를 들어 A = [20, 5, 14, 9] 그리고 B = [16, 8, 12] 라고 해보자. C[1] = 16 이다 - 왜냐하면 B[1] = 16이 A[1] = 20에 가장 가깝기 때문이다. C[2] = 8 이다 - 왜냐하면 B[2] = 8이 A[2] = 5에 가장 가깝기 때문이다...