자기계발 캠퍼스

- HTML 글씨가 넣을 부분만 세팅하고 그 외에는 아무것도 없다. - CSS 내리는 눈 을 만드는 CSS 파일이다. border-raidus로 둥글게 만들어준 다음 position은 absolute로 선언해준다. fall이라는 애니메이션은 맨 위에서부터 맨 아래까지 내려오도록 translateY(100vh)을 선언했고 땅에 닿으면 눈이 안 보이게 opacity도 설정을 해주었다. - JS 이게 눈을 만드는 함수를 JS로 불러온다. 1. 위치 위치를 랜덤으로 설정해주기 위해서 Math.random과 window.screen.width를 사용하였다. 2. 애니메이션 설정 눈이 한 번에 내리지 않고 하나씩 내리게 하기 위해 delay를 랜덤으로 설정했다. opacity도 랜덤으로 설정하여 각기 다른 눈이 내..

7월 1주차 스프린트 회고 - 미국주식 주가조회 웹사이트 1일차 기획 단계. 1주일동안의 스프린트 주제를 정하는 거다보니 어디까지 해야될지 감도 잘 안 오고 어떤 걸 활용해야 될지도 잘 모르겠었다. 특히 API를 활용하여 웹사이트를 만들려고 컨셉을 selfdevelopcampus.tistory.com 이번 달 초에 했던 토이 프로젝트에서 티커를 입력하면 주가를 조회할 수 있는 웹사이트를 만듦. 2주에 걸쳐 추가할 수 있는 부분이 뭐가 있을까 고민했고 업데이트를 완료했다. 먼저 업데이트 사항으로는 - 입력값 유효성 검사 - 데이터 로드와 렌더링 사이의 시간 틈 제거 - SNS 공유 기능 추가 - not found page - loading spinner 추가 입력값 유효성 검사 먼저 유효성 검사를 하기 전..

https://www.youtube.com/watch?v=OPaLnMw2i_0&list=PL6QREj8te1P7gixBDSU8JLvQndTEEX3c3 어떤 스프린트를 해볼까하다가 Next를 좀 더 익숙하게 다뤄보고자 하는 마음에 클론코딩을 하나 더 해보기로 했다. 저번에 했던 포트폴리오 웹사이트인데 전혀 다른 구성과 디자인으로 해보았다. 일단 완성본부터 보자. 솔직히 유튜브 영상 썸네일이 너무 까리해보여서 선택하기는 했음. SPA(single page application)이고 페이지 구성은 -헤더와 푸터 -Hero 섹션 -Projects 섹션 -Technology 섹션 -Timeline 섹션 - Accomplishments 섹션 헤더와 푸터는 그렇게 어려운 부분이 없었다. 컴포넌트를 좀더 잘게 쪼개어 ..

1일차 기획 단계. 1주일동안의 스프린트 주제를 정하는 거다보니 어디까지 해야될지 감도 잘 안 오고 어떤 걸 활용해야 될지도 잘 모르겠었다. 특히 API를 활용하여 웹사이트를 만들려고 컨셉을 잡았는데 비슷한 카테고리의 API임에도 각자 제공하는 정보도 너무 달랐고 고르는 데 애를 먹었다. 그래서 큰 주제만 정했다. 바로 '주식' 가장 관심이 가는 주제를 처음으로 스프린트 해봐야 의지가 잘 살아날 것 같아서 그렇게 정했다. 그래서 github이나 다른 public API들이 뭐가 있을까 찾아보다가 https://www.alphavantage.co/를 활용하기로 결정했다. 문서도 읽기 편해서 접근성이 좋았다. 그래서 여러 개의 데모 json 파일들을 둘러보며 마무리. 2일차 기획 + 삽 푸는 단계 json ..