본문 바로가기
반응형

개발/그 외15

React와 Express로 Kakao Login OAuth 구현하기 (1) React,Express의 기초코드를 설명하진 않는다. 1. 프론트에서 인증코드 요청 /signin 페이지를 다음과 같이 만들었다. 버튼을 클릭하면 카카오 인증코드를 받을 수 있는 페이지로 리다이렉트 된다. const auth = (e: React.FormEvent) => { e.preventDefault(); const kakaoAuth = `https://kauth.kakao.com/oauth/authorize?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`; window.location.assign(kakaoAuth); }; return ( Kakao Signin ); 2. 인증 코드 전달 위의 kakaoAuth페.. 2023. 7. 12.
라이브러리 버전의 디테일을 관리하는 package-lock.json npm install을 하면 package-lock.json을 참조해서 설치하고자 하는 패키지가 어떤 버전의 패키지에 의존성이 있는지 확인해서 함께 설치해줌 서버를 다시 풀받고 로컬에서 실행하니 켜지지 않았다. 히스토리 King이신 옆팀 백엔드 개발자분께 도움을 청했다. package-lock.json이 문제였다. 그러면서 이런말씀을 하셨다. package-lock.json은 백엔드에만 국한된 것이 아니라서, 준열님도 공부하면 좋을 것 같은데? 그럼 package-lock.json이 무엇일까 package-lock.json package.json 파일에는 라이브러리들의 버전이 적혀있는데, package.json은 협업에 있어서 라이브러리 버전 관리의 제 역할을 완벽하게 수행하지 못한다. 예를 들면 pac.. 2022. 12. 22.
핵클 라이브러리 : A/B 테스트, 기능 플래그, 실시간 데이터 분석, 모니터링 핵클은 A/B테스트 , 기능 플래그, 실시간 데이터분석 모니터링 툴이다. 핵클 라이브러리: 간편한 A/B테스트 A/B테스트는 신규 기능을 도입할 때 주로 쓰인다. 일부 고객들에게는 기존 기능을, 나머지 고객들에게는 새로운 기능을 보여주고 두 기능중 어떤 것이 더 효과적인지를 판단하는 방법이다. 핵클 도입전에는 A페이지, B페이지를 만들고 일정확률로 B페이지로 리다이렉트 시키는 방법을 사용했다. 핵클 도입 이후, 테스트를 원하는 특정 섹션에만 A/B테스트를 세팅하여 코드양을 줄이고 생산성도 증대되었다. 하기 코드는 next.js에서 사용한 A/B테스트 세팅, _app.tsx SDK초기화 코드이다. (공식문서) - A/B테스트 세팅 //동일한 컴포넌트내에서 A/B테스트 세팅, B페이지를 따로 만들지 않아도 .. 2022. 4. 1.
react와 next.js를 비교하며 라이브러리와 프레임워크 차이 알아보기 React.js와 Next.js를 비교하자. 라이브러리 : React.js Create-react-app으로 만든 리액트의 경우 항상 index.js에서 아래와 같이 ReactDOM.render()를 통해 태그에 JS파일들을 렌더링시킨다. ReactDOM.render( , document.getElementById("root") ); 그리고 페이지를 동적 변환 시키기 위해 react-router-dom이라는 또다른 라이브러리를 설치해야한다. 즉 사람이 라이브러리를 사용한다. 프레임워크 : Next.js pages폴더안에 js파일만 생성하면 그 자체로 동적변환이 되고, import react를 하지 않아도 .js파일을 사용할 수 있다. 이는 Next.js 내부 코드 아주 깊은 곳에서 router, Reac.. 2022. 1. 25.
반응형

티스토리툴바