본문 바로가기
728x90

개발일지

[Next.js] Routing (상황에 따른 파일 이름, 파일 이름을 따르고 동적으로 변할 수 있는 URL Path)
개발일지/Next.js 2024. 5. 9. [Next.js] Routing (상황에 따른 파일 이름, 파일 이름을 따르고 동적으로 변할 수 있는 URL Path) * 해당 게시글은 인프런 강의 '하조은_[손에 익는 Next.js] Part 1 - 공식 문서 훑어보기'를 수강한 후 정리하였습니다. RoutingNext.js에서는 경로를 지정하는 방식을 '파일 시스템'기반으로 하고, app이라는 디렉토리 아래에 정의된다.이런 방식을 App Router라고 한다.폴더 이름을 따르는 URL Pathapp이라는 디렉토리 안에 어떤 폴더를 정의하고 그 안에 규칙에 맞는 파일을 정의하면 url path와 일치하는 형태로 사용할 수 있다는 것을 의미한다.Next.js에서 경로의 이름이 되는 폴더를 세그먼트(Segment)라고 부른다.app은 가장 기초가 되는 세그먼트로 루트 세그먼트(root segment)라고 부른다.라우트를 표현하는 폴더의 경우 해당 폴더를 라우트 세그먼트(..
개발일지/Next.js 2024. 4. 19. [Next.js] Server/Client Component (서버 컴포넌트, 클라이언트 컴포넌트) - 장단점, 활용패턴, 사용해야 하는 경우 * 해당 게시글은 인프런 강의 '하조은_[손에 익는 Next.js] Part 1 - 공식 문서 훑어보기'를 수강한 후 정리하였습니다. Server Component React Server Component(RSC) React 18에서 도입된 기술 App Router가 기존 방식과 다르게 컴포넌트 단위로 Hydration이 가능해졌는데, 이를 가능하게 만든 기술 중 하나가 서버 컴포넌트이다. 서버 컴포넌트의 장점 데이터 페칭 : 서버에서 데이터를 직접 가져올 수 있어 데이터 페칭이 빠르다. 보안 : 민감한 정보를 서버에서 직접 데이터를 처리함으로써 중요한 데이터가 클라이언트 측 코드에 노출되지 않는다. 캐싱 : 자주 요청되는 정보를 서버에서 캐시 하면 만들어진 결과를 내려주면 되어 이후 요청에 대해 빠르게..
[Javascript] Callback_실행시점, 매개변수, this 제어권 위임
개발일지/JavaScript 2024. 4. 11. [Javascript] Callback_실행시점, 매개변수, this 제어권 위임 * 해당 게시글은 인프런 강의 '정재남_코어 자바스크립트'를 수강한 후 정리하였습니다. callback Function 회신되는 함수 콜백함수를 다른 함수나 메서드에 인자로 넘김으로써, 그 콜백 함수의 실행 시점이나 방법, 매개변수 등을 그 함수나 메서드가 결정하도록 하는 것을 의미한다. 비동기 처리, 이벤트 퍼리 등의 상황에서 사용된다. 제어권 위임 콜백 함수의 실행시점, 매개변수, this의 제어권을 위임하게 된다. 실행시점 예시 1. setInterval은 일정한 주기로 한 번씩 인자로 받은 함수를 실행하는 주기함수이다. setInterval은 첫 번째 인자로 Callback함수를 넘겨주고 두 번째 인자로 ms단위의 주기를 넘겨주게 된다. 결국 setInterval( callback, millise..
개발일지/JavaScript 2024. 4. 5. [Javascript] ThisBinding_전역, 함수, 메서드, callback, 생성자 함수(new) 호출 시의 this / this 바인딩 명령어(call, apply, bind) * 해당 게시글은 인프런 강의 '정재남_코어 자바스크립트'를 수강한 후 정리하였습니다. This thisBinding은 실행 컨텍스트가 활성화되는 순간에 this를 바인딩 하는 것을 말한다. 따라서 this는 함수가 호출될 때 결정된다. 해당 함수의 호출 방식에 따라 this의 값이 달라지게 된다. 전역 공간에서의 This 전역공간에서의 this는 전역 객체를 가리킨다.(무조건이다. 암기) 개념상 전역 컨텍스트를 실행하는 주체가 전역 객체이기 때문이다. 전역 객체는 호스트 객체라고도 하는데, 자바스크립트의 런타임 환경에 따라 전역객체의 정보가 달라진다. 브라우저에서는 window, 노드JS에서는 global을 가리킨다. 함수 호출 시의 This 함수를 호출 할때도 this는 전역 객체를 가리킨다. 예시 ..
개발일지/Next.js 2024. 4. 3. [Next.js] Next.js / App Routing * 해당 게시글은 인프런 강의 '하조은_[손에 익는 Next.js] Part 1 - 공식 문서 훑어보기'를 수강한 후 정리하였습니다. Next.js 기존의 Next는 React App과 달리 파일 시스템 기반의 라우팅을 지원한다. 디렉토리 구조를 어떻게 짜느냐에 따라 라우팅이 달라진다는 것이다. 2022년 10월 25일. Next.js Conf에서 pages 디렉토리를 App으로 변경한다는 새로운 패러다임 제시. App Routing 초기에는 'App Directory'라고 불렸다. 기존의 페이지 단위의 Hydration을 컴포넌트 단위로 할 수 있게 되었다. 이런 부분적인 Hydration을 스트리밍 패턴이라고 부른다. 유저가 처음에 받아들여야 하는 리소스의 양이 줄어드는 것이 장점 중 하나. Hydr..
[Javascript] 데이터 타입(Data Type)_기본형(Primitive)과 참조형(Reference)의 메모리 할당 순서와 차이점
개발일지/JavaScript 2023. 12. 14. [Javascript] 데이터 타입(Data Type)_기본형(Primitive)과 참조형(Reference)의 메모리 할당 순서와 차이점 자바스크립트에서 데이터 타입(Data Type)은 기본형과 참조형으로 크게 두 가지로 분류된다. 각 데이터 타입에 대한 메모리 할당 순서와 어떤 차이점이 있는지 살펴보고자 한다. 기본형 타입(Primitive Type) 원시 타입이라고도 한다. 원시 타입의 변수들은 데이터 복사가 일어날 때, 메모리 공간을 새로 확보하여 독립적인 값을 저장한다. null을 제외한 모든 기본 타입은 typeof연산자로 테스트가 가능하다. typeof null은 object를 반환한다. 때문에 == null을 테스트해야 한다. 기본형 타입에는 총 6가지 타입이 존재한다. Number String Boolean null undefined Symbol Symbol은 ES6에서 추가된 타입이다. 참조형 타입(Reference Ty..
[Next.js] 공식문서 살펴보기_Next.js가 무엇인가? / Pre-rendering(프리렌더링) / 서버리스(serverless)
개발일지/Next.js 2023. 10. 12. [Next.js] 공식문서 살펴보기_Next.js가 무엇인가? / Pre-rendering(프리렌더링) / 서버리스(serverless) 코딩을 시작하고 학원에 다니면서 여러 스킬들을 배우게 되었다. JavaScript를 배우고, React를 배우면서 Next.js라는 이름을 종종 접하게 되었다. React로 배포를 진행하는 과정에서 Next.js를 사용하면 더 편했을 것이다라는 이야기를 들었고, 리액트 프로젝트 과정에서 배포를 하는 과정에 많은 어려움을 겪은 경험이 있어 Next.js가 더더욱 궁금해졌고, 추천받은 인프런 강의를 들어 개념을 파악하고 직접 공식문서와 여러 자료들을 살펴보고 정리하고자 한다. Next.js? Next.js란 빠른 웹 어플리케이션을 만들 수 있는 필요한 도구를 제공하는 React 프레임워크이다. 간략하게 설명하자면, React는 사용자 인터페이스를 구축하는 라이브러리라고 할 수 있다. 라이브러리란, 개발자가 ..
개발일지/JavaScript 2023. 9. 15. [Javascript] Math.pow(), Math.sqrt()_거듭제곱 메소드, 제곱근 메소드 프로그래머스 코딩테스트를 풀다가 제곱근 문제를 만났다. 제곱근을 어떻게 구해야 하나,,, 반복문을 돌리면서 풀어야 하나 고민을 하다, 제곱근을 구해주는 메서드가 있다고 해서 알아본 내용을 정리하고자 한다. 아래의 문제가 이번 포스팅에서 소개할 메소드들을 사용한 문제이다. [코딩테스트] 230915_정수 제곱근 판별 정수 제곱근 판별 function solution(n) { return Math.sqrt(n) % 1 == 0 ? Math.pow((Math.sqrt(n) + 1),2) : -1 } 한 줄 쓰기에 재미들려서 메서드 찾아가면서 풀었다 😆 너무 짜릿해,,,,, ㅎㅎ oo0ojw.tistory.com Math.pow() base^exponent 방식으로 연산되는 메서드이다. base에 exponen..
개발일지/JavaScript 2023. 7. 21. [Javascript] replace, replaceAll. 문자열에서 특정값 제거, 특정값 전부 제거 프로그래머스 코딩테스트를 문제를 풀다가 문자열에서 원하는 값을 빼는 문제를 만났다. 사실 split을 알고있어서 간단히 해결될 문제라고 생각했는데 특정 값을 전부 제거해야 하는데 한 개의 값만 제거되서 새로운 메소드를 공부하게 되었다. 그 메소드가 replaceAll인데, replace까지 함께 알아보고자 한다. replace() replace()메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다. 패턴은 어떤 문자열이 될 수도, 정규식이 될 수도 있다. 반환되는 값은 모든 매치에 대해서 호출된 함수일 수 있다. 구문 var newStr = str.replace(regexp|substr, newSubstr|function) replaceAll() replaceAll() ..
728x90

티스토리툴바