minTech

📚 사전 지식 React Hook이란 함수 컴포넌트 내에서 리액트가 제공하는 기능에과 연결하여 그 값이나 기능을 사용할 수 있도록 하는 함수이다. 즉, 컴포넌트 외부에 위치한 리액트가 관리하는 state에 연결해서 변수처럼 값을 사용할 수 있도록 한다. ❓커스텀 훅(Custom Hook) 이란? 코드를 짜다보면, 여러 컴포넌트에서 같은 로직이 반복되는 경우가 있다. (대표적인 예로 API 호출하는 경우) 물론 react에 내장된 여러가지 hook이 존재하지만, 이러한 반복되는 부분을 줄이기 위해서 조금 더 구체적인 목적을 가진 기능을 하는 나만의 훅을 만들고 싶다는 생각이 든다. 이럴 때 커스텀 훅을 만든다. 즉, 반복되는 로직을 추출하여 하나의 로직으로 만들어 쉽게 재사용 가능하도록 나만의 Hook을 ..

🖐️시작 전 자바스크립트에서 변수 선언을 하는 방법에는 var, let, const 3가지가 있다. ES6 이전에는 var 하나로 변수 선언이 이루어졌지만 ES6 이후로 let과 const 로 변수 선언이 가능해졌으며, 두 개의 사용을 권장한다. 이 두 가지를 권장하는 이유는 무엇이며, 세 가지의 차이점은 무엇일까? 👉 변수 선언 방식 var의 경우 재선언이 가능하다. 아래와 같은 코드를 작성 후, 동작하면 정상적으로 "melon"이 잘 출력된다. var fruit = "apple"; var fruit = "melon"; console.log(fruit); //melon let과 const의 경우 재선언이 불가능하다. 재선언 시, 이미 선언이 이루어졌다고 오류가 발생한다. let fruit = "appl..

🖐️시작 전 데이터 타입 자바스크립트의 데이터 타입에는 기본형(Primitive Type)과 참조형(Reference Type)이 있다. 기본형(Primitive Type) String, Number, Bigint, Boolean, undefined, symbol, null 메모리 영역에서의 변경이 불가능하나, 재할당이 가능하다. let value = "original"; value = "change"; 기본형은 불변성을 가지고 있기 때문에 기존 메모리에 생성된 값이 변경된 것이 아니라 다른 메모리를 가리키기 때문에 값이 바뀌는 것처럼 보이는 것이다. 할당 연산자(=) 를 이용 변수에 값 할당 시, 실제 값이 저장된다. 따라서 복사한 값이 재할당되더라도 원본에는 전혀 영향을 받지 않는다. let valu..

DOM DOM은 웹 페이지/문서 에 나타나는 HTML 문서 전체를 객체로 표현한 것을 의미한다. * 웹 페이지/웹문서 : 웹 브라우저에 나타나는 컨텐츠 부분 DOM 트리란? HTML 위의 HTML의 구조는 !+enter를 치면 나오는 자동으로 짜여지는 HTML의 구조이다. HTML은 다음과 같이 계층 구조를 이루며, 계층 간의 관계에는 부모태그와 자식태그가 있다. DOM 트리 DOM 의 경우 HTML과 동일하게 계층구조이다. HTML과 다른 점이 있다면, 각 객체를 노드(Node)라고 표현하며, 각 노드끼리의 관계에는 부모노드, 자식노드, 형제노드가 있다. DOM트리구조의 경우 다양한 노드 타입을 갖는다. 요소 노드 : 태그를 표현하는 노드 텍스트 노드 : 문자를 표현하는 노드 💡텍스트 노드의 경우 따로..

Javascript를 통해 웹페이지를 다루기 위해서는 원하는 요소를 정확하게 선택할 수 있어야 한다. 이러한 요소를 선택하는 방법에 대해 작성하였다. 👉 Id 명으로 요소 선택하기 let tag = document.getElementById( 아이디명 ) 필요한 아이디를 가진 태그를 명확하게 선택할 수 있다. 만약 존재하지 않는 태그를 선택할 경우 null 값을 출력한다. 👉 Class명으로 요소 선택하기 let tags = document.getElementsByClassName( 클래스명 ) 여러 개의 요소들이 배열의 형태 같이 저장된다. 배열의 형태 같지만 완벽한 배열의 형태가 아닌 유사 배열 객체(Array-Like Object) 임을 주의한다. 요소들의 순서는 깊이에 상관없이 HTML의 위부터 ..

알고리즘 분류 : 수학, 기하학, 많은 조건 분기 ❓Question 조규현과 백승환은 터렛에 근무하는 직원이다. 하지만 워낙 존재감이 없어서 인구수는 차지하지 않는다. 다음은 조규현과 백승환의 사진이다. 이석원은 조규현과 백승환에게 상대편 마린(류재명)의 위치를 계산하라는 명령을 내렸다. 조규현과 백승환은 각각 자신의 터렛 위치에서 현재 적까지의 거리를 계산했다. 조규현의 좌표 (x1,y1)와 백승환의 좌표 (x2,y2)가 주어지고, 조규현이 계산한 류재명과의 거리 r1과 백승환이 계산한 류재명과의 거리 r2가 주어졌을 때, 류재명이 있을 수 있는 좌표의 수를 출력하는 프로그램을 작성하시오. ‼️ Answer 조규현의 좌표와 백승환의 좌표를 기준으로 각각 r1과 r2를 반지름으로 가진 원을 그려준다. 👉..

🤷‍♂️왜 브랜치 merge 전략을 알아야할까? 브랜치 머지 전략에는 다양한 방법들이 존재한다. 각각의 방법들이 왜 존재하고, 우리는 왜 알아야할까? 이를 알아보기 전에 commit이란 무엇인지에 대해 알아야한다. commit commit은 프로젝트 디렉토리의 모습을 하나의 버전으로 남기는 동작을 말한다. 따라서 여러 개의 commit들이 쌓여 하나의 커밋 히스토리를 만들게 되는데, 이 커밋 히스토리를 통해 저장소 내에서 무슨 일들이 벌어지는지 알 수 있다. 커밋 히스토리 내부를 더욱 가독성 있게 만들기 위해서는 각각에 맞는 머지 전략이 필요하다. 두 개의 브랜치를 merge하는 방법 ☝️ merge commit을 만들며 합치기 merge commit을 만들며 합치면 두 브랜치의 변경사항을 모두 유지하면..

🫸브라우저 렌더링 원리에 대해 알기 전에 ☝️ 브라우저란(browser)? 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램이다. 우리는 필요한 정보를 얻기 위해서 구글이나 네이버에 접속한다. 해당 사이트에 접속하기 위해 사용하는 도구를 '브라우저'라고 한다. ✌️렌더링(Rendering)이란 서버로부터 HTML, CSS, JavaScript로 작성된 파일을 받아 브라우저에 시각적으로 출력하는 것을 말한다. 👩‍🎨브라우저 렌더링 과정의 대략적인 그림 사용자가 원하는 URL을 입력하면 아래 과정으로 렌더링을 진행한다. client가 서버에 주소를 보내면 sever에서는 해당 HTML 파일로 응답을 한다. CSS 파일과 JS파일도 마찬가지로 client에서 파일 요청..