frontEnd 5

[Next.JS] Route Groups, Merging Layouts

- 목차 route groups 란?왜 필요할까?예제route groups 와 layout 병합레이아웃 병합이란?병합 순서예제정리📝 Route GroupsNext.js 13부터 도입된 App Router는 파일 기반 라우팅을 더 유연하고 강력하게 만들어준다.그중에서도 Route Groups는 프로젝트 구조는 깔끔하게 유지하면서도 URL 구조에 영향을 주지 않도록 해주는 아주 유용한 기능이다.📌 Route Groups란?Route Groups는 URL 경로에는 포함되지 않지만, 폴더 구조를 논리적으로 그룹화(logical groups) 할 수 있도록 해주는 기능이다. Next.js에서는 폴더 이름을 () 괄호로 감싸면 해당 폴더는 URL 경로에 포함되지 않는다.📂 예: (auth)이 폴더는 실제 U..

frontEnd/nextjs 2025.04.22

console.log("Hoisting");

📌 Hoisting- Hoisting 은 무엇인가?JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.- 출처 : MDN JavaScript 엔진이 코드를 실행하기 전에 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 것처럼 동작하는 특징이다.실제로 코드의 위치가 변경되는 것은 아니며, 변수와 함수 선언이 실행 컨텍스트 생성 단계 에서 메모리에 등록된다.변수는 선언만 끌어올려지며 초기화는 끌어올려지지 않는다.- Hoisting 과정JavaScript 는 코드를 실행하기 전에 Execution Context를 생성한다.실행 컨텍스트가 생성될 때, 변수와 함수 선언이 메모리..

frontEnd/javaScript 2024.12.19

console.log("JavaScript 싱글 스레드");

자바스크립트언어는 싱글 스레드 언어인데 실제 사용시에는 멀티 스레드 처럼 사용을 한다.어떻게 사용하나?  기술면접 예상 질문리스트에 답을 달던 중. 위의 질문을 보았고 다음과 같은 답변을 생각해냈다.JavaScript 비동기 처리 동작 방식을 사용해 오래 걸리는 작업이 Call Stack으로 들어오면 Web API로 보내 별도로 처리하도록 한다.Web API에서 처리가 끝난 작업들은 곧바로 Call Stack으로 들어가지 못하고 Task Queue에 순서대로 들어간다.Event Loop가 Call Stack이 비어 있는 것을 계속 체크하고 Call Stack이 빈다면 Task Queue에서 가장 오래된 (가장 앞에 있는)작업을 Call Stack으로 보낸다. 널리 알려있듯 비동기 처리 동작 방식으로 Ja..

frontEnd/javaScript 2024.09.03

console.log("Object.is 와 일치 === 연산");

일치(===) 연산자 는 비교(==) 연산자 와 같이 좌항과 우항의 값을 비교하는 비교연산자 다.그렇다면 왜 하나는 '='이 3개이고 나머지 하나는 2개일까?왜 그런지 알아보고 둘중 어느게 더 좋고, 혹시 문제는 없는지 알아보자. 동등(==) 연산자동등 (==) 연산자는 좌항과 우항이 동일한지 참 거짓 여부를 판정해주는 연산자다.일반적으로 아래와 같이 값의 비교를 필요로 하는 경우에 사용되는데 그렇다면 == 연산자만 있어도 충분한거 아닐까 싶지 않을까?let num1 = 1;let num2 = 1;let num3 = 2;let result1 = num1 == num2 ? true : false;let result2 = num1 == num3 ? true : false;console.log(result1..

frontEnd/javaScript 2024.07.29

[코린이의 공부] flatMap vs filter,map (지적 환영)

들어가기 앞서. front end 개발자의 꿈을 꾸고 있는 코린이로 공부를 하는 과정을 기록하기 위한 블로그 입니다.그렇기에 코딩을 배우는 상황인 분이 보기에는 적합하지 않을 수 있기 때문에 주의가 필요합니다.최대한 틀리지 않은 내용을 적으려 노력 중이지만, 많은 부분에서 틀릴 예정입니다...틀린 부분에 대한 지적, 교정은 항상 감사드립니다. 그렇다면, 코린이의 기록 시작하겠습니다. flatMap 과 filter, map우선 두 함수의 실행 결과는 조건이 같다는 가정으로 동일한 결과를 보인다. 우선 filter와 map 을 사용한 코드를 보자. // using filterAndMapconsole.time("filterAndMap")const numbers = [1, 2, 3, 4, 5, 6, 7, 8, ..

frontEnd/javaScript 2023.11.30