백준 14891번 - 톱니바퀴 (JS)
문제 설명 총 8개의 톱니를 가지고 있는 톱니바퀴 4개가 일렬로 놓여져 있다. 톱니는 N극 또는 S극 중 하나를 나타내고 있다. 톱니바퀴에는 1번부터 4번까지 번호가 매겨져 ...
Tag
- javascript 17
- algorithm 10
- Nomad Coders 10
- programmers 9
- frontend 7
- NextJS 7
- project 6
- ES6 5
- CSS 5
- carrot market 5
- Web 4
- Browser 3
- Netwrok 3
- JavaScript 3
- Carrot Market 3
- React 2
- React Native 2
- blog 2
- react native 2
- tutorial 2
- HTML 2
- Javascript 2
- HTTP 2
- TypeScript 2
- Tailwind 2
- backend 1
- NodeJS 1
- jekyll 1
- react 1
- toy 1
- theme 1
- dark mode 1
- nodeJS 1
- Web API 1
- Map 1
- hoisting 1
- scope 1
- execution context 1
- closure 1
- bfs 1
- this 1
- HTTP Method 1
- GET 1
- POST 1
- Network 1
- CORS 1
- Event Flow 1
- Event Capturing 1
- Event Bubbling 1
- Box Model 1
- position 1
- Event Loop 1
- Microtask Queue 1
- Macrotask Queue 1
- synchronous 1
- asynchronous 1
- block 1
- non-block 1
- Promise 1
- Async/Await 1
- REST 1
- RESTful API 1
- CSR 1
- SSR 1
- Universal Rendering 1
- 웹 표준 1
- 시맨틱 태그 1
- 웹 접근성 1
- React Hook Form 1
- node.js 1
- baekjoon 1
- 14891 1
- 톱니바퀴 1
- Cloud Flare 1
- Layout 1
- Flex 1
- Grid 1
- SCSS 1
- React Hooks 1
- Optimization 1
- useCallback 1
- useMemo 1
javascript
this란?
This란 객체지향 프로그래밍에서 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드가 하나의 논리적인 단위로 묶여진 자료구조다. 메서드가 자신이 속한 객체의 프로퍼티를...
Programmers - Level 2 : 양궁 대회
문제 설명 라이언은 저번 카카오배 양궁대회 우승자이고 이번 대회에도 결승전까지 올라왔다. 결승전 상대는 어피치이다. 결승전 규칙은 전 대회 우승자인 라이언에게 불리하게 다음과...
클로저란?
클로저란? 클로저는 자바스크립트 고유 개념이 아니다. 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 예시 코드 클로저는 조금 난해한 개념이기 때문에 예시 코드를 먼저 ...
실행 컨텍스트란?
실행 컨텍스트 자바스크립트의 실행 컨텍스트(Execution Context)는 코드가 실행되는 환경을 의미하는데, 실행 컨텍스트를 번역하면 “코드의 문맥”으로 즉, 코드가 실...
스코프란?
스코프란? 변수는 자신이 선언된 위치에 따라, 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 사실, 이건 변수 뿐만 아니라 모든 식별자가 마찬가지다. 모든 식별자...
호이스팅이란?
호이스팅이란? 호이스팅이란 변수 혹은 함수의 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같이 동작하는 자바스크립트의 특징이다. 다음 예시를 보자. jsx console....
Programmers - Level 2 : 무인도 여행
문제 설명 지도는 1 x 1크기의 사각형들로 이루어진 직사각형 격자, 각 칸 안에는 바다를 뜻하는 X 또는 무인도를 뜻하는 1~9의 자연수가 있다. 상, 하, 좌, 우로 연결...
Programmers - Level 2 : 뒤에 있는 큰 수 찾기
문제 설명 배열의 각 원소들에 대해 자신보다 뒤에 있는 숫자 중에서 자신보다 크면서 가장 가까이 있는 수를 뒷 큰수라고 한다. 정수 배열 numbers가 매개변수로 주어질 때...
Programmers - Level 2 : 귤 고르기
문제 설명 수확한 귤 중 k개를 골라 상자 하나에 담아 판매하려고 한다. 그런데 귤의 크기가 일정하지 않아 크기별로 분류했을 때 서로 다른 종류의 수를 최소화려고 한다. 매개...
Map 객체에 대해서 알아보자
최근 코딩 테스트 문제를 풀면서 Map을 이용한 풀이들을 자주 접하였다. key - value 자료형이 필요할 때는 무조건 Object만 썼었는데 Map 객체가 궁금해졌다. ...
Programmers - Level 1 : 성격 유형 검사하기
문제 설명 다음과 같은 규칙으로 단어 카드를 사용해 원하는 순서의 단어 배열을 만들 수 있는지 확인하는 함수를 만들어라. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 ...
Programmers - Level 1 : 카드 뭉치
문제 설명 다음과 같은 규칙으로 단어 카드를 사용해 원하는 순서의 단어 배열을 만들 수 있는지 확인하는 함수를 만들어라. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 ...
Programmers - Level 1 : 푸드 파이트 대회
문제 설명 푸드 파이트 대결은 일렬로 배치된 음식을, 한 선수는 왼쪽에서 오른쪽으로, 다른 선수는 오른쪽에서 왼쪽으로 순서대로 먹는 방식으로 진행됨. 중앙에는 물이 있고, 물...
Programmers - Level 2 : 호텔 대실
문제 설명 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려고 함. 각 유저는 한 번에 한 명의 유저를 신고할 수 있음. - 신고 횟수에 제한...
Programmers - Level 1 : 신고결과 받기
문제 설명 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려고 함. 각 유저는 한 번에 한 명의 유저를 신고할 수 있음. - 신고 횟수에 제한...
Intersection Observer API를 활용한 무한 스크롤
무한 스크롤이란? 무한 스크롤 (Infinite Scroll)은 유저가 페이지를 스크롤링 중 최하단에 도달했을 때, 나머지 컨텐츠를 로드하는 페이징 방식으로 페이지 번호를 일...
algorithm
백준 14891번 - 톱니바퀴 (JS)
문제 설명 총 8개의 톱니를 가지고 있는 톱니바퀴 4개가 일렬로 놓여져 있다. 톱니는 N극 또는 S극 중 하나를 나타내고 있다. 톱니바퀴에는 1번부터 4번까지 번호가 매겨져 ...
Programmers - Level 2 : 양궁 대회
문제 설명 라이언은 저번 카카오배 양궁대회 우승자이고 이번 대회에도 결승전까지 올라왔다. 결승전 상대는 어피치이다. 결승전 규칙은 전 대회 우승자인 라이언에게 불리하게 다음과...
Programmers - Level 2 : 무인도 여행
문제 설명 지도는 1 x 1크기의 사각형들로 이루어진 직사각형 격자, 각 칸 안에는 바다를 뜻하는 X 또는 무인도를 뜻하는 1~9의 자연수가 있다. 상, 하, 좌, 우로 연결...
Programmers - Level 2 : 뒤에 있는 큰 수 찾기
문제 설명 배열의 각 원소들에 대해 자신보다 뒤에 있는 숫자 중에서 자신보다 크면서 가장 가까이 있는 수를 뒷 큰수라고 한다. 정수 배열 numbers가 매개변수로 주어질 때...
Programmers - Level 2 : 귤 고르기
문제 설명 수확한 귤 중 k개를 골라 상자 하나에 담아 판매하려고 한다. 그런데 귤의 크기가 일정하지 않아 크기별로 분류했을 때 서로 다른 종류의 수를 최소화려고 한다. 매개...
Programmers - Level 1 : 성격 유형 검사하기
문제 설명 다음과 같은 규칙으로 단어 카드를 사용해 원하는 순서의 단어 배열을 만들 수 있는지 확인하는 함수를 만들어라. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 ...
Programmers - Level 1 : 카드 뭉치
문제 설명 다음과 같은 규칙으로 단어 카드를 사용해 원하는 순서의 단어 배열을 만들 수 있는지 확인하는 함수를 만들어라. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 ...
Programmers - Level 1 : 푸드 파이트 대회
문제 설명 푸드 파이트 대결은 일렬로 배치된 음식을, 한 선수는 왼쪽에서 오른쪽으로, 다른 선수는 오른쪽에서 왼쪽으로 순서대로 먹는 방식으로 진행됨. 중앙에는 물이 있고, 물...
Programmers - Level 2 : 호텔 대실
문제 설명 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려고 함. 각 유저는 한 번에 한 명의 유저를 신고할 수 있음. - 신고 횟수에 제한...
Programmers - Level 1 : 신고결과 받기
문제 설명 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려고 함. 각 유저는 한 번에 한 명의 유저를 신고할 수 있음. - 신고 횟수에 제한...
Nomad Coders
[캐럿마켓 클론] Incremental Site Regeneration & Future : React 18
INCREMENTAL SITE REGENERATION 사이트를 빌드한 후 다시 static 페이지를 만들거나 업데이트 - 전체 사이트가 아닌 각 페이지별로 정적으로 페이...
[캐럿마켓 클론] NextJS Deep Dive
MiddileWares V12 미들웨어는 첫 번째 파일 시스템 조회 전에 redirects 및 headers 직후 실행 - 각 라우트 파일 안에 _middleware.t...
[캐럿마켓 클론] Cloud Flare & NextJS Images
CLOUDFLARE IMAGES Introduction Cloudflare 클라우드를 위해 만들어진 전역 네트워크 - 인터넷에 연결하는 모든 것을 안전하고 비밀을 유지하...
[캐럿마켓 클론] Products
Accounts Logic Upsert : Update or Create Records 조건에 맞는 기존 데이터가 있으면 업데이트 없으면 새롭게 생성 - where, c...
[캐럿마켓 클론] Authentication
Accounts Logic Upsert : Update or Create Records 조건에 맞는 기존 데이터가 있으면 업데이트 없으면 새롭게 생성 - where, c...
React Hook Form & Refactoring
# React Hook Form 사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 React Form 라이브러리 장점 코드량 대폭 감소 - 쉬운 유...
Tailwind Practice
Introduction Tailwind is a utility-first CSS framework 유틸리티는 테일윈드가 여러 클레스 네임을 가지고 있다는 의미. 즉, 테일윈드...
Tour of Tailwind
Introduction Tailwind is a utility-first CSS framework 유틸리티는 테일윈드가 여러 클레스 네임을 가지고 있다는 의미. 즉, 테일윈드...
Practice Project
Patterns React 모델을 사용하면 페이지를 여러 컴포넌트로 분해할 수 있다. 이런 컴포넌트는 페이지 간에 재사용 할 수 있다. 예를 들어, 페이지 간 동일한 내비게이...
Framework Overview
Library vs Framework Library 개발자로서 내가 사용하는 것. 내가 라이브러리를 불러온 후 무언가를 한다. 따라서 내가 원할 때 언제든 어떤 방식으로든 사...
programmers
Programmers - Level 2 : 양궁 대회
문제 설명 라이언은 저번 카카오배 양궁대회 우승자이고 이번 대회에도 결승전까지 올라왔다. 결승전 상대는 어피치이다. 결승전 규칙은 전 대회 우승자인 라이언에게 불리하게 다음과...
Programmers - Level 2 : 무인도 여행
문제 설명 지도는 1 x 1크기의 사각형들로 이루어진 직사각형 격자, 각 칸 안에는 바다를 뜻하는 X 또는 무인도를 뜻하는 1~9의 자연수가 있다. 상, 하, 좌, 우로 연결...
Programmers - Level 2 : 뒤에 있는 큰 수 찾기
문제 설명 배열의 각 원소들에 대해 자신보다 뒤에 있는 숫자 중에서 자신보다 크면서 가장 가까이 있는 수를 뒷 큰수라고 한다. 정수 배열 numbers가 매개변수로 주어질 때...
Programmers - Level 2 : 귤 고르기
문제 설명 수확한 귤 중 k개를 골라 상자 하나에 담아 판매하려고 한다. 그런데 귤의 크기가 일정하지 않아 크기별로 분류했을 때 서로 다른 종류의 수를 최소화려고 한다. 매개...
Programmers - Level 1 : 성격 유형 검사하기
문제 설명 다음과 같은 규칙으로 단어 카드를 사용해 원하는 순서의 단어 배열을 만들 수 있는지 확인하는 함수를 만들어라. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 ...
Programmers - Level 1 : 카드 뭉치
문제 설명 다음과 같은 규칙으로 단어 카드를 사용해 원하는 순서의 단어 배열을 만들 수 있는지 확인하는 함수를 만들어라. 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 ...
Programmers - Level 1 : 푸드 파이트 대회
문제 설명 푸드 파이트 대결은 일렬로 배치된 음식을, 한 선수는 왼쪽에서 오른쪽으로, 다른 선수는 오른쪽에서 왼쪽으로 순서대로 먹는 방식으로 진행됨. 중앙에는 물이 있고, 물...
Programmers - Level 2 : 호텔 대실
문제 설명 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려고 함. 각 유저는 한 번에 한 명의 유저를 신고할 수 있음. - 신고 횟수에 제한...
Programmers - Level 1 : 신고결과 받기
문제 설명 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려고 함. 각 유저는 한 번에 한 명의 유저를 신고할 수 있음. - 신고 횟수에 제한...
frontend
[React Native] Swipeable로 밀어서 삭제 구현해보기
react-native-gesture-handler/Swipeable로 밀어서 삭제 구현해보기 이번 포스트에서는 react-native-getsture-handler에서 제공...
[React Native] 비밀번호 입력 스크린 만들기
비밀번호 입력 스크린 만들기 이번 포스트에서는 사내 프로젝트에서 결제 비밀번호 스크린을 만든 경험을 공유해보고자 한다. 이 페이지를 처음 기획했을 때, 필요한 기능은 다음과 ...
문자인증 타이머 만들기
재전송 가능한 문자인증 타이머 회원가입 페이지를 만드는데, 문자인증으로 쓸만한 타이머 라이브러리를 찾지 못했다.. 재전송 버튼을 누르면 타이머를 재시작하고 싶은데.. 😂 그래...
프로젝트 회고 : ASSIST - part 2
Project : ASSIST Intro 약 한달이 조금 넘는 기간동안 정신없이 달려왔다. 우리 팀은 사이드 프로젝트 대회 우승이라는 쾌거(?)를 이루었고 지금은 프로젝트 기...
프로젝트 회고 : ASSIST - part 1
Project : ASSIST What is ASSIST? 풋살 팀이 한번 경기를 하기 위해서 주장은 많은 잡다한 일들을 해야만 한다. 프로젝트 어시스트는 풋살 팀을 운영하는...
프로젝트 회고 : Mesic - part 2
Project : Mesic Intro 약 한달 간의 프로젝트 기간동안, 우리 팀이 정한 Requirements는 거의 달성하였고 내가 얼추 예상했던대로 앱이 완성되었다. 다...
프로젝트 회고 : Mesic - part 1
Project : Mesic What is Mesic? 어떤 노래를 들으면 생각나는 추억이 모두 하나 쯤은 있다. 그런 추억을 저장할 수 있는 서비스가 있으면 좋을 것 같아서...
NextJS
[캐럿마켓 클론] Incremental Site Regeneration & Future : React 18
INCREMENTAL SITE REGENERATION 사이트를 빌드한 후 다시 static 페이지를 만들거나 업데이트 - 전체 사이트가 아닌 각 페이지별로 정적으로 페이...
[캐럿마켓 클론] NextJS Deep Dive
MiddileWares V12 미들웨어는 첫 번째 파일 시스템 조회 전에 redirects 및 headers 직후 실행 - 각 라우트 파일 안에 _middleware.t...
[캐럿마켓 클론] Cloud Flare & NextJS Images
CLOUDFLARE IMAGES Introduction Cloudflare 클라우드를 위해 만들어진 전역 네트워크 - 인터넷에 연결하는 모든 것을 안전하고 비밀을 유지하...
[캐럿마켓 클론] Products
Accounts Logic Upsert : Update or Create Records 조건에 맞는 기존 데이터가 있으면 업데이트 없으면 새롭게 생성 - where, c...
[캐럿마켓 클론] Authentication
Accounts Logic Upsert : Update or Create Records 조건에 맞는 기존 데이터가 있으면 업데이트 없으면 새롭게 생성 - where, c...
Practice Project
Patterns React 모델을 사용하면 페이지를 여러 컴포넌트로 분해할 수 있다. 이런 컴포넌트는 페이지 간에 재사용 할 수 있다. 예를 들어, 페이지 간 동일한 내비게이...
Framework Overview
Library vs Framework Library 개발자로서 내가 사용하는 것. 내가 라이브러리를 불러온 후 무언가를 한다. 따라서 내가 원할 때 언제든 어떤 방식으로든 사...
project
프로젝트 회고 : Review Auto-Installer
Project : Review Auto-Installer Intro 현재 근무하고 있는 회사의 자체서비스 중, 쇼핑몰 리뷰관리 솔루션이 있다. 여러 쇼핑몰에서 판매하고 있는 ...
프로젝트 회고 : ASSIST - part 2
Project : ASSIST Intro 약 한달이 조금 넘는 기간동안 정신없이 달려왔다. 우리 팀은 사이드 프로젝트 대회 우승이라는 쾌거(?)를 이루었고 지금은 프로젝트 기...
프로젝트 회고 : ASSIST - part 1
Project : ASSIST What is ASSIST? 풋살 팀이 한번 경기를 하기 위해서 주장은 많은 잡다한 일들을 해야만 한다. 프로젝트 어시스트는 풋살 팀을 운영하는...
프로젝트 회고 : Mesic - part 2
Project : Mesic Intro 약 한달 간의 프로젝트 기간동안, 우리 팀이 정한 Requirements는 거의 달성하였고 내가 얼추 예상했던대로 앱이 완성되었다. 다...
프로젝트 회고 : Mesic - part 1
Project : Mesic What is Mesic? 어떤 노래를 들으면 생각나는 추억이 모두 하나 쯤은 있다. 그런 추억을 저장할 수 있는 서비스가 있으면 좋을 것 같아서...
프로젝트 회고 : MAPLY
Project : MAPLY What? 나만의 유튜브 플레이리스트를 만들 수 있는 간단한 웹사이트다. 사실 유튜브에서도 이미 제공하고 있는 기능이지만, 백지상태에서 기능을 하...
ES6
클로저란?
클로저란? 클로저는 자바스크립트 고유 개념이 아니다. 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 예시 코드 클로저는 조금 난해한 개념이기 때문에 예시 코드를 먼저 ...
실행 컨텍스트란?
실행 컨텍스트 자바스크립트의 실행 컨텍스트(Execution Context)는 코드가 실행되는 환경을 의미하는데, 실행 컨텍스트를 번역하면 “코드의 문맥”으로 즉, 코드가 실...
스코프란?
스코프란? 변수는 자신이 선언된 위치에 따라, 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 사실, 이건 변수 뿐만 아니라 모든 식별자가 마찬가지다. 모든 식별자...
호이스팅이란?
호이스팅이란? 호이스팅이란 변수 혹은 함수의 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같이 동작하는 자바스크립트의 특징이다. 다음 예시를 보자. jsx console....
Map 객체에 대해서 알아보자
최근 코딩 테스트 문제를 풀면서 Map을 이용한 풀이들을 자주 접하였다. key - value 자료형이 필요할 때는 무조건 Object만 썼었는데 Map 객체가 궁금해졌다. ...
CSS
CSS 레이아웃 (Flexbox, Grid) 정리
# Flexbox display 속성 block box의 개념 - width(너비)와 height(높이)를 가짐 - 옆으로 margin이 존재 - element가 한 줄...
프론트엔드 성능 최적화 방법
프론트엔드 성능 최적화란 프론트 단에서 성능이란 다음 두 가지 능력을 의미한다. 로딩 성능 : 다운로드 받은 리소스를 빠르게 해석하는 능력 2. 렌더링 성능 : 해석한 ...
position 속성 이해하기
position 속성 position 속성은 웹 페이지에서 요소의 위치(position)를 배치하는 방식을 결정한다. 보통 요소의 위치 지정을 위해 부수적으로 top, lef...
박스모델이란?
박스 모델 웹 페이지의 모든 요소는 박스 형태의 영역을 가지고 있다. 브라우저는 이 박스 모델의 크기와 속성 그리고 위치를 계산하여 웹 페이지를 화면에 띄운다. 박스 모델의 ...
브라우저의 렌더링 과정
이번 포스팅에서는 우리가 브라우저를 켰을 때, 화면에 웹 페이지가 그려지기 까지 과정을 살펴보고자 한다. 본문으로 들어가기 전에, 결론부터 간략히 요약하자면 브라우저는 다음과...
carrot market
[캐럿마켓 클론] Incremental Site Regeneration & Future : React 18
INCREMENTAL SITE REGENERATION 사이트를 빌드한 후 다시 static 페이지를 만들거나 업데이트 - 전체 사이트가 아닌 각 페이지별로 정적으로 페이...
[캐럿마켓 클론] NextJS Deep Dive
MiddileWares V12 미들웨어는 첫 번째 파일 시스템 조회 전에 redirects 및 headers 직후 실행 - 각 라우트 파일 안에 _middleware.t...
[캐럿마켓 클론] Cloud Flare & NextJS Images
CLOUDFLARE IMAGES Introduction Cloudflare 클라우드를 위해 만들어진 전역 네트워크 - 인터넷에 연결하는 모든 것을 안전하고 비밀을 유지하...
[캐럿마켓 클론] Products
Accounts Logic Upsert : Update or Create Records 조건에 맞는 기존 데이터가 있으면 업데이트 없으면 새롭게 생성 - where, c...
[캐럿마켓 클론] Authentication
Accounts Logic Upsert : Update or Create Records 조건에 맞는 기존 데이터가 있으면 업데이트 없으면 새롭게 생성 - where, c...
Web
CORS란?
들어가기전 등장 배경 예전에는 클라이언트가 동일한 서버에서만 리소스를 받았기 때문에, 리소스의 위험성에 대한 의심의 여지가 없었다. 웹 생태계가 다양화되면서 서로 다른 도메인...
브라우저 저장소 (Cookie, Session, Web Storage)
HTTP 프로토콜의 특징은 비연결성과 무상태성이다. 무상태성의 큰 단점은 서버가 클라이언트를 알지 못하기 때문에 매 요청마다 확인해야한다는 것이다. 이를 보완하기 위해, 쿠키...
GET과 POST의 차이
GET 클라이언트가 서버로부터 데이터를 가져와 보여줄 때 사용한다. 즉, 어떠한 정보를 가져와서 조회하기 위해 사용하는 메서드(방식)이다. 클라이언트에서 서버로 요청 시, U...
HTTP란?
HTTP란? HTTP는 하이퍼텍스트 전송 프로토콜(HyperText Transfer Protocol)의 약어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. 웹 페이지...
Browser
프론트엔드 성능 최적화 방법
프론트엔드 성능 최적화란 프론트 단에서 성능이란 다음 두 가지 능력을 의미한다. 로딩 성능 : 다운로드 받은 리소스를 빠르게 해석하는 능력 2. 렌더링 성능 : 해석한 ...
이벤트 플로우 (버블링, 캡처링)
이벤트란? 이벤트란 클릭이나 키보드 입력과 같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 사용자의 입력을 받기 위해, 우린 HTML 요소에 이벤트를 연결해주는데 이것...
브라우저의 렌더링 과정
이번 포스팅에서는 우리가 브라우저를 켰을 때, 화면에 웹 페이지가 그려지기 까지 과정을 살펴보고자 한다. 본문으로 들어가기 전에, 결론부터 간략히 요약하자면 브라우저는 다음과...
Netwrok
브라우저 저장소 (Cookie, Session, Web Storage)
HTTP 프로토콜의 특징은 비연결성과 무상태성이다. 무상태성의 큰 단점은 서버가 클라이언트를 알지 못하기 때문에 매 요청마다 확인해야한다는 것이다. 이를 보완하기 위해, 쿠키...
GET과 POST의 차이
GET 클라이언트가 서버로부터 데이터를 가져와 보여줄 때 사용한다. 즉, 어떠한 정보를 가져와서 조회하기 위해 사용하는 메서드(방식)이다. 클라이언트에서 서버로 요청 시, U...
HTTP란?
HTTP란? HTTP는 하이퍼텍스트 전송 프로토콜(HyperText Transfer Protocol)의 약어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. 웹 페이지...
JavaScript
이터러블 & 이터레이터 & 제너레이터
이터러블 / 이터레이터 이터레이션 프로토콜은 자료를 순회하기 위한 프로토콜(약속된 규칙)이다. 이터레이션 프로토콜을 따르는 객체는 for .. of 문으로 순회 가능하다.
타입스크립트란?
TS는 JS에 추가적으로 데이터의 종류(Type)를 명시해준 언어다. TS 코드는 JS로 변환 (컴파일)되어 실행된다. 그래서, 타입스크립트(TS)도 결국 자바스크립트(JS)다.
비동기 처리 (Promise & async/await)
지난 글에서 한 번에 하나의 작업만 실행할 수 있는 자바스크립트가 어떻게 동시에 여러 작업을 실행할 수 있는 지 알아보았다. 짧게 요약하자면, 자바스크립트 엔진은 하나의 작업...
Carrot Market
React Hook Form & Refactoring
# React Hook Form 사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 React Form 라이브러리 장점 코드량 대폭 감소 - 쉬운 유...
Tailwind Practice
Introduction Tailwind is a utility-first CSS framework 유틸리티는 테일윈드가 여러 클레스 네임을 가지고 있다는 의미. 즉, 테일윈드...
Tour of Tailwind
Introduction Tailwind is a utility-first CSS framework 유틸리티는 테일윈드가 여러 클레스 네임을 가지고 있다는 의미. 즉, 테일윈드...
React
프로젝트 회고 : Mesic - part 2
Project : Mesic Intro 약 한달 간의 프로젝트 기간동안, 우리 팀이 정한 Requirements는 거의 달성하였고 내가 얼추 예상했던대로 앱이 완성되었다. 다...
프로젝트 회고 : Mesic - part 1
Project : Mesic What is Mesic? 어떤 노래를 들으면 생각나는 추억이 모두 하나 쯤은 있다. 그런 추억을 저장할 수 있는 서비스가 있으면 좋을 것 같아서...
React Native
프로젝트 회고 : ASSIST - part 2
Project : ASSIST Intro 약 한달이 조금 넘는 기간동안 정신없이 달려왔다. 우리 팀은 사이드 프로젝트 대회 우승이라는 쾌거(?)를 이루었고 지금은 프로젝트 기...
프로젝트 회고 : ASSIST - part 1
Project : ASSIST What is ASSIST? 풋살 팀이 한번 경기를 하기 위해서 주장은 많은 잡다한 일들을 해야만 한다. 프로젝트 어시스트는 풋살 팀을 운영하는...
blog
Minimal Mistakes 다크모드 버튼 만들기
다크모드 버튼 만들기 요즘 벨로그에서 깃헙 페이지로 블로그를 이전하는 작업을 하고 있는데, 이미 알고 있었지만 상당히 손이 많이 간다… 그래도 하나하나 기능을 만들고 꾸미고 ...
2022.08.04 TIL
😎 Things I Learned ✓ jekyll 블로그가 어떤 방식으로 동작하는지 익혔다. ✓ minimal mistakes 블로그 템플릿의 구조를 커스터마이징했다. 🤔 T...
react native
[React Native] Swipeable로 밀어서 삭제 구현해보기
react-native-gesture-handler/Swipeable로 밀어서 삭제 구현해보기 이번 포스트에서는 react-native-getsture-handler에서 제공...
[React Native] 비밀번호 입력 스크린 만들기
비밀번호 입력 스크린 만들기 이번 포스트에서는 사내 프로젝트에서 결제 비밀번호 스크린을 만든 경험을 공유해보고자 한다. 이 페이지를 처음 기획했을 때, 필요한 기능은 다음과 ...
tutorial
[React Native] Swipeable로 밀어서 삭제 구현해보기
react-native-gesture-handler/Swipeable로 밀어서 삭제 구현해보기 이번 포스트에서는 react-native-getsture-handler에서 제공...
[React Native] 비밀번호 입력 스크린 만들기
비밀번호 입력 스크린 만들기 이번 포스트에서는 사내 프로젝트에서 결제 비밀번호 스크린을 만든 경험을 공유해보고자 한다. 이 페이지를 처음 기획했을 때, 필요한 기능은 다음과 ...
HTML
프론트엔드 성능 최적화 방법
프론트엔드 성능 최적화란 프론트 단에서 성능이란 다음 두 가지 능력을 의미한다. 로딩 성능 : 다운로드 받은 리소스를 빠르게 해석하는 능력 2. 렌더링 성능 : 해석한 ...
브라우저의 렌더링 과정
이번 포스팅에서는 우리가 브라우저를 켰을 때, 화면에 웹 페이지가 그려지기 까지 과정을 살펴보고자 한다. 본문으로 들어가기 전에, 결론부터 간략히 요약하자면 브라우저는 다음과...
Javascript
프론트엔드 성능 최적화 방법
프론트엔드 성능 최적화란 프론트 단에서 성능이란 다음 두 가지 능력을 의미한다. 로딩 성능 : 다운로드 받은 리소스를 빠르게 해석하는 능력 2. 렌더링 성능 : 해석한 ...
브라우저의 렌더링 과정
이번 포스팅에서는 우리가 브라우저를 켰을 때, 화면에 웹 페이지가 그려지기 까지 과정을 살펴보고자 한다. 본문으로 들어가기 전에, 결론부터 간략히 요약하자면 브라우저는 다음과...
HTTP
브라우저 저장소 (Cookie, Session, Web Storage)
HTTP 프로토콜의 특징은 비연결성과 무상태성이다. 무상태성의 큰 단점은 서버가 클라이언트를 알지 못하기 때문에 매 요청마다 확인해야한다는 것이다. 이를 보완하기 위해, 쿠키...
HTTP란?
HTTP란? HTTP는 하이퍼텍스트 전송 프로토콜(HyperText Transfer Protocol)의 약어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. 웹 페이지...
TypeScript
이터러블 & 이터레이터 & 제너레이터
이터러블 / 이터레이터 이터레이션 프로토콜은 자료를 순회하기 위한 프로토콜(약속된 규칙)이다. 이터레이션 프로토콜을 따르는 객체는 for .. of 문으로 순회 가능하다.
타입스크립트란?
TS는 JS에 추가적으로 데이터의 종류(Type)를 명시해준 언어다. TS 코드는 JS로 변환 (컴파일)되어 실행된다. 그래서, 타입스크립트(TS)도 결국 자바스크립트(JS)다.
Tailwind
Tailwind Practice
Introduction Tailwind is a utility-first CSS framework 유틸리티는 테일윈드가 여러 클레스 네임을 가지고 있다는 의미. 즉, 테일윈드...
Tour of Tailwind
Introduction Tailwind is a utility-first CSS framework 유틸리티는 테일윈드가 여러 클레스 네임을 가지고 있다는 의미. 즉, 테일윈드...
backend
프로젝트 회고 : MAPLY
Project : MAPLY What? 나만의 유튜브 플레이리스트를 만들 수 있는 간단한 웹사이트다. 사실 유튜브에서도 이미 제공하고 있는 기능이지만, 백지상태에서 기능을 하...
NodeJS
프로젝트 회고 : MAPLY
Project : MAPLY What? 나만의 유튜브 플레이리스트를 만들 수 있는 간단한 웹사이트다. 사실 유튜브에서도 이미 제공하고 있는 기능이지만, 백지상태에서 기능을 하...
jekyll
2022.08.04 TIL
😎 Things I Learned ✓ jekyll 블로그가 어떤 방식으로 동작하는지 익혔다. ✓ minimal mistakes 블로그 템플릿의 구조를 커스터마이징했다. 🤔 T...
react
문자인증 타이머 만들기
재전송 가능한 문자인증 타이머 회원가입 페이지를 만드는데, 문자인증으로 쓸만한 타이머 라이브러리를 찾지 못했다.. 재전송 버튼을 누르면 타이머를 재시작하고 싶은데.. 😂 그래...
toy
문자인증 타이머 만들기
재전송 가능한 문자인증 타이머 회원가입 페이지를 만드는데, 문자인증으로 쓸만한 타이머 라이브러리를 찾지 못했다.. 재전송 버튼을 누르면 타이머를 재시작하고 싶은데.. 😂 그래...
theme
Minimal Mistakes 다크모드 버튼 만들기
다크모드 버튼 만들기 요즘 벨로그에서 깃헙 페이지로 블로그를 이전하는 작업을 하고 있는데, 이미 알고 있었지만 상당히 손이 많이 간다… 그래도 하나하나 기능을 만들고 꾸미고 ...
dark mode
Minimal Mistakes 다크모드 버튼 만들기
다크모드 버튼 만들기 요즘 벨로그에서 깃헙 페이지로 블로그를 이전하는 작업을 하고 있는데, 이미 알고 있었지만 상당히 손이 많이 간다… 그래도 하나하나 기능을 만들고 꾸미고 ...
nodeJS
프로젝트 회고 : Review Auto-Installer
Project : Review Auto-Installer Intro 현재 근무하고 있는 회사의 자체서비스 중, 쇼핑몰 리뷰관리 솔루션이 있다. 여러 쇼핑몰에서 판매하고 있는 ...
Web API
Intersection Observer API를 활용한 무한 스크롤
무한 스크롤이란? 무한 스크롤 (Infinite Scroll)은 유저가 페이지를 스크롤링 중 최하단에 도달했을 때, 나머지 컨텐츠를 로드하는 페이징 방식으로 페이지 번호를 일...
Map
Map 객체에 대해서 알아보자
최근 코딩 테스트 문제를 풀면서 Map을 이용한 풀이들을 자주 접하였다. key - value 자료형이 필요할 때는 무조건 Object만 썼었는데 Map 객체가 궁금해졌다. ...
hoisting
호이스팅이란?
호이스팅이란? 호이스팅이란 변수 혹은 함수의 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같이 동작하는 자바스크립트의 특징이다. 다음 예시를 보자. jsx console....
scope
스코프란?
스코프란? 변수는 자신이 선언된 위치에 따라, 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 사실, 이건 변수 뿐만 아니라 모든 식별자가 마찬가지다. 모든 식별자...
execution context
실행 컨텍스트란?
실행 컨텍스트 자바스크립트의 실행 컨텍스트(Execution Context)는 코드가 실행되는 환경을 의미하는데, 실행 컨텍스트를 번역하면 “코드의 문맥”으로 즉, 코드가 실...
closure
클로저란?
클로저란? 클로저는 자바스크립트 고유 개념이 아니다. 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 예시 코드 클로저는 조금 난해한 개념이기 때문에 예시 코드를 먼저 ...
bfs
Programmers - Level 2 : 양궁 대회
문제 설명 라이언은 저번 카카오배 양궁대회 우승자이고 이번 대회에도 결승전까지 올라왔다. 결승전 상대는 어피치이다. 결승전 규칙은 전 대회 우승자인 라이언에게 불리하게 다음과...
this
this란?
This란 객체지향 프로그래밍에서 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드가 하나의 논리적인 단위로 묶여진 자료구조다. 메서드가 자신이 속한 객체의 프로퍼티를...
HTTP Method
GET과 POST의 차이
GET 클라이언트가 서버로부터 데이터를 가져와 보여줄 때 사용한다. 즉, 어떠한 정보를 가져와서 조회하기 위해 사용하는 메서드(방식)이다. 클라이언트에서 서버로 요청 시, U...
GET
GET과 POST의 차이
GET 클라이언트가 서버로부터 데이터를 가져와 보여줄 때 사용한다. 즉, 어떠한 정보를 가져와서 조회하기 위해 사용하는 메서드(방식)이다. 클라이언트에서 서버로 요청 시, U...
POST
GET과 POST의 차이
GET 클라이언트가 서버로부터 데이터를 가져와 보여줄 때 사용한다. 즉, 어떠한 정보를 가져와서 조회하기 위해 사용하는 메서드(방식)이다. 클라이언트에서 서버로 요청 시, U...
Network
CORS란?
들어가기전 등장 배경 예전에는 클라이언트가 동일한 서버에서만 리소스를 받았기 때문에, 리소스의 위험성에 대한 의심의 여지가 없었다. 웹 생태계가 다양화되면서 서로 다른 도메인...
CORS
CORS란?
들어가기전 등장 배경 예전에는 클라이언트가 동일한 서버에서만 리소스를 받았기 때문에, 리소스의 위험성에 대한 의심의 여지가 없었다. 웹 생태계가 다양화되면서 서로 다른 도메인...
Event Flow
이벤트 플로우 (버블링, 캡처링)
이벤트란? 이벤트란 클릭이나 키보드 입력과 같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 사용자의 입력을 받기 위해, 우린 HTML 요소에 이벤트를 연결해주는데 이것...
Event Capturing
이벤트 플로우 (버블링, 캡처링)
이벤트란? 이벤트란 클릭이나 키보드 입력과 같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 사용자의 입력을 받기 위해, 우린 HTML 요소에 이벤트를 연결해주는데 이것...
Event Bubbling
이벤트 플로우 (버블링, 캡처링)
이벤트란? 이벤트란 클릭이나 키보드 입력과 같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 사용자의 입력을 받기 위해, 우린 HTML 요소에 이벤트를 연결해주는데 이것...
Box Model
박스모델이란?
박스 모델 웹 페이지의 모든 요소는 박스 형태의 영역을 가지고 있다. 브라우저는 이 박스 모델의 크기와 속성 그리고 위치를 계산하여 웹 페이지를 화면에 띄운다. 박스 모델의 ...
position
position 속성 이해하기
position 속성 position 속성은 웹 페이지에서 요소의 위치(position)를 배치하는 방식을 결정한다. 보통 요소의 위치 지정을 위해 부수적으로 top, lef...
Event Loop
이벤트 루프란?
들어가기전 자바스크립트는 싱글 스레드 기반 언어다. 즉, 자바스크립트 엔진은 한 번에 하나의 작업(task)만 할 수 있다. 그럼에도 불구하고, 자바스크립트는 여러 작업을 동...
Microtask Queue
이벤트 루프란?
들어가기전 자바스크립트는 싱글 스레드 기반 언어다. 즉, 자바스크립트 엔진은 한 번에 하나의 작업(task)만 할 수 있다. 그럼에도 불구하고, 자바스크립트는 여러 작업을 동...
Macrotask Queue
이벤트 루프란?
들어가기전 자바스크립트는 싱글 스레드 기반 언어다. 즉, 자바스크립트 엔진은 한 번에 하나의 작업(task)만 할 수 있다. 그럼에도 불구하고, 자바스크립트는 여러 작업을 동...
synchronous
동기와 비동기 & 블로킹과 논블로킹
들어가며 JavaScript is a single-threaded, non-blocking, asynchrounous programming language. 자바스크립트...
asynchronous
동기와 비동기 & 블로킹과 논블로킹
들어가며 JavaScript is a single-threaded, non-blocking, asynchrounous programming language. 자바스크립트...
block
동기와 비동기 & 블로킹과 논블로킹
들어가며 JavaScript is a single-threaded, non-blocking, asynchrounous programming language. 자바스크립트...
non-block
동기와 비동기 & 블로킹과 논블로킹
들어가며 JavaScript is a single-threaded, non-blocking, asynchrounous programming language. 자바스크립트...
Promise
비동기 처리 (Promise & async/await)
지난 글에서 한 번에 하나의 작업만 실행할 수 있는 자바스크립트가 어떻게 동시에 여러 작업을 실행할 수 있는 지 알아보았다. 짧게 요약하자면, 자바스크립트 엔진은 하나의 작업...
Async/Await
비동기 처리 (Promise & async/await)
지난 글에서 한 번에 하나의 작업만 실행할 수 있는 자바스크립트가 어떻게 동시에 여러 작업을 실행할 수 있는 지 알아보았다. 짧게 요약하자면, 자바스크립트 엔진은 하나의 작업...
REST
REST API란?
REST(Representation State Transfer)는 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것이다. 자원 : 한 소프트웨어가 ...
RESTful API
REST API란?
REST(Representation State Transfer)는 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것이다. 자원 : 한 소프트웨어가 ...
CSR
CSR vs SSR
MPA vs SPA 웹 어플리케이션의 페이지 구성 방식은 MPA와 SPA로 구분된다. MPA MPA (Multiple Page Application)는 여러 페이지로 구성된 ...
SSR
CSR vs SSR
MPA vs SPA 웹 어플리케이션의 페이지 구성 방식은 MPA와 SPA로 구분된다. MPA MPA (Multiple Page Application)는 여러 페이지로 구성된 ...
Universal Rendering
CSR vs SSR
MPA vs SPA 웹 어플리케이션의 페이지 구성 방식은 MPA와 SPA로 구분된다. MPA MPA (Multiple Page Application)는 여러 페이지로 구성된 ...
웹 표준
웹 표준이란?
웹 표준 웹 표준은 웹에서 사용되는 기술들(HTML, CSS, JS)의 표준을 통일시켜 브라우저와 기기 간의 호환성을 높이고 모두가 동일한 사용자 경험을 할 수 있도록 하는 ...
시맨틱 태그
웹 표준이란?
웹 표준 웹 표준은 웹에서 사용되는 기술들(HTML, CSS, JS)의 표준을 통일시켜 브라우저와 기기 간의 호환성을 높이고 모두가 동일한 사용자 경험을 할 수 있도록 하는 ...
웹 접근성
웹 표준이란?
웹 표준 웹 표준은 웹에서 사용되는 기술들(HTML, CSS, JS)의 표준을 통일시켜 브라우저와 기기 간의 호환성을 높이고 모두가 동일한 사용자 경험을 할 수 있도록 하는 ...
React Hook Form
React Hook Form & Refactoring
# React Hook Form 사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 React Form 라이브러리 장점 코드량 대폭 감소 - 쉬운 유...
node.js
백준 14891번 - 톱니바퀴 (JS)
문제 설명 총 8개의 톱니를 가지고 있는 톱니바퀴 4개가 일렬로 놓여져 있다. 톱니는 N극 또는 S극 중 하나를 나타내고 있다. 톱니바퀴에는 1번부터 4번까지 번호가 매겨져 ...
baekjoon
백준 14891번 - 톱니바퀴 (JS)
문제 설명 총 8개의 톱니를 가지고 있는 톱니바퀴 4개가 일렬로 놓여져 있다. 톱니는 N극 또는 S극 중 하나를 나타내고 있다. 톱니바퀴에는 1번부터 4번까지 번호가 매겨져 ...
14891
백준 14891번 - 톱니바퀴 (JS)
문제 설명 총 8개의 톱니를 가지고 있는 톱니바퀴 4개가 일렬로 놓여져 있다. 톱니는 N극 또는 S극 중 하나를 나타내고 있다. 톱니바퀴에는 1번부터 4번까지 번호가 매겨져 ...
톱니바퀴
백준 14891번 - 톱니바퀴 (JS)
문제 설명 총 8개의 톱니를 가지고 있는 톱니바퀴 4개가 일렬로 놓여져 있다. 톱니는 N극 또는 S극 중 하나를 나타내고 있다. 톱니바퀴에는 1번부터 4번까지 번호가 매겨져 ...
Cloud Flare
[캐럿마켓 클론] Cloud Flare & NextJS Images
CLOUDFLARE IMAGES Introduction Cloudflare 클라우드를 위해 만들어진 전역 네트워크 - 인터넷에 연결하는 모든 것을 안전하고 비밀을 유지하...
Layout
CSS 레이아웃 (Flexbox, Grid) 정리
# Flexbox display 속성 block box의 개념 - width(너비)와 height(높이)를 가짐 - 옆으로 margin이 존재 - element가 한 줄...
Flex
CSS 레이아웃 (Flexbox, Grid) 정리
# Flexbox display 속성 block box의 개념 - width(너비)와 height(높이)를 가짐 - 옆으로 margin이 존재 - element가 한 줄...
Grid
CSS 레이아웃 (Flexbox, Grid) 정리
# Flexbox display 속성 block box의 개념 - width(너비)와 height(높이)를 가짐 - 옆으로 margin이 존재 - element가 한 줄...
SCSS
SCSS 핵심 문법 정리
# SCSS란 CSS preprocessor (전처리기) - CSS로 컴파일되는 스크립트 언어 - 추가 기능과 유용한 도구를 제공하여, CSS의 태생적 한계 보완 ...
React Hooks
React Hooks 살펴보기
# useState React의 가장 기본이 되는 Hook으로 컴포넌트를 리렌더(rer-ender)시킬 수 있다. state를 setState를 호출하여 값을 변경하면, 변경...
Optimization
React Hooks 살펴보기
# useState React의 가장 기본이 되는 Hook으로 컴포넌트를 리렌더(rer-ender)시킬 수 있다. state를 setState를 호출하여 값을 변경하면, 변경...
useCallback
React Hooks 살펴보기
# useState React의 가장 기본이 되는 Hook으로 컴포넌트를 리렌더(rer-ender)시킬 수 있다. state를 setState를 호출하여 값을 변경하면, 변경...
useMemo
React Hooks 살펴보기
# useState React의 가장 기본이 되는 Hook으로 컴포넌트를 리렌더(rer-ender)시킬 수 있다. state를 setState를 호출하여 값을 변경하면, 변경...