profile
개발 공부 기록 블로그
태그 목록
전체보기 (122)UI(3)ux(3)Constructor(3)cors(3)express(3)react hook(3)객체 지향 프로그래밍(3)selector(2)Map(2)default parameter(2)InnerHTML(2)Sort(2)https(2)var(2)stack(2)body parser(2)seo(2)callback queue(2)scope(2)CSS in JS(2)textContent(2)reduce(2)Routes(1)promise.all(1)gui(1)underscore.js(1)element(1)react router(1)recursive case(1)비연결성(1).slice()(1)overflow-x(1)session(1)mkcert(1)git(1)WAI-ARIA(1).indexOf(1)sop(1)무상태성(1)논리 연산자(1)git clone(1)encapsulation(1)git add(1)Mock-up(1)argument(1)function(1)Promise Chaining(1)웹 접근성(1)undefined(1)CH(1)destructuring assignment(1).trim()(1)asynchronous(1)component(1)User Flow(1)resolve(1)Render Tree(1)promise(1)every(1)http 1.1(1)Math.abs()(1)else if(1)responsive web(1)vw(1)console.table(1)TCP/IP(1)Flex Items(1).toUpperCase(1)시맨틱 HTML(1)File System(1)link(1)npm(1).toLowerCase()(1)indexOf(1)instance(1)URI(1)parsing(1)git commit(1)UI 디자인 패턴(1)git push(1)push(1)querySelector(1)prepend()(1)Polymorphism(1)networking(1)stopPropagation(1)catch(1)server(1)http(1)DNS(1)git fetch(1)JavaScript Interpreter(1)git status(1)linked list(1)queue(1)On-page SEO(1)UI Backend(1)transform(1)git pull(1)웹 콘텐츠 접근성 지침(1)app.delete()(1)react router dom(1)request header(1)Asymptotic Notation(1)heap(1)align items(1)flex direction(1)flex wrap(1)justify content(1)JSON.parse(1)dot notation(1)React.lazy(1)new Array()(1)Math.pow()(1)3-Tier-Architecture(1)hiding(1)git remote add(1)2 Tier Architecture(1)nodemon(1)도메인(1)pseudo-classes selector(1)rest parameter(1)block scope(1)url(1)Promise hell(1)커링 함수(1)PORT(1)fs(1)CSSOM Tree(1)callback(1)React(1)Math.round(1)npm init(1)box-shadow(1).repeat()(1)UI 레이아웃(1).replace(1)settled(1)HTTP Messages(1)bracket notation(1)call stack(1)Spread Syntax(1)internal stylesheet(1)client(1)MPA(1)text-shadow(1)local scope(1)chai(1)fill(1)IPv4(1)Flex Container(1)콜백 함수(1)Miro(1)null(1)vh(1)Object.assign(1)Session-based Authentication(1)''.join()(1)append(1)Prototype(1)useEffect(1)useState(1)비교 연산자(1).hasOwnProperty()(1)JOIN(1)ajax(1)event loop(1)NaN(1)경로(1)flex-flow(1)Blocking(1)non blocking(1)고차 함수(1)px(1)git init(1)git log --decorate(1)reject(1)mocha(1)package.json(1)node.js(1)Math.ceil(1)HTTP 모듈(1)parameter(1)class(1)while(1)for(1)wireframe(1)in(1)includes()(1)Flex(1)JSON.stiringify()(1)SSH keys(1)관리자 권한(1)flex-basis(1)app.post()(1)abstraction(1)ip(1)attribute(1)npm install(1)Flexbox(1)layout(1)Column Grid System(1)unshift(1)typeof(1)IPv6(1)git checkout(1)flex grow(1)상대 경로(1)절대 경로(1)hoisting(1)Math.sqrt()(1)inheritance(1)조건문(1)break(1)classList(1)git log(1)UDP(1)cli(1)반복문(1)Time Complexity(1)Route(1)Jacob Nielsen's 10 Usability Heuristics(1)REST API(1)querySelectorAll()(1)json(1)continue(1)http status code(1)big o notation(1)concat(1)global scope(1)const(1)let(1).toString(1)git remote -v(1)nslookup(1)box-sizing(1)browser engine(1).split()(1)express.json(1)Off-page SEO(1)require(1)Set-Cookie(1)filter(1)border-radius(1)content-box(1)serve(1)app.put()(1)props.children(1)일급 객체(1)지속 연결(1)foreach(1)for...in(1)Math.floor(1)combinator(1)delete(1)flex-shrink(1)String(1)app.use(1)response header(1)event.target.value(1).substring()(1)Array.isArray(1)git merge(1)console.dir(1)callback Hell(1)external stylesheet(1)user agent style(1)증감연산자(1)loose coupling(1)media query(1)useRef(1)synchronous(1)inline block(1)this(1)setTimeout(1)DOM(1)HTTP Requests(1)event bubbling(1)axios(1)nvm(1)grid-system(1)variable shadowing(1)SSL/TLS(1)Web APIs(1)function scope(1)memory heap(1)함수 표현식(1)html(1)git branch(1)object.entries(1).prototype(1)shift(1)BrowserRouter(1)overflow(1)CSR(1)SSR(1)splice(1)innerText(1)display: flex;(1)Pop(1)inline-style(1)block(1)painting(1)remove(1)HTTP Responses(1).includes(1)figJam(1)Metadata(1)화살표 함수(1)inline(1)git reset(1)onchange(1)reverse(1)strict mode(1).concat()(1)http method(1)removeChild(1)shallow copy(1)array(1)sematic tags(1)extends(1)super(1)Then(1)Fetch(1)CSS 방법론(1)spa(1)display(1)rem(1)rendering engine(1)git checkout -b(1)http 1.0(1)github(1)이중 반복문(1)Fulfilled(1)onClick(1)fs.readFile(1)JSX(1)함수 선언식(1)app.listen()(1)Peter Morville Honeycomb(1)cookie(1)slice(1)css 전처리기(1)setAttribute(1)Array.from(1)useNavigate(1)object.keys(1)Database(1)border-box(1)Math.random(1)app.get()(1).length(1)text-decoration(1)PT(1)Props(1)new promise(1)General header(1)CreateElement(1)else(1)if(1)overflow-y(1)object.values(1)CA(1)DOM tree(1)Pending(1)border-style(1)Representation header(1)em(1)웹 표준(1)base case(1)Rejected(1)User Interface(1)Suspense(1)

