mnz.log - mysetting

12:44 5/31

velog.io

mobile screenshot relative

12:44

velog.io

mobile screenshot

mnz.log
https://velog.io/@mnz

(๑•̀ㅂ•́)و✧

저작도구: velog

최종 피드 수집: 2025-03-16 18:15

전체 (33)

3y

[FE Basic] 브라우저 렌더링 과정

1. 브라우저란? (Chrome, Safari 등)
사용자가 보고자 하는 페이지를 서버에 요청하고 받은 응답(HTML, CSS, JavaScript 등)을 표시한다.
1-1. 기본 구조
User Interface
요청한 페이지를

000

3y

[Data Structure] 큐(Queue) - JS

1. ADT(Abstract Data Type) or 추상 자료형
데이터의 구체적인 구현 방식은 생략하고 데이터의 추상적 형태와 다루는 방법만 정한 것이다.
큐(Queue), 스택(Stack), 트리(Tree)
2. 큐(Queue

000

3y

[React + TS] 커스텀 Hooks 생성 후 TypeScript 타입 지정하기

💡 들어가며
커스텀 Hooks 생성 후 TypeScript 타입 지정하는 방법에 대해 작성했습니다.
hooks 디렉터리를 만들고, 그 안에 useInput.ts 파일을 만들었습니다.
커스텀 Hooks 를 만들 때는 보통 이렇게

000

3y

[Next.js] Next 프로젝트에서 라이브러리 없이 Google Analytics 적용하기

💡 들어가며
colfume 프로젝트를 진행하면서 처음으로 Google Analytics를 적용해봤습니다.
React 프로젝트에서 GA를 적용할 때 react-ga 라이브러리를 가장 많이 사용한다고 합니다. 그런데 GA 추적 코드

000

3y

[React] 객체 생성할 때 동적으로 key 값 할당하는 방법

💡 들어가며
React 에서 객체를 생성할 때 동적으로 key 값 할당하는 방법에 대해 정리했습니다 🤔
React 에서 서버에 객체를 전송할 때 (post) 사용자가 입력한 값을 객체의 value 로 저장하고 동적으로 key

000

3y

[React] TypeScript & styled-components 사용 방법

💡 들어가며
TypeScript & styled-components 사용 방법에 대해 정리했습니다 🤔
Next.js, TypeScript, styled-components 를 사용한 프로젝트에서 발생한 TS 에러를 해결하며 배

001

3y

[Programmers][Python3] 최대공약수와 최소공배수

❓ 문제: 최대공약수와 최소공배수
❗ 최대공약수와 최소공배수 풀이
def solution(n, m):
min = 0
answer = []
for i in range(n, 0, -1):
if n

001

3y

[Programmers][Python3] x만큼 간격이 있는 n개의 숫자

❓ 문제: x만큼 간격이 있는 n개의 숫자
❗ x만큼 간격이 있는 n개의 숫자 풀이
def solution(x, n):
answer = []
for i in range(n):
answer.append(

001

3y

[Programmers][Python3] 행렬의 덧셈

❓ 문제: 행렬의 덧셈
❗ 행렬의 덧셈 풀이
def solution(arr1, arr2):
answer = []
for i in range(len(arr1)):
s = []
for j i

001

3y

[Programmers][Python3] 핸드폰 번호 가리기

❓ 문제: 핸드폰 번호 가리기
❗ 핸드폰 번호 가리기 풀이
def solution(phone_number):
first = ''.join("*" * (len(phone_number) - 4))
last = phone

001

3y

[Programmers][Python3] 평균 구하기

❓ 문제: 평균 구하기
❗ 평균 구하기 풀이
def solution(arr):
sum = 0
for i in range(len(arr)):
sum = sum + arr[i]
return sum/

001

3y

[Programmers][Python3] 콜라츠 추측

❓ 문제: 콜라츠 추측
❗ 콜라츠 추측 풀이
def solution(num):
cnt = 0
while cnt <= 500:
if num == 1:
return cnt

001

3y

[Programmers][Python3] 짝수와 홀수

❓ 문제: 짝수와 홀수
❗ 짝수와 홀수 풀이
def solution(num):
if (num%2==0):
return "Even"
else:
return "Odd"
✅ 다른 사람의 풀이

001

3y

[React] react-virtualized 를 사용한 Infinity Scroll 최적화

💡 들어가며
react-virtualized 를 사용한 Infinity Scroll 최적화에 대해 정리했습니다.
windowing 기법과 크롬 개발자 도구를 활용한 성능 측정 방법에 대해 먼저 알아본 후 react-virtual

000

3y

[Clean Code] 함수 (JS)

💡 들어가며
클린코드 함수 관련 내용을 공부하기 전, 같이 읽으면 좋을 내용을 가져왔습니다.
프로그래머는 시스템을 구현할 프로그램이 아니라 풀어갈 이야기로 여긴다.
프로그래밍 언어라는 수단을 써 좀 더 풍부하고 좀 더 표현력이

000

3y

[Gatsby] Gatsby 개념 이해하고 튜토리얼 시작하기

💡 들어가며
Gatsby 에 대해 처음 공부하면서 새롭게 알게 된 점을 정리했습니다 😯
Gatsby 란 무엇인지, 어떠한 장점이 있는지 전반적인 개념에 대해 알아본 후 튜토리얼을 통해 Gatsby 개발 시작하는 과정을 정리했습

000

3y

[React] useRef 개념부터 활용까지 🎡

💡 들어가며
React 의 Hook 함수 중 하나인 useRef 에 대해 정리했습니다 🤔
useRef 개념에 대해 알아본 후 활용 예제를 통해 실제 useRef 를 적용한 코드에 대해 살펴보겠습니다.
1. useRef 가 무엇

000

3y

[Clean Code] 단위 테스트 (JS)

💡 들어가며
클린 코드 중 TDD 관련 내용을 정리했습니다 🤔
깨끗한 테스트 코드는 실제 코드만큼이나 프로젝트에 중요한 사항입니다.
실제 코드의 유연성, 유지 보수성, 재사용성을 보존하고 강화하기 때문입니다.
1. TDD 법칙

000

3y

[Webpack] 웹팩 개념 알아보기

💡 들어가며
웹팩에 대해 들어본 적은 있지만 제대로 공부한 적은 없어서 이번에 개념부터 차근차근 공부하며 정리해봤습니다!
웹팩이란 무엇인지, 왜 사용하는지부터 시작해서 어떠한 장점이 있는지 전반적인 개념에 대해 알아보고 정리했습

202

3y

[React] useEffect 활용하기

💡 들어가며
벨로퍼트와 함께하는 모던 리액트의 useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기를 읽고 정리한 글입니다.
useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타

000