전체 글
terminal(cmd)에서 git 로그인하기
나는 터미널을 통해서 git을 사용하는 편이다. 복잡한 명령어는 잘 모르지만, 터미널을 통해서 깃을 잘 이용하고 있었는데... 어느날, 내 깃허브 프로필을 보고 이상한 점을 발견했다. push를 자주 했는데, 잔디가 듬성듬성 비어있었던 것이다... 왜 이런일이 발생하였나 커밋 히스토리를 확인했는데, 알고보니 다른 계정과 로그인 되지 않은 정보로 git 터미널을 이용하고 있었던 것이다. 이번에는 내 불찰을 반성하고, 앞으로 더 잘 커밋을 하기 위해서 git 터미널(cmd) 로그인 방법을 남기기로 하였다. git login 정보 확인하기 일단은, 로그인 하기 전에 현재 어떤 이름과 이메일로 깃을 사용하고 있었는지 확인하고자 하였다. git config user.name git config user.email..
React 이후의 웹 프레임워크들
흔히 가장 많이 사용되는 프론트엔드 개발 프레임워크는 React, Vue, Angular이다. 그중에서도, 이젠 React가 Next.js를 필두로 가장 많이 사용되는 웹 프론트엔드 개발 프레임워크로 자리잡았다. https://npmtrends.com/angular-vs-react-vs-vue angular vs react vs vue | npm trends Comparing trends for angular 1.8.3 which has 454,844 weekly downloads and 59,177 GitHub stars vs. react 18.2.0 which has 18,550,225 weekly downloads and 207,052 GitHub stars vs. vue 3.2.47 which h..
React-Router-Dom을 React Native에서 사용하기 (React-Router-Native)
react에서 아마 가장 많이 사용되는 라우팅 라이브러리는 react-router-dom이다. react native에서는 라우팅을 위해서 react-navigation을 많이 사용하지만, react router dom을 사용하고자 한다면 react router native를 사용할 수 있다. 🍅 react router native의 기본적인 사용법은 다음과 같다. import React from 'react'; import {Text, SafeAreaView} from 'react-native'; import {NativeRouter, Route, Routes} from 'react-router-native'; import Landing from './screens/Landing'; function A..
Tailwindcss와 Css-in-js 함께 사용하기 (twin.macro)
tailwindcss는 분명 장점이 있는 CSS 작성법이다. 다만, 어떤 경우에는 tailwindcss만 사용하는 것이 생산성을 떨어트릴 수도 있다. 🍋 예를 들면, 스타일이 많이 적용될 경우 인라인으로 클래스명이 너무나도 길어질 수 있다. (코드 가독성 저하) 이런 경우, 기존에 사용했던 styled-component나 emotion과 같은 css-in-js 라이브러리가 그리워지는데 이 둘을 모두 함께 사용할 수 있게 도와주는 오픈소스 라이브러리가 있다. 🍵 twin.macro (with. emotion) twin.macro의 깃허브 리드미를 살펴보면, 친절하게 각 환경에서 세팅하는 방법을 알려주고 있다. 그중에서 난 CRA 환경에서 emotion을 사용하여 개발 환경을 구축해보았다. styled-co..
프로그래머스 코딩테스트 연습 - 요격 시스템 JavaScript
사실 이번 문제는 문제를 푸는데 애를 많이 먹었고, 검색을 통해서 어떻게 문제에 접근해야할지 알아보았다. 스스로 해결한 문제가 아니어서 아쉽지만, 이런 문제에서 당황하지 않고 어떻게 접근하면 좋을지 생각할 수 있었던 것 같다. function solution(targets) { let answer = 0; let prevRight = -1; const sorted = targets.sort((a, b) => a[1] - b[1]); for(let i = 0; i = prevRight) { prevRight = right; ans..
React Native 앱 Drawer 구현하기 (react-native-gesture-handler)
React Native에서 Drawer를 구현하기 위해서 다양한 라이브러리가 있다. 그런데, React Navigation Stack 등에서 사용하기 위해 설치하는 react-native-gesture-handler에 Drawer에 대한 기능이 이미 구현되어 있다는 것을 최근에 알게 되었다. 이를 모르고, Drawer에 대한 라이브러리나 중복 구현을 하는 것을 막고자 이 글을 남기게 되었다. react-native-gesture-handler는 DrawerLayout 이라는 컴포넌트를 가지고 있다. Drawer를 구현할 스크린 상위에 DrawerLayout를 감싸는 것으로 손쉽게 Drawer를 구현할 수 있다. 다음은 공식 문서를 참고한 소스코드 예제이다. // ~ 생략 ~ const handleDraw..
React에서 다국어 지원하기 (i18next, react-i18next)
하나의 웹에서 여러 국가의 언어를 지원하는 것은 흔히 볼 수 있는 케이스이다. 다만, 이것이 어떻게 구현되었는지 아는 것은 쉽지 않았는데 우연히 RN ignite를 사용해보고 어떻게 구현되었는지 알 수 있었다. i18n-js 혹은 i18next와 같은 라이브러리를 사용하여 다국어를 지원하는 웹 사이트를 제작할 수 있다. i18next i18n-js보다 월등히 많이 사용되는 라이브러리로, 이를 통해서 다국어를 지원할 수 있다. https://www.npmjs.com/package/i18next i18next i18next internationalization framework. Latest version: 22.4.15, last published: 14 days ago. Start using i18nex..
useEffect의 life cycle
useEffect는 언제 실행되고 언제 실행이 멈출까. useEffect의 life cycle에 대해서 알아보았다. 모든 React 컴포넌트는 다음과 같은 생명주기를 가진다. 컴포넌트는 화면에 추가될 때 mount된다. 컴포넌트는 새로운 props나 state를 받았을 때 업데이트된다. 컴포넌트는 화면에서 제거되었을 때 unmount된다. useEffect는 컴포넌트 내부에 존재하기에 위와 같은 생명주기를 따라간다고 생각할 수 있으나, 완전 별개의 생명주기를 가진다고 봐야 한다. useEffect(() => { // 동기화 시작 return () => { // 동기화 해제 } }) useEffect는 기본적으로는 동기화를 위해서 사용되는 hook이다. 예를 들면, 실제 데이터와 화면 사이에 불일치가 발생..