본문 바로가기

개발/소소한 실습14

타입스크립트로 TodoList 만들기, 교훈 : id는 고유할 뿐만 아니라 어디에도 의존되면 안된다. 레포지토리는 여기 기능 CRUD 완료된 항목과 미완료된 항목을 분리 추가해야하는 기능 항목의 id를 text로 했기 때문에 중복방지 기능을 추가해야한다. 겪었던 문제 : id가 배열에 의존되다보니, 항목을 수정,삭제했을때 엉뚱한 항목에 적용됨. 항목들을 CUD할 때, 항목들을 추적하는 방법으로 고유한 id를 이용했다. { id: 0, text: "강아지 산책", complete: true }, { id: 1, text: "코딩연습", complete: false }, { id: 2, text: "친구랑 놀러가기", complete: false }, 그리고 저 id는 항목이 추가될때마다 배열의 크기+1 로 설정하였다. const addNewTodo = (newTodo: string) => { const n.. 2022. 2. 6.

vanila JS로 캐러셀 만들기 참고문서 : https://velog.io/@grinding_hannah/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EC%BA%90%EB%9F%AC%EC%85%80Carousel-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 깃허브 : https://github.com/ryu9663/css-practice 위의 참고문서를 기본 템플릿으로 해서 만들었다. 가운데 오는 요소는 배경이 하늘색으로 바뀌도록 추가하였다. vanila JS로 만들다보니 그동안 소홀히 했던 DOM 메서드를 다시 복습할 수 있었다. html 5 1 2 3 4 previous next CSS * { margin: 0; padd.. 2022. 1. 30.

graphQL이용하여 축구선수 명단페이지 생성 apollo와 graphQL을 이용하여 간단한 페이지를 만들었다. 아주아주 간단하다. restAPI를 사용하지 않고 graphQL을 이용하여 클라이언트, 서버를 직접 만들었다는 것에 의의를 둔다. 서버 서버 생성은 이 페이지를 참고하고 쿼리가 작동하는지 실험하기 위해 노마드코더에서 배운 graphql-yoga를 사용했다. DB db.js에 다음과 같이 하드코딩하여 데이터를 만들었다. //객체를 여러개 만들기 위해 class를 사용 class Player { constructor(id, nationality, position, name, image) { this.id = id; this.nationality = nationality; this.position = position; this.name = na.. 2022. 1. 23.

날씨앱3 위 목록들은 날씨앱2에서 고칠것들을 적어놓은 목록이다. 우선은 2번이 완료되었다. openweatherAPI의 url을 두개사용하였다. 로딩 동작 새롭게 추가한것들 초기값은 사용자의 위치의 날씨로 설정하였고, 사이드바의 검색창에 도시를 입력하면 그 이후는 그 도시의 날씨가 렌더링되도록 url을 2개 사용했다. 태그를 사용했다. 시간 1초마다 업데이트 영상은 gif만들기 귀찮아서 다음에 한번에 올리도록하겠다. const [time,setTime] = useState('') function getClock(){ const date= new Date(); const hours = String(date.getHours()).padStart (2,"0"); const minutes = String(date.get.. 2021. 11. 28.

이전 1 2 3 4 다음

티스토리툴바