분류 전체보기 44

전라도 여행(3) - 이서휴게소

익산 미륵사지를 출발해 진도로 향했다. 분명히 전라북도와 전라남도는 광역 행정구역도 다르고 익산과 진도는 거리상으로도 꽤 되는 거리이지만 타지인 입장에서는 다 같은 전라도니까라는 오류를 범했다. 전라북도와 전라남도는 멀고도 험했다. 고속도로를 타고 광주를 거쳐 또 갈아타고 목포까지 가서 국도를 타고 한참을 가야 진도가 나왔다. 중간에 이서 휴게소라는 곳을 들러서 점심을 먹었는데 꽤 흥미로운 기계가 있었다. 서빙 로봇이라고 이놈이 계속 돌아다닌다. 나름 센서를 가지고 움직여서 사람하고 충돌은 나지 않는 것 같은데... 사실상 서빙은 하지 않고 사람들이 밥을 다 먹고 퇴식 쟁반을 올려놓는 용도로 쓰고 있었다. 여느 휴게소가 그렇듯이 내 번호가 불리면 가서 가져오는 것이 서로 편하다. 그런데 퇴식 쟁반을 올려..

일상/여행 2021.08.05

전라도 여행(2) - 익산 미륵사지

전라도 여행의 첫 번째 행선지는 익산 미륵사지였다. 익산 미륵사지는 "사실상" 백제의 4번째 도읍이라고 하지만 역사 기록상으로는 확실히 파악하기가 어렵다. 하지만 고고학적으로는 도읍이나 다름없다는 것이 정설로 알고 있다. 우리나라 고대사를 살펴보면 이와 같은 사례가 적지 않다. 즉, 역사 기록엔 별 것 없는데 막상 고고학적으로는 역사 기록에 잘 남아있는 다른 문화와 별반 다르지 않거나 오히려 더 융성한 문화인 곳 말이다. 대표적으로 전라남도 영산강 유역 문화가 그렇고, 낙동강 유역 가야 문화가 그렇다. 이처럼 우리나라 고대사는 대부분 삼국사기, 혹은 중국의 삼국지에 있는 기록들이 사실상 전부인데, 삼국사기의 경우 고구려, 백제, 신라 삼국의 이야기가 중심이고, 삼국지는 이들이 고대국가로 발전하기 전에 있..

일상/여행 2021.08.03

전라도 여행(1) - 프롤로그

지금은 웹 프론트엔드 개발자로 잘 살고 있지만 원래 학부 전공은 고고학, 중퇴하긴 했지만 석사과정 전공은 문화재정책학이었다. 어찌어찌 흘러 흘러 이쪽 길로 들어서긴 했지만 나는 여전히 문화재를 좋아하고 인터넷 기사에 관련 내용이 뜨면 자연스레 클릭하는 편이다. 아직도 꿈은 문화재와 연관된 무언가의 IT서비스를 직접 기획하고 개발하는 것이다. 그렇다고 우리나라의 문화유산, 역사문화, 전통문화 같은게 너무 좋고 위대하게 생각하고 자랑스럽게 생각하고 그런 건 썩 좋아하지 않는다. 한때 그런 생각도 하긴 했지만 공부를 하면 할수록 국가적 혹은 감성적인 관점보다는 학술적으로 바뀌었고, 문화유산 답사나 박물관 같은 곳에 가도 조상들의 위대함을 느낀다기보단 그냥 그 유산 자체를 보고 그것들을 남긴 자들에 대해 상상을..

일상/여행 2021.07.26

웹 프론트엔드 개발자의 M1 MacBook Pro (16GB RAM, 1TB SSD) 사용 후기 (+ Caldigit TS3 Plus 썬더볼트 3 독, 리뷰안 UX 550 1TB 휴대용 SSD)

맥북 에어 후기는 지난 포스트를 참고 바란다. 웹 개발자의 M1 MacBook Air 기본형 사용 후기 2021년 3월 26일에 그 유명한 M1 맥북에어를 배송받았다. 나름 대학생이라 학생 할인을 받아서 116만원에 구매하고, 선물로 받은 에어팟2 유선은 당근에 팔았다. 어차피 업무용으로 쓸게 아니고 개 think-dev.tistory.com 일단 지난 포스트는 개인 노트북이고 이번에 포스팅하는 후기는 회사용 노트북이다. 지난 5월 중순에 새로운 회사에 입사했고, 오픈마켓에서 약 250만 원 정도 하는 M1 MacBook Pro를 지급받았다. 옵션으로는 16GB RAM과 1TB SSD로 개인용보다는 가격도 비싸고 성능도 좋다. 회사를 다니기 시작하면서 기존 개인용인 맥북 에어는 웹서핑, VSCode에서의..

리뷰/전자제품 2021.07.25

React.js 라이브러리인 styled-components 소개, 설치 및 활용

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

개발/FrontEnd 2021.07.23

tsconfig의 baseUrl, paths 설정

개발을 하다 보면 직접 만든 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 패키..

이직, 그리고 일상

이제 새로운 회사로 이직한 지 두 달이 다 되어 간다. 어쩌다보니 오픈이 임박한 서비스의 프론트엔드 영역을 처음부터 다시 설계하여 이제 오픈을 앞두고 있다. 보통은 경력직으로 입사하면 대부분 결원에 대한 대체인력으로 충원되어 기존 소스코드를 분석하고 유지보수를 하는데 나는 추가 인력으로 채용되어 서비스의 처음부터 참여하게 되었다.(정확히는 처음이 아니고... 말 못할 사정이 있다. 아무튼 소소코드상으로는 사실상 처음이다.) 이게 장점이 남의 똥을 치우지 않고 내가 원하는대로 내 솜씨를 마음껏 펼칠 수 있다는 장점이 있으나, 문제가 생기면 그때부턴 100% 내가 싼 똥이다. 그래서 코드 품질이나 기타 등등 많이 신경써서 개발을 시작했지만 촉박한 일정에 쫓겨 지금 마무리 단계에서는 아주 품질이 좋지는 못한 ..

일상 2021.07.14

Next.js + TypeScript + ESlint + Prettier 세팅(4)

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

개발/FrontEnd 2021.07.14

Next.js + TypeScript + ESlint + Prettier 세팅(3)

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 코드의 여러가지 문제점들을 찾아서 고쳐주는 역할을 하는 것이다.(예..

개발/FrontEnd 2021.07.13

Next.js + TypeScript + ESlint + Prettier 세팅(2)

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..

개발/FrontEnd 2021.07.06