분류 전체보기 (362) 썸네일형 리스트형 바닐라 자바스크립트로 재밌는 애니메이션 /효과 구현해보기 (1탄) 0탄 보러가기 바닐라 JS/HTML/CSS 로 재미있는 애니메이션 구현하기(0탄)광원 마우스호버란?사실 그냥 마우스호버 애니메이션이라 하면 멋 없어보이니까 광원이라는 단어를 붙여서 만들어 보았습니다. hover 시 특정 애니메이션(빛의 퍼짐을 표현한 애니메이션)이 마duklook.tistory.com 결과 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 애니메이션을 구현할 수 있게 됩니다. 영상은 약간 짤려서 나왔는데 원래 시작 화면은 하얗게 가득찬 상태에서 시작됩니다. HTML 이것이 프론트엔드다 우선 HTML 마크업을 아래와 같이 작성해줍니다. h2 는 헤딩태그로서 앞서 미리보기의 화면 중앙에 위치한 텍스트가 됩니다. banner 클래스가 부여된 div 태그는 화면의 뒷단.. [자료구조] 이진탐색트리와 연산 이진탐색트리이진탐색트리는 각 노드에 최대 두 개의 자식을 가지는 것은 이진트리와 같으나, 한 가지 눈에 띄는 차이점이 존재한다. 바로, 부모 노드의 왼쪽 자식 노드는 부모 노드보다 작은 값을 가져야 하고, 오른쪽 자식 노드는 반대로 큰 값을 가져야 한다. 즉, 다음과 같은 형태가 되어야 한다. 이 규칙은 자식 노드를 가지는 모든 부모 노드가 공통적으로 가지는 규칙 이므로 꼭 지켜주어야 한다. 이진탐색 트리 구현 | Node Class이진탐색트리는 연결리스트하고 비교 했을 때 Node 클래스를 가지는 것은 동일하다. 다만, 트리의 Node 클래스는 head 라고 하는 참조 필드가 아닌, 왼쪽 자식 노드를 참조하는 left 와 오른쪽 자식 노드를 참조하는 right 가 있다. 즉, 다음과 같은 형식으로.. [나만의 모음집] VSCODE 사용자 코드 조각 아카이브 해당 포스트는..유용하게 사용하기 위해 직접 만들어둔 사용자 코드 조각을 공유합니다. 계속해서 업데이트할 예정이고, 업데이트 되는 날을 기준으로 포스트가 갱신됩니다. frc : 리액트 함수 컴포넌트 생성 (부연설명) 리액트 함수 컴포넌트를 생성 한다. 타입스크립트 호환을 위해 interface 를 상단에 주석처리 해두었다. 생성 시 해당 파일명이 함수명으로 자동 설정 되도록 해두었으므로, 코드라인에 frc 를 입력 후 코드 조각을 클릭하면 파일명이 함수명인 컴포넌트가 생성된다. { "Function Componets": { "prefix": "frc", "body": [ "// interface Props { }" " " "export default function ${1:${T.. [명령어 모음집] 다양한 명령어 혹은 팁을 모아두는 아카이브 포스트 목적 명령어/팁 들을 모아두는 포스트 입니다. 내용 수정 시 해당 날짜로 갱신되어 업로드 됨을 원칙으로 합니다.. VSCODE 사용자 코드 조각 VSCODE 상단파일(File) > 기본 설정(Preferences) > 사용자 코드 조각(User Snippets) 언어별로 스니펫을 추가하려는 언어를 선택예를 들어, JavaScript에 스니펫을 추가하려면 javascript.json을 선택 열린 파일에 사용자 정의 스니펫을 추가. 스니펫은 JSON 형식으로 작성. 각 스니펫은 고유한 이름과 해당 코드 조각을 포함. 예를 들어 다음과 같은 형식이 되어야 함.{ "Print to console": { "prefix": "log", "body": [ "console.log('$1'.. [복지맵 프로젝트] ~ 2024.04.29 진행사항 점검[CH03] 현재 까지 진행사항아래 시연 GIF 는 27일 경에 진행된 것인데, 각 SVG 맵에서 구분된 구역을 포커스 하면 해당 지역의 서비스 상세 내역이 아코디언 형식으로 조회할 수 있도록 목록이 렌더링되는 형태로 구현해두었다. 그리고 현재는 카카오 MAP SDK 를 사용해서 각 구/군별로 복지기관의 위치를 다중 마커로 표시하였고, 아래 이미지에는 안 나와 있지만, 현재 사용자의 좌표 또한 마커로 표시되도록 해두었다. 사용자 위치 같은 경우에는 HTTPS 에서만 지원해준다는데, 어차피 배포할 때는 HTTPS 로 할 것이므로 큰 문제는 없을 듯하다. 향후 방향성길찾기 기능길찾기 기능을 구현하려고 한다. 사용자가 서비스 목록을 알더라도 그 기관이 어디에 위치해 있는지, 현재 위치에서 얼마나 멀어져 있는지 .. [복지맵 프로젝트] 2024.04.25 ~ 26 진행사항 점검 [CH02] 프로젝트의 컨셉현재 생각하고 있는 프로젝트의 컨셉은 사용자가 사이트에 접속을 하면 부산 행정 구역을 바로 확인할 수 있게 하고, 각 행정 구역을 클릭하면 구/군 별로 사용자가 이용할 수 있는 복지프로그램/기관 목록을 리스트 형식으로 표시하는 것이다. 이 때 사용자가 정확한 위치 정보를 확인 하고자 한다면, 이 때는 리스트의 상단에 지도보기(길찾기) 아이콘을 클릭하면 즉시, 해당 지역의 위치좌표와 마커가 표시되도록 한다. 현재 까지 구현 단계(2024.04.25 ~04.26) 위 컨셉에 따라 사용자가 루트 페이지에 접속하면 부산의 각 행정구역을 시각적으로 확인하고 선택할 수 있도록 해당 이미지를 SVG 를 사용하여 각 행정구역 별로 이벤트를 등록 가능하도록 작업하였다. 피그마로 작업하였기 때문에, 그나.. [복지맵 프로젝트] 백엔드 환경설정 - NestJS (+Docker + Postgres + TypeORM + 유효성 검사 패키지) 이전 환경 셋팅 - Vite + React + PWA [복지맵 프로젝트] 환경설정 - Vite 기반 리액트 웹 PWA 설정PWA 설정 이유모바일 환경에서도 웹을 앱과 유사한 환경에서 구동할 수 있다는 것은 많은 이점을 준다. 현재 내가 개발하고자 하는 웹 사이트는 모바일에서도 오프라인 환경에서도 많은 사용자duklook.tistory.com 복지맵에서 사용할 백엔드 언어이번 프로젝트에서 사용되는 언어는 NestJS 이다. 이는 NodeJS Express 를 기반으로 구축된 백엔드 프레임워크로서 DI, IoC 등을 적극적으로 도입하여 객체지향 프로그래밍의 강점을 최대한 살린 방식으로 보다 안정적인고 확장 가능한 백엔드 환경을 구축할 수 있도록 도와준다. 이번 프로젝트에서는 새롭게 D.. [자료구조] 이진(+탐색)트리 전 개요 이번 시간에는 이진트리에 대해 알아보는 시간을 가져보고자 한다. 자세한 메서드 구현 내용보다는 앞으로 정리해 나갈 이진트리에 대한 개요라고 볼 수 있다. 이진 트리 이진트리는 각 노드가 왼쪽 자식과 오른쪽 자식으로 불리는 리프 노드를 갖는 데이터 구조를 의미한다. 이진트리에서 각 노드는 값을 가질 수 있고, 이들은 다시 자신만의 자식 노드를 최대 2개 가질 수 있는 형식으로 아랫 방향으로 뿌리를 넓혀 가는 특징을 보인다. 이진트리 만들기 이진트리의 Node 구조도 앞서 언급한 특성에 맞게 데이터(값), 자식을 참조하는 2개의 포인터를 가지고 있다. 이 포인터들은 부모 노드의 자식 노드가 없는 경우를 가정해서 null 이 기본 할당되고, 존재하는 경우에는 해당 자식 노드를 가리키는 참조를 담게 된다. 따라.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 46 다음
