본문 바로가기

자바스크립트34

Udemy - Node.js [JavaScript Basics] Udemy - Node.js [JavaScript Basics] Node.js - The Complete Guide (Udemy) Node.js 란? 자바스크립트의 실행시간이다 자바스크트는 브라우저에서 실행되는 언어로, DOM을 조작하거나 브라우저에 로드된 페이지를 조작하는 프로그래밍 언어다 DOM = Document Object Model 자바스크립트를 서버에서 실행할 수 있도록 해준다 JavaScript on the Server 브라우저에 직접적으로 나타나지 않는, 데이터베이스를 연결하거나, 사용자 인증, 입력 유효성 검사까지 서버에서 한다 JavaScript Basics Boolean, 숫자, 텍스트 같이 데이터를 명확하게 정의하도록 강요하지 않는다 숫자를 텍스트로 바꾸는 것과 같이, 데이터 typ.. 2023. 4. 6.
Udemy - Javascript - Graph Traversal Udemy - Javascript - Graph Traversal Udemy JavaScript 그래프 순회 그래프에 있는 모든 노드들을 방문할 필요까지는 없다 그래프 순회를 할 때에는 visiting / updating / checking 이 중요하다 깊이 우선 그래프 (Depth First) vertex의 이웃 중 방문하지 않은 하나의 이웃으로 가는 것이다 이것을 모든 Vertex를 방문할때까지 순회를 한다 더 작은 이웃을 기준으로 깊이 우선 순회하기 넓이 순회 (Breadth First) 이웃된 노드가 2개면, 그 2개를 모두 순회하며 그래프를 순회한다 기본 그래프 만드는 코드 Graph 클래스에 DFS와 BFS를 넣을 것 class Graph { constructor(){ this.adjacenc.. 2023. 2. 27.
[Python] 백준 1300 K번째 수 🧑‍💻 [Python] 백준 1300 Gold 2 - 이진 탐색 이 문제를 통해 더 많은 고민을 하고, 문제를 풀어야겠다는 생각을 했다 그냥 이진 배열을 만들고, 그 배열을 다시 일차원으로 만들어서, 정렬을 한 후에, k번째 숫자를 구할 수 있다 하지만 테스트를 통과하지 않는다 이진 배열을 만들고, 또 일차원 배열로 만드는 것이 메모리 면에서, 굉장히 많이 잡아 먹는다 하지만 A[i][j]는 패턴이 있다 첫 열은, 모든 수를 1로 곱하면 된다 [1, 2, 3, 4, 5] 두 번째 열은, 모든 수를 2로 곱하면 된다 [2, 4, 6, 8, 10] 세 번째 열은 ,모든 수를 3으로 곱하면 된다 [3, 6, 9, 12, 15] 이런 식인 패턴이 있다 위의 패턴을 보게 된다면 특정 숫자를 만들 때에, 그 숫자보.. 2023. 2. 27.
클래스 카드 - [UI설명] 카드 디테일 페이지 클래스 카드 - 카드 디테일 페이지 카드 디테일 페이지는 카드 데이터부터, 시각화까지 모든 것을 구현했다 카드 데이터 크롤링을 통해 카드 데이터를 가지고 왔다 카드 이름 / 카드사 혜택 등 페이지 구현 제일 중요하게 생각한 것이, 어떻게 하면 유저들에게 간단한 UI를 제공하고 싶었다 그래서 정말 중요한 카드 내용들은 페이지에서 보여주었다 그리고 주요 혜택 같이, 내용이 많은 것들은, 모달을 이용했다 주요 혜택의 제목 그리고 간단한 설명을 카드와 카드 호버 기능을 통해 구현을 했다 해당 카드를 누르면, 모달창이 뜨고, 주요 혜택에 대한 자세한 정보를 볼 수 있다 위와 같이 페이지를 만들어, 유저들이 한 눈에 카드에 대한 내용을 볼 수 있다 만약 주요 혜택이 궁금하면, 카드를 클릭하면 된다 주로 주요 혜택을.. 2023. 2. 26.
클래스 카드 - 카드 비교 클래스 카드 - 카드 비교 카드 비교 모델 (Model) class CompareCard(models.Model): card = models.ForeignKey(Card,on_delete=models.CASCADE) user = models.ForeignKey(get_user_model(),on_delete=models.CASCADE) 로그인을 해야 카드 비교 기능을 사용할 수 있다 그래서 유저 정보를 가지고 오고, card 정보를 통해서 카드를 카드 비교함에 넣는 것이다 여기서 user마다 카드는 최대 3개까지 카드 비교함에 넣을 수 있다 카드 비교함에 카드 넣기 (요청) # 카드를 비교하기 위해서 비교하기 바구니에 넣고 / 비교하기 페이지 path('bookmark//', views.b.. 2023. 2. 26.
클래스 카드 - Selenium 클래스 카드 - Selenium ✍️ Selenium을 통한 크롤링 Selenium을 이용하여 크롤링을 진행했다 카드 디테일 페이지를 하나씩 돌면서, 안에 있는 상세 정보들을 CSS_SELECTOR를 통해 가지고 왔다 2023. 2. 26.
클래스 카드 소개 클래스 카드 소개 프로젝트 기간 : 2022.11.23 ~ 2022.12.15 팀원 : 김나현 (팀장), 이제준, 김지연, 김지영, 임수경 맡은 역할 : 풀스택 개발, Readme 문서 정리 댓글, 대댓글 비동기 구현 카드 디테일 페이지 구현 (기능, UI) 카드 비교 기능 구현 맞춤 카드 추천 페이지 구현 (기능) 사용 도구 : Python (Django), JavaScript | HTML, CSS | Github | AWS 내용 : 사회 초년생을 위한 카드 혜택 정보를 제공하는 웹사이트 제작 크롤링을 통해 시중에 나와있는 카드 정보 수집 (FEAT. 카드 고릴라) 카드 정보, 카드 비교, 카드 추천, 그 외에도 카드 관련 커뮤니티 기능을 구현 코드 링크 : https://github.com/Class.. 2023. 2. 26.
산메 (산책 메이트) - 지도 구현기능 산메 (산책 메이트) - 지도 구현기능 지도 기능 설명 공공 데이터 포털에서 도시공원 정보를 CSV 파일로 다운로드 받았다 받고 난 후, 로컬 DB에 저장을 하여 공원 정보와 카카오 map API를 연결시켰다 '내 위치'를 누르면, 현재 내가 있는 주소의 IP 주소를 트래킹하여 나의 위치를 가지고 온다 그 위치를 기반으로 5km 반경에 있는 공원들을 표시한다 공원 검색 기능은, 공원 이름 또는 주소 기반으로 검색을 한다 검색을 하면 내 위치로 기본적으로 이동하고, 내 위치에서 제일 가까운 순으로 나열이 된다 공원 마커 클릭 마커를 클릭하게 된다면 마커 위에 해당 공원에 대한 정보가 간략하게 나온다 그리고 마커에서 '산책하기' 를 클릭하면, 해당 공원의 좌표와 함께 산책하기 모집 생성 페이지로 간다 Kak.. 2023. 2. 26.
Udemy - Javascript - Graph Udemy - Javascript - Graph Udemy JavaScript 그래프 그래프는 유한하고 변할 수 있는 꼭지점이나 노드나 점들의 집합으로 구성된 데이터 구조다 그래프는 노드나 노드들의 연결을 모은 것이다 이진 트리와 다르게, 노드들끼리 연결만 되어 있으면 된다 그래프의 쓰임새 소셜 네트워크 좌표 / 지도 라우팅 알고리즘 (Routing Algorithms) 시각적 위계 (Visual Hierarchy) 등등 그래프의 유형 vertex : 노드 edge : 노드와 노드의 연결하는 선 Directed / Undirected Graph Undirected Graph : 특정한 경로가 없이, 두 노드 사이에서 왔다갔다 할 수 있다 / 방향이 없음 Directed Graph : edge마다 방향이 .. 2023. 2. 24.

티스토리툴바