개발공부
-
[JavaScript]리프레시 토큰(Refresh Token)개발공부/JavaScript 2024. 1. 9. 14:21
오늘은 토큰 관련된 내용을 다뤄보고자 한다. (Access Token, Refresh Token) 최근에 진행하고 있는 프로젝트에서 토큰 관련 작업을 담당하게 되었는데 기록한 후 다른 사람들과 공유하면 좋을 거 같아서 글을 쓰게 되었다! 우선 토큰 개념을 알아야 하는 이유부터 찾아봤다. 권한과 보안 사용자가 로그인 상태에서 특정 서비스, 앱에 대한 권한을 부여받은 것을 의미 (사용자가 특정 리소스 접근할 권한) 이를 통제하여 개인 정보 접근에 제한을 둘 수 있어 보안을 강화할 수 있음 인증과 인가 분리 사용자의 인증은 Access Token을 받는 단계에서 이루어지는데, 이를 통해 리소스에 대한 인가를 받을 수 있음 사용자 경험 향상 Access Token 정보로 여러 서비스나 앱에 접근할 수 있음 AP..
-
세션 스토리지 에러 (ReferenceError: sessionStorage is not defined)개발공부/Next.js 2024. 1. 8. 14:36
export function getSession(key: string) { // Next.js는 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문에 window 객체의 존재 여부 확인 후 접근할 수 있도록 함. const token = typeof window !== "undefined" ? sessionStorage.getItem(key) : null; return token && token.trim() !== "" ? token : ""; } 요즘 지인들과 Next.js 사용해서 프로젝트 진행중인데, 발생했던 문제를 기록해두면 좋을 거 같아 글을 쓴다. 문제 발생 초반에는 Cookie에 토큰 정보를 저장했었는데 팀원들과 논의한 결과 보안측에서 장점이 있는 세션 스토리지(Session St..
-
HTTP 에러개발공부/기타 2024. 1. 5. 10:10
오늘은 HTTP 에러에 대해 공부하고자 한다. 요즘 지인들과 프로젝트 진행중인데 HTTP 에러의 원인이 헷갈리는 경우가 있어 한번 정리해보면 좋을 거 같아 이렇게 글을 쓴다. 다른 사람들도 같이 숙지해서 프로젝트를 원활하게 진행했으면 좋겠다! :) HTTP 에러 클라이언트와 서버 간 통신 중에 발생하는 문제를 나타낸다. 이제 종류 별로 하나씩 정리해보자! 100번대 요청이 받아들여졌거나 진행중 100 (Continue): 클라이언트가 요청 본문을 계속 전송해도 좋음을 나타냄 200번대 요청이 성공적으로 처리됨 (Success) 200 (OK): 요청이 성공적으로 처리 201 (Created): 새로운 리소스가 성공적으로 생성 204 (No Content): 요청은 성공적으로 처리되었지만 응답 본문이 없음..
-
수학 함수 (abs, ceil, floor, round, sort)개발공부/JavaScript 2024. 1. 4. 14:35
평소에 프로그래머스 통해서 코딩 테스트 준비하고 있는데 가끔 헷갈리는 함수들이 있어 종류 별로 정리해보려고 한다. 먼저 수학 관련된 함수에 대해 알아보자. (문제에서 자주 사용했던 함수들 위주 정리) abs() 절대값 반환 (숫자의 부호를 무시하고, 크기만 나타내는 값) Math.abs(number); let num1 = 2; let num2 = -2; let num3 = 2.5; Math.abs(num1); // 2 Math.abs(num2); // 2 Math.abs(num3); // 2.5 ceil() 주어진 숫자 x 이상의 최소 정수를 반환 (정수로 올림하는 함수) Math.ceil(number); let num1 = 2; let num2 = -2; let num3 = 2.5; let num4 ..
-
빈 값 (null, undefined, undeclared, NaN)개발공부/JavaScript 2023. 12. 27. 16:26
오늘은 자바스크립트에서 빈 값을 표현하는 null, undefined, undeclared, NaN에 대해 자세히 알아보고자 한다. 모두 빈 값은 표현하지만 각각 다른 의미를 가지고 있어 사용할 때 주의해야 한다. null 명시적으로 값이 없음을 나타내는 값 (= 빈 값을 의미) 변수가 존재하지만 값이 지정되지 않았거나 비어 있는 경우에 사용 undefined 값이 할당되지 않은 변수 또는 객체의 속성에 접근 했을 때 나타는 값 (= 정의되지 않음) 변수가 선언되었지만 초기화 되지 않은 경우 또는 함수에서 값을 반환하지 않은 경우 등에서 발생 undeclared 자바스크립트에서 사용되지 않음 선언되지 않은 변수를 나타내는 맥락에서 사용 됨. 즉, 변수를 선언하지 않고 사용하면 해당 변수는 undeclar..
-
JS에서 비동기적으로 코딩하기개발공부/JavaScript 2023. 12. 21. 09:43
오늘은 JS에서 비동기 처리하는 방식에 대해 한번 더 정리하고자 한다. 이전에 프로젝트 때문에 비동기 공부를 했었는데.. 내용이 많다.. 그래서 면접 공부할 때 찾아보기가 힘들어서 핵심만 간단하게 정리하려고 한다. 비동기가 필요한 이유 자바스크립트는 싱글 스레드이기 때문에 한번에 하나의 작업만 수행 가능! 즉, 이전 것이 완료되지 않으면 다른 업무 수행 불가 (대기시간이 길어짐 = 작업 시간 길어짐 = 성능 문제 발생) 비동기는 이전 것이 완료되지 않아도 다른 업무 수행 가능! 단, 로직이 끝났을 때 원하는 동작 수행을 위해 콜백 함수를 사용하면서 콜백 지옥이 발생할 수 있음. (가독성 떨어짐, 로직 변경 어려움 등 문제 발생) https://hani-develop-history.tistory.com/4..
-
apply개발공부/TailwindCss 2023. 12. 13. 18:32
https://hani-develop-history.tistory.com/59 색깔 적용 안됨 최근에 지인들과 새로운 프로젝트를 진행하기로 했다. (Next.js와 Tailwind css를 사용) 오늘은 프로젝트에서 발생했던 문제와 내가 시도 했던 방법들을 공유하고자 한다. 문제 발생 Tailwind css를 사용 hani-develop-history.tistory.com 오늘의 위의 글에 이어서 프로젝트에서 tailwindcss를 사용하면서 발생했던 문제에 대해 다뤄보고자 한다. 문제 발생 페이지 이동할 때 초기화면에 로딩되는데 오랜 시간이 걸린다. 문제 원인 코드를 깔끔하게 만들기 위해 css 파일을 분리하기로 결정했었다. 그 방법으로 폴더별로 {페이지 이름}.modules.css 파일을 만든 후, ..
-
색깔 적용 안됨개발공부/TailwindCss 2023. 12. 12. 20:14
최근에 지인들과 새로운 프로젝트를 진행하기로 했다. (Next.js와 Tailwind css를 사용) 오늘은 프로젝트에서 발생했던 문제와 내가 시도 했던 방법들을 공유하고자 한다. 문제 발생 Tailwind css를 사용했는데 다른 거 다 되는데 색깔만 적용되지 않는 문제가 발생했다. (폰트, 배경 등) 1차 해결 방법 구글의 도움 받아 1차 해결 방법을 찾았다. 바로 @layer를 사용해 색깔을 정의하는 방법이다. @layer { .text-white { color: white; } } .title_section { @apply flex flex-col p-[30px] font-bold text-5xl text-white; } 하지만 이 방법을 적용한 뒤에 글자 색깔을 바꿀 수 있었지만, 혼자 생각해봤..