profile
개발을 진정성 있게 다가가겠습니다.
post-thumbnail

프론트엔드 부트캠프 11주차 후기 - 4차 과제 (패캠)

깃헙 페이지: https://github.com/whansoo/KDT4-M4public배포 사이트: https://kdt4-team7--hilarious-kleicha-d49179.netlify.app/주어진 api를 가지고 쇼핑몰을 만들어 보았습니다

2023년 3월 6일
·
0개의 댓글
·
post-thumbnail

프론트엔드 부트캠프 10주차 후기 - 4차 과제 진행중(패캠)

검색 페이지를 만들다가 input창에 제목을 입력 할 때마다 화면이 깜빡이는 느낌을 받았다. 그래서 콘솔로그를 찍어보니 제목을 입력 할 때마다 api를 계속 호출 하겠다는 생각이 들었다. 이것의 문제는 한 글자 칠 때마다 api가 계속 호출 되는 것인데, 이와 같은 낭

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

프론트엔드 부트캠프 9주차 후기 - 4차 과제 진행중(패캠)

4차 과제를 시작하고 11일이 지났다. kream 사이트를 클론 코딩 하기로 정하고 그 주에는 먼가 빨리 진행 되는 듯 싶었는데 2주차가 되었을 때는 아무래도 kream을 다 따라 하려다보니 상품 목록 별로 보여주는 페이지가 많았다. 그러다 보니 실제 중요한 기능구현을

2023년 2월 17일
·
0개의 댓글
·
post-thumbnail

프론트엔드 부트캠프 8주차 후기- 4차 과제 (패캠)

이번 4차 과제는 팀프로젝트 이다. 팀 프로젝트라서 그런지 주어진 api들이 많이있었고 이것을 이용하여 사이트를 만드는 것인데 주어진 api대부분이 거래 관련된 api들이 많아서 우리팀은 쇼핑몰을 만들기로 했다. 처음에는 디자인 시안을 사서 그것을 토대로 만들려고 하였

2023년 2월 8일
·
0개의 댓글
·
post-thumbnail

Typescript web game

안녕하세요 모두의 희망 입니다. 이번에는 react에 typescript를 적용하면서 공부 했던 내용을 간단하게 web게임으로 만들어 보았습니다.프로젝트 사이트: Web Game

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

Momentum-ToDoList Project

모멘텀2안녕하세요 모두의 희망 입니다. 이번에는 Momentum ToDo List라는 것을 만들어 보았습니다. 전체적으로 구글 Momentum의 깔끔한 디자인을 착안해서 최대한 비슷한 느낌으로 만들어 보았습니다.이 프로젝트에는 로그인을 하면 현재 날씨와 위치 그리고 시

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

영화 검색 사이트 Project

완성 사이트 : Movies-Info메인화면연도별검색더보기 버튼 클릭후 이미지 리스트 생성상세페이지omdb api를 사용하여 서버의 응답 데이터 들을 가져오고 그것을 다시 화면에 이쁘게 보여 줄 수 있도록 고민 하고 공부를 하였습니다.상세페이지를 구현 했을 때 또 다른

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

BBC-News Clone Project

원본페이지 : BBC News 바로가기데모사이트 : DEMOBBC11.이미지와 아이콘 다운을 받는다.검사도구(F12)에서 네트워크에 들어가 img를 누르면 이미지들을 다운 받을 수 있다.아이콘이 없다면 구글 아이콘이나 다른 사이트를 이용하여 비슷한 아이콘을 가져와서 사

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

Starbucks Clone Project

Front-End Developer개발 2022.01 ~ 2022.02🔗  LinksGithub https://github.com/whansoo/starbucksNetlify Starbucks Coffee Korea (confident-knuth-570c2d

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

프론트엔드 부트캠프 7주차 후기- 3차 과제 완료 (패캠)

3차 과제도 무난하게 구현 하여 제출을 하였다. 3차 과제에서는 todo api를 사용하여 CRUD를 하는 거였는데 나는 노마드 코더를 공부 중에 있어서 거기에서 배우는 Momentum 컨셉으로 가면 어떨까 하는 생각에 같이 접목시켜서 구현을 하였다. 그냥 todo l

