분류 전체보기 (49) 썸네일형 리스트형 [우아한 테크코스 프리코스] 3주차 회고 - 로또 조금 늦게 써보는 회고글이다. 3주차는 배운점 느낀점이 정말 많았던 한주였다. 그래서 회고를 좀 구구절절 써볼까한다. 배운점과 노력한점 MVC 패턴의 적용지난 2주차 과제를 하면서 입출력을 하는 로직을 메인함수에 썼다가 지저분해지는 것 같아 클래스 내의 메소드로 만들었었다. 그런데 하면서 입출력에 대한 코드를 분리하면 더 좋았겠다는 아쉬움이 남았다. 또한 메소드를 이어주는 중간단계 코드를 작성하는 부분도 클래스 내부에 써야 하는지 메인함수에 써야 하는지 혼동이 되었고, 결국은 메인함수에 쓰긴 했지만 가독성이 떨어지는 문제가 있어서 아쉬움이 있었다.그리고 나서 2주차 코드리뷰를 통해 내가 고민하고 있던 부분인 핵심 로직과 입출력 부분의 코드를 분리해서 작성하는 MVC패턴을 접했다. 그래서 이게 해답이라는.. [우아한 테크코스 프리코스] 2주차 회고 - 자동차 경주 2주차는 시험도 끝나서 1주차때보다 널널하게 과제를 수행할 수 있었다. 그래서 지난주에 시간을 많이 못들여 아쉬웠던 부분을 최대한 개선하려고 노력했다.배우거나 노력한 점 1주차 공통피드백을 보고 eslint 와 prettier 를 설치해서 개발해봤다.그동안 귀찮아서 안했었는데 설치해보니 세상 편하다. 들여쓰기 간격 등을 저장할때마다 자동으로 조정해주니까 가독성도 좋고 내가 미처 놓친 띄어쓰기 등도 조정이 되어서 정말정말 편하다. 근데 이걸 소감문에 안썼네.. 다음부터는 소감에 내가 노력한 모든 부분을 담을 수 있도록 노력해야겠다. 숫자야구 풀이 강의를 보면서 기능 목록을 어떻게 작성하는지, 클래스와 메소드는 어떤 단위로 나누는지 학습하고 적용했다.코치님이 구현 전에 고민하는 시간이 7할이라고 말씀하셨기 .. [우아한 테크코스 프리코스] 1주차 회고 - 숫자 야구 게임 우아한 테크코스 프리코스에 참여하게 되면서 1주차가 끝났다.그래서 이번 미션에 대해 회고를 해보고자 한다! 배운점과 노력한 점이번 미션은 숫자아구게임이었다.요구사항을 꼼꼼히 읽고 요구사항대로 짜도록 노력했다. 미리 구현할 기능들을 정리해보니 메소드가 착착 만들어졌고 구조적으로 구현을 하려고 노력하게 되어서 신기했다.클린코드 규칙대로 들여쓰기 규칙을 1이상 가져가지 않도록 하다보니 자연스레 한 메소드에 한가지 기능만 작성할 수 있었다.변수 네이밍과 클래스 네이밍에 대해서 신경을 썼다. 솔직히 진행중인 개인 프로젝트에서는 네이밍에 크게 신경을 안썼는데 이번에는 다른 사람들이 본다는 생각에 이름만으로 기능을 유추하기 쉽게 짓고자 노력했다.그리고 예외처리 부분도 부끄럽지만 거의 처음으로 해봤는데 별거 아니어서 .. react-hook-form 에서 useFormContext 사용하기 (react form에서 props driiling을 막아보자) 저번에 react-hook-form을 사용해서 회원가입과 로그인 폼을 변경했었는데 입력 필드의 유효성 검사라던지, 전송 데이터를 자동으로 객체화해주는 점 등은 너무나 편리하고 맘에 들었다. useForm 적용하는 법이 궁금하신 분들은 이전 글을 참고해주세용https://coding-frog.tistory.com/25 그렇지만 기존의 문제였던 props drilling의 문제가 여전히 계속되고 있었다 ㅠㅠ useform으로 변경한 후에 변경하는 값들을 일일히 state로 저장할 필요는 없었지만 register 함수와 errors 객체는 모든 컴포넌트에서 공유하기 위해서 다 내려보내줘야 했기 때문에 이렇게 지저분한 코드가 완성되었다.이렇게 되면 props drilling 면에서는 이전 코드와 별다를게 없었다.. React Hook Form 라이브러리 사용해보기 - 회원가입과 로그인 폼을 쉽게 만들어보자(feat : 유효성 검사) 시도하게 된 이유내가 만들고 있는 회원가입 페이지에는 꽤 많은 입력 필드가 있다.여기에 판매자 회원가입 필드까지 하면 관리해야 하는 필드가 두배로 늘어난다.뭐 이정도는 대부분의 사이트에서 받고 있는 유저정보이니까 절대 과하지는 않다. 아니 실제 서비스되는 페이지는 여기에 뭐 주소나 별명같은것까지 더 입력해야 하지 않은가? 그래서 이정도 관리하는건 별거 아니라고 생각했다.근데 막상 이걸 일일이 useState로 관리하는 것은 생각보다 번거로운 일이었다ㅠ각 항목마다 유효성 검사를 해야하니까 그에대한 state도 늘어날 뿐더러 나는 아토믹패턴으로 프로젝트를 만들고 있기 때문에 모든 인풋창이 각기 다른 컴포넌트에 있어서 props로 state를 일일이 보내주는 식으로 관리해야 했다. 대충 봐도 이건 아니다 싶.. 리액트 회원가입 시 유저 비밀번호 일치여부 검증 오류 문제상황리액트로 오픈마켓을 만들다가 회원가입 페이지에서 오류를 발견했다. 비밀번호 확인란에서 비밀번호와 같은지 여부가 제대로 반영이 되지 않았다.이 사진에서 보면 비밀번호 확인란에서 '비밀번호가 다릅니다.' 라고 나오는 것을 확인할 수 있다. 이건 비밀번호 확인창에 아무것도 입력하지 않았기 때문에 당연히 정상적이다. 그리고 여기서는 비밀번호와 동일하게 입력하여서 '비밀번호가 확인되었습니다.' 문구와 함께 체크표시가 나타난다.여기까지는 정상적으로 작동한다. 그런데 여기서부터 문제인것은 비밀번호를 수정하려고 할 때이다. 비밀번호를 수정하게 되면 비밀번호확인란에도 비밀번호가 다르다는 문구로 바뀌어야 정상인데 변함없이 그대로인 것을 볼 수 있다. 다만 비밀번호 확인란을 바꾸는 것은 언제든 정상적으로 작동한다... 리액트에서 동적인 UI 만드는 방법 리액트에서 모달창이나 좋아요 버튼같이 사용자가 클릭할 때마다 상태가 변화하는 UI를 만들어야 하는 일이 많다. 자바스크립트에서는 이런 경우 DOM을 이용하여 html을 생성하거나 style을 토글로 관리해주는 방식으로 구현하지만 리액트에서는 그런 개념이 아니기 때문에 헷갈리는 경우가 있다. 따라서 오늘은 동적인 UI를 어떻게 만들어야 하는지 예시를 통해 알아보자! 나는 버튼을 누름에 따라 모달창이 나타나게 하려고 한다.1. 만들고자 하는 UI의 html,css 마크업을 해놓는다.function App() { return ( 모달 보여주세요 모달창입니다 );}먼저 만들고자 하는 UI의 마크업 먼저 해준다. 나는 '모달 보여주세요' 버튼을 누르면 모달.. 자바스크립트 this 개념 뽀시기 : this는 왜 쓰는 걸까?! 1. this난 자바스크립트를 배우면서 this만 보면 머리가 아픈 사람이었고 대충 문맥에 맞게 해석했었는데 뭔가 찜찜했었다. 이참에 싹 정리해서 편안하게 사용하기로 했다! 1) this의 개념자바스크립트에서 this는 '자기 참조 변수' 이다. 자신이 속한 객체를 참조하거나 자신이 생성할 인스턴스를 가리킨다.예를 들어 다음과 같은 코드가 있을 때 this는 객체 person에 속해있으므로 person을 의미한다. this는 어디서든 사용이 가능하다. 다만 전역에서 사용하면 별 의미가 없을 뿐이다.const person={ data1:10, data2:20, sum(){ console.log(this.data1+this.data2); }this는.. 이전 1 2 3 4 5 6 7 다음