삽입 정렬 (Insertion Sort)

삽입 정렬 (Insertion Sort) : 선택한 요소를 삽입할 수 있는 위치를 찾아 삽입하는 방식의 정렬 알고리즘 의사 코드 풀이 >삽입 정렬은 O(n²)의 시간복잡도를 가진다.

약 16시간 전
·
0개의 댓글
·

🪝 Custom Hooks

: 개발자가 스스로 커스텀한 HookCustom Hook을 만들면 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 주로 사용한다.e.g. 여러 개의 URL을 fetch할 때, 여러 개의 input에 의한 상태 변

약 16시간 전
·
0개의 댓글
·
post-thumbnail

코드 분할 (Code Splitting)

: 웹 애플리케이션 동작에 필요한 HTML, CSS, JavaScript 등의 파일들을 묶어서 제공하는 것대부분의 React 앱들은 Webpack이나 Rollup과 같은 툴을 사용해 앱을 번들링(Bundling)한다.하지만 모던 웹으로 발전하면서 JavaScript의

약 17시간 전
·
0개의 댓글
·

Virtual DOM

DOM (Document Object Model) 문서 객체 : `, , `와 같은 HTML 문서 태그들을 JavaScript와 같은 스크립팅 언어가 접근하고 조작할 수 있도록 객체(object)로 만든 것 문서 객체 모델 : 이러한 문서 객체들을 계층화시켜 트리 구조

약 19시간 전
·
0개의 댓글
·

선택 정렬 (Selection Sort)

선택 정렬 (Selection Sort) : 선택한 요소와, 나머지 요소 중 가장 작은 요소를 교환하는 정렬 알고리즘 이중 반복문을 사용하며, 바깥 반복문은 i번 순회, 안쪽 반복문은 j번 순회한다. (이때 j는 i를 제외하고, i + 1부터 시작한다.) j번 순회

1일 전
·
0개의 댓글
·

Position

position : 문서 상에 요소를 어디에 배치할지 지정하는 속성 top, right, bottom, left 속성과 함께 사용하여, 요소를 배치할 최종 위치를 결정한다. static(기본값) : 일반적인 문서의 흐름에 따라 배치되며, 상하좌우 속성값의 영향을 받지

2일 전
·
0개의 댓글
·

버블 정렬 (Bubble Sort)

버블 정렬 (Bubble Sort) : 서로 인접한 두 요소를 검사하여 정렬하는 방법 정렬이 이루어지는 방식이 '마치 거품이 밀려 올라가는 모습'과 같아서 bubble sort라고 부른다. 더 이상의 스왑(swap)이 일어나지 않을 때, 배열이 정렬된 것이다. 입출

3일 전
·
0개의 댓글
·

🪝 useMemo(), useCallBack()

렌더링 최적화, 컴포넌트 최적화를 위한 Hook으로 useMemo(), useCallBack()이 있다. useMemo가 언제 필요할까? 아래의 코드에서 calculate() 는 복잡한 연산을 해야하는 함수이고, 값을 반환하는 데 몇 초 이상이 걸린다고 가정해보자.

