'분류 전체보기' 카테고리의 글 목록 (8 Page)

Next.js 이 4가지는 뭐가 다를까요? 🤔 getInitialProps / getServerSideProps / getStaticPaths / getStaticProps

2023.04.25

여러분, 안녕하세요! Next.js 프레임워크로 멋진 웹사이트를 만들려는 분들을 위해, 제가 오늘 여러분들에게 Next.js에서 사용하는 4가지 데이터 가져오기 기법을 소개해드릴 거예요! 이 글을 통해 각각 어떻게 다른지 이해하고, 어떤 상황에 어떤 기능을 사용해야 하는지 파악해봅시다! 데이터 가져오기 네 가지 기법의 살짝 둘러보기 getInitialProps 🕵️‍♂️ - 요청 시점에 서버와 클라이언트 모두에서 실행됩니다. - 페이지의 초기 상태를 설정해줍니다. getServerSideProps 🏃‍♂️ - 요청 시점에 서버에서 실행되어 데이터를 가져옵니다. - 서버 사이드 렌더링(SSR)의 빛을 발합니다. getStaticPaths 🛣 - 빌드 시점에 정적 경로를 생성합니다. - 필요한 경로만 정적으..

개발관련/프론트엔드 지식

SSR vs SSG: Next.js의 렌더링 대결! 어떤 것을 택할까?

2023.04.21

next.js SSR(서버사이드 렌더링) vs SSG(정적 사이트 렌더링) 🎉🎉 안녕하세요, 프론트엔드 개발자 행님덜! 오늘은 우리가 모두 사랑하는 Next.js에서 SSR과 SSG를 비교하는 화끈한 포스팅으로 찾아왔습니다! 두 기술의 차이점을 알아보고, 언제 어떤 것을 선택해야 할지 살펴보겠습니다. 시작하겠습니다! 🍿🥤 🚀 SSR (Server Side Rendering) - 서버에서 화면 조립 SSR은 말 그대로 서버에서 페이지를 렌더링하는 기술이에요. 요청이 들어올 때마다 서버에서 페이지를 새롭게 생성해서 클라이언트에 전달해 주는 거죠. SSR의 장점은 무엇일까요? 🤔 SEO 친화적: 구글, 네이버 등 검색 엔진이 페이지를 더 잘 이해하고 색인화할 수 있어요. 초기 로딩 성능: 사용자에게 보여주기 ..

개발관련/매일 코딩 테스트 챌린지

프로그래머스 무인도 버티기 자바스크립트

2023.04.15

