개발브롞으

이번 글은 Next.js로 프로젝트를 시작하기 전 헷갈리는 개념들에 대한 정리 글이다. [ 개념 핵심 ]Server Component : 컴포넌트가 서버에서 실행됨Client Component : 컴포넌트가 브라우저에서 상호작용 가능하게 동작함 ('use client' 사용)SSR : 페이지를 서버에서 렌더링해서 HTML로 보내는 방식CSR : 브라우저에서 JS가 돌면서 화면을 만드는 방식=> Server Component, Client Component : "어디에서 실행되는가"의 개념=> SSR / CSR : "어떻게 렌더링되는가"에 대한 개념 [ 핵심 개념 추가 설명 ]- Server Component : 주방에서 미리 만들어서 내보내는 음식=> 손님(브라우저) 앞에서 요리하는 것이 아닌 주방..

이번 글은 카카오맵 SDK를 연결하는 과정을 담은 설명글이다.완성된 코드는 글 맨 아래에 작성되어져있다. ⬇️ 카카오 지도 띄우는 법 공식 가이드 ⬇️https://apis.map.kakao.com/web/guide/#step1 https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해 보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 지도 띄우기는 지도의 좌표를 넣어서 그 좌표 기준으로 지도를 생성하고 마커를 찍는 개념이다. 나는 현재 api에서 불러온 address 값이 '서울특별시 성동구 연무장길 xxx' 이런 형태이기 때문에 이 문자열 형태의..

이번 글은 StoryBook에 대한 설명글이다. [ StoryBook이란? ]- UI 컴포넌트 개발 도구=> ex. 버튼 컴포넌트 : 큰 사이즈 버튼, 작은 사이트 버튼, 활성화된 버튼, 비활성화된 버튼 ( 각각의 버전을 story라고 함)(StoryBook : story들을 모아 관리하는 것) [ StoryBook의 장점 ]- 작업 효율 증가=> 컴포넌트 디자인을 쉽게 확인 가능 → 개발자들의 컴포넌트 중복작업 감소 & 쉽게 컴포넌트 디자인 확인 - 원활한 소통=> UI를 빠르게 보여줄 수 있음 → 개발자와 디자이너 간 소통 시간 단축 - 의도치 않은 UI 변경 확인=> Chromatic를 통해 코드 배포 전 의도치 않은 UI 변경을 체크할 수 있음* Chromatic : storybook에서 개발한..

이번 글은 웹사이트를 분석해주는 도구인 GA와 GTM에 대한 글이다. [ 웹사이트 분석 도구란 ]웹사이트에 들어온 사용자 수, 행동, 클릭 경로, 체류 시간, 이탈률을 추적하는 도구 => 목적 : 방문자 행동을 파악 → 서비스 개선 + 마케팅 전략 수립에 활용(페이지에 스크립트를 삽입해 데이터를 실시간으로 수집함) [ GA(Google Analytics) ]가장 널리 사용되는 웹사이트 분석 도구=> 사용자의 행동 데이터를 수집해 대시보드 형태로 시각화 - GA 기능방문자 수, 지역, 디바이스 분석페이지별 체류 시간, 이탈률유입 경로(검색, 광고, SNS 등)사용자 전환(구매, 회원가입 등) 추적https://analytics.google.com/analytics/web/#/a366955189p5..

이번 글은 AWS로 배포하는 방법에 대한 글이다. [ 배포 - 정적배포 vs 동적배포 ] - 정적 배포html, css, js 같은 고정된 파일을 다룸서버 로직 없이 사용자에게 파일만 전달 (포트폴리오, 랜딩페이지, 정적블로그 등...)배포 방법 => AWS S3 + CloudFront 조합특징 : 파일만 보여주기 때문에 빠르고 간단함 - 동적 배포백엔드 서버를 통해 동적으로 데이터를 처리DB와의 통신, 사용자 인증 등 서버 로직 포함 (로그인 기능이 있는 웹앱, 게시판, 쇼핑몰)배포 방법 : AWS EC2, Elastic Beanstalk, Lambda 등 사용특징 : 서버 로직을 포함하고 있어 빠르고 간단함 - 실전 배포 조합 예시=> 정적 배포: S3 + CloudFront + Route 53 +..

[ 세션 ]서버가 저장하는 사이트 방문자들의 기록=> 인증서는 사용자가 누구인지 파악하고 증명해주는 것이고 세션인지 토큰인지에 따라 세션 기반 인증 또는 토큰 기반 인증으로 부름 로그인 시,세션 생성 → 세션 id 또한 생성 → 세션 id로 클라이언트에 쿠키(인증서)를 줌 → 클라이언트가 사이트를 돌아다니면서 인증이 필요할 경우 해당 클라이언트가 가지고 있는 쿠키값이 세션 id 목록에 있는지 확인 후 있으면 인증 완료=> 이때, 로그인 하지 않았어도 세션 생성 가능(다만 이 경우 로그인을 하지 않았기 때문에 인증할 수 있는 사용자 정보가 없고 세션 id 값 또한 null이나 빈 값) 로그아웃 시,세션 id가 없거나 만료됨 → 세션 내부에 사용자 정보 사라짐 → 인증 불가능(따라서 세션 id가 변경 ..

[ 쿠키 인증 ]인증서로 사용할 값을 쿠키로 저장(쿠키 안에는 속성이라는 구성이 있는데 속성은 서버에서 정한 만료일이나 보안설정 같은 값을 담음) [ 쿠키 인증 과정 ]=> 로그인 시, 서버가 Set-Cookie로 인증 정보를 내려줌 → 이 쿠키가 브라우저에 저장 → 그 사이트 이용 시, 자동으로 서버에 같이 보내져 로그인 인증서 역할을 해서 맞춤형 서비스를 누릴 수 있음 200 이라는 리스폰스 뒤에 Set-Cookie 헤더와 문자열을 뒤에 붙여줌 → 이 리스폰스를 클라이언트에 돌려줌 → 클라이언트는 받은 리스폰스에서 쿠키 이름과 값을 저장 & Set-Cookie의 다양한 설정을 적용 => 이렇게 저장된 쿠키 → 브라우저가 리퀘스트를 보낼 때 자동으로 Cookie라는 헤더에 추가되어져서 보내짐(아무..

[ 인증 ]리퀘스트를 보낸 유저가 누구인지 판별하는 작업=> 리퀘스트를 하기 위해서는 서버에 유저에 대한 정보가 저장되어져있어야함 [ 인증 워크플로우]인증 워크 플로우 : 인증이 일어나기 위해 거치는 여러 단계들 ex. 회원 가입 시,이메일과 비밀번호 등을 통해 가입을 할 수 있게 됨 => 이때 이메일은 중복 되지 않는 타인과 구별할 수 있는 값이고 비밀번호는 유출되면 안되는 값이라 암호화됨→ 그 이후 이제 입력값을 서버로 POST를 body에 담아 보냄 → 인증 절차를 통해 회원가입이 완료됨 => 회원 개별마다 맞춤 서비스를 누리고 싶다?이메일과 비밀번호를 입력해 로그인함 (이때 이메일을 통해 먼저 서버에 해당 이메일 값이 있는지 확인하고 해당 이메일 값이 있으면 비밀번호가 일치하는지 판별 후..