프로젝트5 [JS] 숫자야구게임 기능 구현하기 (2) - MVC 패턴 적용 - Model, View, Controller로 구성된 디자인패턴- Model -> 게임 기능에 관한 로직을 처리한다.-> 결과값을 Controller에게 전달한다.-> view와 Controller에 대한 정보를 가지고 있지 않는다.- View-> UI를 보여주는 역할을 한다.-> 이때 모델이 처리한 결과를 가지고 화면을 출력하며 이 데이터는 Controller에서 받아온다.- Controller-> 사용자의 입력에 반응한다.-> Model과 View 사이에 존재하며 데이터를 전달한다 - 이전 코드우선 지난번에 MVC는 고려하지 않고 기능만 고려를 해서 더럽게 짰던 코드를 수정하여 바꿔보도록 하겠다. 아래 링크로 가면 이 전 코드를 확인할 수 있다.https://zldn.tistory.com/86 [J.. 2025. 3. 22. [JS] 숫자야구게임 기능 구현하기 (1) 그동안 제대된 동아리나 협업활동을 해본적이 없었는데 올해 프론트엔드 분야로 공부를 해보고 싶어 새롭게 동아리를 들어갔다. 항상 혼자서 이리저리 조금씩 껄떡대며 공부를 하긴 했었지만 아무래도 혼자 하다보니 방향도 안 잡히고 지체가 돼서 답답함이 많았다. 사실 계획하고 동아리를 들어간 것이 아니라 무작정 열심히 살아보자 라는 마음으로 들어간 동아리였지만 너무나도 만족스럽다.물론 아직 2주차지만...!! 함께하는 사람들도 다 너무 좋고 많은 것을 배워갈 수 있을것만 같은 기대감이 가득하다.매주 월요일에 스터디가 있고 금주 금요일까지 미션을 제출하면 주말에는 멘토님과 외부 리뷰어로부터 코드리뷰를 받을 수 있고 코드에 대해 서로 이야기를 나누며 더 좋은 코드로 발전해나갈 수 있었다. 모르는게 많아서 걱정이 많은 .. 2025. 3. 22. 3. 이용약관에 대한 회원가입 페이지 만들기 - 다음 사진과 같이 이용약관에 대하여 페이지를 구성함- 이용약관의 내용 부분의 경우 생략하여 일부 내용만 추가하였기에 추후 사용시에는 변경해야 함 >> form 태그 내의 input 태그의 checkbox 타입 이용- 이용약관 동의를 받기 위해 checkbox를 이용했다.- 이는 활성화시 체크되어있는 박스로 렌더링 하는 기능을 가진다.- 를 작성하여 쓸 수 있다. >> overflow:scroll 이용- overflow를 통해 자식요소의 크기가 부모 요소의 크기를 초과했을 때 스크롤바 생성을 제어할 수 있다.- 이용약관의 세부적인 내용의 길이가 너무 길다보니 div 내에 scroll을 달아서 이를 조절했다.- 또한 이용약관 뿐만 아니라 전체적인 폼 태그에 대해서도 height를 정해두고 이를 넘어가면 .. 2024. 10. 20. 2. CSS로 개인정보 입력 회원가입 페이지 화면 디자인하기 - 다음 사진과 같이 css를 추가함- 이전에는 페이지 마지막에 있는 버튼의 값을 가입하기로 했었는데 생각해보니 개인정보입력을 한 후에 약관동의 내용이 필요하다고 생각하여 다음 버튼으로 수정함- 다음을 눌렀을 때 나올 페이지에 대해 만들어야 함 >> felxbox 이용- 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변화할때 효율적으로 요소를 배치시킬 수 있다.- flexbox는 display:flex 속성을 줌으로써 만들 수 있다.- 나는 form 태그 내에 작성한 모든 글들에 대해서 컬럼을 기준으로 가운데 정렬을 하도록 했다.- 다음과 같이 작성하면 가운데 정렬이 된다.display: flex;flex-direction: column;justify-content: center;align-items: .. 2024. 10. 20. 1. HTML로 회원가입 페이지 구성하기 >> 우선은 따라할 페이지를 찾기- 그 페이지에서 우클릭 후 검사를 띄울 수 있음- 그 페이지를 이루고 있는 html 확인 가능 -> 이를 참고해서 회원가입 페이지를 만들 수 있다ex) 네이버 회원가입 페이지 - 다음 사진과 같이 html으로 구성을 해둠- css를 통해서 좀 더 보기 좋게 만들어야 함 >> form 태그- 전체를 form 태그로 감싸서 submit 버튼을 사용하도록 했다.(submit은 form 태그 내애서만 유효함)- 처음에 form 태그 없이 submit 버튼을 사용해서 제출이 안되는 일이 있었는데 form 태그가 없음을 파악하고 넣어주었다. >> div 태그- 각각의 요소들 사이에 줄바꿈이 일어나도록 하기 위해 div로 나누어 작성했다. >> label 태그- input 태그에 대.. 2024. 9. 26. 이전 1 다음
