minTech

프론트엔드에 대한 기초 지식이 부족한 것 같다고 느껴져 인프런 강의를 수강하기 위해 몇 개 찾아보았다. 그러다가 발견한 것이 짐코딩 님의 [ 프론트엔드 날개 달기: vue, react를 배우기 전에 꼭 알아야하는 지식 ] !!해당 글을 보며, DOM 객체에 대해 공부할 뿐만 아니라, 더불어 강의를 보며 우겨넣기만한 정보를 머릿속에서 정리하기 위해 블로그를 작성해보았다. (근데 내가 전에 DOM에 대해 아주 짧게 작성한 글이 있었음 ➡︎ https://mongsira.tistory.com/20 ) DOM에 들어가기에 앞서 자바스크립트란 무엇인가? 어떠한 일을 하는 걸까?자바스크립트(javascript)는 HTML 문서를 조작하기 위해 만들어진 언어이다. HTML 문서를 어떻게 조작하는걸까? 브라우..

백준 1074번!! 문제크기가 2**N, 2**N 인 2차원 배열을 Z모양으로 탐색하려한다.  N>1 인 경우, 이를 4등분한 후에 또 Z모양으로 방문한다.예시는 아래와 같음! N이 주어졌을 때, r행 c열을 몇 번째로 방문하는지 출력하자.  풀이주키워드는 "사분면"과 "재귀함수" 이다. 간단하게 말하자면 제 1, 2, 3, 4분면으로 나눠서 사분면마다 그 전의 사분면만큼의 숫자를 더해주는 로직이다.  말로 하면 어려우니까 N은 3에서 7행 7열을 예를 들어보겠슴니다. 1. N = 3 일때 여기서 7행 7열은 제 4사분면이다.  2. N = 2일 때이제 위의 4사분면만 잘라서 다시 가져온다면 아래와 같다.N이 3이었을 때, 한 사분면에는 16개씩 있으며, 1,2,3 을 지나 제 4사분면은 16 * 3인 ..

프로그래머스 72413번 합승 택시 요금 해당 문제는 a와 b가 같은 출발지에서 출발하는데 서로의 목적지까지 얼마나 최소의 택시요금으로 갈 수 있는지 구하는 문제이다.이는 결국 그래프의 최단 거리를 구하는 것이다. 그렇다면 그래프의 최단 거리를 구하는 알고리즘은 크게 3가지가 있다.다익스트라(Dijkstra)벨만 포드(Bellman-ford)플로이드 와샬(Floyd Wrashall)이 중에서 해당 문제에 대해 적용하는 알고리즘은 플로이드 와샬 알고리즘이다.  플로이드 와샬 (Folyd Warshall) 알고리즘 1.  어떠한 한 노드에서 특정 다른 노드까지의 최단 거리를 구하는 다익스트라 알고리즘, 벨만 포트 알고리즘과 달리     플로이드 와샬은 모든 노드에 대한 최단 거리를 구한다. 2. 음의 가중치..

1. Math.ceil : 올림소수 값이 존재하기만 하면 올린다. Math.ceil(3.14) // 4  2. Math.floor : 내림소수 값이 존재하기만 하면 소수점 밑의 값을 모두 버린다. Math.ceil(3.14) // 3  3. Math.round: 반올림우리가 아는 반올림과 동일하게 동작한다.소수점 밑이 0.5 이상이면 올림, 그 아래면 내림을 한다. Math.round(3.14) // 3Math.round(3.56) // 4

🕵️ Javascript와 Typescript 모든 프로그래밍 언어는 타입 시스템을 갖는다. [타입 시스템] 언어의 타입과 관련된 문법 체계로써, 값들은 어떤 기준으로 묶어 타입을 규정할 것인지 결정한다. 코드의 타입을 언제, 어떻게 검사할 것인지 결정한다. 이 타입 시스템에는 대표적으로 두 개의 시스템이 존재한다. 1) 정적 타입 시스템 정적 타입 시스템은 엄격하고 고정적인 시스템이다. 변수를 선언할 때, 변수에 할당할 값의 데이터 타입을 사전에 선언해야한다. 또한 그 이후에 타입을 변경할 수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 컴파일 시점에 타입 체크를 수행한다. 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현과 런타임에 발생하는 에러를 줄이지만, 모든 변수에 타입을 지..

vscode에서 분명 에러가 생겼는데 빨간줄이 뜨지 않을 때 setting.json 의 옵션을 수정해야한다. 실행 순서 1. 먼저 settings.json 파일을 들어간다. ctrl+shift+p 를 눌러 settings.json을 친다.여기서 User Settings를 들어가야한다. 2. 먼저 settings.json 파일을 들어간다. eslint.enable 옵션이 false로 되어있는지 확인 후에, true로 바꿔준다. 아래에 있는 코드를 추가해준다. 💡 그래도 타입스크립트 실행 시 타입 오류가 뜨지 않는다면 다음 방법을 시도해보세요! 1. vscode의 extentions을 들어간다. 2. 검색창에 "@builtin typescript" 를 쳐서 TypeScript and JavaScript La..

자기 소개 웹페이지 중에서 프로필 페이지 구현을 모두 마치고 프로젝트 페이지를 구현 중에 있다. 프로젝트 페이지의 경우 한 프로젝트 당 들어가는 이미지가 여러장 되기 때문에 프로젝트 페이지 하나에 프로젝트 하나의 이미지들만 import 해도 기본 6장은 되었다. 이를 하나하나 import 하려니 soso 귀찮,,, 어떻게 하면 하나의 파일에 있는 이미지를 모두 가져올 수 있을까? 바로 구글링을 해보았다! 그 결과, 내가 인터넷 검색을 통해 찾아보았던 방법은 두✌️개이다. 1. 이미지를 import 하는 js 파일을 따로 생성 후에 거기서 컴포넌트처럼 import 해온다. import project1_1 from "../assets/images/project1_results/project1_1.png"; ..

프로젝트를 하면서 내가 맡았던 기능 중에 하나가 바로 무한 스크롤이다. 개인적으로 intersection observer API를 이용하기 위해, 그것을 먼저 이해하고, 내가 원하는 기능으로 구현하려는 것이 어려워서 가장 오래걸렸던 기능이다,, 😭 그래도 어려웠던 만큼 성공했을 때 제일 짜릿했고, 이 과정을 글로 작성하면 나중에 꼭꼭 활용될 것이라는 확신에 바로 정리를 시작해본다. 🕵️‍♀️ Infinite Scroll(무한 스크롤) ? 무한 스크롤이란 사용자가 스크롤 동작을 할 때마다 새로운 데이터를 동작으로 로드하여 컨텐츠를 보여주는 방식을 얘기한다. 기존의 페이지를 새로고침하거나, 별도의 페이지 버튼을 누르지 않고도 사용자가 끊임없이 컨텐츠를 스크롤 하여 볼 수 있게 해주는 기술이다. 특히 무한 스..