creamymood의 개발 공부 발자취 💭

Main Project - 아이디 찾기 성공 화면 구현하기 (이메일 마스킹 처리)

해야하는 것 기존 아이디 찾기 모달에서 -> 회원 정보가 있을 시 이렇게 회원정보를 보여주는 것을 구현 해야 한다. 아직 백엔드쪽이 준비가 안되서 UI 구현을 위한 가짜 로직 부터 필요하다. 흐름은 이런식으로 정리하자면, 성공 / 미성공 상태를 만들어서 성공시 > 새로운 모달을 보여주는 조건부 렌더링미성공시 > 오류 메시지 보여주는 것 이까지는 백엔드랑 연결되도 동일하고, 지금은 백엔드쪽이 없으니, 가짜 로직이 필요하니까..우선 아이디를 저장해줄 상태도 만들어주고, 이름이 가짜 로직인 " 홍길동 " 이랑 일치 할 경우, 가짜로 아이디를 저장해준 뒤,보여줄 모달에서 그 이름을 보여주면 된다. 더보기상황 정리사용자가 이름을 입력하고 "아이디 찾기" 버튼을 누름서버(또는 로컬 로직)에서 이름이 '홍길동'인지 ..

API 공부하기 - api명세서와 스웨거Swagger가 뭘까 ?

프로젝트에서 슬슬 UI작업이 끝나가고, 백엔드쪽에서 완성되는 명세서를 확인하고 공부해야 할 필요가 생겼다.우리 팀원들이 모두 출중해서,,,, 이미 프론트엔드에서 많은 경험들이 있으신데 다들,,,그 분들께서 나누는 대화에서 생소한 단어들이 많아서.. 메모해두었다가, 혼자 이렇게 다시 공부한다 .. 📝✏️ 이번엔 "스웨거~ 확인해보세요 / 명세서가 왜 이렇지 ?! (ㅋㅋㅋㅋ) "하는 대화들을 듣고.. 나도 api 받아오고 해야 할 작업들이 있기에, 한번 공부해보기 !프론트 vs 백엔드: 역할 먼저!프론트엔드 = 사용자한테 보이는 화면 만드는 사람 백엔드 = 서버에서 로그인 처리, 데이터 저장 이런 거 하는 사람예시 상황: "로그인 화면 만들기"너는 로그인 화면을 만들고 있어!이제 로그인 버튼 누르면 백엔드..

리액트 공부하기 - 모달 만들기

모달에 대한 뭔가 알수없는 공포(?)가 있었다 ㅋㅋ이번에 쉬운 예제로써 한번 경험해보고 어렵지 않다는걸 알았다초보분들도 이해할 수 있게 참고할 수 있게 정리해보기우선, 예제 연습 시작 전에 간단히 개념을 짚고 모달에서 어떤것이 중요한지 알고 넘어가기 🐰1. 모달이란? (원리부터 이해하기)모달은 화면 위에 덮어씌우는 작은 창! 보통 배경은 어둡게 흐리게(반투명) 만들고,중앙에 내용이 팝업처럼 뜨지.사용자가 모달 안의 작업을 하거나 확인을 하면 모달이 닫혀.그래서 모달이 뜨고 안 뜨는 상태를 관리하는 게 중요해.2. 모달 동작 원리모달을 보여줄지 말지를 결정하는 상태(state) 가 필요해.상태가 true면 모달 보이고, false면 모달 숨김.버튼 같은 걸 누르면 상태가 바뀌면서 모달이 열리고 닫히는 것..

API 공부하기 - POST (데이터를 보내는 것 이외에 데이터를 받아올 때도)

