본문 바로가기

전체 글

 (46)
Token을 어떻게 관리할까? 개발자들이 개발을 하면서 한 번은 꼭 들어봤을 것 같은 Token에 관한 이야기를 해볼까 한다. 많은 사용자들이 로그인을 하면 자동으로 로그아웃이 되어 다시 로그인하는 것이 귀찮을 경우도 있을 텐데 그러한 경우에 accessToken과 refreshToken을 이용해서 보안성과 편한 Token을 유지하는 방법을 조금 알아볼까 한다. 먼저 accessToken과 refreshToken의 개념에 대해서 간단하게 알아보자 JWT 란 Json Wep Token의 약자로 웹에서 쓰이는 json 토큰이다. 종류는 accessToken, refreshToken 두 가지다. ⭐️ AccessToken 액세스 토큰은 클라이언트가 보호된 자원에 접근할 수 있는 권한 보통 클라이언트가 성공적으로 인증되고 권한을 얻은 후에 ..
Git과 GitHub 🐈‍⬛ 많은 신입 개발자, 또는 개발자가 사용하는 버전관리인 git은 많은 사람들이 알고 있을 것이다. 하지만 생각 외로 Git과 GitHub의 차이를 잘 모르고 있는 사람이 되게 많은데 그 내용을 조금 다뤄볼까 한다. ⭐️ git 먼저 git이다. 쉽게 이야기를 하자면 버전관리 소프트웨어이다. 예시를 하나 들어보자 내가 프로젝트를 하고 있다가 어떠한 실수를 했을 때 이전 버전으로 롤백을 해야 할 경우가 생기는데 그러한 상황에서 사용할 수 있는 방법 중 하나가 git이다. git은 개인 컴퓨터에서 돌아가는 Version Control System이다. git을 사용하기 위해서는 개인 계정을 등록한 필요도 없고 인터넷을 연결을 하지 않아도 된다는 장점이 있다. 하지만 GitHub를 사용을 한다면 회사에서 운영하고..
CSS 단위는 뭐가 있지 ..❓ 프론트엔드 개발자들이면 css 속성에 대해서 잘 알고 있을 것 같은데, 나는 아직도 개발을 하면서 css 단위에 대해서 정확히 찾아보고 뭐가 다른지에 대해서는 은근히 헷갈린다. 이번 이 블로그를 통해 나와 같은 어려움을 겪은 사람들이 이해가 쉽게 한번 설명을 해보고자 한다. ⭐️ PX 먼저 px이다. css 단위 속성을 선택할 때 기본 적으로 px단위로 기본 설정을 하여 사용한다. 하지만 px 같은 경우에는 절대 단위이므로 상황에 따라 역동적 특성이 없어 사용자 접근성이 낮다. px 같은 경우에는 또 너비값과 높잇값을 지정을 한다면 고정이 되기 때문에 웹 브라우저의 크기를 늘리거나, 줄여도 안 변한다. ⭐️ VW vw(viewport width)는 부모태그 기준으로 정해지는 % 단위의 문제를 개선하기 위..
JS .. API❓도대체 그게 뭐야❓ 내가 올해 초반에 처음으로 자바스크립트로 Open API를 사용하여서 토이프로젝트를 진행해 보았다. 근데 API연동에 대해서 아는 내용이 없어서 많이 힘들었지만, 그런 사람들을 위해서 이 블로그를 작성해 본다. ⭐️ API가 뭐야 API는 (Application Programming Interfaces) 프로그래밍 언어로 만들어진 일종의 데이터와 기능의 모음, 구성이다. 장점으로는 API는 특정 기능에 대한 복잡한 코드를 사용하기 쉽게 도움을 줄 수 있다고 생각하면 편하다. 대부분 API는 2가지로 나뉘게 되는데 Broswer API (웹 카메라, 마이크) Third-party API (Web API, Google Maps API) 위와 같이 나뉜다. 먼저 Broswer API는 브라우저에 내장이 된 A..
Vscode에서 .gltf 파일 연동하기❗️(Three.js 사용) 내가 해커톤을 진행하면서 blender에서 3D 캐릭터를 만들어서 vscode에서 사용을 해보려고 하였다. Three.js를 사용해서 gltf로 캐릭터를 나타내고 애니메이션을 구현하는 프로젝트를 구상하였다. 하지만 생각보다 gltf 파일을 사용하는 방법이 매우 까다로웠는데, 그 블로그 하나로 깔끔하게 정리해보려고 한다. ⭐️ pulbic에 gltf 파일을 추가한다. public 폴더 안에 gltf 파일을 추가를 한다. 그러면 여기서는 내가 만든 3D 입체 모양의 모델링이 나온다. ⭐️ gltf을 jsx(tsx) 파일로 변환을 시켜줘야 한다. 파일의 경로를 ./public으로 한 상태에서 아래와 같은 명령어를 입력한다. npx gltfjsx **.gltf 위와 같은 내용으로 명령어를 입력을 한다. ** 내..
전역 상태 관리❓ ha .. 그게 도대체 뭔데 FE 개발자들이 개발을 하다보면서 사용하는 기술중 하나인 전역 상태 관리 하.. 그래서 그게 도대체 뭔데?? 왜 FE 개발자들이 그걸 필요로 하는지 너무 궁금해서 조사해보았다. 📍상태 상태란 컴포넌트 내부에서 관리를 하며 어플리케이션의 렌더의 영향을 미치는 플레인 JavaScript Object이다. ( 변화하는 Data !! ) 📚 Plain JavaScript ( Object )란? 객체 리터럴{}을 이용해서 만들 수 있다. let 변수명={key:value, key2:value2, key3:value3, ...}형식으로 작성한다. 순서가 중요치 않은 데이터를 다룬다. 객체의 value에는 function 데이터 타입도 들어갈수 있다. let mem={num:999, name:"이태랑", addr:"..
React Design Pattern Design Pattern이란? 프로그램을 개발하는 과정에서 사용되는 설계의 패턴들을 정의한 것 성장하는 개발 과거에 비해 현재에는 다양한 개발의 스택이나 기술들이 발전을 하였다. 현재의 화면은 더욱 과거에 비해서 복잡하고 다양한 프레임워크인 Vue, React등 다양한 기술이 등장하여 컴포넌트 단위를 사용하여서 웹 페이지를 개발을 하고 있다는 것이다. 여기서 더욱 효율적인 웹사이트를 구축하고 유지하기 위해서 컴포넌트 단위를 사용하게 되었다는데, 이 컴포넌트를 어떻게 관리를 하면 좋을 것인가 이러한 문제를 많은 사람들이 고민을 하였다고 한다. 다양한 디자인 패턴으로 프로젝트에 적용할 것인지 각 프로젝트의 특성에 맞게 고려를 해야한다. Control Props Pattern 이러한 패턴은 컴포넌트를 con..
프론트엔드 보안 XSS (Front-End Security XSS) FE 보안 XSS(Cross-site scripting) XSS는 공격자가 악의적인 스크립트를 주입하여, 해당 화면을 보는 사용자들에게 비정상적인 기능을 수행하게 하는 것 왜 발생하는 것일까❓ 이런 위와 같은 코드로 작성을 할 경우에는 다른 외부 사용자가 볼 상황에 해당 스크립트가 실행이 되어 나도 모르는 사이에 쿠키의 정보가 외부로 유출이 되거나, 탈취자가 나의 정보를 가져가 사용할 수 있다. html에서

티스토리툴바