본문 바로가기

전체 글235

[Firebase] 소셜로그인 후 비동기적 처리 오늘 토이 프로젝트를 진행하다 결국 우려하던 일이 발생하고 말았다. Firebase의 구글 로그인 기능을 구현해 사용자가 로그인하면 사용자의 단어장 데이터를 받아오는 기능을 구현해야 했는데, 사실 관련 부분은 나중에 생각해야지~ 하고 미뤄두었다가 오늘 사용자 로그인을 하며 단어장을 보려고 하니 문제가 생겼다. 내가 의도했던 단어장 데이터를 가져오는 절차는 다음과 같았다. 1. 사용자가 google 로그인 버튼을 클릭한다. 2. google 로그인 페이지로 리디렉션 된다. 3. 로그인을 한다. 4. 다시 애플리케이션의 화면으로 돌아온다. 5. 사용자의 auth/state를 업데이트한다. 6. 사용자의 단어장 데이터를 firestore로부터 가져온다. 문제가 생긴 원인으로는 5번과 6번이 동기적으로 처리되었.. 2022. 4. 16.
[Redux] Redux Persist VS Local storage 오늘 토이 프로젝트에서 Firebase 구글 로그인 기능을 구현하고 흐뭇한 마음으로 이런저런 버튼을 클릭을 하고 있을 때였다. 새로고침 버튼을 누르니 로그인 상태가 풀려버리는 것이었다...! 아차 싶었다. 로그인 상태를 Redux state에 유저정보와 함께 저장해 관리하려고 했는데 생각해보니 Redux는 새로고침과 동시에 모든 State를 초기화한다는 사실을 깜빡했다. 문제 해결에는 두 가지 방안이 있다. 하나는 Redux-persist 라이브러리를 이용해 Redux State를 초기화되지 않고 유지할 수 있도록 해주는 방법이고 다른 하나는 local storage를 이용해 상태를 기록하는 것이다. (물론 Rest api를 이용해 서버로부터 계속 정보를 받아오는 방법도 있겠지만 이는 배제하도록 하겠다... 2022. 4. 15.
[Firebase] signOut API로 로그아웃 해야하는 이유 오늘 토이 프로젝트를 진행하면서 firebase 인증 기능을 이용하다가 로그아웃 기능도 함께 구현을 시도했다. 그러다가 문득 드는 생각 그냥 firebase로부터 얻은 token 데이터만 없애버리면 로그아웃이지 않을까? firebase api 문서에는 signOut api가 있는데 이걸 굳이 써야 할 이유가 있을까? 그래서 같이 프로젝트를 진행하고 있는 동료분께 아주 우매한 질문을 드려봤다. Firebase로 부터 인증토큰을 얻는데 성공했습니다. 근데 Firebase api 문서에 signOut api가 별도로 있는걸 발견했습니다. 사용자가 로그아웃 하도록 하려면 반드시 해당 api를 사용해야 하나요? 이전 프로젝트에서는 그냥 로컬에 있는 토큰 데이터를 삭제시켜서 로그아웃 했거든요. 우매한 질문이지만 친.. 2022. 4. 14.
데스크탑 local 환경 모바일로 접근하기 토이 프로젝트를 하면서 카드가 플립 되는 애니메이션을 적용을 했다. 그런데 이게 웬걸 데스크탑 브라우저에서는 이상 없이 잘 작동이 되는데, 모바일 환경(사파리)에서는 애니메이션에 문제가 발생했다. 아무래도 CSS 키워드가 사파리에서는 다른 부분이 있는 듯한데... 이를 찾아내려면 코드를 수정할 때마다 디플로이를 해서 작동 여부를 확인해야 하는 번거로움이 발생했다. 그래서 그냥 로컬 호스트에 모바일로 접근할 수 없을까? 라고 생각하던 와중 잘 설명된 블로그를 발견하여 번역해 옮겨본다. Dev Tip: How to view localhost web apps on your phone 필자는 웹 어플을 만들 때 항상 모바일 최적화를 한다. 배포 이전에 모바일로 프로젝트를 확인하는 것은 필수적인 절차다. 종종 크.. 2022. 4. 14.
[React] 외부 클릭 시 메뉴창 닫기 오늘 토이 프로젝트를 진행하면서 메뉴 버튼 밖을 클릭했을 때 메뉴 컴포넌트가 닫히는 UI를 구현하고 싶었다. 방법에 대해 한참을 고민하다 보니... 최상의 컴포넌트에서 props drilling을 통해 메뉴를 닫는 기능을 구현할까... 하는 생각이 들었지만 어엿한 프론트엔드 개발자를 꿈꾸는 나에게 이것은 올바른 해결법이 아니라는 판단이 들었다. 그래서 구글링을 해보니 해당 방법을 Effect 훅과 Ref 훅을 이용해 해결하는 방법에 대해 참고할 수 있었다. 전체 코드는 이러한데 한번 부분 부분 살펴보자. const Deck = ({data}: Props) => { const [openInnerMenu, SetOpenInnerMenu] = useState(false); const InnerMenuHandl.. 2022. 4. 8.
메모리 누수란 무엇이고 어떻게 해결할까 이번 주 기술면접을 보면서 들은 질문 중에 메모리 누수가 발생하면 어떻게 찾아낼 건가요?라는 질문이 있었는데, 한 번도 생각해본 적 없는 주제라 많이 당황했던 기억이 난다. 생각해보니 대규모 애플리케이션 서비스를 제공하는 업체 입장에서는 사소한 메모리 누수도 민감하게 작용할 수 있을 테니 주의해서 개발할 텐데 그 부분에 대해 미처 생각해보지 못했다니 앞으로는 좀 더 능동적인 학습이 필요할 것 같다. 여하튼 오늘은 메모리 누수가 발생하면 어떻게 찾는가에 대해 알아보자. 우선은 메모리 누수 발생원인과 고의적으로 메모리 누수를 만드는 법에 대해 잘 설명된 글을 번역해 옮겨본다. The Secrets of Memory Leaks in JavaScript You Don’t Know 혹시 인터뷰 도중 이런 질문을 .. 2022. 4. 6.
[React] dotenv 사용시 주의할 점 React의 경우 dotenv를 사용할 때 조금 주의할 점이 있다. 1. import dotenv???? 많은 기술 블로그에서 dotenv를 import 해야 한다고 나와있는데 사실 React는 그런 거 필요 없다. 오히려 import 하면 아래와 같은 에러를 만날 것이다. ERROR in ./node_modules/dotenv/lib/main.js 1:11-24 없이도 그냥 process.env로 접근 가능하다. 2. REACT_APP_ 으로 env 설정하기 필자는 이부분에서 시간을 많이 낭비했다. express에서 env 설정하던 기억이 남아 REACT_APP_없이 env를 설정했는데, React에서는 자체 변수와의 충돌을 피하기 위해서 REACT_APP_이 있어야 인식이 가능하다. 아래와 같이 .e.. 2022. 4. 5.
[Git] Git remote repository 커밋 되돌리기 어제 토이 프로젝트를 깔끔하게 커밋하고 잠에 드려는 순간... 민감한 정보가 코드안에 들어가 커밋이 되어버렸다는 사실을 깨닫게 되었다....!! 이번 토이 프로젝트를 같이 진행하게 된 개발자는 이전 회사 CTO인데, 코딩 스타일이 병적으로 보안에 집착하는 스타일이다. 만약 해당 커밋을 보게 된다면 고개를 절레절레 저을 것이다.. 사실 표현을 병적이라고 했지만 조금이라도 그분이랑 이야기를 나누어 본다면 집착하는 것이 당연하다는 것에 누구나 고개를 끄덕이게 될 것이다. 많은 초보 개발자들이 보안에 그렇게 신경을 안 쓰는 경향이 있는데, 인터넷 세상은 정말 위험하다. 지금도 깃헙에는 중요한 정보를 빼내서 자신의 이득을 위해 사용하려는 크롤링 프로그램들이 좀비처럼 떠다니고 있다. 그래서 오늘은 이 위험천만한 기.. 2022. 4. 5.
ORM은 왜 쓰는 걸까요? 처음 ORM을 배울 때는 '이걸 왜 쓰는 거지?' 하는 질문을 수 없이 던지곤 했다. '잘 알면 쓰기 편하다'라고는 하는데, 솔직히 잘 알면 SQL도 쓰기 편한 거 아닌가...? 사실 ORM에 대한 논쟁은 해외 다른 개발자들 사이에서도 분분한 듯 하다. 아는 미국의 개발자분에게 여쭤보니 ORM 사용을 나쁘게 생각하진 않지만 ORM 사용은 프로젝트의 성격에 달려있다는 애매한 답변을 받았다. 어떤 개발자의 경우 복잡한 쿼리문이 요구되는 어플리케이션의 경우 ORM이 아닌 Raw 쿼리를 사용한다고 한다. 실제로 ORM을 이용한 프로젝트를 두 차례 진행해본 결과 약간 이해가 되는 듯하다. 간단한 쿼리문을 작성할 때는 ORM이 간편하긴 하다. 별도의 언어가 아닌 프로젝트에 사용하고 있는 프로그래밍 언어로 바로 데이.. 2022. 3. 30.
[React] React는 MVC 패턴일까 Flux 패턴일까? MVC 패턴에 대해 공부하다 문득 드는 생각이... React는 그럼 어떤 패턴이지...?? 정답은, React는 MVC가 될 수도 있고 Flux가 될 수도 있다. 다시 한번 짚고 넘어가야 할 부분은 React는 프레임워크가 아닌 라이브러리라는 점이다. 그리고 React는 오로지 View에 집중한 라이브러리다. 즉 나머지 부분을 어떻게 개발자가 만드느냐에 따라 MVC가 될 수도 있고 Flux가 될 수도 있다는 것이다. 하지만 React의 경우 Redux를 사용해 대부분 Flux 패턴을 따라 작성된다. (하지만 주의해야 할 점은 Redux는 Flux 패턴을 유사하게 따라 하는 라이브러리이지 완벽하게 Flux 패턴을 구현하지 않았다. 실제로 Redux에는 Dispatcher에 대한 개념이 없다.) Flux의.. 2022. 3. 29.
MVC 모델이란 MVC 아키텍처 패턴은 복잡한 애플리케이션 개발을 훨씬 다루기 쉽도록 해준다. 그리고 많은 수의 개발자들이 동시에 일할 수 있도록 한다. 내가 처음 MVC 패턴에 대해 배울때에는 관련 영역에 대해 상당히 위화감을 느꼈었다. 그리고 실제로 적용하면서 더욱 그러한 느낌을 받았다. 하지만 조금 뒤로 물러나 MVC에 대해 집중해서 그것이 어떤 목적을 가지고 있는지 이해한다면 이 패턴을 실제 어플에 적용하기 훨씬 쉬워질 것이다. MVC 모델이란 MVC는 모델-뷰-컨트롤러의 줄임말로 아래와 같이 정의할 수 있다. Model: 모든 데이터 로직을 가지고 있는 백엔드 View: 프론트엔드 혹은 GUI Controller: 어떻게 데이터가 디스플레이되어야 할지 컨트롤하는 애플리케이션의 뇌 MVC의 개념은 데스크탑 애플리.. 2022. 3. 29.
[React] State vs Props 리엑트에서 데이터를 다룰 때 크게 State와 Props이라는 개념을 이용한다. 이번 포스팅에서는 이 둘이 뜻하는 바와 차이점에 대해 알아보자. State란? The state is a built-in React object that is used to contain data or information about the component. state는 컴포넌트에 대한 데이터나 정보를 담는 리엑트 내장 객체다. Props란? Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attribu.. 2022. 3. 28.

티스토리툴바