Mengs blog

common fangirl

ie에서 localStorage가 여러 창에서 동기화 되지 않는 문제

이번에 로컬스토리지에 데이터를 저장하도록 만든 기능이 있었는데 ie에서 여러 창, 탭으로 앱을 띄웠을 때, ls에 저장된 데이터가 동기화가 되지 않는 이슈가 생겼다 좌 ie 우 크롬 이왜진…🤦‍♀️🤦‍♀️🤦‍♀️ 다른 브라우저에서는 잘만 되는데… 또다시 킹택갓버플로우의 도움을 받아 이 문제를 해결할 수 있었다. 코드 단 한줄만 쳐주면 된다! window 객체의 stor…

graphQL 시작하기 (feat. Apollo Client)

이번 프로젝트에서 graphQL을 사용하게 되었는데, graphQL을 공부하면서 내용들을 정리해 본 포스트이다! graphQL이란? graphQL은 흔히 알려져 있는 sql과 마찬가지로 쿼리 언어 중 하나이다. 둘의 가장 큰 차이는 sql은 서버에서 데이터베이스에 요청하기 위해 사용하는 언어이고, graphQL은 클라이언트에서 서버에 데이터를 요청하는 …

[React] Next.js의 pre-rendering

pre-render란? Next.js 특) 이자 Next.js에서 가장 중요한 개념 중 하나이다 Next.js에서는 페이지마다 HTML을 만들어주면서 CSR 방식의 단점이었던 first painting이 느리다는 것과 SEO가 좋지 않다는 점을 상쇄시킨다 Next.js가 만드는 HTML들은 그 페이지에 필요한 최소한의 JS 코드만을 포함하고, 브라우저에 …

JavaScript의 hoisting(호이스팅)

호이스팅은 JavaScript에서 실행 컨텍스트가 생성될때, 변수나 함수 선언을 최상단에 끌어올린 것 처럼 동작하는 것을 말합니다. 변수의 호이스팅 위 함수를 실행시키면 undefined가 찍힙니다. 조금 더 이해하기 쉽게 호이스팅 된 후 foo 함수의 모습을 적어보겠습니다. 변수 할당이 아닌 선언부만 최상단으로 끌어올렸기 때문에 bar를 콘솔에 찍으려…

[프로그래머스] 자물쇠와 열쇠

자물쇠와 열쇠 사용 언어 : JavaScript 문제 설명 고고학자인 튜브는 고대 유적지에서 보물과 유적이 가득할 것으로 추정되는 비밀의 문을 발견하였습니다. 그런데 문을 열려고 살펴보니 특이한 형태의 자물쇠로 잠겨 있었고 문 앞에는 특이한 형태의 열쇠와 함께 자물쇠를 푸는 방법에 대해 다음과 같이 설명해 주는 종이가 발견되었습니다. 잠겨있는 자물쇠는 격…

[프로그래머스] 기둥과 보 설치

기둥과 보 설치 사용 언어 : JavaScript 문제 설명 빙하가 깨지면서 스노우타운에 떠내려 온 죠르디는 인생 2막을 위해 주택 건축사업에 뛰어들기로 결심하였습니다. 죠르디는 기둥과 보를 이용하여 벽면 구조물을 자동으로 세우는 로봇을 개발할 계획인데, 그에 앞서 로봇의 동작을 시뮬레이션 할 수 있는 프로그램을 만들고 있습니다. 프로그램은 2차원 가상 …

[프로그래머스] 괄호 변환

괄호 변환 사용 언어 : JavaScript 문제 설명 카카오에 신입 개발자로 입사한 콘은 선배 개발자로부터 개발역량 강화를 위해 다른 개발자가 작성한 소스 코드를 분석하여 문제점을 발견하고 수정하라는 업무 과제를 받았습니다. 소스를 컴파일하여 로그를 보니 대부분 소스 코드 내 작성된 괄호가 개수는 맞지만 짝이 맞지 않은 형태로 작성되어 오류가 나는 것을…

gatsby blog를 생성하며...

도당체 블로그 이사가 몇번째인지 모르겠다. 티스토리1 -> 티스토리2 -> jekyll -> gatsby ㅎㅎ… 일단 gatsby 블로그로 갈아타게 된 계기는 기존에 사용하고 있던 블로그가 jekyll로 만든 거였고, 고것은 ruby 기반이었다. 그런데 react 기반으로 정적 페이지를 만드는 gatsby가 있다는 것을 알게 되었고, 언젠가는 갈아타야겠다…

[React] 네아로(네이버 아이디 로그인) 연동하기

네아로에 app 등록 우리의 리액트 앱에 네아로서비스를 연동하기 위해서는 우선 네아로에 우리의 어플리케이션을 등록해야한다. 어플리케이션 목록에 새로운 앱을 추가하자. 로그인에 필요한 정보와 서비스 url / callback url을 설정해 주면 어플리케이션 등록을 마칠 수 있다. Client ID를 발급받았다면 준비완료!! index.html 수정 Ht…

[React] scroll 이벤트 throttle로 최적화 시키기

Scroll 이벤트 이번 프로젝트 진행 중 스크롤을 어느정도 했느냐에 따라 네비게이션 바가 나타나고, 사라지게 하는 기능이 필요했다. 이를 위해서 일단 scroll 이벤트를 걸어주어야 했는데, scroll 이벤트의 특성 상 사용자가 스크롤을 아주 조금만 하더라도 이벤트가 트리거 된다. 아래 콘솔에 scrolled가 왕창 찍힌다. 스크롤은 실상 얼마 하지…