개발

- Javascript(이하 JS)에서 함수란 작업을 수행, 값 계산 등 이를 하나의 블록으로 감싸서 만들어 놓은 실행 단위. /* 함수의 기본적인 형태 */ function add(a,b) { return a + b } add(10, 10) // 20 - function으로 시작해서 '}' 부분까지가 함수를 정의한 부분. - function뒤에 오는 함수명, 입력값으로 받는 a,b를 매개변수, return은 반환값. - 해당 함수의 이름을 사용해 함수를 호출하는데 add뒤에 넘겨준 뒤의 2개의 값을 인수라고 한다. - 해당 예제코드를 보면 add라는 함수를 선언하고 a와 b라는 두개의 매개변수를 활용 return a,b를 반환하는 형태

Front-End/Javascript 2024. 4. 7. 16:25

즉시 실행 함수(Immeadiately Invoked Function Expresstion), IIFE. /* IIFE 예제 */ (function( (a,b) { return a+b })(10, 10) // 20 ((a,b) => { return a + b },)(10, 10) // 20 - 함수를 정의하고 그 순간 즉시 실행되는 함수를 의미하며, 단 한번만 호출되고 다시 호출할 수 없다. - 재호출이 불가능하기 때문에 일반적으론 함수에 이름을 붙이지 않는다. - 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있다는 장점이 있으며, 함수 내부에 있는 값이 아니고서는 접근이 불가능하다. - 재호출되지 않는다는 점을 각인시킬 수 있어 리팩터링에 장점. - 단 한번만 실행되는 함수라면 I..

Front-End/Javascript 2024. 4. 7. 16:14

1. NextJS의 핵심기능 파일 기반 라우팅 사전 렌더링을 위한 데이터 패칭 등 NextJS 기능 및 페이지들을 표준 React 기능과 컴포넌트 Context, Ref 등 React를 구성하는 모든 것들과 조합하는 방법 API 라우터를 NextJS로 풀스택 Application을 구축하는 방법 2. 프로덕션용 앱 구축을 위한 개념 최적화 가능성 (페지이 메타데이터 설정 방법, 이미지 최적화로 적은 이미지 제공하고지연 로딩하기) 내부에서 일어나는 작업 및 이론 앱의 배포 및 구성과 NextJS Application을 구축하는 다양한 방법 NextJS 프로젝트에서 인증 추가하는 방법 3. 요약 React 복습하기. 2023.11.30 - [Front-End/React] - React란? React란? 1...

Front-End/NextJs 2023. 11. 30. 16:49

1. ReactJS는 정확히 무엇이고 왜 사용해야 할까? 사용자 interfaces 구축을 위한 JS library. 클라이언트 측 JS로 방문자의 브라우저에서 실행되는 JS 코드로 로딩된 이후의 웹페이지를 조작할 수 있다. 그러면 웹사이트에서 다양한 상호 작용을 할 수 있는 사용자 인터페이스를 구축할 수 있어. 예를 들어 Netfilx가 있어 새로고침 버튼을 사용할 필요가 없으니 새 HTML 페이지를 생성하도록 기다릴 필요가 없어. 그 이유는 JS 덕분으로 우리가 작업하는 동안 해당화면에 보이는 내용인 DOM을 업데이트 해주거든. 그리고 모바일 앱에서 볼 수 있듯 UI를 통해서 훌륭한 사용자 경험을 제공해. 기존에는 JS에서 명령형 접근 방식으로 element를 생성하고 해당 element에 이벤트를 ..

Front-End/React 2023. 11. 30. 16:48

● A fullstack framework for ReactJS 에 대한 의미 NextJS를 사용하면 개발자들이 React 프로젝트에 백엔드 코드를 추가하는 작업을 수월하게 할 수 있다. 서버 측 사전 렌더링을 통한 클라이언트 측 코드뿐만 아니라 예를 들어, 파일 시스템으로 작동을 하거나 데이터베이스로 전달이 되는 독립적인 백엔드 코드도 포함하는 풀스택 React 프로젝트가 있을 때, NextJS를 사용하면 NodeJS 코드를 통해 쉽게 백엔드 API를 React 프로젝트로 추가할 수 있음. DB, 파일로 데이터를 저장하는 코드, 데이터를 가져오기, 인증을 추가는 등의 코드를 추가하는 작업이 수월해진다. 그러면 독립적인 REST API 프로젝트를 구축할 필요 없이 하나의 프로젝트로 작업을 하면서 Reac..

Front-End/NextJs 2023. 11. 23. 17:00

● 파일 기반 라우팅이란 기존의 React에는 라우터가 아예 없다. 라우팅이란 사용자에게 여러 개의 페이지가 있는 듯한 착각을 불러일으키는 것으로 탐색하며 페이지를 로드하는게 라우터의 역할임. 일반적으로 React Router를 사용한다. 라우터는 URL을 확인해 URL이 변경될 때 브라우저가 요청을 서버로 보내는 기본 동작을 방지하고, 그 대신에 React를 통해 페이지 상에 다른 콘텐츠를 렌더링한다. 즉, 다른 컴포넌트를 보여주는 것으로 라우팅이다. 서버에 추가 요청을 보내지 않고도 URL에 기반해 화면에 나타나는 내용을 변경하는 것이다. 일반적으로, React를 통해 구축되는 SPA 상에 계속 머무르고 있는 것이다. React를 사용하면 라우팅은 통상적으로 코드에 설정되게 된다. React Rout..

Front-End/NextJs 2023. 11. 23. 16:48

● NextJS의 핵심기능 SSR(Server Side Rendering): Client가 아닌 서버 측의 페이지 상에 랜더링되는 콘텐츠에 대한 처리. React 만을 이용해서 구축된 Application에서는 기본적인 HTML 뼈대와 Entry point 및 id="root" 부분에만 React app이 로딩되고 랜더링 되므로. 랜더링 되는 전부는 React에 의해 처리가 됨. React는 CSR JS library이기 때문에 랜더링은 모두 Client에서 처리되므로 사용자의 브라우저에서 실행됨. 사용자 페이지를 방문했을 때 서버에서 클라이언트 측으로 전송되는 HTML 코드에서는 특별한 내용이 없음. 무엇을 구축하느냐에 따라 해당 부분이 문제가 될 수 있음.예를 들어, 일부 데이터를 화면에 '모임 약속..

Front-End/NextJs 2023. 11. 23. 16:20

● NextJS에 대한 정의 The React Framework for the Web : 리액트 앱을 쉽게 구축할 수 있도록 도와줌. 더보기 ▷React: React code, React components, use React features (props, state, context...) ▷Framework: built-in features that help solve common problemsd and clear guidance on how to use those features A fullStack framework for ReactJS: 리액트 상의 구축된 프레임워크. 코드 작성에 대한 규칙, 파일에 대한 구조화에 대한 가이드 라인을 준수해야 함. 따라서 리액트 상에 구축된 프레임 워크로 Rea..

Front-End/NextJs 2023. 11. 23. 13:46