프론트엔드 6

잘 팔리는 웹 프론트엔드 개발자가 되려면 어떻게 해야 할까?

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

개발 2021.12.20

웹 프론트엔드 개발자의 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

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

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

개발/FrontEnd 2021.07.05

문화재 조회 서비스 프로젝트(2)

데이터 테스트 기본적으로 페이징 기반으로 목록을 가져오는 게 있고, 그 목록의 각종 아이디값을 이용하고 상세정보, 이미지정보, 동영상정보, 나레이션 음성정보가 있었다. 음 근데 API 키나 그런 것 없다. 그냥 막 갖다 써도 되는가보다. http://www.cha.go.kr/cha/SearchKindOpenapiList.do 이 주소를 그냥 브라우저에 쳐봤는데 잘 나온다. 그런데 XML이다. 뭐 XML을 JSON으로 바꿔주는 오픈소스가 있겠지. 하다보면 될거다. 나머지 이미지, 동영상, 나레이션도 잘 된다. 근데 나레이션은 음성파일 URL이 지맘대로 떨어진다. 그냥 얘는 쓰지 말자. 기술 스택 구상 내가 실무에서 써본 주력 프레임워크는 Express.js, Vue.js다. 음 근데 백엔드에서는 Nest...

개발/Project 2021.04.23

문화재 조회 서비스 프로젝트(1)

퇴사를 준비하면서 그동안 관심있었으나 제대로 써보지 못했던 기술들을 쓰면서 익히려고 프로젝트를 시작했다. 하고 싶은 건 Kotlin/Spring, TypeScript/NestJS, React.js/Next.js 일단 데이터베이스는 MySQL을 쓰고, DB를 두개 만들어서 Spring용, Nest용을 만들자. 프론트엔드는 React.js를 Next.js로 구현하면서 SSR과 CSR을 모두 챙기고 API서버를 Spring 혹은 Nest로 쉽게 스위치하도록 하자. 즉, 백엔드는 같은 기능을 하는 것이 두개가 되고 프론트엔드는 1개가 된다. 그럼 무엇을 하는게 가장 시간이 덜 들면서 효율적으로 코딩하고 공부할 수 있을까? 일단 기술적인 것보다도 콘텐츠를 무엇으로 할지, 디자인은 어떻게 할지부터 정해야겠다. 음 ..

개발/Project 2021.04.22