function solution(maps) { const xLen = maps.length const yLen = maps[0].length const vistedMap = Array.from(Array(xLen),()=>Array(yLen).fill(false)) const offset = [ [-1,0], //좌 [1,0], //우 [0,-1], //상 [0,1], //하 ] const answer = [] function sumCountArea(x,y){ const stack = [[x,y]] let count = maps[x][y]*1 while(stack.length > 0){ const [xP,yP] = stack.pop() offset.forEach(([moveX,moveY])=>{ cons..

개발관련/자바스크립트 팁

자바스크립트 배열 유니크 요소만 남기기 , 중복 제거 하기

2023.04.13

자바스크립트 배열 유니크 요소만 남기기 , 중복 제거 하기 주로 3가지 방법이 많이 쓰인다. Set const arr = [1,2,3,4,5,5,6,6,7] const result = [...new Set(arr)] //result [1, 2, 3, 4, 5, 6, 7] filter / indexOf const arr = [1,2,3,4,5,5,6,6,7] const result = arr.filter((num,index)=>{ returnarr.indexOf(num) === index }) //result [1, 2, 3, 4, 5, 6, 7] caching / frequency map const arr = [1,2,3,4,5,5,6,6,7] const cache = {} const result = [..

개발관련/매일 코딩 테스트 챌린지

[코딩테스트 준비]자바스크립트 그리드 알고리즘 코딜리티 연습 javascript algorithm codility greedy

2023.04.13

그리드 알고리즘 회의시간 배정, 현금으로 거스름돈 걸러주기 등 관련된 문제가 나오면 그리드 문제라고 생각하면 된다. 핵심은 회의시간의 경우 끝 시간이 가장 가까운 시간 순으로 정렬 거스름돈의 경우 가장 큰 단위 부터 정렬 해야 된다. 이렇게 특정 기준으로 먼저 정렬해놓고 다음 기준은 나중에 생각하는 개념이다. 코딜리티 팁 영어로 되어 있으니깐 확실히 소소한 기준을 읽기가 어렵다. 코딜리티 처음부터 정렬이 되어 있다 1점이 겹처도 되는지 안되는지 꼭 확인해야 된다 빈 배열이 들어오는 경우에 대한 예외 처리도 하자 function solution(A, B) { const meeting = B.map((end, index) => { return [A[index], end] }) meeting.sort((a, ..

개발관련/프론트엔드 지식

CORS에 대한 모든 것

2023.04.04

CORS SOP ( SAME ORIGIN POILICY ) 동일 출처에 대한 요청에 관해서만 요청을 허락하는 보안 방식 동일 출처란? 프로토콜 / HOST / PORT 가 모두 동일해야 같은 출처로 처리 한다. Cross Origin 동일 출처가 아니라는 것을 의미한다. CORS(Cross Origin Resource Sharing) Cross Origin Resource Sharing 다른 출처에 있는 리소스를 요청를 가능하게 제어하는 방법 단순 요청(Simple requests) 아래의 조건을 모두 만족하면 preflight 요청을 발생시키지 않는다. Simple requests 용어는 MDN에서 임의로 사용. 다음 중 하나의 메소드 [GET] [HEAD] [POST] 헤더 유저 에이전트가 자동으로 ..

개발관련/프론트엔드 지식

프론트엔드 면접 질문 웹 브라우저 렌더링 원리 feat. ChatGPT

2023.03.31

웹 브라우저는 웹 페이지를 보여주기 위해 HTML, CSS, JavaScript 등의 웹 기술을 해석하고 처리하는 소프트웨어입니다. 이를 위해서는 웹 브라우저가 웹 페이지를 렌더링하는 과정을 이해해야 합니다. HTML 파싱 웹 브라우저는 웹 페이지의 HTML 코드를 파싱하여 문서 객체 모델(Document Object Model, DOM)을 생성합니다. 이 DOM은 웹 페이지의 구조와 내용을 표현하는 트리 구조입니다. CSS 파싱 및 스타일 계산 웹 브라우저는 CSS 코드를 파싱하여 스타일 시트 객체 모델(Cascading Style Sheets Object Model, CSSOM)을 생성합니다. 이 CSSOM은 스타일 정보를 나타내는 트리 구조입니다. 이후에는 HTML 문서 객체와 CSS 스타일 정보를..

얼리어답터

애플페이 3월 21일 출시 확정 사용법 및 궁금한점을 알려드림

2023.03.18

애플페이 아이폰 이용자 분들 오래 기다리셨습니다. 드디어 며칠 뒤면 애플페이가 국내에 도입됩니다. 애플페이는 3월 21일 국내에 출시됩니다. 각설하고 가장 궁금한 것부터 알려드리겠습니다. Q 그러면 이제 모든 카드 사용자들이 애플페이를 사용할 수 있나? A 아무거나 발급받으시면 안 됩니다 애플페이는 NFC 결제 방식입니다. NFC 결제는 emv라는 국제결제 규격을 따르고 있어서 유로카드 / 마스터카드 / 비자카드 이런 식으로 국제 결제가 가능한 카드들만 애플페이를 사용할 수 있습니다. 그러니까 애플페이를 사용하려면 현대카드 발급하실 때 국내 전용이 아니라 반드시 마스터카드나 비자 카드로 발급받으셔야 됩니다. 애플 페이 사용법 애플 페이 등록 이렇게 비자카드 마스터카드 딱지가 붙어 있는 현대카드를 발급하셨..

티스토리툴바