javascript 3

[JavaScript] 사용자 스크롤 막기 및 스크롤 여백 처리

const preventUserScroll = ( scrollMarginProcessing ) => {💻 return Result;See the Pen Untitled by 구태 (@wbnnhjvf-the-lessful) on CodePen. 📝 console.log( history ) 회사 프로젝트 진행 중 사용자가 특정 요소를 클릭하면 입력폼으로 스크롤되도록 하는 페이지가 있었다. 구현 후 문제는 스크롤 도중에 멈추거나 정확한 위치로 이동하지 않는다는 것이었다. scrollIntoView 함수를 사용해서 스크롤을 구현하였는데 도중에 state가 바뀌거나 스크롤 이벤트가 일어나게 되면 진행되던 스크롤이 멈추는 문제가 있었다.  state에 의해 스크롤이 도중에 멈추는 문제는 해결했지만 사용자 스크..

DEV/WebProgramming 2024.04.20

[React.js] 소셜 로그인 구현 - 카카오

만약 사용한다면 가장 사용자가 많은 것 같은 카카오 서비스를 구현해 봤다. Developer 사이트가 깔끔하게 정리되어 있어서 자료 찾기가 편했다. 위 이미지는 카카오에서 제공하는 카카오 로그인에 대한 프로세스 흐름이다. 그래서 위 이미지와 비슷하게 프로세스를 구성하여 프로젝트에 구현하였다. 로그인에 대해서 처리하는 방법은 다양하지만 해당 프로젝트에서는 로그인을 처리할 페이지를 따로 만들고 그 페이지로 redirect 하여 로그인을 처리하는 방식을 사용했다. 플랫폼 탭에서 현재 프로젝트가 실행되고 있는 도메인을 입력해 준다. 카카오 로그인 사용 시 REST API를 사용할 예정이므로 도메인은 https로 지정되어 있어야 정상적으로 사용가능하다. (localhost로 테스트하는 것은 사용이 가능하다) 타 ..

DEV/WebProgramming 2023.04.28

[TypeScript] TypeScript란, React에 적용하기

기존 emotion-diary 프로젝트를 적용해보려 했지만 TypeScript가 익숙하지 않고 완성된 프로젝트에 적용하기엔 힘들다고 판단하여 새로운 프로젝트를 만들며 처음부터 적용해보려 한다. 목차 0. TypeScript란 1. TypeScript 적용 2. TypeScript 사용하기 TypeScript란 // 예시 (코딩앙마 Typescript #1 영상 중) // 기존 javascript 실행시 function add(num1, num2){ console.log(num1 + num2); } add();// NaN add(1);// NaN add(1,2);// 3 add(3,4,5);// 7 add("hello", "world");// "helloworld" // typescript 적용 funct..

DEV/WebProgramming 2022.07.28