본문 바로가기

전체 글143

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.
[AWS] Elastic Beanstalk EB CLI 설치 https://github.com/aws/aws-elastic-beanstalk-cli-setup GitHub - aws/aws-elastic-beanstalk-cli-setup: Simplified EB CLI installation mechanism. Simplified EB CLI installation mechanism. Contribute to aws/aws-elastic-beanstalk-cli-setup development by creating an account on GitHub. github.com 1. Elastic Beanstalk CLI Installer 레포지토리를 클론 git clone https://github.com/aws/aws-elastic-beanstalk-cli-se.. 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.
[설치] MAC에 .NET 6.0 설치하기 이번 학기에 윈도우프로그래밍응용이라는 수업을 들으면서 C#을 처음 다뤄봤습니다. 수업은 윈도우 환경에서 Visual Studio 2022로 진행이 되지만 저는 MAC M1을 사용하고 있고 윈도우 PC는 없고 VSCode로 개발을 하고 있기 때문에 따로 Visual Studio는 설치 하지 않았습니다. 수업은 .NET 6을 이용해서 빌드는 하는데 제 맥은 5.0을 쓰고 있더라구요. 실습 코드를 제출하는 과제가 있어서 .NET의 버전을 맞춰보았습니다. 1. Install .NET 6.0 SDK를 설치합니다. 아래 링크에서 Download .NET SDK x64를 클릭합니다. 페이지가 이동 되면서 다운로드 화면이 나타납니다. https://dotnet.microsoft.com/en-us/download Dow.. 2022. 11. 2.
[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.
MAC CLI 주요 명령어 CLI(Command Line Interface) CLI(명령줄 인터페이스)는 디렉토리 생성 및 이동, 복사, 이름 변경, 삭제 등을 미리 약속된 명령어를 사용하여 실행하는 환경입니다. 1. 현재 작업중인 폴더 확인 pwd : print working directory 현재 작업중인 폴더의 절대경로가 출력 2. 폴더 생성 mkdir : Make Directory mkdir [디렉토리 이름] mkdir Frontend: 현재 폴더에 Frontend폴더를 생성 3. 디렉토리 이동 cd : change Directory cd [디렉토리 경로] cd . - 현재 디렉토리 (생략 가능) cd .. - 상위 경로로 한 단계 이동 cd ../.. - 상위 경로로 두 단계 이동 cd ~/Desktop - 데스크탑 디렉.. 2022. 10. 29.
[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.
CHALLENGER : BNB 체인 해커톤 온라인 트랙 최종 선발 멋쟁이사자처럼 스쿨이 진행하는 CHALLENGER : BNB 체인 해커톤 온라인 트랙 지원 결과 최종 선발 되었습니다. https://techit.education/courses/technology/bnb_online [온라인] CHALLENGER : BNB 체인 해커톤 : TECHIT 기초부터 배우고 NFT 프로젝트 완성까지 도전해보세요! techit.education NFT라는 것은 들어봤지만 사실 뭐가 뭔지는 잘 몰라서 공부하려고 해도 쉽게 되지 않았는데 교육 및 해커톤까지 진행하는데 무료인 과정이 있어서 지원하였습니다. 4주간의 교육과 1주간의 해커톤이 진행되고 온라인 / 오프라인이 동시에 진행되지만 지방 재택 개발자인 저는 서울까지 가서 참여할 수 없어서 온라인으로 신청하였습니다. 개념부터 원리.. 2022. 10. 29.
Notion DB & Notion API 사용하기_2. Notion API 1. Notion API 아키텍쳐 이전 포스트에서 Notion 테이블을 만들고 API Token도 만들었으니 이제 바로 Notion API를 호출하면 Notion DB로 서버 없이 웹페이지 만들 수 있겠지라는 생각에 Notion API를 사용한 것이었는데... 웹브라우저에서 바로 Notion API를 호출 할 수 없습니다. Notion API를 사용하기 위한 아키텍처는 아래와 같습니다. 클라이언트인 웹브라우저에서 Notion API를 직접 호출하여 Notion Table에 접근하는 것이 아니라 서버에서 Notion API를 호출하여 Notion Table에 접근 해야합니다. 서버 없이 간단한 프로젝트를 하려다가 서버까지 만들어야하는 상황이 되었습니다. 본인이 편한 언어로 서버로 만들면 됩니다. 저는 Ja.. 2022. 10. 24.
Notion DB & Notion API 사용하기 _ 1. Table & API Token 생성 노마드 코더의 유투브를 보던 중 Notion을 DB로 활용할 수 있는 영상을 발견하고 간단한 프로젝트에 DB로 사용해봤습니다. 이번 게시물은 Notion DB와 Notion API를 사용하기 위한 준비 단계인 Table을 만들고 API Token을 생성하고 Table과 Token을 연결하는 방법에 대해 소개합니다. 1. 노션 DB Table 만들기 토이 프로젝트로 CoffeeLog 라는 맛있는 커피 기록을 하는 웹을 만드려보려고 카페 이름, 메뉴 이름, 날짜, 점수, 코멘트, 이미지를 저장 할 수 있는 DB를 만들었습니다. Column Type Description CafeName 제목 방문한 카페 이름 Menu 다중선택 먹은 메뉴 Date 날짜 방문 날짜 Rank 선택 점수 Comment 텍스트 추가 .. 2022. 10. 20.
[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
반응형