호박너구리 블로그

비행기는 많은 사람들의 삶을 바꿔왔습니다. (비록 코로나로 인해 지금은 자유롭게 여행을 다니지 못하지만) 비행기로 인해 우리는 지구 반대편도 하루 안에 갈 수 있게 되었죠. 비행기가 사람들의 이동을 도와준 덕분에 이탈리아와 그리스 같은 국가는 관광으로 큰 수입을 얻고 있으며, 호텔, 카지노, 테마파크 등의 다양한 산업이 성장할 수 있었습니다. 그러나 정작 비행기를 발명한 라이트 형제는 큰돈을 벌지 못했다고 합니다. 실제로 시대에 맞게 비행기를 제조하며 성장해온 기업을 떠올려보면, 많은 사람들은 보잉을 떠올릴 것 같은데요. 오늘은 항공 산업의 탄생부터 현재까지 큰 역할을 맡아온 보잉(Boeing)에 대해 한 번 살펴보겠습니다. 보잉의 시작: 비행기 덕후인 사업가 윌리엄 현재 글로벌 항공 우주기업인 보잉을 ..

기업 분석 2022. 2. 25. 18:30

유럽연합(EU)이 친환경 에너지 분류체계인 그린 택소노미(Green Taxonomy)에 원자력 발전을 포함했습니다. EU 규정안은 4개월간 EU 회원국 간 논의를 거친 뒤 2023년 1월부터 시행될 것으로 전망되는데요. 이번 결정이 그대로 시행된다면, 앞으로 재생에너지 확대를 위한 펀드의 자금이 원자력 산업에 일부 투입되고, 관련된 시장이 확대될 것으로 예상됩니다. 그런데 원자력 에너지는 안정성이나 환경 등의 이유로 감소세라고 알고 계셨던 분도 많을 텐데요. 과연 원자력은 어떻게 친환경 에너지에 포함될 수 있었을까요? 오늘은 원전 산업의 현황, 그리고 안정성과 경제성을 모두 갖추기 위해 원전 산업이 준비 중인 변화에 대해 한 번 살펴보겠습니다. # 세계 원전 현황: 감소세의 원자력 발전 2021년 4월 ..

산업 분석 2022. 2. 11. 18:30

앱 개발에 있어서 가장 많이 사용되는 디자인 요소 중 하나가 바로 백드롭 (Backdrop), 바텀시트(Bottom Sheet) 입니다. 스크린 이동을 시키지 않고, 바로 뜨는 화면에서 쉽게 동작을 이끌어내거나 주의를 끌 수 있기 때문인데요. 오늘은 이러한 기능을 구현하기 위한 방법에 대해 알아보겠습니다. 들어가며: 백드롭(Backdrop)이란? 백드롭이란 (아래 그림과 같이) 기존의 스크린 위에 새로운 화면이 뜨는 방식의 UI를 뜻합니다. 인스타그램의 프로필 스크린에서 프로필 이름을 누르거나, 옵션을 누를 때 아래에서 올라오는 스크린을 말하는 것이죠. 아래에서 올라오는 화면이라는 의미로 바텀 시트라고 부르기도 합니다. 방법1: 라이브러리 활용하기 새로운 기능을 써야할 때 가장 편리한 방법은 라이브러리를..

개발 2022. 2. 5. 18:30

