✨ FrontEnd20 3. JWT 토큰 어디에 저장하는게 좋을까? 로컬,세션,쿠키 로그인을 할때 JWT 토큰을 이용하기로 하였다. (요즘 자주 사용하는 방식이라고 한다.)그러면 이 토큰을 어디에 저장할지도 정해야하는데 어디에 저장해야할까요? 어디에 저장해야 좋을까요?하고 팀장님께서 숙제를 내주셨다.. 나의 예전 학교 수업시간 기억을 되살려..세션이 아무래도 브라우저를 삭제할때 지워지니까 이게 보안적으로 안전하지 않을까?하고 답했는데호오 정말요? 보안에서 괜찮을까요? 그럼 다른건 보안이 별로인가요? 라고 되물어보셔서..더이상 내 나약한 지식으로는 안되겠다싶어"공부해오겠습니다.." 하였다. 그러면 어디에 저장하면 좋을까? 한번 알아보자.우선 JWT 토큰이란 JSON Web Token의 줄임말이다.사용자 인증에 사용되는 토큰 기반 인증 방식중 하나로,보통 로그인을 할때 발급받아 서버와 클라.. 2025. 4. 12. 2. 배포의 기본과 동적배포, 정적배포 우선.. 배포에 대해 얘기해보자.배포 방법에는 두가지가있다. 서버와 프론트엔드를 함께 배포하는것 (보통 풀스택 프로젝트에서 많이 사용한다.)서버 따로, 프론트엔드 따로 배포하는것. 이건 회사마다 다른 방식으로 배포한다고 하지만..보통 프로덕션에서는 프론트 따로 백엔드 따로 배포한다고 한다.그리고 프론트에서 api엔드 포인트를 백엔드 서버 url로 지정하는 방식으로 연결하는것이다.그러면 프론트는 뭘로 배포하던지 서버랑은 상관이 없다또는 백엔드 서버에서 /api 경로와 하위 경로 외에는 프론트엔드로 잡고 static 파일로 배포하는 방법이 있다. 아무튼, 이 프로젝트에서는 프론트 따로, 백엔드 따로 배포를 하기로 했다.그러면서 팀장님이 배포를 정적배포로 할건지? 동적배포로 할건지? 물어보셨다.나는 데이터가.. 2025. 4. 12. 1. 클라이언트사이드 렌더링, 서버사이드 렌더링 이 둘의 차이점은? 새로운 프로젝트를 진행하게 되었다. 기존에 팀장님이 만들어놓으신 웹 사이트가 있었는데,이건 Java로 구현해 놓은것이고, 디자인이나 이런걸 개편해서 API 연결 방식으로 바꾸기로 했다.어쨌든 이 홈페이지를 개선하는데 기여해보고싶었고, 프론트 개발로 참여하게 되었다! 아무튼, 그건 그렇고.프로젝트에 참가한지 1주차.프로젝트 팀장님께서 프론트를 배포할 때 어떻게 배포할건지 결정하라고 하셨다.그러면서 클라이언트사이드로 작업할것인지, 서버사이드로 작업할것인지 물어보셨다.그냥 배포하고 암거나 개발하면 되는거 아닌가? 했는데 전혀 아니었다! 그래서 며칠동안 물어보고, 찾고 하다가 어느정도 이해가 된 듯 하여 정리한다.이 프로젝트로 많이 성장하게 해주시는것같다! 감사합니다 ㅎㅎ크게 나누자면 서버사이드 렌더링 (SSR.. 2025. 4. 12. [React] useEffect 제대로 이해해보기 (순수함수와 side Effect) 오늘은 리액트 hook중 useEffect에 대해서 알아보았다.순수함수부터 리액트 컴포넌트는 어떻게 만들어야하는지!정리를 해보았으니순수함수부터 side Effect까지 하나하나 씹뜯맛해보자" useEffect "우리가 외부 세계와 상호작용 하면서 해당 컴포넌트의 렌더링이나 성능에는 영향을 미치지 않도록 만들어주는 도구 이 훅을 사용하면 함수컴포넌트에서도 side effect 사용 가능effect란 함수형 프로그래밍 용어인 "사이드 이펙트(side effect)"를 가리킨다.✔️ 그럼 side effect가 먼데?이해를 하려면 순수함수부터 알아야한다.대부분의 리액트 컴포넌트는 순수 함수로 만들어졌다.순수함수 : 입력값에 대한 예측 가능한 출력 값을 반환한다.함수의 리턴 값이 동일한 인수(argument)에.. 2025. 3. 30. [React] 🚨"props drilling" - 제가 props를 계속 전달 전달하고있는데요... 리액트로 유튜브 클론 코딩을 할때였다.얼추 완성을 하고 프론트 퍼실님의 피드백을 받았다. 내가 맡은 부분은 short였다. 이건 내가 구현한 화면을 캡쳐해서 들고온것이다.. (미완성이지만)사진을 보면 알 수 있듯이 오른쪽에 뜨는 패널이 내용만 다를뿐 재사용되고있다.그래서화면의 재사용을 높이고자 컴포넌트 단위로 분리해서 코드를 짜고 있었다. short - video, panelpanel 안에 comment랑 explain 이렇게 구성했다. 그런데 문제점.. 의문점이 하나 발생했다.유튜브 API를 불러오기 전에 임시 데이터를 만들어서 넣었긴 한데,이걸 데이터 요청을 한번만 하기 위해서, (즉 데이터 한번만 불러오게 하려고) Short 여기서부터계속 props로 explain까지전달전달전달...하고 있는데 .. 2025. 3. 8. [React] 렌더링을 확인할 수 있는 리액트 크롬 확장 프로그램 이걸 다운받으면 된다!개발자 모드에서 Components -> Highlight update when components render 를 체크하면렌더링이 되는 부분에 박스가 쳐져서 확인이 가능하다! 2024. 12. 9. 이전 1 2 3 4 다음
