포포 일상 블로그

이전에 작업했던 캘린더입니다. 마무리를 해야 하는데 디자인이 안 나와서 손을 놓게 되었네요 차후라도 꼭 완성하겠습니다. push-pop.tistory.com/8 javascript 로 캘린더 + 투두리스트 만들기 안녕하세요. 이번에는 전에 만들어뒀던 캘린더 (하단 url 참조)의 코드 내용을 확장해서 codepen.io/sinhooking/pen/xxbGevQ virtual calendar javascript virtual calendar... codepen.io 아래 이미지와 같은 일.. push-pop.tistory.com 디자인을 추가해서 보완한다고 했었는데, 하는김에 리엑트로 새롭게 만들어보도록 하겠습니다. 디자인은 여자친구느님께서 도와주셨습니다. 전체적인 느낌만 봐주세요. 컴포넌트 작업부터 작업..

ant.design/docs/react/use-with-create-react-app Use in create-react-app - Ant Design Use in create-react-app create-react-app is one of the best React application development tools. We are going to use antd within it and modify the webpack config for some customized needs. ant.design ant.d에서 less를 연동하는 방법을 너무나 쉽게 설명해준다. yarn을 사용하는 사람이라면 yarn add @craco/craco npm을 사용하는 사람이라면 npm i @craco/craco 설치..

공식문서 ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 공식문서에 들어가시면 시작하기 버튼이 있습니다. 누르고 나면 오른쪽 사이드 바에 있는 "새로운 React 앱 만들기" 를 클릭하셔서 사용하시는 배쉬툴을 활용해서 npx create-react-app my-app cd my-app 입력하시면 끝입니다. 첫 줄 오른쪽끝에 만드실 프로젝트 이름을 입력하시는겁니다. 입력하신 이름으로 package.json의 이름과 폴더이름이 생성됩니다.

우연히 마우스 효과를 보게 되어 만들어보고 싶다는 생각이 들어 만들게 되었다. 마우스를 따라다니는 원들의 집합인데 사진보다는 실제로 보면 훨씬 이쁘다. 바로 시작하겠다. html을 설정한다. 이번에는 모듈로 사용해서 코드를 작성해봤다. html을 설정은 이게 끝이다. 바로 js 모듈로 넘어간다.. app.js import Circle from "./Circle.js"; export default class App { constructor() { this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); this.width = window.innerWidth; this.height = window.inne..

안녕하세요. 캔버스 API를 활용해서 우주를 만들어보도록 하겠습니다. 이번에 만들어볼 것은 간단하게 우주 느낌을? 만들어보려고 합니다. 요런 식입니다. 위 이미지는 움직이지는 않지만 뭔가 움직이는 것 같네요. 시작하겠습니다. html 간단하게 설정하는 방법은 지금 프로젝트와는 상관없지만 push-pop.tistory.com/7?category=916679 typescript 스터디 3. 사용해서 아코디언 메뉴 만들기 1. 구글에 아코디언 메뉴 만들기 예제를 검색한다. 2. 복 붙 한다. 는 장난이였고, 직접 만드는 것을 좋아해서 삽질을 차근차근해보도록 하겠습니다. 에디터는 자유지만 저는 vscode를 사용하였습 push-pop.tistory.com 아코디언 만들 때 조금 자세하게 설명해놨어서 참고하시면 ..

안녕하세요. 이번에는 전에 만들어뒀던 캘린더 (하단 url 참조)의 코드 내용을 확장해서 codepen.io/sinhooking/pen/xxbGevQ virtual calendar javascript virtual calendar... codepen.io 아래 이미지와 같은 일정관리 어플을 만들어보도록 하겠습니다. (나중에 상단 주소 내용도 다시 다뤄보도록 하겠습니다.) 우선 필요한 내용을 먼저 정리해보면, 1. 자동으로 날짜를 계산해줘야 합니다. 2. 날짜에 맞춰 데이터를 불러오거나 해야 합니다. ( 우선은 프론트 작업만 할 거기 때문에 이 부분은 나중에 서버 개발을 할 때 다시 다뤄보도록 하겠습니다. ) - 더미 데이터로 대체. 두 가지 정도면 우선 해당 웹 페이지를 만들 수 있을 거 같습니다. 상단..

1. 구글에 아코디언 메뉴 만들기 예제를 검색한다. 2. 복 붙 한다. 는 장난이였고, 직접 만드는 것을 좋아해서 삽질을 차근차근해보도록 하겠습니다. 에디터는 자유지만 저는 vscode를 사용하였습니다. 우선 html 파일을 하나 만듭니다. vscode를 사용하시면 emmet 기능을 사용하셔서! 누르시고 Ctrl + Space 바 누르시면 편하게 작성하실 수 있습니다. 혹시 안 쓰실 분들을 위해 코드입니다. 이후 라이브 서버를 켜시면 됩니다. 없으신 분들은 Ctrl + Shitft + X 누르시면 필요한 플러그인을 받으실 수 있는데 거기서 liveserver 검색하셔서 다운로드하시면 됩니다. 라이브 서버 켜는 방법은 Alt+ L + O 키를 누르시면 됩니다. (알트 + 라이브(L) + 오픈(O))의 첫 ..

참고 www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html Documentation - TypeScript for JavaScript Programmers Learn how TypeScript extends JavaScript www.typescriptlang.org Union 간단하게 설명하면 타입을 쓰는데 다른 타입을 쓰고 싶을 때 쓸 수 있음. 변수 : 타입 파이프 타입 형태 이런 식으로 파이프(or)로 구분하여 사용. 하단 코드는 매개변수로 들어오는 타입이 유니온으로 서로 다른 타입일 때 어떤 식으로 처리하는지에 대해 짧게 요약되어 있다. function wrapInArray(obj: string | string[]) { if (ty..

참고 www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html Documentation - TypeScript for JavaScript Programmers Learn how TypeScript extends JavaScript www.typescriptlang.org js 변수 선언. let helloWorld = "Hello World"; ts 변수 선언 let helloWorld: string = 'hello world' 변수 이름 옆 클론 후 타입을 명시적으로 선언하는 걸 볼 수 있다. 첫 번째 줄 같은 경우에는 타입을 명시하지 않았는데도 잘 작동한다. 이는 타입스크립트 컴파일러가 자동으로 변수 선언 시 사용한 타입을 할당하는 것 같았..

타입스크립트의 다양한 장점 및 단점이 인터넷 검색을 하면 많이 나오긴 하지만 몸소 체험해보고자 스터디를 시작하려 한다. 목표 1. 타입스크립트의 필수 적인 부분들을 스터디. 목표 2 토이 프로젝트 진행 및 리뷰