스터디 로그

[ 배경 ] 세전이자까지 구했으니, 이제 이자수익에 해당하는 과세금액을 구하고, 이를 토대로 최종값인 세후수령액까지 구해보자. [ 개요 ] 과세방식은 3가지 이다 일반과세: 15.4% 비과세: 0% 세금우대: 사용자 직접 입력 형식 각 경우에 따라 과세금액이 달라진다는 점에 주목하여 switch문을 통해 각 과세금액을 구한다. 마지막으로 세전 수령액에서 과세금액을 차감한 금액인 세후수령액을 구한다. 드디어 switch문이 나왔다! 자주 사용하지 않았는데 이 기회에 다시 배우고 실제로 사용해볼 수 있어서 좋았다! [ HTML ] 먼저 생각해 볼 것은, 일반과세/비과세/세금우대 radio를 "어떻게" 구분할 것인가 라는 지점이다. 여러 방법이 있겠지만, 앞서 개월수/연수 구분과 마찬가지로 input안에 va..

Study with me 2023. 7. 4. 16:53

[ 배경 ] 사용자가 이자율을 직접 입력하는 구조이기 때문에 입력한 input값을 가져오고, 백분율로 환산한 후 이자를 구하는 공식에 대입하면 된다. (% 제외하고 입력하면 된다. 디자인에 조금 더 추가를 하자면 input 배경으로 우측에 %를 적어두면 좋을 것 같다) [ 개요 ] 사용자가 작성한 이자율을 가져온다. 이자율을 백분율로 환산한다. 적금이자공식에 값들을 대입하여 세전이자 값을 구한다. 원금합계에 세전이자를 더해 세전수령액을 구한다 [ 적금이자 구하는 공식 ] 적금 이자 구하는 공식은 구글링을 통해 적당해 보이는 것으로 가져왔다. 혹은 chatGPT를 통해 알아보는것도 좋겠다. 적금이자 공식: 월적립금 x 적립개월수 x (적립개월수 + 1)/2 x 이자율/12 [ js ] 앞서 월적립금은 변수..

Study with me 2023. 7. 4. 14:21

[ 배경 ] 현재까지 1) 매월 적립금, 2) 과세형식(일반과세, 비과세, 세금우대) 선택 까지 작업했다. 이제 계산에 들어갈건데, 아직 작성하지 않은 요소들이 있는데 이것들을 다 계산 함수에 집어넣을것이다. 그래서 꽤나 길어질테니 잘 정리해두자. [ 개요 ] 적립기간을 설정한다. 개월수 혹은 연수 설정이 가능하다. 기본적으로 개월수를 따르며, 연수로 작성하면 * 12로 계산식을 만든다. 위의 적립기간을 통해 적립원금합계를 구한다. 적립원금합계를 통해 세전이자를 구한다. 사용자가 작성한 이율을 토대로 한다. 따라서 작성한 이율의 값을 가져오도록 한다. 세전 수령액을 구한다. 세전 이자를 바탕으로 이자과세값을 구한다. 이자과세 방법은 아래와 같다. 일반과세 : 15.4% 비과세 : 0% 세금우대 : 사용자..

Study with me 2023. 7. 4. 13:49

[ 배경 ] 디자인 변화라고 적긴 했지만, input[type="radio"] 중 일부가 선택되었을 때 다른 엘리먼트가 가려지거나 보여지는 효과를 주고싶은 것이 목적이다. 이번 토이프로젝트에서 구체적으로 설명하자면, 연이자율에서 일반과세, 비과세일 경우는 우대세율을 적은 input창이 가려져있고, 세금우대를 선택했을 경우에만 우대세율을 직접 입력하는 형태로 하고싶었다. [ 개요 ] 3개의 input[type="radio"]가 있는데, 이 중 일반과세, 비과세일 경우는 우대세율 작성 input을 보여주지 않는다 하지만 세금우대를 선택했을 경우 우대세율 작성 input을 보여준다. [ css ] 앞서 작성한 스타일에 미리 만들어두었지만, 다시 한 번 특정 부분을 짚고 넘어가쟈. .item-preferenti..

Study with me 2023. 7. 4. 11:58

[ 배경 ] 탭 기능까지 완료했고, 이제 input에 숫자를 적으려니, 세 자리마다 쉼표가 없어서 가독성이 떨어진다. 그래서 세자리마다 쉼표를 붙이고 싶다. [ 개요 ] 작성하는 input을 선택한다 input창에 작성된 값을 가져온 후 그 값의 세 자리수 마다 쉼표를 찍어 반환한다. [ 작성하는 input 선택 ] 적금, 예금, 대출 별로 양식이 제각각 달라서 id도 각각 다르다. 우선 적금 양식부터 시작해본다. const monthlySave = document.querySelector("#monthlySave"); [ input 창에 작성된 값을 가져오기 ] 위에서 선택한 input에 이벤트리스너를 작성한다. keyup 이벤트를 사용했다(input이벤트를 사용해도 된다). monthlySave.ad..

Study with me 2023. 7. 4. 11:31

[ 배경 ] 아직 확정난 것은 아니지만, 향후 작업할수도 있는 기능인 금리 계산기. 공부할 겸해서 미리 시간있을 때 토이프로젝트로 이자계산기를 만들고 있다. [ 개요 ] 적금, 예금, 대출 계산기를 만든다. 각 항목을 보여주는 방법으로 tab 기능을 사용한다. 이자계산법 적금: 단리 예금: 단리, 연복리 대출: 상환 방법으로 원리금 균등상환, 원금균등상환, 원금만기일시상환으로 나눈다. 금액을 적는 양식은 form 으로 감싸진 input태그를 사용한다. 이 때 가급적이면 접근성을 고려해 label을 꼭 사용한다. 세금계산법 일반과세: 15.4%, 비과세: 0, 세금우대: 우대세율 직접 적는 input 예치기간/대출기간 개월수 혹은 연수를 적을 수 있도록 한다. 결과물을 아래의 결과창을 통해 확인할 수 있도..

Study with me 2023. 7. 3. 17:40

왜 리덕스 등 상태관리 툴을 사용해야 하는가?에 대한 대답은 코딩애플님 영상을 참고! https://youtu.be/QZcYz2NrDIs 오늘은 기본 세팅부터 count를 하는 기본 예제를 만들어봅니다. https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 설명은 Dave Gray님의 영상을 바탕으로 합니다. 몇 개월 전 영상이라 최신 버전과 다소 상이한 부분이 있을 수 있습니다. https://youtu.be/u3KlatzB7GM 기본 세팅 1) 프로젝트를 만들고 redux를 설치합니다. npm install @reduxjs/toolkit ..

Study with me 2023. 2. 9. 16:09

해당 포스팅은 Dave Gray님의 영상을 보고 정리한 글입니다. React-Query - Infinite Queries https://react-query-v3.tanstack.com/guides/infinite-queries Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. TanStack Query supports a useful version of useQuery called useInfiniteQuery for querying thes..

Study with me 2023. 2. 7. 22:59