웹 개발
-
[Next.js] kakao 인앱 user-agent 감지웹 개발/NextJS 2021. 12. 27. 13:24
1. 문제상황 카카오톡으로 전송된 링크를 인 앱으로 열었을 때 기능이 제대로 동작하지 않은 경우가 있다. 구글 로그인 기능도 마찬가지! 2. 해결방법 강제로 사이트를 외부 브라우저로 열도록 하는 방법도 있지만 안정적인 방법을 찾지 못했다. 사용자가 혼란스러울 경우를 대비해, 카카오톡 인앱 브라우저일 경우 사용자가 구글 로그인을 시도한다면 alert로 안내문구를 띄우기로 했다. 3. 해결 과정 _ 카카오톡 브라우저에 대한 user-agent 감지 - 카카오톡 인앱에는 userAgent에 KAKAOTALK 문구가 포함되어있다. Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 KAKAOTALK - useEffect에서 navigator 객체를 통..
-
[NextJS] npm run build 시 code ELIFECYCLE 에러 해결 방법웹 개발/에러 2021. 11. 3. 22:52
code ELIFECYCLE npm ERR! errno 1 npm run build 빌드 과정에서 ELIFECYCLE 코드 에러가 발생했다. ELIFECYCLE 코드로 구글링 해본 결과 많은 분들이 1)로 문제를 해결하고 있었다. 1) npm cache clean --force 캐시를 강제로 삭제 2) rm -rf ./node_modules 3) rm -rf ./package-lock.json 4) npm install https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle 하지만 나의 경우와 맞지 않은 방법이였고, 로그를 찬찬히 읽어보니 서버사이드 렌더링과정에서 생긴 코드 에러가 문제였다. 코드..
-
[Flutter] 플러터 2.0 null safety 를 이해해보자웹 개발/Flutter 2021. 8. 4. 22:46
Null safety를 이해 해보자 flutter가 2.0 버전으로 업데이트 되면서 dart 언어에 null safety가 적용되었다. null safety가 null을 사용하지 못하게 하는 것이라 오해할 수도 있는데 (왜냐하면 내가 그랬다 ㅎ..), null로 인한 런타임 에러를 방지해 개발자의 생산성을 높이고자 하는 목적이 있다. 자세히 말하면, null safety는 변수가 null을 허용하는지 구분하기 위한 개념인데 기본적으로 null을 허용하지 않는다. dart 언어는 null safety를 지원하지 않았기 때문에 변수 값이 초기화 되지 않았거나 null 값을 전달하면 컴파일 에러는 발생하지 않고 런타임 과정에서 오류가 발생했다. 이러한 이유로 코드를 작성할 땐 오류가 발생할 것을 예상하지 못하..
-
[ReactJS] 네이버, 카카오 지도 api 사용해 개발해보자 (1) - 지도 가져오기웹 개발/ReactJS 2021. 7. 22. 21:37
API 연습을 위해 네이버 지도를 사용하려 했으나 React에서는 라이브러리를 사용해야한다는 이야기에 카카오로 넘어갔다. 하지만 정리는 둘 다 하는걸로! 네이버 API 지도를 사용해보자 1) Naver cloud 플랫폼 계정을 생성하고 회원가입 & 로그인. 결제정보를 입력해야만 서비스를 사용할 수 있습니다. 유료 서비스가 아니면 요금이 부과되지 않아요! 2) console로 들어가 Products & services 에 들어간다. 3) AI·NAVER API 항목을 클릭하여 어플리케이션을 등록한다. 4)Service 선택에서 원하는 map을 선택하고 등록하면 끝! 코드 상에 적용해보자 react에서 naver map api를 사용하기 쉽게 도와주는 라이브러리를 사용한다. yarn add react-nav..
-
[ReactJS] Error: React.Children.only expected to receive a single React element웹 개발/에러 2021. 5. 19. 15:03
Error: React.Children.only expected to receive a single React element child. 위 에러의 원인은 react는 하나의 child element만 받기를 원하는데 태그 내 element가 두 개 이상일 경우 다음과 같은 에러가 생긴다. 나같은 경우는 CSSTransition 태그 안에 여러 개의 태그를 넣어서 생기는 문제였다. div로 묶어 하나의 child로 만들었더니 해결되었다. 공백이 원인인 이유도 있으니 주의해야겠다. 에러코드 setShowQst(false)} onExited={() => setShowQst(true)} > {qstDataSet[data].question} ... ... 에러 해결 setShowQst(false)} onExit..
-
[ReactJS] React state 관리웹 개발/ReactJS 2021. 5. 14. 21:40
일반 변수는 변수값이 변해도 새롭게 렌더링 되지 않는다. let count = 1; 이를 해결하기 위해 state를 관리하여 DOM을 업데이트 하는 react hook들을 정리해보려 한다. useState 데이터 공간 생성 const [데이터, 데이터변경함수] = useState(초기데이터); ex) const [count, setCount] = useState(0); .. {setCount(count+1)}> -> onclick 이벤트를 통해 useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다. 이 때 랜더링마다 count 값을 업데이트 되는 것이 아니라 랜더링을 통해 새롭게 생성된 독립적인 상수를 보는 원리이다. ** Immutability react는 useState의 변수를 직접 바꾸..
-
[JavaScript] 객체 비 구조화 할당웹 개발/JavaScript 2021. 5. 14. 13:33
객체 비 구조화 할당은 객체 안에 있는 값들을 추출해 새로운 상수로 선언해준다. [예시] const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 - 함수 내에서 사용 예시 const object = { a: 1, b: 2 }; function print(object) { const { a, b } = object; console.log(a); console.log(b); } print(object); const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object)..
-
[CSS] CSS를 대체할 CSS in CSS와 CSS in JS에 대해 알아보자 (CSS Module , SCSS 등)웹 개발/HTML & CSS 2021. 5. 11. 19:37
프로젝트가 커질수록 모든 html 요소에 클래스 naming을 해줘야하고 컴포넌트 스타일을 변경할 때 클래스에 맞는 선택자를 일일히 찾아 변경해야하기 때문에 번거롭다. 또한 JS 파일과 분리되어있기 때문에 컴포넌트의 상태값 변화를 공유하기 힘들다. CSS 문제점 (Vjeux) - Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제 - Dependencies: css 간의 의존관계를 관리하기 힘든 문제 - Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제 - Minification: 클래스 이름의 최소화 문제 - Sharing Constants: JS 코드와 상태 값을 공유..