팀에서 목데이터를 분석하면서 GET이 아닌 POST로써 데이터를 읽을 수도 있다는 그런 정보를 알게 됐다백엔드 현업 개발자 동생.. (진짜 든든보스) 옆에서 알려줬다.GET과 POST의 차이!가져온다.. 의 개념은 GET이 맞지만, GET은 POST,PATCH 등등이랑 다르게, body가 없다. 단순히 쿼리파라미터로 “조건”이 있는 간단한 요청만 보낼 수 있는 것.전체 상품 조회나 이런 단순한 조건은 괜찮지만..빨간색 > 인기 목록 등 이렇게 조건이 길어지고 받아와야 할게 많으면JSON 형태의 바디가 있는 POST를 사용 ! GET 요청의 특징바디(body)를 보낼 수 없음 (RFC 상은 technically 가능하지만, 대부분의 브라우저나 서버에서는 무시함)대신 **쿼리 파라미터(query param..

hook form에서 form 태그가 필요한 이유React Hook Form을 쓸 거면 태그는 꼭 있어야 해!왜냐면, React Hook Form은 HTML 의 submit 동작을 기반으로 작동하기 때문이야. 왜 꼭 태그로 감싸야 할까?1. submit 이벤트의 중심은 form이다React Hook Form에서 사용하는 handleSubmit은 form의 submit 이벤트를 감지해서 유효성 검사를 하고 데이터를 처리해.이 submit 이벤트는 안에서만 자연스럽게 동작해.버튼만 클릭하는 게 아니라 Enter 키를 눌러도 폼 제출이 가능하게 하려면 이 필요해. 2. 웹 표준과 접근성 태그는 브라우저와 스크린 리더 등 보조 기기들이 이해할 수 있는 웹 표준 구조야.이걸 안 쓰면 접근성이 떨어지고 웹 ..

작업하며 신기한 경험을 하고, 혼자 기록해보기 .. 📝🧏🏻‍♀️(했던 경험 : 나는 feature 브랜치에서 Register 페이지 작업 하고 있었는데 pull 당겨 와야 해서 develop 브랜치로 이동했는데! Register에서 커밋이나 stash 하지 않았음에도.. 계속 보이던 것 ! ) (이 때 이유는 : 맞아요! 워킹 디렉토리(작업 디렉토리) 에 있는 파일은 커밋하지 않아도 브랜치 상관없이 보여요.그래서 다른 브랜치로 이동해도 지워지지 않는 한 그 상태 그대로 존재합니다) 이 이유 때문이었고, 워킹 디렉토리를 짚어보고 가자 🧚‍♀️ 워킹 디렉토리란?워킹 디렉토리는 지금 네가 실제로 작업하고 있는 **로컬 폴더(디렉토리)**야. 쉽게 말하면, 코드를 수정하거나 파일을 추가하거나 삭제하는 ..

직접 사용하다보니까, 이론으로 배울때랑 달리 새롭게 아는점이 생기며 더 깊이 이해하게 된다 알쏭달쏭 깃의 오해 지난 블로그 참고하기 git 공부하기 - 깃에 대해 오해 했던 것. CCTV가 아니다 !나는 깃이 내가 치는 코드 모두 실시간 다 CCTV처럼 다 저장하는 줄 알았는데.. Git은 **"git add 하는 순간의 코드"**만 저장git commit은 git add된 코드의 스냅샷만 저장즉, 그 순간의 "확정된 코드"만 기creamymood.tistory.com 지금은, 깃의 커밋은 어디에 적용 ? 될까에 대한 파트우선, 커밋은 ?더보기commit = 저장소에 정식으로 기록함말 그대로 작업 내용을 저장소(history)에 기록하는 거야.git이 "이건 저장해도 괜찮은 완성된 작업"이라고 인식해...

알쏭 달쏭 깃..아니 그냥 모르겠는 깃. 오늘 팀에서 pull request를 main으로 해버린 상황 발생 ✨💡⭐️ 팀장님과 엑설런트 팀원님 조교님께서 해결 해주셨지만 .. 나도 주의 해야겠다고 .. 음 그냥 pr 하기 전에 조교님부터 찾아가서 일단 같이 해봐야겠다develop 브랜치가 팀원분들의 코드로 합쳐져서,그걸 나는 다시 pull 해와야 했고git pull origin develop당겨오니까, 디벨롭 브랜치에는 반영이 됐는데 특이한 경험을 했다.내가 Register 파일을 만들어두고 커밋은 따로 하지 않았는데브랜치 파일에서도 보였음. 이게 찾아보니까 커밋이나 이런거 하지 않아도 우선 내가 작업중인거니까 보이긴 하는거라고 했음 ↓더보기근데 같은 폴더 안에 있어서 브랜치 이동 전에도 Registe..

1. HTML의 input은 무조건 "문자열(string)"을 다룬다브라우저에서 우리가 쓰는 태그는,사용자가 어떤 걸 입력해도 결과는 무조건 string으로 나온다 위의 어떤 type을 쓰든 간에,event.target.value로 받아오는 값은 무조건 string 예시 { console.log(typeof e.target.value); // 👉 항상 "string" console.log(e.target.value); // 👉 예: "123" }}/>사용자가 123이라고 쳐도, "123"이라는 문자열로 들어옴숫자로 보이지만 실제론 글자 그래서 우리가 하는 일사용자가 입력한 value는 string으로 받고그게 숫자처럼 생겼으면 → parseInt()나 Number()로 ..

react-hook-form을 어떻게 쓰는지, 내가 만든 인풋이랑 연결은 어떻게 하는지 유효성 검사를 라이브러리 써서 어떻게 하는지.. 차근차근 공부 스타투,,1단계: Hook Form ?React Hook Form은 리액트에서 폼을 쉽게 관리하고, 유효성 검사까지 도와주는 도구쉽게 말하면, 입력창 값들을 알아서 관리해주고 검사해주는 라이브러리 2단계: 왜 필요한데?리액트에서 을 많이 쓰잖아. 그런데 각각의 을 useState로 관리하면 코드가 많아져.Hook Form을 쓰면 그걸 줄일 수 있어. const [email, setEmail] = useState(''); setEmail(e.target.value)} />이런 걸 생략하고, Hook Form한테 맡길 수 있어. 3단계: register가 뭐..