구름

안녕하세요 :) 오늘은 SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 차이점에 대해 알아 보겠습니다. 🐹 🙌🏻 SSR (Server Side Rendering) 서버 사이드 렌더링(SSR)이란, UI 로직이 담긴 HTML 파일을 서버 측에서 렌더링하는 방식을 말합니다. 서버에서 렌더링이 완료된 HTML 파일을 전달받기 때문에 사용자는 곧바로 웹 사이트를 볼 수 있습니다. 그러나 사용자와의 인터렉션을 요구하는 자바스크립트 파일이 브라우저상에 다운로드되기 전까지 사용자는 어떠한 행위도 수행할 수 없어, TTV(Time To View)와 TTI(Time To Interaction) 사이의 공백 시간이 존재하게 됩니다. 🙌🏻 CSR (Client Side..

https://school.programmers.co.kr/learn/courses/30/lessons/118667 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 문제는 2022 KAKAO TECH INTERNSHIP 문제였습니다. 글쓴이는 투 포인터를 사용하여 풀이했습니다. 🙂 📝 문제 풀이 1. 두 큐의 모든 원소를 담을 v 벡터 선언 2. v 벡터에서 가리킬 queue1, queue2의 각 시작 지점과 끝 지점 선언 (queue1의 시작 지점: s1, queue1의 끝 지점: e1) 3. queue1, queue2의 각 모든 원소의 합을 담을 ..

https://school.programmers.co.kr/learn/courses/30/lessons/17681 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 문제는 2018 KAKAO BLIND RECRUITMENT 문제였습니다. 📝 문제 풀이 1. 두 지도의 각 가로열을 or 연산 (지도 중 어느 하나라도 1이면 전체 지도에서도 1이므로) 2. 1의 결과값을 소인수분해 2로 나누어 떨어지면 tmp += " " 2로 나누어 떨어지지 않으면 tmp += "#" 3. tmp 값 뒤집기 👩🏻‍💻 C++ 코드 #include #include #inclu..

https://school.programmers.co.kr/learn/courses/30/lessons/72411 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 문제는 2021 KAKAO BLIND RECRUITMENT 문제였습니다. 글쓴이는 DFS로 풀이했습니다. 📝 문제 풀이 1. orders 벡터의 각 단품메뉴에 대해서 course 요소만큼의 코스요리의 메뉴 구성의 주문 횟수를 dfs를 통해 combination 맵에 누적 ⭐️ 2. combination 맵에서 가장 많이 주문된 수를 maxCount 변수에 저장 3. maxCount가 2보다 ..

https://school.programmers.co.kr/learn/courses/30/lessons/72412 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 문제는 2021 KAKAO BLIND RECRUITMENT 문제였습니다. 📝 문제 풀이 1. info 배열의 각 원소의 값을 stringstream으로 공백을 제거하고 코딩테스트 점수를 제외한 값은 tmp[i][0]에 삽입 💡 tmp 벡터는 [['java', '-'], ['backend', '-'], ['junior', '-'], ['pizza', '-']] 와 같은 형태 2. scores ..

안녕하세요. 이번 포스트에서는 AWS 배포를 위해 EC2를 생성하는 방법과 실제 프로젝트에서 서버를 실행하고 배포하는 방법에 대해 포스팅하겠습니다. 🐹 EC2 생성하기 1. AWS 사이트 접속 후 회원가입 https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2 https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2 ap-northeast-2.console.aws.amazon.com 2. 지역 > 아시아 태평양(서울)으로 변경 3. EC2 > 인스턴스 시작 4. 서버 선택 본 프로젝트에서는 Ubuntu 서버를 선택했습니다. 5. ..

웹 어플리케이션에서는 네트워크 요청을 통해 필요한 리소스들을 받아옵니다. 만약 다음 요청에서 응답받을 리소스가 이전 요청에서 응답받은 리소스와 동일할 경우, 동일한 리소스에 대한 네트워크 요청은 응답 시간을 지연시킬 뿐더러 불필요한 네트워크 요청으로 서버의 자원을 낭비하게 됩니다. 이러한 경우에 HTTP 캐싱을 활용하면 이전에 가져온 리소스들을 재사용함으로써 웹 어플리케이션의 성능을 현저하게 향상시킬 수 있습니다. HTTP 캐시를 효율적으로 관리하기 위해서는 Cach-Control 헤더를 섬세히 조절해야 합니다. 💡 리소스(Resource) HTTP 요청 대상으로, 텍스트, 이미지, 파일 등 식별 가능한 모든 자원을 말한다. 🕰️ Cache-Control 웹 브라우저가 지금껏 요청한 적이 없는 리소스를 ..

https://school.programmers.co.kr/learn/courses/30/lessons/64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 문제는 2019 카카오 개발자 겨울 인턴십 문제였습니다. 📝 문제 풀이 1. 각 위치에서 가장 위에 있는 인형의 좌표를 담을 doll 벡터 선언 vector doll(board[0].size() + 1, {-1, -1}); ⬅️ 위치는 1부터 시작하므로 board[0].size() + 1 2. 각 위치에서 가장 위에 있는 인형의 좌표 담기 (빈 칸이 아니면 인형이 들어있는 칸) ⭐️ 3. m..

https://school.programmers.co.kr/learn/courses/30/lessons/67256 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 문제는 2020 카카오 인턴십 문제였습니다. 📝 문제 풀이 ⭐️ * ➡️ 10, 0 ➡️ 11, # ➡️ 12로 생각하기 1. 맨 처음 왼손 엄지손가락 위치를 10, 오른손 엄지손가락 위치를 12로 초기화 2. 누를 번호 1, 4, 7 ➡️ 왼손 엄지손가락으로 입력 3. 누를 번호 3, 6, 9 ➡️ 오른손 엄지손가락으로 입력 4. 누를 번호 2, 5, 8, 0 ➡️ 왼손 엄지손가락과의 거..

현재(2023.04.30) Next.js 프레임워크를 사용하여 블로그를 개발 중에 있습니다. 블로그에서의 사용자 인증은 next-auth 라이브러리로 구현했습니다. next-auth 라이브러리에서 제공하는 NextAuth는 로그인 시 signIn 메소드를 통해 사용자의 정보를 session에 저장하기 때문에 사용자의 정보를 가져오거나 로그인/로그아웃 상태를 판별할 때 session을 사용하면 편리합니다. 이번 포스트에서는 Next.js 페이지에 적용한 렌더링 방식과 그 렌더링 방식에서 session을 pre-fetch하는 방법에 대해 알아 보겠습니다. 🙂 🌳 Why SSG -> SSR? Next.js 공식 문서에서는 "성능 상의 이유로 서버 측 렌더링을 통한 정적 생성 방식을 사용하는 것을 권장한다. 정..