Thinking Developer

Firebase Remote Config란 애플리케이션의 각종 기본값들을 Firebase를 통해 손쉽게 관리할 수 있도록 하는 클라우드 툴이다. Firebase 원격 구성 | Firebase Documentation 앱 업데이트를 게시하지 않고도 일일 활성 사용자 수 제한 없이 무료로 앱의 동작과 모양을 변경할 수 있습니다. firebase.google.com 각종 기본값들의 경우 애플리케이션의 탭 리스트가 될 수도 있고 각종 스태틱한 값들이 될 수 있다. 이러한 값들의 경우 서비스 기획이나 정책에 따라 언제든지 변경될 수 있다. 이럴 경우 보통 데이터베이스와 백엔드를 통해 관리를 하게 되는데 이것을 구현하는게 어렵지는 않지만 번거롭고 시간이 걸릴 수 있어서 프로덕트 스케줄에서 우선순위에서 밀릴 수 있다..

Typescript는 Javascript를 Java, C, Swift, Kotlin처럼 정적 타입으로 쓸 수 있게 해주는 Javascript의 슈퍼셋이다. 빌드가 되면 브라우저 또는 Node.js가 이해할 수 있는 퓨어한 Javascript로 바뀌어 동적 타입인 Javascript의 태생적 한계를 극복하고 Javascript 생태계를 보다 안정적으로 쓸 수 있게 해준다. 다음을 살펴보자 let a = 1; console.log(typeof a); // number a = 'abc' console.log(typeof a); // string Javascript는 이처럼 변수를 선언해서 number 타입을 넣었다가 string 타입을 넣었다가 자유롭게 쓸 수 있다. 이처럼 동적 타입이기 때문에 때로는 변수를..

잘 팔리는 웹 프론트엔드 개발자에 대해 말하기 전에 우선 "웹 프론트엔드 개발자"란 무엇인지 짚고 넘어가자. 소프트웨어 엔지니어 직군의 세부 직군 중 가장 모호하고 헷갈리는 직군이 바로 웹 프론트엔드 개발자가 아닐까 싶다. 게임 개발자, 아이폰 앱 개발자, 안드로이드 앱 개발자, 서버 개발자. 남들에게 이렇게 소개하면 IT 업계를 잘 모르는 사람이라도 대충 이 사람이 무엇을 하는지 감이 온다. 물론 백엔드 개발자의 경우도 일반적으로 확 와닿는 표현은 아니지만 그냥 대충 서버 개발자입니다. 하면 어느 정도 맞는 말이기도 하고 듣는 사람 입장에서도 이해가 된다. 그럼 웹 프론트엔드 개발자 직군은 대체 무엇이고 뭘 하는 사람들인가. Front End를 직역하면 "앞단", Back End를 직역하면 "뒷단"이다..

이제 나에게는 필수적인 라이브러리가 된 styled-components에 대한 개요, 설치하는 방법과 기본적인 활용법 등을 소개하고자 한다. 백엔드 개발자의 대표적인 고충이 DB와 관련한 작업들이라면, 프론트엔드 개발자들의 고충은 아마도 마크업, UI 개발, 퍼블리싱이라고 불리는 HTML과 CSS 작업일 것이다.(마크업, UI 개발, 퍼블리싱은 HTML, CSS 개발이라는 공통분모가 있어 비슷하지만 각각 약간 개념이 다른 것 같다.) 그중 CSS 작업은 매우 고통스러운 일이 될 수도 있다. 왜냐하면 CSS는 구조화하기 어렵고, 변수를 선언하여 쓰기 어렵고, 프로젝트가 커지다 보면 class명이 겹쳐서 스타일이 꼬이는 등 예상치 못한 문제가 튀어나올 가능성이 매우 크기 때문이다. 그래서 SCSS와 같은 좀..