보통 앱 서비스를 사용할 때, 뒤로가기를 누르면 이전 페이지로 이동합니다. 처음 react native로 앱을 개발할 때, 디폴트로 제공하는 기능인 줄 알기도 했는데요. 사실 직접 설정해주셔야 합니다! 오늘은 한 번 리액트 네이티브에서 뒤로가기를 어떻게 처리할 수 있는지에 대해 다루어 보겠습니다. 기능: BackHandler 사용하기 사실 뒤로가기 기능 자체는 간단합니다. react-native에 내장되어 있는 BackHandler를 사용하면 되는데요. 뒤로가기를 구현하고 싶다면 스크린 컴포넌트에서 다음과 같이 작성하면 끝입니다! import { BackHandler } from 'react-native'; const handlePressBack = () => { if (navigation?.canGoB..

개발 2022. 2. 4. 18:30

웹 개발이나 React 개발만 하시던 분들이 앱을 개발하기 위해 React Native를 시작하는 경우가 많습니다. React와 문법이 비슷해서 쉽게 시작할 수 있지만, 또 가끔가다 웹 개발과 전혀 다른 부분을 마주치면 당황하기도 하는데요. 오늘은 당황 포인트 중에 하나인 그림자 스타일에 대해서 살펴보겠습니다. 들어가며: React Native의 자체 그림자 스타일 리액트 네이티브에서 그림자를 아예 설정하지 못하는 것은 아닙니다. 문제는 안드로이드와 iOS에서 적용하는 방법이 제각각이라는 것인데요. 그나마 iOS는 웹과 비슷하게 설정할 수 있는데, 안드로이드는 그러지 못합니다. import React from 'react' import { Platform, StyleSheet, View } from 'r..

개발 2022. 2. 3. 18:30

웹사이트 개발을 할 때 가장 많이 쓰이는 css position은 아마 absolute와 (absolute를 위한) relative 정도일 것입니다. 그리고 헤더 등의 고정 컴포넌트를 위해서 fixed position도 종종 사용되곤 하죠. 그런데 자주 안 쓰이는 position 값 중에서 sticky라는 것도 있습니다. sticky 포지션은 자주 쓰이지는 않지만, 필요할 때 매우 유용한 속성 중 하나입니다! 하지만 sticky 속성에 대해 잘 모르고 무작정 사용했다가는 sticky가 제대로 작동하지 않는 예상치 못한 이슈가 발생할 수도 있는데요. 과연 어떤 이유로 이러한 이슈가 발생하는 것일까요? 들어가며: sticky position 이란? sticky position은 컴포넌트가 최소한 특정 위치에..

개발 2022. 2. 2. 18:30

프론트엔드 개발을 하시는 분이라면 한 번쯤은 position: fixed를 사용해보셨을 것입니다. 헤더와 같이 고정적으로 따라다녀야 하는 화면을 개발할 때에 fixed가 매우 유용하게 쓰이곤 합니다. 그러나 fixed를 쓸 때 고려해야 하는 요소에 대해서는 많은 분들이 모르고 계신데요. 오늘은 fixed 속성이 깨지는 버그가 발생하는 원인과 해결책에 대해 다루어보겠습니다. 들어가며: position fixed 란? position: fixed는 스크롤에 관계 없이 브라우저의 특정 위치에 요소를 고정하기 위해 사용되는 속성입니다. 보통 헤더에서 많이 사용되며, 확인해보니 현재 이 티스토리 블로그의 헤더도 fixed로 되어있네요. 이슈: position fixed 를 설정했는데 적용되지 않는 버그 그런데 가..

개발 2022. 2. 1. 14:06

react query는 api 요청과 상태 관리 라이브러리로 최근 많이 선택받고 있습니다. graphql 진영에 apollo client가 있다면, rest 진영에 react-query 가 있는 느낌일까요? 여하튼 기본적으로 api 요청에 많이 사용되던 axios나 fetch와 달리 react-query는 강력한 캐싱 기능을 제공하고 있습니다. 이런 캐싱 기능 덕분에 클라이언트는 매번 동일한 api를 호출하지 않고도 빠른 응답을 받을 수 있게 되었죠. 이슈: 수정한 데이터가 반영이 안되었다? 그러나 axios나 fetch만 사용하셨던 분들은 react-query의 캐싱 기능에 대해서 당황해하실 수도 있습니다. 왜냐하면 캐싱 기능으로 인해 데이터가 업데이트되지 않는 상황이 생기기 때문인데요. 구체적으로 묘..

개발 2022. 1. 31. 18:00