본문 바로가기

분류 전체보기133

MVC 란?? mvc --> model view controller의 준말이다 사용자 인터페이스, 데이터 구현하는데 사용되느 소프트웨어 디자인 패턴이라고 부르는데 각각의 역할을 부여해주고 데이터를 처리를 해준다고 볼 수 있다 디자인 패턴이란? 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리하는 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 "규약"을 통해 쉽게 쓸 수 있는 형태로 만든 것을 말한다. 1. 모델 (모델) : 데이터와 비즈니스 로직을 관리합니다. 2. 뷰 : 레이아웃 화면을 처리하는 역할을 한다 3. 컨트롤러 : 명령을 모델과 뷰 부분으로 라우팅해주는 역할 다음그림을 본다면 사용자가 controller을 제어하는과정에서 model에 있는 데이터를 가져오게되고 그 정보.. 2023. 5. 20.
Front porject 6일차 오늘 한 것 1. 선수들의 상세페이지 (각 선수의 정보를 그대로 따와야함) 파라미터를 이용 2. Ticket 페이지에 홈경기일정 1주일정보를 가져와서 scroll기능을 사용하여 나타내기 선수들의 상세페이지를 어떻게 가져와야하나...이걸 젤 많이 고민한것같습니다. 선수들의 더미데이터는 있지만 다른 컴포넌트로 옮기는걸 어떻게해야하나에 대한 고민을 많이했는데 useLocation이라는 처음보는 react기능을 알게되어서 사용하게 되었습니다. 일단 컴포넌트에 파라미터를 부여해서 각선수에 대한 고유한 정보를 Get해줘야하는데 그 상황에서 쿼리스트링을 하는방법이 useLocation()을 사용한다 [React] useLocation 으로 쿼리 파라미터 취득 방법(URLSearchParams 활용) (tistory... 2023. 4. 22.
Front project 5일차 오늘은 포지션별로 선수들의 더미데이터를 가져와 선수들을 보여주고 선수들의 2023기록을 상세히 보이게끔해주는 페이지를 만들어보았다. 야구선수는 타자와 투수로 나뉜다. 그리고 타자는 외야수 내야수 포수로 나뉘게 되는데 이 부분을 잘생각하면서 페이지를 성시켜줘야한다. 총 4개의페이지를 생생해주어 투수와 타자의 포지션별로 생성해주었다 블로그 길이 특성상 투수포지션의 데이터들만 리뷰하도록 하겠습니다. 코드는 다음과같습니다. Rankl와 마찬가지로 선수의 데이터를 useState와 useEffect를 통해서 가져와 저장을 시켜주고 map함수를 돌려서 데이터를 하나씩 넣어주면된다 선수들의 데이터이다 이미지, 등번호, 포지션, 경기수, 승/패 등등 여러가지의 데이터를 가지고 내가 임의로 생성한 레이아웃에 넣어준다. .. 2023. 4. 22.
Front porject 4일차 오늘은 서브페이지중에서 선수기록 및 소개창을 만들어보았습니다. 야구선수의 포지션에는 총 5가지로 분류가되어있습니다. 감도/코치, 투수, 내야수, 외야수, 포수로 구성이되어있는데, 선수들의 포지션별로 선수가나열이되는 페이지를 만들어보았습니다. 아 그리고 그전에 react에서 컴포넌트태그로 여러페이지로 나눌수가있는데 오늘은 Route를 통해서 서로 연결을 시켜주는 작업을 해주어 페이지정리를 해주었습니다. npm install react-route-dom을 설치를 해주었습니다 그 뒤에 화면에 출력되는 app를 BrowserRouter에 감싸주었고 app안에있는 여러페이지들의 경로를 다 정리해주었다. 특히 네비게이션바, 소셜미디어고정창, 풋터를 고정이기에 Route밖에 빼주었다. 자 그럼이제 선수소개페이지를 만.. 2023. 4. 22.
Front project 3일차 3일차 1 .슬라이드 쇼 적용 2. 고정Logo 생성 3. Rank생성하여 순위표시해주기 및 나머지 css꾸미기 1. react-slick를 통해서 경기일정 슬라이드쇼를 생성해주었습니다. 1주일에 경기가 6경기가 열리는데 그 경기수만큼 슬라이드쇼에 적용하여 자연스럽게 메인페이지에 보이게끔해주었습니다. (데이터는 위에놓았음) 다음과 같이 슬라이드쇼가 적용을 하게되어 경기일정이 하나씩 자동으로 넘어가게된다. 2. LOGO고정 KT위즈 팀의 소셜미디어는 페이스북 유튜브등 여러가지로 널리 팬들에게 이끌고있다. 그래서 사용자입장에서 쇼셜미디어로 한번에 연결해주는 고정로고가 있으면 좋을것같다는 생각이 들었다. 핵심 : 화면이 스크롤이 되어도 아이콘들이 계속해서 고정이되어야함. 다음과 깉이 Logojs를 생성하여 여.. 2023. 4. 22.
Front-project 2일차 드롭다운박스를 만들기위해서 시도를했는데 javascript를통해서 이벤트까지 주었다 드롭다운은 다음사진과 같이 만들어주었다 . 메뉴판도 만들어줬고 다음과같이 밑에 서브메뉴들도 나오게이벤트를추가해주었다 코드는 다음과같다 jquery $(function(){ var $firstmenu = $('#container > div > div.nav > ul > li'), $header = $('#container > div > div.nav'); $firstmenu.mouseenter(function(){ $header.stop().animate({height : '300px'},300) }) .mouseleave(function(){ $header.stop().animate({height : '50px'},300.. 2023. 4. 16.

티스토리툴바