본문 바로가기

Frontend42

boundary 안에 해당 좌표가 있는지 확인 Canvas로 영역을 만들고 그 영역 안에 해당 좌표가 있는지 확인하는 알고리즘 먼저 확인 하고 싶은 좌표를 배열로 선언합니다. point[0] = x 좌표, point[1] = y좌표 var point = [2,4]; 영역 또한 이차배열로 선언합니다. var vs = [ [94, 119], [94, 267], [285, 267], [285, 119], ] const inside = (point, vs) => { var x = point[0], y = point[1]; var inside = false; for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) { var xi = vs[i][0], yi = vs[i][1]; var xj = vs[j][0],.. 2023. 12. 13.
[Tailwindcss를 활용한 UI제작 실무과정] 2일차. TailwindCSS 설치 및 환경 설정 1. CDN를 이용하여 Tailwind CSS 이용하기 2. Package 설치하여 Tailwind CSS 이용하기 2-1. Package Install npm i -D tailwindcss 2-2. Tailwind CSS Intellisence vscode extends로 Tailwind CSS Intellisence가 제공 되고 있습니다. Tailwind CSS IntelliSense 사용자에게 자동 완성, 구문 강조 표시 및 린팅과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상시킵니다. 2-3. vs code 로컬 설정 Tailwind CSS Intellisence의 Details를 보면 vs code 설정을 추천하고 있습니다. files.association files.associa.. 2022. 11. 5.
[Tailwindcss를 활용한 UI제작 실무과정] 2일차. Tailwind CSS Intro Rapidly build modern websites without ever leaving your HTML. TailwindCSS 홈페이지에서 가장 메인에 보여지고 있느 문구입니다. 빠르게 웹사이트를 구축할 수 있다고 얘기하고 있는데 강사님께서도 가장 어려운건 환경 구축이고 그 후는 레퍼런스 보고 할 수 있다고 하네요. 1. 형태 TailwindCSS는 Atomic한 형태를 취하고 있고 그러다 보니 커스터마이징 쉽고 커스터마이징이 쉽다는 것은 주어진 틀에 제한받지 않고 자유롭게 응용할 수 있음을 의미합니다. 완성된 틀을 벗어나 디자인 및 개발의 자율도가 높아지니 창의성과 재사용성, 생산성 등을 높일 수 있어 더욱 유용합니다. 2. 특징 유틸리티 퍼스트(Utility-first) CSS Framework.. 2022. 11. 5.
[Tailwindcss를 활용한 UI제작 실무과정] 2일차 TailwindPlay HTML 삽입 미리보기할 수 없는 소스 https://play.tailwindcss.com/QqlLqYBwvQ Tailwind Play An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser. play.tailwindcss.com 2일차 첫시간으로 Tailwindcss 를 설치하지 않고 Tailwindcss를 아주 잠깐 경험해봤습니다. atomic한 css로 적응만 하면 너무 쉬울꺼 같아요!! 2022. 10. 30.
[Tailwindcss를 활용한 UI제작 실무과정] 1일차 https://blog.naver.com/r_0o0_j/222913575293 전주 JICA 교육 안녕하세요 예리엘입니다. 저는 전주정보문화산업진흥원 JICA에서 제공하는 교육프로그램을 자주 찾아... blog.naver.com 2022.10.29. 드디어 첫 교육날입니다. 해당 강의의 강사님은 김데레사 강사님입니다. 저를 포함한 6명이 강의를 수강하네요. 오늘 수업 내용은 환경설정 및 Git 익히기입니다. ● 모던 웹브라우저 및 확장기능 설치 ● 개발환경 구축 및 사용법 익히기 ● CLI 명령어 학습 ● Git 설치 및 Github 가입과 환경설정 ● Git 실습 1. 모던 웹브라우저 및 확장 기능 설치 웹 브라우저(Web Browser) 프론트엔드 개발 시 UI 및 기능이 다양한 웹브라우저 환경에서 .. 2022. 10. 29.
[React] React-Router로 Git Page 설정하기 React 앱을 Git Page에 배포하면서 react-router를 이용해 라우터를 설정하고 Git page에 올리면 Tada 하고 배포가 잘 될꺼 같지만 빈화면이 나온다... https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing Deployment | Create React App npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths l.. 2022. 10. 20.
728x90
반응형