sohyeon kim

💡 로그인/회원가입 시의 input 값 관리, useState VS useRef form 제작에 들어가고 input 의 값을 어떻게 관리할지 고민이 들었다.useState 로 관리하면 리렌더링이 매번 일어나지만, 값을 입력할 때 즉시 유효성 검사가 가능하다.useRef 로 관리하면 값이 변해도 리렌더링이 일어나지 않는다. 우선, 매번 리렌더링이 일어나는 것은 불필요하다 생각해 useRef 로 값을 받아오기로 했다. const idRef = useRef(null); const handleBlur = () => { // 포커스 아웃 시 실행 if (idRef.current && idRef.current.value !== "") { console.log(idRef.current.value)..

💡 블로그나 SNS 같은 피드형 웹페이지 프로젝트 🗓️ 02.07 ~ 02.15 (9일) 연휴가 껴있어서 초반에 속도가 조금 더뎠지만 막바지에 다들 밤 늦게까지 작업해 주셔서 무사히 완성할 수 있었다.. 기획 초반에는 뉴스 관련 글을 올리는 곳이었지만..? 중간에 주제가 바뀌면서 맛집 후기를 올리는 사이트가 되었다! 나는 소개 페이지, 프로필 수정(닉네임, 소개, 좋아하는 음식 해시태그)을 담당했었다. // 저장했던 profile ID와 일치하는 profile 정보를 수정합니다. const editProfile = async (e) => { try { e.preventDefault(); const infoRef = doc(db, 'profile', userId); await updateDoc(infoRe..

🫥 기획 마무리..! 드디어 모든 기획이 마무리되었다! 오늘 아침엔 우선 개발 시간을 다 같이 계산해 봤다. 막연하게 생각하고 있었는데 한 기능마다 시간을 계산하니까 파악이 잘 됐다. 일정이 정리되고 DB-ERD 피드백을 받았다. 원래 배열이나 객체로 넣어놨던 값들을 다 다른 DB 로 나눠주셨다. 처음엔 헷갈렸는데 퀴즈북 - 퀴즈 나눴던 것처럼 더 나아가서 하나하나 작게 쪼개는 거라 생각하니 좀 이해가 됐다.. 코드컨벤션까지 정한 후에 CRA 셋업에 들어갔다! 팀장님이 화면공유로 코드 작성해 주시고 팀원들은 각자 프로젝트 세팅했던 방식 얘기하면서 잘 맞춰갔다. 세팅 끝나고 서로 확장팩 공유하는데.. ㅋ. ㅋ "[귀여운 아이들]을 얻었습니다!" 대망의 역할 분담 🥹 하고 싶은 기능에 모두 투표한 후에 누가..

🫠 기획 더 더.. 구체화 오늘은 어제에 이어 기획을 좀 더 촘촘하게 짜고.. 초기 세팅에 들어갔다! 먼저 길고 길었던 와이어 프레임 제작을 마무리했다. 디자이너님 보시기 편하게 레이아웃만 잡아놓고, 간단한 설명들을 적어놨다. 그리구.. 문제의 퀴즈 데이터 관리 퀴즈를 만들고 푸는 페이지를 생각하다가 데이터 보내고 가져오는게 너무 감이 안잡혀서 😥 각자 미로에 자기가 생각하고 있는 table 을 적어보기로 했다. 퀴즈북과 그 안에 퀴즈에 각각 어떤 데이터가 들어갈지 정리한 뒤에 다시 서로 얘기하면서 더할 건 더하고 뺄 건 빼면서 감을 잡아갔다.. 저 퀴즈 데이터 늪에 빠져있을 때.. 팀장님이 우선 오늘 todo 들 중에서 각자 맡을 수 있는 걸 맡아서 먼저 끝내자고 하셔서 겨우 정신차리고 나올 수 있었다..

🫠 기획 구체화하기 어제 정해졌던 한글 공부 사이트에서 기획을 좀 더 구체화했다! DB, 전역 상태 관리 등은 어떻게 할지 정하고, 핵심 기능인 게임 & 퀴즈는 어떻게 구현할지 레퍼런스를 많이 찾아봤다. 유저가 만드는 퀴즈 부분이 어떻게 만들어야할지 감이 안왔었는데 구글폼이나 다른 공부 사이트들을 보다보니 좀 정리가 된거 같다. 👶 그리고 중요한 프로젝트명 정하기! 한글 공부 사이트여서 한글로 짓기로 정하고, 각자 이름들을 생각해 왔다. 그 중 좋았던 후보가 1. 글마루 2. 뭔말이지 요 둘! 고르고 고르다.. 튜터님의 의견을 더해.. 뭔말easy? 로 결정됐다! 자매품 못말리지 🫂 퍼소나 & 페이지 컨셉 정하기 우리의 퍼소나, 헤일리씨와 사이먼씨다 나중에 좀 더 자세하게 설정해두면 프로젝트 설명에 도움..

🫠 최종 프로젝트 시작..! 오늘은 하루종일 프로젝트 기획에 매달렸다. 정리는 Miro 에 하기로 결정! (노션 에러 많음 이슈..) 미로에 생각보다 다양한 템플릿이 있었다. icebreakers 까지 있다는.. 적극 활용해 줬다. 서로 생각해 온 레퍼런스에 대해서 얘기 나눈 뒤에 비슷한 걸 추려서 멘토링을 받았다. 꼭 들어가야 한다고 생각해서 로그인, CRUD 등 계속해왔던 기능들이 많았는데 퀴즈나 게임, 에디터 기능이 있는 게 재밌을 것 같다고 하셨고.. 피드백 토대로 2차 회의를 해서 나온 게.. 🙋‍♂️ 외국인을 위한 한글 공부 사이트 ! 어떻게 구현해야 할지는 다시 꼼꼼하게 생각해 봐야겠지만.. 다들 재밌게 만들 수 있을 거 같다! 기능 엄청 넣다가 다시 피드백받고 빼고 하는 중이다. 허허 한..

💡 심화 프로젝트 기록.. 점점 카테고리 구분이 흐려지고 있다.. 💬 와이어프레임 우리 주제는 투두 공유 사이트! 계속 만들었던 투두를 좀 더 발전시킨 ~ 😶 주제 정하고 와이어프레임 짜는데 하루 반? 정도가 걸렸다. 생각보다 오래 걸렸지만 그래도 구체적으로 얘기하고 넘어가는게 좋은 거 같다. 💬 github issue & PR 해리님이 이슈 활용 특강을 해주셔서.. 🥹 열심히 활용하려고 하고 있다. 언젠간 멋드러지게 쓰겠지.. 또한 PR 특강도 해주셨다. 원래 따로 본문을 안 쓰고 날리기만 했었는데, 이렇게 보니 내가 맡은 일 기록하기에 좋은 거 같다. 다른 분들 구현하신 내용 파악하는데도 좋다! 💬 기능 구현 : 캘런더, Todo & User 현황, Footer 우선 캘린더! 기획 단계에서 tui 캘..

💡 첫 프로젝트 글.. tmdb 영화 api 를 이용해 최신 영화를 가져와검색 기능을 구현하는 프로젝트였다. 처음엔 가져오는 것만으로도 막막했는데 어찌저찌 완성했다.그리고 tmdb 엔 정말 많은 api 키가 있었다.. 다른 방식으로도 재밌게 쓸 수 있을 듯 해..! 👀 🎀 상세페이지 API포스터, 백드롭 포스터, 평점, 영화 공식 사이트(click 에 연결) 등을 가져오는 주소!찾아보니 등장인물 정보도 가져오는 api 도 있었다.const FULL_URL = `${BASE_URL}movie/${movieId}?language=en-US&`; 🎀 포스터 이미지가 없는 영화는 대체 이미지를 넣어줬다 !oneerror="this.src='url'"movieLi.innerHTML += ` ..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 props 로 내려줬던 데이터들을 useContext 로 바꾸다가 생긴 에러 모든 페이지에서 쓰고 있는 letter 들은 잘 내려줬는데.. 편지가 저장될 멤버 데이터를 내려주다가 에러가 생겼다. 검색해보니.. 오타나, 경로를 이상하게 가져왔을 거라고 나오길래 이름을 다 복붙해가며 수정해봤는데도 해결이 안됐다. 자꾸 저 ToHeader 에서 쓸 name 이 에러가 떠서 최상위에서 내려줬는데 왜 안되지??! 했으나 Member.jsx 에서 Provider 로 감싼 상태에서 Detial.jsx 에서도ToHeader 컴포넌트를 써서 생긴 문제였다. 🥵 그래서 데이터를 쓸 .. 최상위인 Layout 에 Provider 를..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 레이아웃 간의 props 공유를 해보자 Header 와 Footer 는 고정해 두고 path 변경에 따라 children 에 pages 들로 화면이 변경된다. 🚨 문제는 ! 1. member 페이지에서 편지를 작성하고 편지를 클릭 해 detail 로 갈 때 그 letter 의 정보를 불러오지 못하고 있다. (연결이 안되어있다.) 2. home, member, detial 세 페이지를 서로 이동하면 letter 데이터가 초기화된다. 현재 편지 데이터를 모아둔 letters 를 member 페이지 안에 만들어둬서 다른 페이지인 detail 에서 어떻게 가져와야 하는지를 모르겠어서 튜터님께 찾아갔다. (전날부터 막막해..