어서와, 개발은 처음이지?

이번 글에서는 modal을 만들어보도록 하겠습니다. 1. 모달(modal)을 만들자 알고 계시겠지만 모달은 일종의 팝업창으로 웹 서비스에서 뭔가 삭제 버튼을 눌렀을 때, 주변이 흐려지면서 정말 삭제하시겠습니까? 같은 ui를 말합니다. 구현 계획은 아래와 같습니다. 1. modal이 활성화 되었을 때, overflow: hidden 속성을 사용하여 스크롤이 되지 않도록 합니다.(position을 fixed 하라는 글이 종종 보이는데 이렇게 하면 화면 상단으로 스크롤이 이동하는 현상이 일어납니다.) 2. overlay 효과를 담당하는 div의 position을 fixed로 하여 viewport를 꽉 채웁니다. 3. modal의 가운데 정렬을 담당할 wrapModal을 만듭니다. 4. modal을 작성합니다...

이번 글에서는 div 태그의 가로, 세로 가운데 정렬 방법에 대해 작성하겠습니다.해당 카테고리 관련 코드는 여기에 모아두겠습니다. 1. 가운데 정렬 div를 가운데 정렬(특히 세로 가운데 정렬) 하는 방법으로, div를 flex box로 만들어서 justify-content align-items로 가운데 정렬하는 비교적 최신 방법과 table cell로 만들어서 vertical-align 속성을 사용하는 방법이 있습니다. 하지만 위 방법을 사용하면 브라우저와의 호환(IE10 11만 flex 지원), table cell로 바꿨을때 인접 혹은 자식 레이아웃이 붕괴되는 경우가 발생하곤 하는데.. 2. position absolute을 사용하여 정렬해보자 그래서 다른 방법보다 호환성좋고 직관적으로 이해할 수 있..

이번 글에서는 React Navigation, Redux, Typescript을 사용할 수 있도록 React Native 개발 환경을 구축해보겠습니다. 완성된 코드는 github에서 확인하실 수 있습니다.(보일러 플레이트 작업중이라 약간 상이할 수 있습니다. 참고용으로 확인해주세요.) - 차례 0. 들어가기 전에 1. 설치환경 2. 프로젝트 생성 3. react-navigation 환경 구축 4. typescript 환경 구축 5. typescript + jest 6. redux 환경 구축 7. 마치며 0. 들어가기 전에 얼마전에 if kakao dev 컨퍼런스에 다녀왔는데, 대다수 서비스의 front end 스택이 react로 이루어져 있는 것을 알 수 있었습니다. 특히 react와 vue 중 reac..

(2020.07.09) 이 글은 react navigation v3, v4 환경에서 실행 확인한 글입니다. 이전에 react-native-navigation 사용법을 포스팅 한 적이 있는데, react-navigation이 react-native-navigation보다 설치도 간편하고, 사용하기 편리하고, 무엇보다 성능이 좋아져서 최근에 자주 사용하고 있습니다. 이번 글에서는 react-navigation을 사용하여 아래 구조를 구현해보겠습니다. (세부 기능 설명이 아닌 예제 위주로 작성하였습니다.) - 시작화면(로그인) -> 메인화면(탭 네비게이터)로 이동- 탭 네비게이터 내에서 화면 이동- 탭 네비게이터에서 시작화면으로 이동 0. Repo 풀 코드는 Github에서 확인하실 수 있습니다.- react..

