typescript15 자바 웹 공부 39 - typescript + React(홈페이지) 마지막 어제 아래 사진처럼 세로로 나오기까지 만들었다. 이것을 가로로 만들어 주기 위해 이렇게 가로로 만들어 줬다. 이제는 댓글 차례다. LikeListItem아래에 가서 이렇게 세팅한 후 각각의 성질을 넣어보자 맨 위 Box속성을 일단 없앴고 Box 하나를 지워줬다. interface index로 가서 mock index로 가서 이렇게 해주고 복사해서 여러개를 만들어주자 (나는 22개를 만들었다) 만들어 주고 CommentListItem으로 가서 Stack안에 있는 녀석들을 긁어서 만든 곳에 넣어주자 긁어간 곳에는 없애고 CommentListItem을 넣어주자 BoardDetailView로 가서 저걸 넣어주고 paging.hook으로 가서 이렇게 바꿔주고 DetailView에서 아래에 가서 저렇게 바꿔줘야 한.. 2023. 2. 23. 자바 웹 공부 38 - typescript + React(홈페이지) 만들어주고 rfc App.tsx로 가서 이쪽으로 가서 detail로 바꿔주자 눌러주면 이렇게 뜨게 된다. 만들어주고 MUI -> Menu 코드를 참고하고 material icons에서 하나 더 들고 오자(자신이 원하는 거) 나는 이거 사용하겠다. 이렇게 까지 코드를 추가하면 뭐가 생긴 것을 확인가능하다. 이 상태에서 useState에 ! menuOpen 말고 true, false로 바꿔주자 그러면 여기에서 다른 곳을 클릭했을 때 사라지는 것을 확인할 수 있다. MenuItem에 색을 줬고 위에 있는 Box에 여러 칸을 또 나누고 Divider를 줬다.(아직 안보임) 살짝 보인다. 넣은 뒤 mui 가서 자신이 원하는 거 들고 오자 박스 2개를 더 만들고 각각 필요한 것들을 넣고 flex, mr를 줬다. 이.. 2023. 2. 22. 자바 웹 공부 37 - typescript + React(홈페이지) 어제 너무 중구난방으로 끝내서 아주 조금 설명을 추가해 보자 MyPageContents 부분 mock index로 가서 ctrl + f를 눌러서 작성자 2를 자신이 원하는 닉네임으로 바꾸자 다시 MyPageContents로 가서 Grid 쪽에 가서 stack을 채워 넣자 이렇게 해주면 마이페이지에 들어가면 데이터가 들어가 있다. 원래 내 게시물 10이라는 곳에 10을 없애고 코드를 넣어주면 나의 경우 36개를 넣어놨기 때문에 12개가 나온다. 아래로 내려와서 지금 내가 하고 있는 것은 MainContents에서 했던 것들이다. 기억이 안 나서 코드를 참고했다. 아래로 내려와서 보면 게시물이 12개이고 한 페이지당 5개씩 나와야 하니 3페이지까지 나온다 그냥 /myPage라고 검색했을 때는 당연히 들어와 .. 2023. 2. 21. 자바 웹 공부 36 - typescript + React(홈페이지) 저번 주 금요일까지 검색하는 기능을 만드는 거 까지 했었다. 이쪽으로 가서 Stack쪽에 추가해주자 이렇게 해주고 박스에다가 이제 연관검색어 쪽을 바꿔보자 ctrl + 클릭해서 mock index.ts 맨 아래로 가서 만들어주고 interfaces로 가서 다시 mock으로 돌아와서 추가 mock으로 돌아가서 근데 profile이 없다 방법은 2가지인데 profile: ''을 넣거나 interface로 돌아가서 profile?: string을 해주면 된다. 나는 ? 넣는 방식을 택했다. LoginCardView로 오랜만에 돌아와서 이렇게하면 화면에 저 2가지가 뜰텐데 이건 법적상으로 막아놨다고 한다. 그래서 2가지 중 하나라도 틀렸을 때만 오류를 뜨게 해주자. PopularCard에 코드 추가 Search.. 2023. 2. 20. 자바 웹 공부 35 - typescript + React(홈페이지) 오늘도 기능을 계속 추가해 보도록 하자 우선 search기능을 만들어줘 보자 코드를 추가 후 App.tsx로 가서 SearchView를 추가 후 다시 돌아와서 Box를 약간 고쳐주고 opacity를 넣어주자(opacity는 1이 최대이다.) 토트넘을 눌러서 저렇게 바뀌었다. 다른 것을 누르면 다른 것이 ~~에 대한 ~~ 로 바뀐다. 클릭을 하지 않고 주소에서 쓰면 바꿔진다. 바뀔 때마다 log를 찍어주는데 저렇게 제목 3을 찍어주면 console에서 length가 10이 찍히는 것을 볼 수 있다. 아래에 Box 쪽에 좀 고쳐주고 위로 가서 넣어주고 이렇게 하고 홈페이지로 돌아와서 이렇게 달라진다. 코드를 쳐봤는데 너무 반복된 코드들이 많은 게 문제인 거 같다. 정리를 좀 해주자 utils -> index.. 2023. 2. 17. 자바 웹 공부 34 - typescript + React(Router, 홈페이지) 어제 하던 것 이어서 하자 컴포넌트에 새 파일, 새 폴더 만들어주고 MainContents의 index로 가서 Mui로 가서 material UI로 들어가서 chip으로 가자 mock index.ts에서 처음에 만들었던 거 총 {} 3개를 아래에 이걸 만들어 준 뒤 아래에 총 10번 (30개)를 복사해주자 MainContents index에서 BoardListItem으로 와서 mainContents 로 돌아와서 사진이 없다면 저 공간을 없애버릴것이다. boardListItem으로 와서 사진이 없으니 사라졌다. MainContents로 가서 을 추가해주자 페이지에 30개를 넣었었는데 이제 한 페이지에 5개만 나오게 할 것이다. 이렇게 하면 바로 안나오고 1을 눌러야 뜨게 된다. 일단 useEffect에 값.. 2023. 2. 16. 이전 1 2 3 다음