2023년 1월 30일
·
0개의 댓글
·
post-thumbnail

readonly, 인덱스드 시그니처, 맵드 타입스

위의 코드에서 readonly라는 속성 때매 aaaa.a = '123';으로 코드를 작성 했을 때 123으로 바뀌어야 하는데 바뀌지 않는다 읽기 전용 속성속성을 실수로 바꿀 때 이를 막아 줄 수 있다.어떤 속성이든 상관 없고 값이 모두 string이였으면 좋겠다면 일일

2023년 1월 25일
·
0개의 댓글
·
post-thumbnail

타입 좁히기(타입 가드)

매개변수 a가 number 또는 string이므로 이것을 if문을 사용하여 어떤 타입인지 지정해야 한다. 타입스크립트가 if문으로 number로 지정 하였으면 else까지 알아서 타입 지정을 해준다.원시값일 때는 typeof를 사용한다.배열인지 아닌지 구별하기 위해서

2023년 1월 24일
·
0개의 댓글
·
post-thumbnail

프론트엔드 부트캠프 6주차 후기- 3차 과제 (패캠)

2차 과제가 끝났고 이제 3차 과제가 주어졌다. 2차 과제는 간단하게 api사용 하여 영화 정보를 볼수있는 그런 사이트를 만들었었는데 이번에는 api를 5개 사용 하여 투두리스트를 만드는 과제였다.과제 내용은 다음과 같다.!과제 기한:과제 수행 기간: 2023년 01월

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

프론트엔드 부트캠프 5주차 후기- 2차 과제 완료(패캠)

이번에는 영화 api를 가져와서 영화 검색시 영화 목록이 나오게 하는 그런 과제 였다.저번 과제보다는 javascript코드가 들어가서 더 어렵게 느껴졌고 공부의 필요성을 많이 느꼈다.완성 사이트 : Movies-Info메인화면연도별검색더보기 버튼 클릭후 이미지 리스트

2023년 1월 13일
·
0개의 댓글
·
post-thumbnail

React Hooks 시리즈 - useState(2)

이름을 입력 했을 때 추가되는 기능 구현

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

React Hooks 시리즈 - useState(1)

위의 update 버튼을 누르면 시간이 1씩 증가하는 코드.useState Hook 가져오기useState Hook을 React에서 가져온다.useState를 호출하는 것은 “state 변수”를 선언할 수 있다는 의미이다. 위에 선언한 변수는 time이라고 부르지만

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

unknown과 any(타입 대입가능표)

const b: unknown = a.talk();unknown은 지금 당장 타입을 모르겠다라는 뜻.unknown은 나중에 타입을 지정해서 쓸 수 있다. unknown도 없는게 좋다..const b: any = a.talk();any를쓰면 타입을 포기하겠다 라는 뜻

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

React hooks 시작하기

리액트의 컴포넌트는 라이프 사이클(생명주기)가 존재한다.라이프 사이클은 Mounting(생성 될 때), Updating(업데이트 할 때),Unmounting(제거 할 때) 세가지로 나뉜다.▪ Mounting : DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고

2023년 1월 9일
·
0개의 댓글
·
post-thumbnail

잉여 속성 검사, void의 사용법

잉여속성 검사 변수 따로 빼지 않음객체 리터럴에서는 잉여 속성 검사라는게 있다.잉여 속성 검사로 인하여 interface A에는 a속성만 들어있는데 obj1에 b속성을 넣었더니 에러가 발생했다.잉여속성 검사 변수 따로 뺀 버전 중간에 obj를 따로 변수로 빼면 처음에

2023년 1월 9일
·
0개의 댓글
·
post-thumbnail

좁은 타입과 넓은 타입

A는 넓은 범위 이고 B는 좁은 법위이다. B가 A로 대입 가능하지만 A는 B로 대입이 불가능 하다.C는 B와 비교하면 C가 B보다 더 좁은 타입이다. C는 string과 number 둘다 만족해야 하기 때문에 교집합이라고 생각하면 더 좁은 범위이다.위의 객체 A,B와

2023년 1월 9일
·
0개의 댓글
·