이번 리따배 프로젝트는 달력만들기 입니다. 깃허브 저장소 : https://github.com/jdy0120/frontendproject/tree/master/calender GitHub - jdy0120/frontendproject Contribute to jdy0120/frontendproject development by creating an account on GitHub. github.com 윈도우 시계를 누르면 나오는 달력에 영감을 받아 비슷하게 만들고자했습니다. 11월 1일이 일요일이 아니기 때문에 10월 30,31일 까지 출력된 것을 확인할 수 있습니다. 또 11월 30일이 토요일이 아니기 때문에 12월 1,2,3일까지 출력된 것을 확인할 수 있습니다. 코드 구성은 다음과 같습니다. App..
이번 프로젝트는 아이폰계산기를 디자인한 피그마파일을 보며 리액트로 개발을 진행했습니다. 컴포넌트는 버튼을 클릭하면 출력하는 Screen부분과 모든 버튼들이 모여있는 ButtonBox로 나누어 개발을 진행했습니다. Screen.tsx 컴포넌트 아이폰 계산기에서와 같이 숫자가 길어지면(예를들어 1억단위의 숫자보다 커지면) font-size를 줄여주는 식으로 아이폰 계산기를 따라했습니다. 위 코드를 보듯이 numberLen이 길어지면 그 길이에 따라 font-size가 수정되는 것을 확인할 수 있습니다. 또한 1000단위마다 쉼표를 찍어주는 기능 또한 구현했는데요. 이는 정규식을 이용해 간단히 구현했습니다. ButtonBox.tsx 컴포넌트 버튼들의 나열을 css로 구현할때 grid를 사용했습니다. gird를..
React+Typescript를 이용한 날씨 프로젝트입니다. 지역이름을 적고 '날씨보기' 버튼을 클릭하면 해당지역의 날씨에 맞는 배경화면으로 바뀌는 프로젝트입니다. 프로젝트 시작하기 앞서 데이터를 받아올 수 있는 api가 필요했는데요. https://openweathermap.org/api 위사이트에서 데이터를 받아서 사용했습니다. 저번 프로젝트와 다르게 이번엔 스타일값을 주기 위해 styled-components를 사용했습니다. api를 호출하기 위해 axios를 사용했습니다. npx create-react-app wetherproject --template typescript 로 프로젝트를 진행했으며 assets와 type파일을 집어 넣었습니다. assets는 6가지 배경화면이 들어있으며 pixaba..
유튜브를 보거나 누군가 개발하는 것을 보면 저장함과 동시에 자동정렬이 되는 모습을 본적이 있을 것입니다. 이쁘게 정렬된 코드를 보면 남이 쓴 코드라도 가독성이 높아지며 생산성이 높아지고 오류를 빨리 찾을 수 있게 됩니다. 개발하면서 가장 필요한 세팅 중 하나라고 생각하는데요. 이런 세팅을 하지 않고 개발을 진행하고 있다면 지금당장 설정해보세요. vscode에선 prettier를 이용해 코드스타일을 통일할 수 있습니다. Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io prettier란 파일을 저장할때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 Node.js 패키지입니다. 적용방법 vscode Ext..
