깃헙 페이지: https://github.com/whansoo/KDT4-M4public배포 사이트: https://kdt4-team7--hilarious-kleicha-d49179.netlify.app/주어진 api를 가지고 쇼핑몰을 만들어 보았습니다
검색 페이지를 만들다가 input창에 제목을 입력 할 때마다 화면이 깜빡이는 느낌을 받았다. 그래서 콘솔로그를 찍어보니 제목을 입력 할 때마다 api를 계속 호출 하겠다는 생각이 들었다. 이것의 문제는 한 글자 칠 때마다 api가 계속 호출 되는 것인데, 이와 같은 낭
4차 과제를 시작하고 11일이 지났다. kream 사이트를 클론 코딩 하기로 정하고 그 주에는 먼가 빨리 진행 되는 듯 싶었는데 2주차가 되었을 때는 아무래도 kream을 다 따라 하려다보니 상품 목록 별로 보여주는 페이지가 많았다. 그러다 보니 실제 중요한 기능구현을
이번 4차 과제는 팀프로젝트 이다. 팀 프로젝트라서 그런지 주어진 api들이 많이있었고 이것을 이용하여 사이트를 만드는 것인데 주어진 api대부분이 거래 관련된 api들이 많아서 우리팀은 쇼핑몰을 만들기로 했다. 처음에는 디자인 시안을 사서 그것을 토대로 만들려고 하였
안녕하세요 모두의 희망 입니다. 이번에는 react에 typescript를 적용하면서 공부 했던 내용을 간단하게 web게임으로 만들어 보았습니다.프로젝트 사이트: Web Game
모멘텀2안녕하세요 모두의 희망 입니다. 이번에는 Momentum ToDo List라는 것을 만들어 보았습니다. 전체적으로 구글 Momentum의 깔끔한 디자인을 착안해서 최대한 비슷한 느낌으로 만들어 보았습니다.이 프로젝트에는 로그인을 하면 현재 날씨와 위치 그리고 시
완성 사이트 : Movies-Info메인화면연도별검색더보기 버튼 클릭후 이미지 리스트 생성상세페이지omdb api를 사용하여 서버의 응답 데이터 들을 가져오고 그것을 다시 화면에 이쁘게 보여 줄 수 있도록 고민 하고 공부를 하였습니다.상세페이지를 구현 했을 때 또 다른
원본페이지 : BBC News 바로가기데모사이트 : DEMOBBC11.이미지와 아이콘 다운을 받는다.검사도구(F12)에서 네트워크에 들어가 img를 누르면 이미지들을 다운 받을 수 있다.아이콘이 없다면 구글 아이콘이나 다른 사이트를 이용하여 비슷한 아이콘을 가져와서 사
Front-End Developer개발 2022.01 ~ 2022.02🔗 LinksGithub https://github.com/whansoo/starbucksNetlify Starbucks Coffee Korea (confident-knuth-570c2d
3차 과제도 무난하게 구현 하여 제출을 하였다. 3차 과제에서는 todo api를 사용하여 CRUD를 하는 거였는데 나는 노마드 코더를 공부 중에 있어서 거기에서 배우는 Momentum 컨셉으로 가면 어떨까 하는 생각에 같이 접목시켜서 구현을 하였다. 그냥 todo l
위의 코드에서 readonly라는 속성 때매 aaaa.a = '123';으로 코드를 작성 했을 때 123으로 바뀌어야 하는데 바뀌지 않는다 읽기 전용 속성속성을 실수로 바꿀 때 이를 막아 줄 수 있다.어떤 속성이든 상관 없고 값이 모두 string이였으면 좋겠다면 일일
매개변수 a가 number 또는 string이므로 이것을 if문을 사용하여 어떤 타입인지 지정해야 한다. 타입스크립트가 if문으로 number로 지정 하였으면 else까지 알아서 타입 지정을 해준다.원시값일 때는 typeof를 사용한다.배열인지 아닌지 구별하기 위해서
2차 과제가 끝났고 이제 3차 과제가 주어졌다. 2차 과제는 간단하게 api사용 하여 영화 정보를 볼수있는 그런 사이트를 만들었었는데 이번에는 api를 5개 사용 하여 투두리스트를 만드는 과제였다.과제 내용은 다음과 같다.!과제 기한:과제 수행 기간: 2023년 01월
이번에는 영화 api를 가져와서 영화 검색시 영화 목록이 나오게 하는 그런 과제 였다.저번 과제보다는 javascript코드가 들어가서 더 어렵게 느껴졌고 공부의 필요성을 많이 느꼈다.완성 사이트 : Movies-Info메인화면연도별검색더보기 버튼 클릭후 이미지 리스트
위의 update 버튼을 누르면 시간이 1씩 증가하는 코드.useState Hook 가져오기useState Hook을 React에서 가져온다.useState를 호출하는 것은 “state 변수”를 선언할 수 있다는 의미이다. 위에 선언한 변수는 time이라고 부르지만
const b: unknown = a.talk();unknown은 지금 당장 타입을 모르겠다라는 뜻.unknown은 나중에 타입을 지정해서 쓸 수 있다. unknown도 없는게 좋다..const b: any = a.talk();any를쓰면 타입을 포기하겠다 라는 뜻
리액트의 컴포넌트는 라이프 사이클(생명주기)가 존재한다.라이프 사이클은 Mounting(생성 될 때), Updating(업데이트 할 때),Unmounting(제거 할 때) 세가지로 나뉜다.▪ Mounting : DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고
잉여속성 검사 변수 따로 빼지 않음객체 리터럴에서는 잉여 속성 검사라는게 있다.잉여 속성 검사로 인하여 interface A에는 a속성만 들어있는데 obj1에 b속성을 넣었더니 에러가 발생했다.잉여속성 검사 변수 따로 뺀 버전 중간에 obj를 따로 변수로 빼면 처음에
A는 넓은 범위 이고 B는 좁은 법위이다. B가 A로 대입 가능하지만 A는 B로 대입이 불가능 하다.C는 B와 비교하면 C가 B보다 더 좁은 타입이다. C는 string과 number 둘다 만족해야 하기 때문에 교집합이라고 생각하면 더 좁은 범위이다.위의 객체 A,B와