개발을 하다 보면 직접 만든 utils 또는 프론트엔드의 경우 components 폴더, styles 폴더 등 현재 작업 파일과 다른 경로의 파일들을 import 시켜야 할 때가 있다. import 시킬 필요가 없는 파일은 아주 단순한 스크립트이거나 온갖 로직을 하나의 파일에 다 작성할 때인데 별로 좋지 않은 패턴이다. 그래서 파일의 상단에는 다음과 같은 현상이 일어난다. import styled from 'styled-components'; import { TextField } from '../../components/textfield'; ... line 1과 line2가 import 방식이 조금 다른 것을 알 수 있다. line 1의 styled의 경우 styled-components라는 npm 패키..

ESLint가 개발할 때 혹은 빌드할 때 실수하지 않도록 우려가 될 만한 부분에 대해 에러를 뿜어주는 역할이라면 Prettier는 코드 작성 패턴을 사전에 설정해놓은 대로 자동으로 바꿔주는 역할을 한다. 그러므로 ESLint와 Prettier를 적절히 활용하면 에러를 미연에 방지하고, 코드가 예쁘게 나오고, 다른 사람과 협업 시에도 코드 컨벤션을 지키면서 작업을 할 수 있게 된다. 역시 VSCode 기준으로 설명하겠다. VSCode에서 prettier를 검색하고 다음의 확장프로그램을 설치한다. 그리고 프로젝트 최상위에 .prettierrc.js 라는 파일을 만들고 다음과 같이 작성 후 저장한다. module.exports = { semi: true, // 세미콜론(;) 사용 여부 trailingComma..

ESLint 공식 홈페이지에서는 ESLint에 대해 한마디로 다음과 같이 표현하고 있다. "Find and fix problems in your JavaScript code" ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project. eslint.org 즉, 개발자가 javascript 코드의 여러가지 문제점들을 찾아서 고쳐주는 역할을 하는 것이다.(예..

1. 개발환경 Next.js와 기타 등등 라이브러리들을 설치하고 개발을 하려면 기본적으로 Node.js와 NPM이 설치되어 있어야 한다. 아래의 공식 사이트에서 운영체제에 맞게 다운로드하고 설치하면 된다. 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 본 포스팅의 예제 환경은 M1 맥북, VSCode이다. 공식 문서에서 안내하는 개발 가능 환경은 다음과 같으니 참고 바란다. Node.js 12.0 or later MacOS, Windows (including WSL), and Linux are supported Next.js by Vercel - The React Framew..

Next.js는 React.js를 개발할 때 SSR(Server Side Rendering)을 보다 쉽게 해주는 프레임워크 중 하나이다. React.js 실무 프로젝트에서 가장 많이 사용되는 프레임워크이며, 나 같은 경우엔 굳이 SSR이 꼭 필요한 상황이 아니더라도 라우팅 등이 편해서 React.js 프로젝트를 할 때는 Next.js 위에서 작업하는 것을 선호한다. 이 포스팅에서는 Next.js를 설치하고 TypeScript, ESlint, Prettier를 끼얹는 과정까지만 다룬다. React.js 및 Next.js 프로젝트에서는 위의 프레임워크, 라이브러리 외에도 Redux나 Styled-Components와 같은 패키지들을 주로 설치해서 쓰곤 하나 반드시 필요한 요소라고는 할 수 없다. TypeSc..

Java와 Kotlin 관련 내용은 나중에 Spring으로 백엔드를 구현할 때 포스팅하려 했는데, Private NPM을 위한 Nexus를 설치하려다가 JDK 설치 이슈를 만나서 이렇게 먼저 포스팅하게 됐다. 보통 Oracle의 JDK를 많이 쓰곤 하는데, 일반 유저 입장에서 JDK로 만들어진 프로그램을 돌리려고 Oracle JDK, JVM을 설치하는 것은 전혀 문제가 없지만 JDK 기반 프로그램을 개발하는 입장에서는 라이선스 이슈가 신경이 쓰일 수밖에 없다. 물론 개인 프로젝트나 회사에서 내부적으로만 쓰는 거면 별 상관이 없다고는 하지만 뭔가 불안하다. 그래서 Open JDK를 많이들 설치하곤 한다. 나도 Open JDK를 설치하려고 이것저것 찾아보았는데 잘 되지 않았다. 일단 Home brew 설치가..