4일 전
·
0개의 댓글
·

기능개발 (큐)

각 기능은 진도가 100%일 때 배포될 수 있다.하지만 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발되어도, 앞에 있는 기능이 배포될 때 함께 배포된다.progresses : 배포되어야 하는 순서대로 작업의 진도(%)가 적힌 배열speeds : 각 작업의 개발 속도가

5일 전
·
0개의 댓글
·
post-thumbnail

🧊 Webpack

: 웹 애플리케이션 동작에 필요한 HTML, CSS, JavaScript 등의 파일들을 묶어서 제공하는 것: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고, 이를 조합해 하나의 묶음으로 번들링(빌드)해주는 도구 하나의 시작점(entry)으

5일 전
·
0개의 댓글
·

같은 숫자는 싫어 (스택)

배열에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거한 배열을 리턴해야 한다.이때 배열의 원소의 순서를 유지해야 한다.배열의 크기 : 1,000,000 이하의 자연수배열의 각 원소 : 0 ~ 9의 정수\[1, 1, 3, 3, 0, 1, 1] → 1, 3, 0,

6일 전
·
0개의 댓글
·
post-thumbnail

브라우저 렌더링 과정 & 렌더링 최적화

브라우저 렌더링 : HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에 출력되는 과정 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 브라우저 렌더링 과정 사용자가 브라우저를 통해 웹 사이트에 접속한다. 브라우저는 서버로

7일 전
·
0개의 댓글
·
post-thumbnail

브라우저 동작 원리 & 구조

: 웹 서버에서 양방향으로 통신을 하며 HTML 문서, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램브라우저는 페이지를 다운로드하기 위해 응용 계층의 HTTP 프로토콜을 이용해 데이터를 송신/수신한다.브라우저는 사용자가 선택한 자원(

2022년 11월 21일
·
0개의 댓글
·

그래프(Graph)

: 정점(vertex)과 정점 사이를 연결하는 간선(edge)으로 이루어진 비선형 자료구조그래프는 정점 집합과 간선 집합으로 표현할 수 있다.정점 : 노드(node)라고도 하며, 데이터가 저장되는 그래프의 기본 원소간선 :정점 간의 관계를 나타내는 정점을 이어주는 선진

2022년 11월 21일
·
0개의 댓글
·
post-thumbnail

이진 탐색 알고리즘 (Binary Search Algorithm)

: 오름차순으로 정렬된 숫자 배열에서 검색 범위를 1 / 2씩 줄여가며 원하는 데이터를 검색하는 알고리즘정렬된 배열과 찾고자하는 데이터를 입력하면, 해당 데이터의 index를 리턴한다.배열에 찾고자하는 데이터가 존재하지 않으면 -1 을 리턴한다.

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

스택(Stack) & 큐(Queue)

스택 (Stack) : 마지막에 들어온 요소가 먼저 나가는 LIFO(Last In First Out) 자료구조 스택의 연산 스택의 기본적인 연산으로는 push와 pop이 있다. Push : 스택의 맨 위에 요소를 추가한다. Pop : 맨 위에 있는 요소를 삭제하고 반

2022년 11월 16일
·
0개의 댓글
·

올바른 괄호 (스택)

: 올바른 괄호란 (로 열려서 )로 닫혀야 한다는 뜻입력값은 문자열이며 ( 또는 ) 로만 이루어져 있다.입력값의 길이는 100,000 이하의 자연수()(), (())() → true)()(, (()( → false이 문제는 스택(Stack) 문제이다.만약 입력값이 ((

2022년 11월 16일
·
0개의 댓글
·
post-thumbnail

Section 3 회고 ✍️

열심히 살려고 노력은 했는데 Section 2에서 지키려고 했던 Try들을 망각하고 비슷한 한 달을 보내버린 나...🙂 그런 나를 위로해주는 짤 하나를 올리고 Section 3 회고 시작합니다...목표를 달성하기 위해 시도했던 것 중 가장 효과적이었던 노력은 무엇인가

2022년 11월 16일
·
0개의 댓글
·

🪝useRef()

useRef를 사용하는 경우 DOM 엘리먼트의 주소값을 활용해야 하는 경우 focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 이러한 예외적인 상황에서 useRef로 DOM 노드

2022년 11월 16일
·
0개의 댓글
·

SEO (Search Engine Optimization)

: 검색 엔진 최적화, 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화하는 것: 페이지 내부에서 진행할 수 있는 SEO제목과 콘텐츠 내용핵심 키워드의 배치효율적인 HTML 요소 사용하기 등...: 웹 사이트 외부에서 이루어지는 SEO소셜 미디어 홍보백링크(타 사이트에

2022년 11월 13일
·
0개의 댓글
·