이번 글에서는 스코프에 대해 알아보겠습니다. 이 글을 보러 오셨다면 이미 스코프에 대해 알고 계시겠지만, 다른 분들을 위해 간단히 짚고 넘어가겠습니다. 아래 내용을 읽기 전에 자바스크립트 컴파일레이션에 관한 내용을 읽고 오시기를 권장합니다. 1. 스코프 스코프를 한마디로 정의하자면 '변수가 영향을 미치는 범위' 혹은 '변수의 유효 범위'라고 할 수 있습니다. (포괄적으로 말하면 '코드가 유효한 범위'라고 할 수 있겠습니다.) 거두절미하고 코드를 보겠습니다. var a = 10; function scope1(){ a = 20; console.log(a); // 20 } scope1(); console.log(a); // 20 var b = 10; function scope2(){ var b = 20; co..

이전 글에서 자바스크립트의 컴파일레이션 과정에 대해 알아보았습니다. 컴파일레이션은 스코프를 좀 더 쉽게 이해할 수 있는 초석으로, 이어서 스코프에 대한 글을 작성하는게 순서상 맞지만, 스코프를 나가면 호이스팅을, 호이스팅을 나가면 클로저로 계속 이어지기 때문에 js의 내장타입과 네이티브를 간단하게 소개하고 넘어가도록 하겠습니다. 1. 내장타입 우선 자바스크립트에는 내장타입라고 불리는 7가지 자료형이 존재합니다. 1. null 2. undefined 3. boolean 4. number 5. string 6. symbol (es6부터 추가됨) 7. object 이들 중 object를 제외한 모든 값은 변경 불가능한 값(불변값, immutable - 참조와 값의 개념에서의 불변으로, 현 토픽에서는 이해하지 ..

지금부터 다룰 내용들은 개인적으로 고급 개념이라고 생각합니다. 다만 저의 클라스가 아직 그 영역에 미치지 못하기에 초/중급자의 눈으로 뇌피셜을 섞어서 풀어내보겠습니다. 1. 개요 자바스크립트는 일반적으로 스크립트 언어로써, 인터프리터 언어로 분류되곤 하는데 실은 컴파일러 언어라고 합니다. 자바스크립트의 컴파일레이션은 코드가 실행되기 직전에 순식간에 일어나고, just in time 이라고 표현합니다. 컴파일레이션 과정을 이해하면 호이스팅, this 바인딩, let const 선언 등에서 일어나는 현상을 이해하는데 도움이 됩니다. 2. 컴파일레이션 3단계 자바스크립트 코드는 크게 3단계를 통해 해석(컴파일)됩니다. 1. 토크나이징 / 렉싱 : 코드를 의미있는 조각(token)으로 만드는 과정. (예) va..

최근 회사 업무가 제가 원하지 않던 stack의 직무로 바뀐 이후로, 일과 공부 방향이 달라져서 따로 공부할 시간이 부족해진 관계로 한동안 글 작성을 하지 못했습니다. (하고 싶은 일, 하고 싶은 기술로 직장 생활 하시는분들 정말 부럽습니다 ㅜㅜ) 그래도 제가 꿈꾸던 stack을 달성하기 위해 틈틈이 공부하던 중 무려 'You don't know js' 라는 책을 읽게 되었는데, javascript에 대한 굉장히 근원적인 내용이 많이 나와있었습니다.(개인적으로 크록포드 형님의 '자바스트립트 핵심 가이드'보다 높은 평을 드리고 싶습니다.) 그동안 '이게 왜 이렇게 동작하지?' 궁금해 했지만 '에이 일단 잘 돌아가니 됐지 뭐~' 혹은 '이걸 뭐라고 검색해야 나오려나?' 하고 넘어갔던 것들이, 이 책에 들어있..

이 글은React Native Firebase 푸시 알림(push notification), background listener - 1.Android 세팅React Native Firebase 푸시 알림(push notification), background listener - 2.firebase 리스너 구현React Native Firebase 푸시 알림(push notification), background listener - 3.서버 구현(현재글)로 구성되어 있습니다. 이번 글에서는 node 서버단에서 firebase에 메세지 전송을 요청할 수 있도록 구현하고, 메세지가 잘 도착하는지 확인해보는 작업을 해보겠습니다. 1. 프로젝트 생성 우선 프로젝트를 생성하고, express.js와 firebase..

이 글은React Native Firebase 푸시 알림(push notification), background listener - 1.Android 세팅React Native Firebase 푸시 알림(push notification), background listener - 2.firebase 리스너 구현(현재글)React Native Firebase 푸시 알림(push notification), background listener - 3.서버 구현로 구성되어 있습니다. 지난 글에 이어, 앱에서 notification을 receive할 수 있도록 코드를 구현해보겠습니다.기타 UI가 필요하지 않으므로 React Native의 기본 파일인 App.js에 구현하도록 합니다. 1. Permission 및 T..