오물오물 개발일기

2025~2026 1분기 회고

baegofda_ — Tue, 21 Apr 2026 04:17:07 +0900

‍♂️ 빠르다 빨라

무한도전

세월이 참 빠르다.

기억은 휘발되기 마련이니
어느 때보다도 급변하는 지금
더 늦기 전에 지금을 기록한다.

안녕..

입사 초기 때부터 같이 했던 백엔드 팀원들이 퇴사했다.

바쁜 시기를 함께했고
괴로운 소리를 내고 있는 서비스를 고쳐가며
같이 빛을 볼 그날을 고대했는데
나에게는 욕심이었던 것 같다.

내 노력으로 지키지 못한 부분들이 또 생겨나는 순간들이었다.

안녕?

빈자리가 익숙해지기 전에 다시 좋은 팀원들을 만날 수 있었다.
새로운 활력은 좋은 동력이 되어 다시 앞으로 나아가기만 하면 될 것 같았다.

❓ 갑자기요..

무한도전

좋은 동력의 열기와
아직 무더운 여름도 못 보냈던 8월
나에게는 싸늘해지는 소식이 전해졌다.

“저 퇴사해요”

갑작스러운 팀 리드님의 퇴사 통보였다.

데자뷰?

무한도전

뭔가.. 겪어봤던..
그런 느낌이 들었다.

한순간 많은 생각과 감정이 스쳐 지나갔으나,
상황을 정리해 봤다.

우리 팀은 개발 파트와 기획/디자인 파트 두 파트가 나눠진 상태로
기획/디자인 파트는 파트 리드 없이 개발자인 팀 리드님과 내가 팀을 운영하고 있었다.
신규 팀원들은 아직 서비스에 대한 이해도가 많이 부족한 상황에
나는 개발된 서비스의 신규 기능 개발과 유지 보수를 주로 진행했고
개발 중인 서비스는 팀 리드님의 의존도가 큰 상황이었다.

이러한 상황에 갑작스러운 퇴사는
조직적으로 상당히 뼈아픈 상황이었다.

지금 돌이켜보면
구조상, 상황상 발생할 수 있는 일이었다.

이미 발생했던 이탈을 고려한다면,
"팀 리드님이 나가면 팀이 어떻게 될까"라는 질문을 한 번이라도 진지하게 했어야 했다.

1보 후퇴

가장 먼저 마음먹은 일은 팀 재정비계획이었다.

상황상 어쩔 수 없이 팀 내 도메인 지식 편증이 심했고,
이 상황에 기존 인력 이탈이 연달아 발생하며 이슈 대응에도 많은 리소스와 리스크를 감내해야 했다.
(*체감상 당시 안정성·생산성은 0.25~0.4 수준이라고 느꼈었다.)
때문에, 신규 개발보다는 서비스 전반적인 안정성과 생산성 회복이 우선이라고 생각헀다.

2보 전진

재정비 계획의 목표는 안정성·생산성을 0.9~1 수준으로 복구하는 것을 목표로 하였으며
팀 내 버스 팩터(Bus Factor)지수를 상승시키는 걸 목표로 했다.

목표 달성을 위해 안정성, 리스크 감소 , 효율성/생산성 , 지속 가능성 4가지 키워드를 선정했다.

안정성
- 정산·CMS·정기결제·이슈 대응 및 운영 핵심 영역에 대한 문서화/시각화하여 운영 안정성을 향상 시킨다.
- 전체적인 맥락 파악 및 도메인 지식 습득을 통해 안정적인 서비스 설계를 할 수 있도록 한다.
리스크 감소
- 신규 서비스 개발 전략 수정을 통해 지연 리스크와 기획·개발↔실무 사이의 갭에서 발생하는 위험을 줄인다.
효율성/생산성
- 도메인 지식 편중 해소를 기반으로 업무 방식 전환
- 리소스 전환이 수월하고 서비스 배포 리듬을 높여 상태로 만들어 효율성/생산성을 향상한다.
지속 가능성
- HR 변동에 대한 공백 최소화 & 단기간 온보딩이 가능하도록 한다.

부족한 문서와 가이드화, 신규 서비스 개발의 점진적 배포 전략 수립 등 각 직군 별 의견을 모았고
팀 리드 위주로 돌아가던 업무 방식을 각 직군별로 일을 위임하여 오너십을 강화하는 방향으로 계획했다.
팀원들의 적극적인 참여로 빠르게 준비할 수 있었고 전사에 공유하여 재정비 계획을 진행할 수 있었다.

이로인해 2보 전진을 위한 기틀을 마련할 수 있었다.

무한도전

어느새 겨울이었다.

날씨만큼이나 추운 스타트업 시장으로 인해
계획했던 신규 서비스 개발보다는 생존을 위한 개발을 우선적으로 진행했다.

그러나 야속하게도 다른 곳에서 비즈니스에 큰 영향을 주는 이슈가 발생하며
많은 복잡한 감정들을 느끼는 시기를 보냈다.

아직 우리의 입춘은 오지 않은 것 같다.

앞으로의 나

무한도전

최근에는 AI가 많은 부분을 바꾸고 있다.
과거에는 불가능했던, 생각하기 어려웠던 일들을 가능하게 만들고 있고 더 많은 걸 할 수 있게 되었다.
지금 이 순간에도 세상의 속도는 파멸적일 만큼 빠르게 변하고 있다.

그런데 돌아보면 나는 그 속도를 따라가려는 마음에 쫓기고 있었던 것 같다.
이탈을 쫓고, 안정성을 쫓고, 시장을 쫓았다.
그러다 보니 정작 제때 던졌어야 할 질문들을 자꾸 미뤄두고 있었다.
“팀 리드님이 나가면 팀은 어떻게 될까”, “지금 가장 취약한 의존성은 어디인가”, “내가 없어도 굴러가는 구조인가” 같은 질문들이다.
바쁘다는 이유로, 아직은 내 몫이 아니라는 이유로, 중요한 질문들을 뒤로 미뤄왔던 것 같다.

이 흐름을 어떻게 지나가야 할지 고민하던 와중에, 문득 유퀴즈에서 봤던 한 문장이 떠올랐다.

“세상의 속도에 맞추지 않고 방향에 맞추는 어른이 되고 싶어요” - 유퀴즈

결국 중요한 건 방향이라는 생각이 들었다.
속도는 내가 온전히 통제할 수 없지만,
어떤 방향으로 갈지는 스스로 정할 수 있다.

앞으로는 해왔던 일을 더 잘해야 한다.

팀 안의 의존성을 읽고, 필요한 질문을 먼저 던지고, 문제가 되기 전에 말할 수 있는 사람이 되어야 한다고 생각한다.
돌아보면 내가 놓친 건 기술 자체라기보다 그런 감각에 더 가까웠다.

그리고 안 했던 일들도 해야 한다.

오래 미뤄두었던 백엔드와 앱 영역까지 조금씩 시야를 넓혀가려 한다.
프론트에만 머물러 있던 동안 보지 못했던 의존성들이 있었고,
그 보이지 않음이 결국 적지 않은 비용이 된다는 것을 배웠다.

쫓기지 않고, 내 방향으로 나아가자

2023~2024 개발자 회고

baegofda_ — Mon, 13 Jan 2025 05:23:52 +0900

‍ 늦었다

무한도전

무한도전 박명수 어록 중 하나인 이 장면은 바로 다음 아래의 문장이 이어진다.

"늦었다고 생각할 땐 너무 늦은거다. 그러니 지금 당장 시작해라"

- 거성 박명수

바쁘다는 핑계로 지난 2년간 돌아볼 시간이 없었다.

그러니 지금이라도 2년간의 회고를 해보려 한다.

춥다

물이 빠지면 누가 발가벗고 수영을 하고 있었는지 알 수 있다.
- 워렌 버핏

2023년도 초 겨울이었다.

계절과 함께 스타트업 시장이 얼어붙었다.

미국 금리 인상으로 인한 여파, 스타트업 투자 심리 위축 등등 많은 원인들이 있었다.

이미 벌어진 일이다.

징조는 있었지만 대비하지 못한 스타트업들에게는 치명적이었고 (대비를 위한 시간이 부족했을지도 모른다.)

후속 투자를 받지 못한 많은 스타트업들이 무너졌다.

그렇다. 수영장에 물이 빠지고 있었다.

곳곳에서 희망퇴직, 권고사직 등 안 좋은 소식이 들려왔고 스타트업을 다루는 드라마 속 줄거리를 듣는 것 같아 현실성이 없었다.

하지만 내가 그 드라마 속의 등장인물이 될 줄은 몰랐다.

많은 변화와 미래를 구상하던 시기는 당장에 생존을 위한 시기가 되었다.

만남이 중요하듯 헤어짐도 중요하다. 하지만 이 시기의 헤어짐은 옳지 못했다.

답답하고 아쉬운 마음에 작성해서 발송했던 메일은 다른 구성원의 제보로 인하여 기사로도 다뤄졌다.

‍ 이직 그리고 또 이직

두 번의 이직을 했다.

처음 이직한 팀의 규모는 작지만 괜찮은 비즈니스라고 생각했다.

오랜만의 이직이었고 새로운 업무 환경에서 내 경험을 살려서 일할 수 있었다.

하지만 시간이 지날수록 비즈니스 방향성에 대한 공감성이 많이 떨어졌다.

결국, 약 9개월이라는 짧은 기간을 보낸 후 또다시 이직을 했다.

(이직 이후 이 팀도 결국 후속 투자 유치에 실패했다.)

나는 도전적이고, 더 성장하며 지속 가능할 만한 규모 있는 팀을 원했다.

제로투원(0 to 1)을 실현해야하고 (도전적이고)
팀원들도 있고 이끌어줄 팀 리드님도 있으며 (더 성장하며)
시리즈 B단계의 500억 이상 투자를 받은, 업계 1위의 지속 가능성 있는 (지속 가능할 만한 규모 있는)

빌딩중인 팀을 찾았고 이직을 했다.

쉽지 않네...

업력 약 6년, 비즈니스의 규모는 성장했는데 시스템은 성장하지 못했다.

엑셀이 import 기능이 있는지도 script를 사용할 수 있다는 걸 이때 처음 알았다.

오랜 기간 모든 비즈니스는 엑셀로 이루어졌고 수많은 엑셀은 서비스 시스템이자 DB였다.

(온보딩 당시 엑셀의 구조는 흡사 ERD를 보는 듯 헀다.)

그 성능 좋은 엑셀은 데이터 한 번을 확인하기 위해 자칫 몇 분이 걸리기도 했다.

팀의 목표는 엑셀을 개발 기반의 시스템으로 변경하는 DT(Digital Transformation)과정이 목표였다.

합류 당시엔 벌써 프로젝트가 진행되고 있었고 오픈이 얼마 안 남은 시점이었다.

하지만, 합류 직후 진행 상황을 확인했을 때 프로젝트 진행률은 처참했다.

(처음엔 내가 업무 파악을 잘못하여 오픈 시점을 오해한 줄 알았다.)

짧은 기간 적은 인원으로 다수의 프로젝트를 진행, 오픈해야 하는 상황이었고 팀에는 디자이너, 기획 직군도 없었다.

외주로 이 부분을 해소하려 했으나 외주 인원도 이탈했다.

정립된 시스템이 아니라 사람과 사람으로 운영해온 서비스는 많은 예외사항들이 존재했으나 이 부분이 정리되지 않았다.

시간은 너무 없고 개발자는 부족했다. 절망할 시간도 없었다.

프로젝트 기한을 맞추기 위한 생산성을 향상을 위해

외주 인원 이탈 전 와이어프레임 기반으로 내부 UI 라이브러리를 구축했다.

(디자인시스템 구축의 경험이 너무 감사했다.)

기획/정책 수립은 개발과 함께 맞물려 진행되었다.

하루에 14~18시간은 일했다. 주말, 공휴일도 없었다.

이직 전 가벼운 마음으로 처음 봤던 선녀신점, 타로들이 떠올랐다.
(공통적으로 "어딜가도 힘들꺼다. 그냥 있어라"라는 말을 했다.)

구인/구직 플랫폼으로 오는 연락들도 계속 아른거렸다.
하지만 버텼다. 과도한 업무량은 버틸 수 있었다. 이전에도 해봤다.
또, 이 힘든 시기는 짧은 기간 동안 팀원들과 빠르게 친해질 수 있었고 좋았다.

2개월~3개월이 된 시점 서비스는 오픈을 곧 앞두고 있었다.

네...????

나는 신뢰 자본이라는 용어를 좋아한다.
새 조직에서의 신뢰 자본은 0이다.
새로운 리더, 새로운 팀원은 신뢰 대출로 시작한다.

행복할 줄 알았던 서비스 오픈은 더 지옥 같았다.

부실했던 기획, 일정, 인력은 당연하게도 서비스의 이슈로 돌아왔고 하루하루 수많은 이슈가 인입되었다.

오픈 이후에도 이슈 처리/안정화를 위해 과도한 업무량은 지속됐다.

우리 팀을 빌딩 하는 과정에는 회사에 먼저 합류하신 새로운 개발 리드님, 기존 회사 구성원이셨던 분 2분이 계셨다.

서비스가 오픈 되었지만 많은 이슈는 팀에 대한 불신으로 다가왔다.

우리 팀은 신뢰 대출의 부채는 계속 쌓여만 갔다.

그래도 이렇게 버티고 나면 밝은 미래가 올 줄 알았다.

언제였을까? 바쁘게 보내던 와중에 소식을 들었다.

팀 빌딩의 주축이 되었던 두 분이 각자의 사정으로 휴직하신다고

네...????

제가요...?

팀 그리고 개발 파트를 이끌 사람들이 필요했다.

감사하게도 좋게 봐주신 덕분에 부족한 내가 그 중 다음 후임자로 추천되었다.

제가요...?

처음엔 거절했다.

팀의 신뢰 대출 부채는 엄청났고 업무는 긴 터널과 같이 끝이 보이질 않았다.
준다고 하던 보상은 너무나도 부족했다. 팀의 사기는 바닥이었다.
처음인데, 내가 할 수 있을지 의문이었다.

독이 든 성배와 같았다.

하지만 누군가는 해야 하는 일이고 감당해야 하는 무게였다.

또, 앞으로 내 개발 커리어에서 감당해야 할 책임은 계속 커질 것이고

어떤 리더로 성장할지 고민해 볼 수 있는 기회이기도 했다.

이번 생은 처음이니까

"얼마나 잘 되려고 이럴까?"
"내 인생이 점점 버라이어티해지는군, 재밌겠어."
"에피소드 하나 더 생긴다고 생각하지, 뭐"
- 천우희, 유퀴즈온더블럭

단순히 개발팀원이 아닌 파트 리드로서의 기간은 부족한 점을 알게 되고 자기 객관화에 대해 생각해보고 변화하는 계기가 되었다.

과거보다는 돌발 상황에 대해 관점이 바뀌었다.

MBTI도 ISTJ에서 ENTJ로 바뀌게 되었고 내가 좋아하는 일이 뭔지 좀 더 고민해 보게 되었다.

(인생을 좀 더 열심히 살게 된 기분이다.)

이번 생은 처음이니까 미숙하고 모르는게 많다.

앞으로의 나

정말 많은 일이 있었다.

비즈니스적으로도 위기가 있었다.

지금도 진행 중인 문제들이 있고 결과를 기다리고 있는 문제, 해결해야 하는 문제가 많다.

개발 관점에서의 성장은 많이 이루지 못했지만 다른 부분으로 성장할 수 있었다.

어떤 리더로 성장할지, 팀원들이 많이 지쳤고 힘든데 내가 팀원들에게 어떤 도움이 되고 있는지 정확히는 알 지 못한다.

이전의 동기부여는 나 자신의 관점이 컸다면 지금은 내 주변 사람들이 동기부여가 된다.

지키고 싶은 것들은 계속 늘어나고 욕심도 생긴다.

하지만, 내 노력으로 지키지 못하는 부분들이 더 많다는 걸 계속 깨닫고 있다.

내가 좋아하는 영화 <리틀 포레스트>에 '아주심기'라는 용어가 나온다.

어쩌면, 나도 '아주심기'를 준비하고 있는지도 모른다.

옮겨심으며 혹독한 겨울을 견딘 양파가 훨씬 달고 단단하듯이 좌절과 방황을 겪고 나면 더 단단해질 것이다.

그러면 뿌리내릴 수 있다.

스터디를 꾸준히 해보자.

배우고 싶은걸 배워보자.

더욱 단단해지기 위해 매 순간 열심히 하자.

bundling & webpack

baegofda_ — Thu, 5 Oct 2023 04:15:33 +0900

급변하는 프론트엔드 환경

웹 개발에 있어서 프론트엔드의 급변하는 환경을 대부분은 모던 Javascript(ECMA2015)이후 부터 시작되었다고 대부분은 알고있지만

정확히는 ECMA2015부터가 아닌 그 이전부터 있었습니다. 바로 Node.js, npm을 통해 이루어지는 환경에서 시작되었습니다.

웹앱의 규모가 굉장히 커져감에 따라 더욱더 급변하고 복잡해집니다.

소프트웨어 하나를 만든다는 가정을 하면 규모가 어느정도일까요? 규모가 큰 웹앱은 수백만 수천만 라인의 코드가 될 수도 있습니다.

이코드들이 또 하나의 파일로는 작업할 수 없기때문에 수십, 수백개 이상의 파일이 하나의 어플리케이션을 위한 규모입니다.

하지만 이것들이 왜 프로젝트 구성을 복잡하게하는 원인이 되었을까요?

스펙의 필요성

Javascript는 초기엔 HTML을 조작하기위해 간단히 만들어진 언어입니다.

언어의 초기 컨셉 자체가 그러다보니 수만개의 소스코드를 가지고 하나의 애플리케이션을 만들기위한 기능들이 준비가 되어있지 않았습니다.

대부분의 언어에서 지원하던 module스펙이 없었기 때문에 많은 파일로 하나의 애플리케이션을 만든다고 하였을때 문제가 되었습니다.

Javascript는 이러한 module을 ECMA2015부터 지원하였었습니다.

module스펙은 파일과 파일간에 특정기능을 사용하기 위함입니다. 자바스크립트는 export와 import의 형태로 지원을합니다.

그런데 왜 이 스펙이 개발 환경을 복잡하게 만드는 원인이 되었을까요?

❗ 원인

HTML에서 JS파일을 사용하기 위해서는 script태그를 이용하여 파일을 로딩하였었습니다.

그럼 10개의 파일이있다면 script태그가 10개, 100개라면 script태그를 100개 작성해야 할까요?

실제로도 그럴 수 밖에 없었기때문에 병목현상은 물론이거니와 export, import가 생겼지만 문제가 있었습니다.

바로 브라우저 호환성 이슈입니다.

호환성과 생산성 사이

웹 프론트엔드 개발자가 새로운 스펙을 사용할때 제일 먼저 떠오르는것은 브라우저 호환성입니다.

웹은 누구에게나 공평하고 서비스를 하는 입장에서는 사용자가 어떤 환경에서 사용할지 강제하는것은 굉장히 어렵습니다.

때문에 웹 개발자들은 브라우저 호환성을 최대한 넓게 가져가는것이 중요합니다.

하지만 Javascript는 매년 새로운 버전과 문법이 나오고있으며 이미 현업에서 없어서는 안되는 스펙들도 있습니다.

이러한 스펙은 생산성또한 높아지기 때문에 개발자들은 사용하고 싶으나 지원을 하지않는 브라우저들 때문에 사용할 수 없는 경우도 있습니다.

이때 여러 엔지니어링 시도가 이루어집니다.

번들러의 등장

Node.js는 브라우저 외의 환경에서 Javascript를 동작하게 해주며 Javascript개발자들은 여러 툴을 만들고

npm을 통해 배포를 하기가 쉬워집니다. 이러한 상황에서 번들러라는 소프트웨어가 나옵니다.

번들러는 브라우저가 script를 부르기전에 미리 하나의 파일로 만들어둡니다.

그럼 HTML은 하나의 JS파일만 부르면 됩니다. 물론 번들링이라는 행위에서 문제가 없지는 않습니다.

하지만 번들링을 사용하며 module이라는 스펙을 사용할 수 없는 환경에서도 사용할 수 있게 되었습니다.

번들러 종류

현재 사용되는 번들러들은 webpack, parcel, rollup 등이 있습니다.
이중 가장 많이 사용되는 번들러는 webpack 입니다.

webpack vs parcel vs rollup 번들러 비교하기

번들러의 역할

실제 번들러는 여러 JS파일을 하나로 합치는것 뿐만아니라 .jpg, .png, .sass 등등 여러 유형의 파일들을 하나로 합쳐줍니다.

번들러의 기본 개념은 위에서 말한것과 같지만 번들링이라는 처음의 작업을 해보니 이상의 무언가를 해보자 했을때 여러 유형의 작업을 하게되었습니다.

이러한 측면으로 보자면

"합치는 중에 필요없는 소스코드를 제거하면 어떨까?"

"이미지도 최적화 시켜보고 소스코드를 난독화 하기위한 작업들도 해보면 어떨까?"

여러 아이디어들로 현재의 번들러가 나오게 된것입니다.

또한 가장중요한 작업은 트랜스파일러 작업입니다.

"번들링중에 모던 Javascript를 ES5로 변환하는 트랜스파일러작업을 하면 어떨까?"

"그러면 구형 브라우저에서도 최신의 스펙들을 사용할 수 있을텐데.."

위와 같은 아이디어를 통해 번들러들은 트랜스파일러 작업 또한 babel과 연동하여 ECMA2015, TS, React 등을 지원하게됩니다.

웹팩과 바벨

이제부터 간단하게 바벨과 웹팩을 셋팅하는 법을 알아보겠습니다.

babel 설치하기

먼저 바벨의 기본 모듈들을 설치합니다.

yarn add @babel/core @babel/cli @babel/preset-env --dev

모듈들의 역할은 아래와 같습니다.

@babel/core : 바벨의 핵심 기능들을 포함
@babel/cli : 터미널에서 바벨 명령어를 사용할 수 있게 도와줌
@babel/preset-env : 코드 구문 변환 설정을 도와줌 (지원 브라우저 점유율, 호환성 설정 등)

@babel/preset-env은 함께 사용되어야하는 플러그인을 모아둔것이며.
공식 Babel 프리셋은 아래와 같습니다.

@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript

원하는 다른 플러그인이 있다면 babel 공식 홈페이지에서 확인이 가능합니다.

https://babeljs.io/docs/en/

모듈을 설치하였다면 .babelrc파일을 생성 후 presets를 작성합니다.

{
  "presets": ["@babel/preset-env"]
}

웹팩 설치하기

웹팩 또한 모듈들을 설치합니다.

yarn add webpack webpack-cli webpack-dev-server --dev
yarn add babel-loader style-loader css-loader --dev
yarn add html-webpack-plugin --dev
yarn add sass sass-loader --dev

모듈들의 역할은 아래와 같습니다.

webpack: 웹팩 모듈
webpack-cli: 터미널에서 웹팩 명령어를 사용할 수 있게 도와줌
webpack-dev-server: nodemon과 같이 웹팩 환경에서 개발서버를 생성
babel-loader: 웹팩과 바벨을 연동
css-loader: 웹팩이 css파일을 읽을 수 있도록 도와줌
html-webpack-plugin: 번들링된 html파일에 css와 js파일들을 추가해줌
sass-loader: 웹팩이 sass파일을 읽을 수 있도록 도와줌
모듈을 설치하였다면 webpack.config.js파일을 생성합니다.

//webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true,
            },
          },
        ],
      },
    ],
  },

  devServer: {
    host: "localhost",
    port: 3000,
    open: true,
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

각각의 옵션에대한 설명은 아래와 같습니다.

mode: production, development, none 세가지 옵션을 사용할 수 있는데 사용한 옵션에 따라 웹팩에서 내부적으로 최적화를 해준다.
entry: 번들링을 시작할 파일을 결정할 수 있다. 멀티 페이지 번들링시 여러 파일을 설정할 수 있다.
module: 다양한 모듈들을 처리하는 방법들을 결정한다. js파일, ts파일을 포함한 이미지파일, 스타일 파일 등 웹팩을 통해 번들링 되는 모든 파일들의 처리 방법을 설정하며 좀전에 설정한 바벨 또한 이 곳에서 설정한다. module을 설정할 때 중요한 부분은 loader를 읽을때 오른쪽에서 왼쪽으로 loader가 실행되기 때문에 sass-loader의 경우 css-loader보다 오른쪽에 위치시켜야 한다. (typescript의 경우에는 babel-loader 오른쪽에 ts-loader를 위치시켜야 한다.)
devServer: 개발 서버에 대한 설정을 할 수 있다. 에러처리, 포트 설정, 기본 path 등 여러 옵션을 설정할 수 있다.
output: 웹팩을 통해 최종적으로 번들링 된 파일을 저장할 위치를 설정한다.
plugins: 웹팩에 적용할 플러그인들을 설정한다.
추가적으로 package.json에 scripts를 작성합니다.

// package.json
{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve --mode development"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.5",
    "@babel/core": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "sass": "^1.34.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

다음 테스트를 위한 코드를 작성합니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bundling</title>
  </head>
  <body>
    <h1 class="card-title">Card Title</h1>
    <button class="btn-change">버튼 변경</button>
  </body>
</html>

//src/btn.js
const btnChange = document.querySelector(".btn-change");
export { btnChange };

//src/color.js
const cardTitle = document.querySelector(".card-title");
const changeColor = function (color) {
  cardTitle.style.backgroundColor = color;
};
export { changeColor };

//src/index.js
import "../style.scss";
import { btnChange } from "./btn";
import { changeColor } from "./color";
btnChange.addEventListener("click", function () {
  changeColor("pink");
});
console.log("Hello World");

//style.scss
body {
  background-color: #369fff;
}

이후 build와 start를 실행해보면 정상적으로 작동됨을 확인할 수 있습니다.

2022 회고 - 2년차 프론트엔드 개발자 회고

baegofda_ — Sat, 31 Dec 2022 19:56:17 +0900

벌써 끝이라고?

심슨

이맘때쯤 1년 차 회고를 작성했었는데 벌써 1년이라는 시간이 더 흘렀다.
많은 작업을 했고 많은 일들이 있었고 많은 고민들이 있었으며 많은 인연들이 있었다.
아직 정리되지 않은 이 기분으로 한 해를 마무리해야 한다니..
아쉽기도 하지만 더 나은 미래를 위해 어김없이 2022년 회고를 작성한다.
열심히 했다!!

@baegofda's 2022 GitHub Skyline

Please rotate your device Visit in desktop for the best experience.

skyline.github.com

변화의 시작

새로운 월세방..

올해는 이사로 시작하였다. 하지만 이사를 진행해야 하는 주에 다리에 화상을 입어서 힘들었던 기억이 난다.

~~(한동안 정말 지옥 같았다.)~~

이사와 함께 모회사의 개발 조직과 서서히 합쳐지며 새로운 조직으로 탈바꿈 되고 있었다.

초기에는 기존 성수동 사무실에 몇 분만 합류하여 프로젝트를 진행했고

5월 즈음 시청역 인근의 사무실의 준비가 완료되며 드디어 개발 조직의 모든 인원이 한곳에 모일 수 있었다.

시청 사무실의 라운지

우리들의 빅픽처는 이제 시작이였다.

험난한 여정의 출발

무한도전

조직이 출발선에서 점점 멀어지는 동안에 많은 일들이 있었다.

팀이 개편되고 새로운 서비스를 준비하고 엎어지고 다시 팀이 개편되고 또 개편되고.. 엄청난 혼돈의 시기였다.

작지 않은 조직 간의 통합이다 보니 어찌 보면 당연한 일이었을 것이다.

심슨

이 혼돈 속에서 나는 전적 검색팀 소속으로 Laravel 기반으로 되어있는 프로젝트를 하나씩 포팅 하는 작업을 진행하였다.

한 개의 서비스에 약 1~2달가량의 일정.. 초기 프로젝트들은 Nuxt.js로 진행하였다가 이후 Next.js로 기술 스택을 전환하였다.

뿐만 아니라 새로운 스택들을 하나씩 추가하며 거의 다 다른 스택들로 진행되었으며 새로운 개발자들과 팀으로 프로젝트를 진행하기도 하고

혼자 진행하기도 하고.. 출발 신호를 듣자마자 바쁘게 달려오니 4개의 서비스에 대한 작업을 진행하였고 한 해의 끝을 달리고 있었다.

이 시기 동안 기술들을 바꾸고 적용해나아가며 각각의 프레임워크, 라이브러리들의 특징들을 파악하며 사용할 수 있었고

많은 이슈들을 해결하며 빠르게 성장하게 된 발판이 되었다. 내부 팀에서 사용할 공통 모듈을 만들어 배포도 해보고 필요에 따라

직접 만들며 좀 더 깊숙이 언어에 대한 이해도를 높여갈 수 있었다.

아쉬운 점도 상당히 많다. 좀 더 여유가 있었더라면 더 잘 만들었을 것 같은 부분도 있고

프로젝트 진행 후 정리를 할 시간도 없이 바로 다음 프로젝트를 진행하다 보니 자체 서비스 개발보다는 사내 외주 팀이 된 느낌이었다.

~~(이러려고 자체 서비스 회사에 들어왔나 자괴감이 들어..)~~

어느 순간부터 이러한 아쉬움들과 고민들은 점점 커져만 갔다.

금융 치료

놀면 뭐하니?

9월 즈음 첫 연봉 협상을 진행했다.

현 직장은 연봉 협상 시기가 오면 본인의 성과, RNR 등등 본인의 가치를 증명할 문서를 작성해야 한다.

처음 작성해 보는 거라 막막했지만 틈틈이 정리해두었던 이력서를 보며 질문지를 작성해나아갔다.

걱정과 달리 만족스러운 결과로 협상을 마무리할 수 있었다.

잠시나마 치료가 되는듯하였으나 연봉이 높아진 만큼 부담감과 걱정, 고민은 점점 커져만 갔다.

️ ‍ 떠나자, 워케이션!!

생각도 정리하고 새로운 자극을 위해 속초로 첫 워케이션을 떠났다.

한 주 동안 속초에서 원격으로 근무를 진행하고 바다를 보며 기분 전환을 하며 보냈다.

이 시기에 많은 생각들을 정리할 수 있었고 새로운 환경에서 오히려 업무 집중도가 높아지며 상당히 만족스러운 워케이션을 보낼 수 있었다.

속초에서 돌아온 후 새로운 환경의 중요성을 깨달은 나는 집의 가구 구조도 바꾸고

요즘은 원격 근무날에 집무실이라는 공유 오피스에서 업무를 보며 나의 환경을 계속 바꿔주고있다.

집무실, 집 근처 사무실

분산 오피스 1등, 근사한 업무 공간

www.jibmusil.com

만남은 쉽고 이별은 어려워...

무한도전

당연하게도 많은 일들이 지나가는 동안 많은 인연들을 만나고 떠나보내야 했다.

불안정한 환경은 이탈자를 만들었고 각자의 이해관계로 인해 원하는 길을 찾아 떠났다.

더 나은 미래의 기대감으로 출발했지만 아쉽게도 떠나는 구성원들을 보며 '과연 맞는 길인가?'에 대한 생각이 들었다.

떠나간 빈자리들은 새롭게 채워졌다.

그중 인턴분을 처음 맞이하게 됐었는데 너무 잘해주셔서 놀랐고 오히려 내가 많이 배운 시간이 되었다.

비록 인턴 기간 이후 같이 하지 못하게 되었지만 어쩌면 안일해질 뻔한 나에게는 좋은 자극이 되었다.

다음에는 더 좋은 곳에서 만날 수 있으면 좋겠다.

이끌거나, 따르거나, 참거나

개인의 성장뿐만아니라 외적인 환경에도 많이 스트레스를 받았던 한 해였다.

특히 바뀌는 업무 방식과 형식에 대해서 많은 답답함을 느끼고 있다.

업무 방식이란건 정답이 있는 게 아니라 업무를 처리함에 있어서 팀마다의 효율적인 방식을 찾는 게 업무 방식이라고 생각되는데

본인들이 정한 방식을 다른 구성원들에게까지 강요하길 바라는지 아직도 이해가 되지는 않는다. 하지만 참아보기로 했다.

그래도 안되면 떠나자. 훈련을 해봐도 도저히 납득이 되지 않거나 내가 또 다른 여행을 떠날 준비가 되었다면 떠나자. 하지만 그 전에 최소 10번은 참는 훈련을 해보자. 참다보면 인내심도 길러진다. 홧병이 나는 거 아닌가싶지만 회사는 회사일 뿐이고, 일은 일일 뿐이다. 일에 대한 감정을 나의 세계관으로 가지고 와서 스트레스를 받지 말자는 것이다. 조금 더 차분하게 기다리고 지켜보면 사실 별 것도 아니다. 그냥 지나가는 일일수도 있고, 아니면 무시하면 된다. 그러니 떠나기 전에 참아보자.

이끌거나, 따르거나, 참거나 에서...

내가 원하는 업무 방식이나 스타일에 대해 좀 더 명확하게 알 수 있었던 성찰의 기회가 되었다.

이제 와서는 결국 우리 서비스가 뭘 목표로 나아가겠다는 건지 모르겠지만 현재는 '내년엔 뭐라도 되겠지'라는 심정이다.

내년엔...

블로그 해동이 첫번째 목표이다. 올해 22년 6월 이후로 포스팅이 중지 되었는데

사실 블로그를 이전할지 말지 고민만 하다가 한 해가 지나갔다. 아직 정하지는 못했으나 포스팅은 다시 시작할 예정이다.

두번째로는 알고리즘 공부를 해야겠다.

다른 이유보다는 코테의 목적이고 스타트업 시장이 굳었고 결국 좀 더 나은 환경을 찾아가기 위해서는 코테가 기본으로 더 필요하게 되었다.

당장에 일을 내기 위해서라기보다는 기회가 왔을 때 놓치지 않겠다는 생각으로 미리 준비를 해둘 예정이다.

내년에 어디에서 어디 소속으로 또 이 글을 작성하고 있을지 모르겠다. 힘내자

점수로 보는 개발팀들의 순위

baegofda_ — Wed, 29 Jun 2022 13:39:49 +0900

국내 여러 개발팀들의 문화를 점수로 따져본다면 순위가 어떻게 될까요!?

코딩 테스트 인터뷰
자율적 개인 개발 장비 선택
자율적 팀 개발 환경 선택
소스 코드 리뷰 및 테스트
개발자 기여 로드맵/백로그
지속적 통합 및 배포 (CI/CD)
내부 소스 레포지터리 공유
API를 기반한 연동 및 소통
기술을 이해하는 팀장/매니저
개발자 레벨 혹은 경력 관리
참여형 지식 공유 플랫폼
개발자 관계(DevRel) 활동
위의 모든 사항이 해당 안된다. - (13일의 금요일..)

등의 총 13가지 질문을 가지고 설문 조사를 실시하였고 총 415명의 개발자가 참여하였습니다.
이에 따라 해당 하는 항목에 1점씩 점수를 매겨서 통계를 냈다고 하네요.
설문조사 결과 상위권으로는

12점 – 카카오, 라인플러스, 우아한형제들, 컴투스, 업스테이지 등
11점 – 네이버, 엔에이치엔, 하이퍼커넥트, 데브시스터즈, 크몽, 에이비일팔공 등
10점 – 카카오뱅크, 크래프톤, 안랩, 당근마켓, 드림어스컴퍼니, 마이리얼트립, 원티드랩 등

이 있습니다.

재미로 한번 보시면 좋을 듯 합니다.

http://channy.creation.net/blog/1600?fbclid=IwAR3owU8wL6sPzqxf2-xGJ2yZT0QIfbhDL5cIsx4u7S0vJCvVYpCY3oKaKZ4&fs=e&s=cl

국내 최고의 개발 문화를 가진 회사는? – 설문 조사 결과 :: Channy's Blog

예전에 "훌륭한 개발 문화의 이면"이라는 시리즈를 연재한 적이 있습니다. 최근 IT 기업 사이에서 개발자 연봉이나 복지

channy.creation.net

Stack Overflow Survey 2022 개발자 설문조사

baegofda_ — Sat, 25 Jun 2022 11:21:07 +0900

스택오버플로우에서 2022 개발자 설문조사 통계가 나왔습니다.

전문 개발자와 개발을 배우는 사람들이 가장 많이 사용하는 Web Framework는 Node.js, React.js가 공통으로 압도적입니다.
ASP.NET Core과 ASP.NET은 전문 개발자는 높으나 개발을 배우는 사람들 쪽에서는 순위가 낮아지네요.
언어 중 Loved & Dreaded 순위 중 1위는 Rust이며 약 87%의 개발자들이 계속 사용하고 싶다고 합니다. (최근 리눅스 커널에도 머지가 될 예정이라고 하는..)
배우고 싶은 언어에서는 Rust가 1위 그 밑으로 파이썬과 타입스크립트가 근소한 차이로 2위 3위를 하고 있습니다.
IDE 의 Loved & Dreaded IDE 순위 중 1위는 NeoVim 2위는 VSCode 입니다.
돈을 가장 많이 받는 언어는 Clojure네요 ! Dart는 구글에서 열심히 밀고 있는데 최하위권에 머무르고 있습니다. (아마 아직까지는 수요가 낮아서 그런거일지도)
협업 툴에서는 1위로 노션이 가장 많이 사용되고 있고 계속 사용 할 예정이라는 답변이 66.82% 입니다. 하지만 사용하고 싶은 툴에서는 Jira Work Management, Trello 가 1위 2위를 차지했습니다.
메시징 툴에서는 역시나 많이 사용되기도 원하기도 하는 툴로는 Slack이 압도적입니다.

이외에 정말 많은 통계가 있습니다. 한번씩 보시는 것도 재밌을 것 같아요 !

https://survey.stackoverflow.co/2022/#overview

Stack Overflow Developer Survey 2022

In May 2022 over 70,000 developers told us how they learn and level up, which tools they’re using, and what they want.

survey.stackoverflow.co

TypeScript 창시자 마이크로소프트(MS) JavaScript 타입구문 제안

baegofda_ — Fri, 18 Mar 2022 22:27:40 +0900

원문: A Proposal For Type Syntax in JavaScript

A Proposal For Type Syntax in JavaScript

Today we’re excited to announce our support and collaboration on a new Stage 0 proposal to bring optional and erasable type syntax to JavaScript. Because this new syntax wouldn’t change how surrounding code runs, it would effectively act as comments. W

devblogs.microsoft.com

TypeScript를 만든 MS가 타입 구문을 JavaScript에 도입하는 Proposal(Stage 0) 제안을 발표하였습니다.

곧 있을 3월의 TC39 전체 회의에서 Stage 1 제안을 제출할 계획이라고 합니다.

ECMAScript 표준이 되기위해선 Proposal이 Stage 4 까지 가야 하는데 어떻게 될지 기대가 됩니다.

TL;DR

빠르고 간단하게 만들고 싶은 JS 생태계에서 안전한 개발을 위한 TS, JSDoc 를 이용한 개발은 코드가 조금 많아진다.
이를 위해 TS 인듯 TS가 아닌 TS같은 타입 구문을 사용하는 JS 문법을 제안
엔진에서는 무시하나 TS, Flow 등과 같은 도구가 사용 할 수 있는 타입 구문
모든 브라우저, JS 런타임 환경에 TS 타입 검사를 제안하는건 아님
TS 호환을 함으로써 정적 타이핑에 대한 동기부여를 해주기 위함

왜 CSS Framework를 도입하였는가? (feat. Tailwind CSS & Windi CSS)

baegofda_ — Sat, 12 Feb 2022 12:48:59 +0900

CSS Never...

대다수가 공감 할만한 개발자의 고민.. 이름 짓기

개발자들의 고민은 가지각색이겠지만 대부분의 고민은 이름 짓기가 가장 고민이 크다.

변수, 함수명, 클래스명 등등.. 프론트엔드 입장에선 CSS를 작업해야 하는 경우 CSS 클래스명에 대한 고민도 크다.

CSS 클래스명을 소홀히 하게되면 하나의 엘레멘트를 수정하게 되었을 때 사이드 이펙트로 다른 엘레멘트도 의도치 않게 수정하게 된다.

때문에 대안으로 나왔던 방법들이 BEM, OOCSS, SMACSS 같은 CSS 방법론들이다.

하지만 이러한 방법론들을 쓰더라도 클래스명을 짓는 데에 대한 시간적 고민은 해소되지는 않는다.

최근 작업하면서도 팀 내엔 프론트엔드는 2명밖에 없는데 작업량은 너무 많았다.

시간적 여유가 없는 입장에서 손꼽은 건 기능 개발과 별개로 CSS작업을 하는 시간이 아쉬운 부분이 있었다.

처음에는 쉽다고 느끼지만 데이터가 많거나 복잡한 페이지를 만들게 되면 이만큼 난해하고 노가다성인 것도 없을 것이다.

그만큼 클래스명에 대한 고민도 많아지고 깊어진다.

우리 팀도 마찬가지였고 이에 대한 비용을 해소하고자 고민하고 있던 와중이었다.

깨우치다

연말이 되면 시기적으로 빅테크 기업들이 하나둘씩 컨퍼런스를 진행한다.

때문에 오전에 시간을 내어 팀원과 같이 컨퍼런스를 시청하는 시간을 가지고 있었는데 만났다..

functional css와 figma를 이용한 디자이너와의 웹프론트 협업 이야기 (feat. AdorableCSS)

if(kakao)2021

함께 나아가는 더 나은 세상

if.kakao.com

카카오의 컨퍼런스인 if(kakao) 2021에서 유용태 님의 세션을 듣게 되었고 많은 내용 중 우리를 일깨워 주었던 부분은

- CSS 클래스명은 의미기반이 아닌 시각적 기능에 기반한 이름을 지은 변하지 않는 단일클래스를 작성하자

- 변하지 않는 CSS를 먼저 만들어두고 HTML에서 스타일을 조립해서 작성하자

- 의미가 없는데 의미를 부여하여 이름을 짓는 건 너무 힘들다.

- 위와 같은 의미 있게 지은 이름들은 다른 곳에서 재사용하기 힘들다. (다른 곳에서는 그곳에 맞는 의미를 부여했기 때문)

이후에도 많은 부분을 언급해 주셨고 이러한 패러다임은 우리의 마음을 뺏어가기에 충분했다.

또한 재사용되는 엘레멘트의 클래스를 지어서 사용한다는 건 SPA에서는 해당 엘레멘트는 컴포넌트 화가 될 수 있고

컴포넌트를 생성 시 의미 있는 컴포넌트명을 짓기 때문에 CSS 클래스 명의 의미부여 또한 해소될 수 있다고 생각했다.

굳이 CSS 클래스명 + 컴포넌트명 두 번의 의미론적인 이름을 지을 필요는 없다.

프로젝트 시작과 CSS framework 도입

최근 다른 서비스 마이그레이션 프로젝트를 새로 시작하게 되었다.

이전 마이그레이션 프로젝트와 다르게 새로 도입할 부분들을 고민하던 중 Tailwind CSS를 도입을 고민하고 있었다.

vue-styled-components, css modules도 고려하였지만 기존의 결정대로 Tailwind CSS를 도입하기로 결정하고

Nuxt.js 문서와 Tailwind CSS 문서를 보던 도중 두 사이트의 디자인이 유사하다는 걸 느끼고

Nuxtjs.org의 Tailwind 세팅이 궁금하여 Nuxtjs.org Github에 들어가 보았다.

근데 당연히 있을 것 같았던 tailwind.config.js는 없었고 windi.config.js가 있었다.

음...?

Windi CSS.. 누구냐 넌!

Windi CSS는 2020년 릴리즈 된 신생 CSS Framework이다.

Tailwind CSS와 같은 utility-first CSS Framework이며 양쪽 모두 Nuxt.js에서 초기 프로젝트 빌드시 템플릿 지원이 된다.

특이점은 태생부터 Tailwind CSS의 대체제로 나왔으며 Tailwind CSS 2.0을 계승하여 만들어졌다.

(Tailwind CSS의 최신 버전은 2021년 11월 버전 3.0 릴리즈)

그런 만큼 문법적으로 상당히 비슷하며 문서 또한 둘 다 잘 되어있다.

Windi CSS 문서

Windi CSS

Next generation utility-first CSS framework.

windicss.org

왜 Windi CSS인가?

그렇다면 대체제라고 자처하는 만큼 더 나은 점이 무엇인가 찾아보면

- Class Grouping

<!-- Windi CSS -->
<div class="bg-white dark:hover:(bg-gray-800 font-medium text-white)"/>
<!-- Tailwind CSS -->
<div class="bg-white dark:hover:bg-gray-800 dark:hover:font-medium dark:hover:text-white"/>

- Shortcut (공통 클래스 선언)

// windi.config.js
export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}

이외 차이점은 아래의 링크에 있으며 Tailwind CSS 3.0전의 비교 부분이라 클래스 + 수동 값
항목은 Tailwind CSS 3.0에도 추가되었습니다.
차이점 정리

- Tailwind CSS 사용하던 개발자가 속도측면에 대한 이슈를 해결하고자 만든 만큼 성능적인 측면도 우위가 있다. (참고: Windi CSS 태생에 대하여)

- 실제 간단 수정을 했을 경우 빌드 타임 차이가 있음

- Nuxt.js & Tailwind CSS 템플릿으로 CSS 수정을 하려니 빌드 타임이 너무 오래 걸림

- 해당 이슈에 대해서도 인지를 했는지 JIT라는것을 이용해서 이슈를 해결하고자 하는 듯함

- JIT mode를 사용하면 확실히 빌드 타임이 줄어듦 → 근데 왜 기본 템플릿에는 안 넣었는지는 의문

결론

- Nuxt.js 공식에서도 사용하고 스페셜 스폰서로 있는 만큼 좀 더 특화될 느낌이 있어서 쓰는 것이 좋아 보인다.

- 상대적으로 작은 Vue 커뮤니티의 서드파티 라이브러리 중 괜찮은 스타수를 받고 있어서 안정적으로 사용이 가능하다.

- 차별화된 기능들이 있기 때문에 Tailwind CSS보다 좀 더 유리한 측면들이 있다.

- 로고가 더 이쁨(?)

현재 프로젝트를 시작하며 사용하는 중이며 개발경험은 상당히 만족스럽고 익숙해진다면 생산성 또한 높아질 것으로 예상되어 꾸준히 사용할 생각이다.

아래는 카카오 웹툰에서도 왜 utility-first CSS Framework 도입했는지에 대한 글입니다.

카카오웹툰은 CSS를 어떻게 작성하고 있을까?

카카오엔터테인먼트 FE 기술블로그

fe-developers.kakaoent.com

Vue Custom Snippets 만들기

baegofda_ — Sun, 6 Feb 2022 00:49:37 +0900

불편해!

작업 시 새로운 .vue 파일을 만들 때 init snippets이 항상 불만이었습니다.

Vetur에서 제공되는 기본 snippet의 경우 아래와 같은 기본 템플릿밖에 없었습니다.

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

하지만 저는 scss를 이용하여 scoped 옵션을 사용하였기 때문에 직접 추가해줘야 했는데 이게 너무 귀찮았습니다.

그래서 만들어 보았다! Custom Snippets ~ (만드는 게 재밌잖아요?)

Snippets 작성하기

Custom Snippets 작성은 너무나도 쉽습니다.

상단의 메뉴에서 User Snippets를 찾습니다. Ctrl + Shift + P -&amp;amp;gt; user snippets로 찾으셔도됩니다. (Mac은 cmd + Shift + P)

가운데에 나오는 검색창에서 vue를 검색한 후 vue.json을 들어갑니다.

vue.json에 들어오셨다면 이제 원하는 snippets을 작성합니다.

{
  "snippets 이름": {
    "prefix": "snippets 실행 트리거",
    "body": [
      // snippets 실행시 원하는 template 작성
    ],
    "description": "snippets에대한 설명을 작성합니다."
  }
}

작성 형식은 위의 형식을 사용합니다. 아래는 형식에 따라 제가 작성한 snippets입니다.

{
  "baegofda snippets  ": {
    "prefix": "baegofda  ",
    "body": [
      "<template></template>",
      "",
      "<script>",
      "export default {",
      "\tname: '${TM_FILENAME/(.*)\\..+$/$1/}$1',",
      "\tcomponents: {},",
      "\tprops: {},",
      "\tdata() {\n\t\treturn {}\n\t},",
      "\tmethods: {},",
      "}",
      "</script>",
      "",
      "<style lang='scss' scoped></style>"
    ],
    "description": "Vue snippet with scss and scoped"
  }
}

저는 snippets 사용 시 최대한 추가적인 텍스트를 작성하지 않기 위해 원하는 옵션들을 많이 추가하였습니다.

(자동으로 name 옵션에 파일 이름 넣어주기.. 커서 위치.. 줄 바꿈.. 띄어쓰기..)

자세한 옵션과 변수들은 공식문서를 참고하시면 좋습니다.

prefix 옵션에 작성한 단어의 앞글자만 작성하면 자동 완성으로 해당 snippets가 나옵니다.

실행시 작성한 snippets에 맞게 나오게됩니다.

이상 작업하다 귀차니즘으로 인해 뻘짓을 한 개발자였습니다.

TODO ! - 컴포넌트 분리하기 (feat. 상태관리(state), function)

baegofda_ — Tue, 1 Feb 2022 14:49:03 +0900

컴포넌트 분리하기

컴포넌트 분리하기에 앞서 Vue는 Vue의 Template문법 + HTML, React는 JSX 문법으로 UI를 작성하게 됩니다.

해당 예제는
Vue : https://github.com/baegofda/blog-vue
React: https://github.com/baegofda/blog-react
위의 주소에서 데모와 함께 소스코드 확인이 가능합니다!

1. 상태 관리(state)

상태 관리를 위한 state를 선언하겠습니다.

React에서는 React Hooks에서 제공하는 useRef, useState를 이용하여 state들을 관리합니다.

React

인풋의 값을 참조하기 위해 useRef()를 이용하여 Input에 ref={inputRef}를 선언합니다.

또 인풋 값을 바인딩하기 위한 inputText와 투두 리스트들을 담기 위한 items를 useState를 선언합니다.

import React, { useRef, useState } from "react";
import styled from "styled-components";
import Button from "../components/Button";
import ToDoItem from "../components/ToDoItem";

const ToDos = () => {
  const inputRef = useRef();
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);
  
  //functions
  
  return (
    <Wrapper>
      <Title>TODO</Title>
      <Form>
        <Input
          ref={inputRef}
          value={inputText}
          type="text"
          onChange={onChange}
          placeholder="추가할 리스트를 입력하여 주세요 !"
        />
        <Button type="submit" name="추가하기" onClick={onClick} />
      </Form>
      <ul>
        {items.map((item) => (
          <ToDoItem
            key={item.id}
            item={item}
            onComplete={onComplete}
            onDelete={onDelete}
          />
        ))}
      </ul>
    </Wrapper>
  );
};

  // stlyes

export default ToDos;

Vue

Vue에서는 data() 내에 사용할 state들의 초기값들을 선언합니다.

Vue의 ref는 선언해줄 필요 없이 $refs로 바로 접근이 가능하기 때문에 Input에 ref="todoInput"으로만 선언합니다.

<template>
  <main class="wrapper">
    <h1 class="title">TODO</h1>
    <form class="form">
      <input
        ref="todoInput"
        type="text"
        class="form__input"
        placeholder="추가할 리스트를 입력하여 주세요 !"
        v-model="inputText"
      />
      <Button type="submit" name="추가하기" @click="onClick" />
    </form>
    <ul>
      <ToDoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @onComplete="onComplete"
        @onDelete="onDelete"
      />
    </ul>
  </main>
</template>
<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  data() {
    return {
      inputText: "",
      todos: [],
    };
  },
  methods: {
    //methods
  },
  components: {
    //components
  },
};
</script>

<style scoped>
  //styles
</style>

2. 함수 선언

React와 Vue 모두 Javascript 기반이기 때문에 함수 내에서 사용하는 문법은 큰 틀에서는 Javascript 문법으로 동일합니다.

React

React에서는 선언한 state에 값을 업데이트하기 위해서는 setState을 이용합니다.

import React, { useRef, useState } from "react";
import styled from "styled-components";
import Button from "../components/Button";
import ToDoItem from "../components/ToDoItem";

const ToDos = () => {
  const inputRef = useRef();
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

  const onChange = (e) => {
    setInputText(e.target.value);
  };

  const onClick = (e) => {
    e.preventDefault();
    setItems((items) => {
      const item = {
        id: Date.now(),
        content: inputRef.current.value,
        isCompleted: false,
      };
      const newItems = [...items, item];
      return newItems;
    });
    setInputText("");
    inputRef.current.focus();
  };

  const onComplete = (id) => {
    setItems((items) =>
      items.map((item) => {
        if (item.id === id) {
          return { ...item, isCompleted: !item.isCompleted };
        }
        return item;
      })
    );
  };

  const onDelete = (id) => {
    setItems((items) => items.filter((item) => item.id !== id));
  };

  return (
    <Wrapper>
      <Title>TODO</Title>
      <Form>
        <Input
          ref={inputRef}
          value={inputText}
          type="text"
          onChange={onChange}
          placeholder="추가할 리스트를 입력하여 주세요 !"
        />
        <Button type="submit" name="추가하기" onClick={onClick} />
      </Form>
      <ul>
        {items.map((item) => (
          <ToDoItem
            key={item.id}
            item={item}
            onComplete={onComplete}
            onDelete={onDelete}
          />
        ))}
      </ul>
    </Wrapper>
  );
};

//styles

export default ToDos;

Vue

Vue에서는 사용할 function은 methods에 작성하며 this로 내부 state, function, ref 등에 접근하여 값을 업데이트합니다.

또 React에서는 onChange를 이용하여 inputText를 업데이트하고 value로 바인딩을 하여 사용하지만

vue에서는 v-model을 이용하여 inputText를 사용하게되면 업데이트와 함께 데이터 바인딩이 가능합니다.

<template>
  <main class="wrapper">
    <h1 class="title">TODO</h1>
    <form class="form">
      <input
        ref="todoInput"
        type="text"
        class="form__input"
        placeholder="추가할 리스트를 입력하여 주세요 !"
        v-model="inputText"
      />
      <Button type="submit" name="추가하기" @click="onClick" />
    </form>
    <ul>
      <ToDoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @onComplete="onComplete"
        @onDelete="onDelete"
      />
    </ul>
  </main>
</template>
<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  data() {
    return {
      inputText: "",
      todos: [],
    };
  },
  methods: {
    onClick(e) {
      e.preventDefault();
      const todo = {
        id: Date.now(),
        content: this.inputText,
        isCompleted: false,
      };
      this.todos = [...this.todos, todo];
      this.inputText = "";
      this.$refs.todoInput.focus();
    },
    onComplete(id) {
      this.todos = this.todos.map((todo) => {
        if (todo.id === id) {
          return { ...todo, isCompleted: !todo.isCompleted };
        }
        return todo;
      });
    },
    onDelete(id) {
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
  },
  components: {
    //components
  },
};
</script>

<style scoped>
  //style
</style>

2021 회고 - 1년차 프론트엔드 개발자 회고

baegofda_ — Thu, 30 Dec 2021 21:03:56 +0900

2021년의 끝이 다가오고 있다!

심슨

2021년은 나에게 뜻깊은 해가 되었다.
개발자로서의 길을 걷기 시작한 해인만큼
지금까지의 일들을 돌이켜 생각해보고
개발자를 시작한 지 얼마 안 된 지금 시점에서의 감정과 생각들
미래엔 어떤 모습으로 성장했을지 알기 위해 회고를 작성한다.

나는 어떻게 개발자가 되었을까?

학원앨리스

작년 초 개발자와는 다른 인생을 살아오던 나에게 인생의 전환점을 맞이하고 있는 시기가 있었다.

서울의 생활을 접고 다시 고향으로 내려가서 살아야 하나 하는 고민을 하던 찰나에

지인에게 "너 개발자 해볼래?"라는 추천을 받았었다.

당시엔 지금처럼 개발자 붐이 일어나고 있는 시기가 아니긴 했지만

단순하게 HTML, CSS를 체험해보니 너무 재밌었다.

3D 프린터에서 만졌던 코딩, 아두이노나 전기과 전공 시간에 잠깐 해봤던 거에 비하면

너무 흥미로웠고 바로 국비를 등록했었다.

하지만 국비를 진행하면서는 그렇게 기쁘지는 못했다. 프로젝트를 진행하며 팀원들 간의 문제도 있었고

강사에 대한 불만도 있었다. 또 진행하며 백엔드가 아닌 프론트엔드를 하고 싶다는 마음이 컸었다.

그래서 수료 2달을 앞둔 시점에 과감히 중도 포기를 하고 온라인 강의로 독학을 시작했다.

자신과의 싸움 '독학'

슬램덩크 패러디

독학하는 기간 동안 좀 더 열심히 했다면 "내 개발자로서의 커리어가 조금 달라지지 않았을까?"

라는 생각을 하고 있다. 확실히 누군가 지켜봐 주는 이 없이 자율적으로 혼자 한다는 건

수많은 유혹을 이겨내며 해야 하니 많이 힘들었었다.

또 지금 배우고 있는, 직접 작성하고 있는 코드가 좋은지 어떤지를 확인할 길이 없으니 너무 답답하다.

(코드숨, NEXTSTEP, 카우치코딩 등등 좋은 플랫폼들을 일찍 만났었더라면 ..)

하지만 우리에겐 유튜브(개발바닥, 드림코딩엘리, 노마드코더 등등)나 인프런 같은 플랫폼들이 있고

해당 플랫폼들에서 많은 동기 부여와 지식을 습득하며 배워 나갈 수 있었다.

또 이력서를 돌리기 전 만났던 스터디의 인연들 덕분에 더 큰 동기부여가 되었었다.

구직과 면접

포켓몬스터

프론트엔드 공부를 시작한 지도 어언 6달.. 3월이 되었을 때였다.

나는 공고가 올라오는 이 시기를 놓치기 싫어서 부랴부랴 프로젝트와 포트폴리오, 이력서를 준비하였다.

여러 구직 팀을 찾아가며 15~20곳가량의 개발 팀에 문을 두드렸고 운이 좋았는지 3분의 2 가량의 팀에서

면접을 보고 싶다는 반응이 왔었다.

면접을 보면서도 참 많은 걸 배우고 성장했던 것 같다. 채용 프로세스도 다 다르고 질문도 다르다.

사전과제, 라이브코딩, 자바스크립트에 대한 질문, React에 대한 질문, 프로젝트에 질문 등등

질문의 초점들은 다 달랐고 나는 이리저리 치이며 서울을 누볐었다.

내가 원하는건..

원본: 원피스 - 정상전쟁 중 흰수염의 회고

열심히 노력했던 덕일까 많은 팀에서 함께하고 싶다는 반응을 보내주셨고 행복한 고민(?)을 하게 되었다.

사람마다 본인이 생각하는 직업에 대한 가치관, 기준 '키워드'들이 다 다를 것이다.

누군가는 '연봉'을, 누군가는 '워라밸'을, 다른 누군가는 '성장'을 생각하며 직업과 회사를 고른다.

지금 당장에는 '성장'에 집중하도록 했다.

내가 성장을 꾸준히 한다면 연봉, 워라밸 등등 같은 기준들은 따라올 것이라 생각하기 때문이다.

물론 이 기준은 미래엔 달라질 수 있다. 때문에 '지금 당장에는'이라는 수식이 붙는다.

개발자로의 첫걸음

원피스

결국 나는 한 팀에 합류하기로 마음먹었고 첫 개발자로의 길을 걷게 되었다.

팀에는 AI팀을 제외하고도 개발팀으로 CTO님, 팀장님, 시니어 급분들 3분을 포함한 5명이 있는 팀이었다.

투자도 받으며 시작한 2년 차 스타트업이었고 팀원을 보자면 이곳에서는 성장을 할 수 있을 것 같았다.

기술 스택도 맞았으며 React-Native를 통한 앱 개발을 해볼 수 있는 곳이었다.

또 처음 써보는 공유 오피스, 맥북 등 새로운 환경이 나를 감싸 안아주었다.

합류하며 괜히 걱정되었던 부분들은 "신입인 내가 시니어분들 사이에서 잘 적응할 수 있을까?"라는

걱정이 있었다. 하지만 내 걱정과는 달리 다들 너무 친절하시고 잘 따라올 수 있도록 길을 알려주셨다.

또 인원이 몇 없지만 CTO님이 직접 세미나를 준비해서 발표를 해주시고 코드 리뷰도 해주셨다.

"정말 취직 하나는 잘했다"라는 생각을 하며 5개월가량을 팀에 있었다.

퇴사 그리고 이직

타짜

하지만 결과론적으로 이 팀은 해체되었다. 여러 이유가 있지만 '어른의 사정'이라고 칭하겠다.

팀장님이 나가고 CTO님이 나가고 (정확히는 그냥 연락이 두절되었다.) 다른 분도 나가셨다.

나는 침몰하는 배에서 이력서와 포트폴리오를 정비하며 다시 구직시장에 띄어 들어야 했었고

다행히도 직접 지원한 팀뿐만 아니라 로켓펀치로 먼저 연락을 주시는 등

반응이 빠르게 오며 여러 팀에서 좋게 봐주신 덕분에 첫 구직보다 더 고민을 하며 이직을 하게 되었다.

좋았던 팀이기 때문에 많이 아쉬웠지만 배운 것도 많았다. 처음 개발업무를 했기 때문에 업무의 흐름이나

경험하지 못한 협업의 경험과 좋은 코드에 대한 고민 등등 값진 시간들이었고 나의 초석이 되었다.

이때의 팀원분들과는 종종 연락하며 지내고 있고 소중한 인연으로 남았다.

그리고 지금..

결과적으로 나는 현재 게이머들을 위한 전적 통계 사이트를 서비스하는 팀에 합류하였다.

원래부터 게임에 관심이 많고 즐겨했던 나로서는 공고가 올라온 것을 보고 참을 수 없었기도 했고

호기심에 면접을 봤던 것도 있다.

면접을 보면서도 "게임을 정말 좋아하시는 분들이 만드신 거구나"라는 생각이 들면서

진행될수록 이곳에서 한다면 많은 것들을 할 수 있을 것 같았고 즐기며 할 수 있을것 같았다.

또 고등학교 시절 프로게이머 지망생이었던 내가

지금은 게이머로써, 개발자로서 게이머들을 위한 서비스를

만들 수 있다는 점에 합류하고 싶다는 생각이 들었고

생각이 통하였는지 같이 해보자는 연락을 주셔서 합류하게 되었다.

쇼미더럭키짱 패러디

팀을 합류하고 나서는 너무나도 자율적인 분위기에 어질어질함을 느꼈고 너무 좋았다.

개발팀 내부로도 성장을 위해 서비스들의 기술에 대한 변화들을 고민하는 시기이고

내부 컨벤션 등 같이 헤쳐 나아갈 이슈들이 많다.

이러한 과정에서 나의 생각을 적극적으로 수용해주시고 같이 고민해주시는 게 너무 좋다.

큰 거 온다!! 오나..?

무한도전 - 배고픈특집

연말의 종무식과 회고 등을 통하여 내년에 많은 변화들을 맞이 할 준비를 하고 있다.

모회사가 생기면서 내년부터는 많은 새로운 서비스 개발과 팀적인 변화들이 생겨날 예정이다.

급작스럽게 새로운 팀원들과 협업을 진행하게 될 것이고 많은 시행착오들이 있을 수 있다.

하지만 많은 시행착오들을 견뎌낸다면 회사는 큰 성장을 할 수 있을 것이다.

때문에 나는 열심히 달려 나아갈 생각이고 함께 성장해 볼 생각이다.

물론 이 생각 또한 언제까지 지속될지는 모른다.

내게 큰 영감이 되었던 글이 있다.

유튜브 채널 '개발바닥'을 같이 운영하시며 (전) 우아한 형제들 (현) 인프런 CTO이신 향로님이

우아한형제들을 퇴사하시면서 남기신 우아한형제들 부검글에 이러한 글귀가 있다.

2-2. 회사와 개인의 성장속도는 비례하지 않는다

이 부분이 우아한형제들에서 가장 크게 배운 점인데요.

"회사의 성장에 비례하는 건 회사의 가치이지, 개인의 성장은 아니다."

보통 많은 스타트업 종사자분들이 회사가 폭발적으로 성장하는 만큼 본인 역시 폭발적으로 성장한다고 오해하시는데요.

저는 절대로 그렇지 않다는 것을 배웠습니다.
회사가 10배, 100배 성장했다고 해서 개인이 같은 시간 동안 그만큼 성장하는 경우는 거의 없었습니다.

1. 우아한형제들 부검 - 왜 떠나는지 에서..

내가 이곳에서 얼마나 농도가 짙게 성장을 할 수 있을지는 아무도 모른다.

올해의 나는

올해의 나는 많은 지식들을 습득하기 위해 이곳저곳에서 노력을 많이 해봤다.

덕분에 단기간에 많은 지식들이 들어왔다. 하지만 "과연 심도가 있었는가?"를 생각하면

많이 부족하다고 느낀다. 때문에 이 부분에 대해서는 고쳐 나아가야 할 점이다.

내년의 나는

무한도전 - 식스맨특집

나의 성장을 위해 내년에 하고 싶은 것들이 있다.

첫 번째는 Flutter이다.

잠깐이지만 React-Native를 통한 개발을 해봤는데 같이 언급되는 것이 Flutter이다.

때문에 공부를 하여 경험을 하고 싶다. 이러한 경험은 혹시나 앱 개발을 하게 되었을 때

기술 스택적 고민에 기여할 수 있을 것이다.

두 번째는 Next.js이다.

현재는 Nuxt.js를 사용하고 있지만 커뮤니티, 레퍼런스 등의 여러 문제점과

각 프레임워크의 업데이트 방향성을 보았을 때 Next.js도 알아둬야 할 것 같다는 생각이 들었다.

세 번째는 Nest.js이다.

프론트엔드 개발자이지만 백엔드 개발자와 필연적으로 커뮤니케이션을 해야 한다.

때문에 백엔드에 대한 부분들도 지식을 습득해야 좀 더 원활한 커뮤니케이션이 될 것이라 생각한다.

궁극적으로는 프론트엔드 개발자 뿐만 아닌 개발자로서의 생각을 하고 싶기 때문이다.

네 번째는 CI/CD, 테스트 코드 그리고 Pinia이다.

종류가 많지만 CI/CD 툴에 관해 적용하고 싶고 테스트 코드가 없다면 테스트 자동화 되지 않기때문에

CI/CD라 할 수 없다. 때문에 테스트 코드에 대해 공부하고 싶다.

또 Vue3 기준으로 기대되는 상태관리라이브러리 Pinia를 공부하여 적용해보고 싶다.

이외에도 많이 사둔 온라인강의 보기, 주간 회고하기, 피그마, UI/UX 지식 습득하기 등이 있다.

강의 좀 그만 사.. 지금도 10개가 넘어 !!

끝으로

주저리.. 주저리.. 적어보니 많은 일들이 스쳐 지나간다.

많은 상황 속에 많은 인연들을 만났고 나에게는 소중한 인연들이다.

그분들께 항상 감사한 마음뿐이고 자만하지 말고 성장을 갈구하여

그분들과 팀원들에게 도움을 줄 수 있는 좋은 영향력을 지닌 개발자가 되고 싶다.

노력하자

+ 당장에 다음 주부터 이사를 위한 집을 알아봐야 한다.

이 집에 이사 오고 개발자를 시작했는데 벌써 다른 집을 알아볼 시기가 왔다.

내가 개발자로서 성장하는 것처럼 내가 사는 집도 꾸준히 성장할 수 있으면 좋겠다.

그리고 곧 맥북 신형을 받는다 !!

감사합니다.

️ TODO ! - 컴포넌트 분리하기 (feat. component, props)

baegofda_ — Mon, 27 Dec 2021 23:44:35 +0900

컴포넌트 분리하기

컴포넌트 분리하기에 앞서 Vue는 Vue의 Template문법 + HTML, React는 JSX 문법으로 UI를 작성하게 됩니다.

해당 예제는
Vue : https://github.com/baegofda/blog-vue
React: https://github.com/baegofda/blog-react
위의 주소에서 데모와 함께 소스코드 확인이 가능합니다!

1. 컴포넌트 분리하기 (Button)

가장 기본적이면서도 중요한 컴포넌트를 먼저 분리해보도록 하겠습니다.

먼저 버튼(Button) 컴포넌트를 분리합니다.

React

// Button.jsx
import React from "react";
import styled from "styled-components";

const Button = ({ type, name, onClick }) => {
  return (
    <Btn type={type} onClick={onClick}>
      {name}
    </Btn>
  );
}

const Btn = styled.button`
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 3px;

  &:hover {
    cursor: pointer;
  }
`;

export default Button;

Button 컴포넌트는 props로 type과 onClick 이벤트, name을 받을 수 있도록 하고 css는 styled-components를 아래에 선언하여 css를 작성합니다.

이때 onClick 이벤트는 부모 컴포넌트에서 함수를 props로 받은걸 사용하여 값을 반환합니다.

Vue

<!--Button.vue-->
<template>
  <button class="btn" :type="type">{{ name }}</button>
</template>

<script>
export default {
  name: "Button",
  props: {
    type: String,
    name: String,
  },
};
</script>

<style scoped>
.btn {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 3px;
}
.btn:hover {
  cursor: pointer;
}
</style>

Vue도 비슷하게 type와 name은 props로 받으나 click 이벤트 경우엔 Vue의 emit을 이용하여 부모의 컴포넌트에 값을 보내줍니다.

css는 하단의 style 태그 내부에 작성을 하며, 해당 css들이 현재 컴포넌트 내부에만 적용되도록 scoped를 사용합니다.

2. 컴포넌트 분리하기 (TodoItem)

투두리스트 작성 시 나오는 리스트(TodoItem) 컴포넌트를 분리합니다.

React

// ToDoItem.jsx
import React from "react";
import styled from "styled-components";
import Button from "./Button";

const ToDoItem = ({ item, onComplete, onDelete }) => {
  return (
    <Item>
      <CheckBox
        type="checkbox"
        defaultChecked={item.isCompleted}
        onChange={() => onComplete(item.id)}
      />
      <Content isCompleted={item.isCompleted}>{item.content}</Content>
      <Button type="button" name="삭제하기" onClick={() => onDelete(item.id)} />
    </Item>
  );
};

const Item = styled.li`
  display: flex;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
`;

const CheckBox = styled.input`
  width: 20px;
  height: 100%;
  margin-right: 5px;
`;

const Content = styled.p`
  margin-right: 5px;
  line-height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  flex: 1;

  ${({ isCompleted }) =>
    isCompleted &&
    `
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
  `}
`;

export default ToDoItem;

TodoItem의 props로는 리스트의 데이터인 item과 item의 체크 여부를 위한 onComplete 이벤트를 받고 삭제를 위한 onDelete를 부모 컴포넌트에서 props로 받습니다.

Vue

<!--ToDoItem.vue-->
<template>
  <li class="item">
    <input
      type="checkbox"
      class="item__checkbox"
      @change="$emit('onComplete', todo.id)"
    />
    <p
      class="item__content"
      :class="{ 'item__content--completed': todo.isCompleted }"
    >
      {{ todo.content }}
    </p>
    <Button type="button" name="삭제하기" @click="$emit('onDelete', todo.id)" />
  </li>
</template>

<script>
import Button from "./Button.vue";

export default {
  components: {
    Button,
  },
  props: {
    todo: Object,
  },
};
</script>

<style scoped>
.item {
  display: flex;
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}
.item:last-child {
  margin-bottom: 0;
}
.item__checkbox {
  width: 20px;
  height: 100%;
  margin-right: 5px;
}
.item__content {
  margin-right: 5px;
  line-height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  flex: 1;
}
.item__content--completed {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}
</style>

Vue 또한 props로는 리스트의 데이터인 todo를 부모 컴포넌트에서 props로 받지만 체크 여부를 위한 onComplete와 onDelete는 emit을 이용하여 부모 컴포넌트로 데이터를 전달합니다.

2022.02.01 - [Vue] - TODO ! - 컴포넌트 분리하기 (feat. 상태관리(state), function)

TODO ! - 컴포넌트 import, state 선언

baegofda_ — Thu, 23 Dec 2021 01:25:32 +0900

컴포넌트 사용하기 !

먼저 import와 state선언을 알아보겠습니다.

해당 예제는
Vue : https://github.com/baegofda/blog-vue
React: https://github.com/baegofda/blog-react
위의 주소에서 데모와 함께 소스코드 확인이 가능합니다 !

1. import

먼저 전체 컨테이너가 될 Todos라는 페이지 컴포넌트를 임포트하는 방법입니다.

React

React 프로젝트의 App.js에 import는 아래와 같이 파일 상단에 import를 합니다.

// App.js
import Todos from "./pages/Todos";

function App() {
  return <Todos />;
}

export default App;

Vue

Vue 프로젝트의 App.vue에 import를 합니다.

Vue에서는 컴포넌트를 import 할시 script 태그내에 import를 한 후 export default {}; 의 내부에 components라는 속성에 등록을 해주어야 합니다.

<!--App.vue-->
<template>
  <Todos />
</template>

<script>
import Todos from "./pages/Todos.vue";

export default {
  name: "App",
  components: {
    Todos,
  },
};
</script>

2. state

컴포넌트에서 사용할 state의 선언에대해서 알아보겠습니다.

React

React에서의 state는 컴포넌트 선언부 아래에 useRef(), useSate()를 이용하여 state를 선언하고 관리합니다.

// ToDos.jsx
const ToDos = () => {
  const inputRef = useRef();
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

   // function

  return (
   // UI
  );
};

Vue

Vue는 script 태그 export default {}; 의 내부에 data()에서 관리를 합니다.

Vue에서는 컴포넌트를 import 할시 script 태그내에 import를 한 후 export default {}; 의 내부에 components라는 속성에 등록을 해주어야 합니다.

<template>
  <!--UI-->
</template>
<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  data() {
    return {
      inputText: "",
      todos: [],
    };
  },
  methods: {
    // function
  },
  components: {
    // component
  },
};
</script>

<style scoped>
// css
</style>

2021.12.27 - [Vue] - ️ TODO ! - 컴포넌트 분리하기 (feat. component, props)

TODO ! - 형태 알아가기

baegofda_ — Mon, 20 Dec 2021 23:08:55 +0900

TODO 예제 시작 !

이번 포스팅부터는 아래의 간단한 TODO의 코드를보며 Vue에 대해 알아가볼 예정입니다. #간단주의

해당 예제는
Vue : https://github.com/baegofda/blog-vue
React: https://github.com/baegofda/blog-react
위의 주소에서 데모와 함께 소스코드 확인이 가능합니다 !

특징

먼저 React와 Vue 코드의 차이점들을 간단하게 코드의 형태로 알아보겠습니다.

React의 통상적인 형태는 아래와 같습니다.

import React, { useRef, useState } from "react";
import styled from "styled-components";
import Button from "../components/Button";
import ToDoItem from "../components/ToDoItem";

const ToDos = () => {
  // JS Code, React Hooks, etc..

  return (
    // JSX 문법
  );
};

const Wrapper = styled.main`
  padding-top: 150px;
`;
const Title = styled.h1`
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
`;
const InputContainer = styled.form`
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
`;
const Input = styled.input`
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
`;

export default ToDos;

React는 상단에 사용할 컴포넌트, 파일, Hooks 등을 import를 합니다.

import React, { useRef, useState } from "react";
import styled from "styled-components";
import Button from "../components/Button";
import ToDoItem from "../components/ToDoItem";

아래엔 component에대한 코드를 작성하며 state, js, Hooks 등을 작성하고 return 이후 JSX문법을 이용하여 UI 코드를 작성합니다.

const ToDos = () => {
  // state, JS Code, React Hooks, function, etc..

  return (
    // JSX 문법
  );
};

스타일링을 위한 css는 외부에서 import를 하거나 styled-components, emotion 사용 시 component 코드 전후로 작성을 합니다.

const Wrapper = styled.main`
  padding-top: 150px;
`;
const Title = styled.h1`
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
`;
const InputContainer = styled.form`
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
`;
const Input = styled.input`
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
`;

이번엔 Vue의 코드입니다.

<template>
  <main class="wrapper">
    <h1 class="title">TODO</h1>
    <form class="form">
      <input
        ref="todoInput"
        type="text"
        class="form__input"
        placeholder="추가할 리스트를 입력하여 주세요 !"
        v-model="inputText"
      />
      <Button type="submit" name="추가하기" @click="onClick" />
    </form>
    <ul>
      <ToDoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @onComplete="onComplete($event)"
        @onDelete="onDelete($event)"
      />
    </ul>
  </main>
</template>
<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  components: {
    // import 된 component 등록
  },
  data() {
    return {
      // state
    };
  },
  methods: {
    // function
  },
};
</script>

<style scoped>
.wrapper {
  padding-top: 150px;
}
.title {
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.form {
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
}
.form__input {
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
}
</style>

React와 달리 상단에 template가 먼저 등장하며 html과 Vue 문법을 이용한 UI 코드를 작성합니다.

<template>
  <!-- Vue template 문법 -->
  <main class="wrapper">
    <h1 class="title">TODO</h1>
    <form class="form">
      <input
        ref="todoInput"
        type="text"
        class="form__input"
        placeholder="추가할 리스트를 입력하여 주세요 !"
        v-model="inputText"
      />
      <Button type="submit" name="추가하기" @click="onClick" />
    </form>
    <ul>
      <ToDoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @onComplete="onComplete($event)"
        @onDelete="onDelete($event)"
      />
    </ul>
  </main>
</template>

이후 script태그가 등장하며 내부에 사용할 component의 import, state, function 등을 작성합니다.

<script>
import Button from "../components/Button.vue";
import ToDoItem from "../components/ToDoItem.vue";

export default {
  name: "Todos",
  components: {
    // import 된 component 등록
  },
  data() {
    return {
      // state
    };
  },
  methods: {
    // function
  },
};
</script>

마지막으로 css에 관한 style태그가 있으며 마찬가지로 외부에서 import 해서 사용할 수 있지만 내부에서 작성을 합니다.

<style scoped>
.wrapper {
  padding-top: 150px;
}
.title {
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
}
.form {
  display: flex;
  width: 400px;
  height: 40px;
  margin-bottom: 20px;
}
.form__input {
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  flex: 1;
}
</style>

이렇게 비슷한 듯 다른 구조를 가지고 있습니다.

* 코드 구조의 형태는 프로젝트마다 다를 수 있으나 통상적으로 사용되는 형태로 비교하였습니다.

2021.12.23 - [Vue] - TODO ! - 컴포넌트 import, state 선언

Vue 시작하기 !

baegofda_ — Sun, 19 Dec 2021 17:57:25 +0900

✨ 시작하기 앞서 !

오랫동안 멈춰있던 포스팅을 시작하기 위해 Vue 입문을 위한 간단한 포스팅을 시작할 예정입니다.

작성된 Vue 입문의 글들은 React와 비교하며 작성될 예정입니다 !

또한 Node.js, npm과 yarn이 설치되어있다는 전제로 진행합니다.

설치 및 프로젝트 생성하기

React와 Vue 모두 CLI 기반의 설치를 지원합니다.

React의 경우 손쉽게 시작할 수 있게 해주는 React의 CRA를 설치합니다.

npm install -g creat-react-app
# OR
yarn global add creat-react-app

# 제대로 설치되어있는지 확인
create-react-app --version

제대로 설치가 되었다면 버전이 뜨게됩니다.

이후 프로젝트 생성을 위한 CRA 명령어를 실행합니다.

yarn create react-app 프로젝트명

Vue 또한 프로젝트 빌드를 위한 CLI를 우선 설치합니다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 제대로 설치되어있는지 확인
vue --version

제대로 설치가 되었다면 버전이 뜨게됩니다.

이후 프로젝트 생성을 위한 CLI 명령어를 실행합니다.

vue create 프로젝트명

Vue는 아래와 같이 방향키로 버전을 고르게 됩니다.

현재 예제는 Vue3로 생성하였습니다.

만약 위의 화면에서 방향키로 움직이지 않는다면 아래의 명령어로 실행해야 합니다.

winpty vue.cmd create 프로젝트명

프로젝트 실행하기

React의 프로젝트를 열어보면 아래와 같이 기본으로 구성되어 있습니다.

React CRA의 기본 구조

확인을 위한 프로젝트 실행 명령어를 입력합니다.

yarn start

정상적으로 실행된다면 명령어 이후 자동적으로 아래와 같은 웹페이지가 열리게 됩니다.

사진과 같은 페이지가 뜬다면 성공 !

이번엔 Vue의 프로젝트를 열어보겠습니다.

구성은 React와 비슷합니다.

Vue의 프로젝트 실행 명령어는 아래와 같습니다.

yarn serve

Vue는 React처럼 웹페이지가 자동적으로 열리지는 않고 결과를 확인하여 해당 localhost로 접속하여야 합니다.

Ctrl + click으로 바로 접속 가능합니다.

위와 같은 Vue의 초기 실행화면이 보인다면 성공 !

프로젝트 구조의 내부는 큰 차이는 없습니다.

React에 비해 Vue는 assets, components파일이 추가되어있습니다.

이렇게 Vue, React 모두 손쉽게 프로젝트 빌드를 위해 CLI의 형태로 제공되고 있습니다.

이후 간단한 TODO 예제로 이어가겠습니다.

2021.12.20 - [Vue] - TODO ! - 형태 알아가기

React 주니어의 Vue 전환기 Coming soon..

baegofda_ — Sat, 2 Oct 2021 15:18:16 +0900

‍♂️ 어쩌다 만난 그대.. Vue

이번에 이직을 하게되며 React.js가 아닌 Vue.js기반을 사용하게 되었다.

더 나아가 검색최적화(SEO)를 위해 Nuxt.js를 도입할 예정이다 !

때문에 알아보는 간단 React와 Vue 차이점을 알아봅시다.

React는 라이브러리이고 Vue는 프레임워크이다.

라이브러리와 프레임워크 차이를 모르신다면?

네, 가장큰 차이점은 React는 라이브러리이고 Vue는 프레임워크입니다. 여기서 뜻하는 바는 React는 라이브러리인 만큼 자율성이 높아 구현하는 개발자들 특성에 따라서 구현, 구조의 차이가 있습니다. React는 JSX라는 문법으로 구현하지만 문법 내부에서 JS를 통하여 구현하는 자율도가 높은 반면 Vue는 Template형식으로 정해져있는 문법으로만 구현이 가능합니다.

아래는 간단한 예시입니다.

만약 로딩상태에 보여주고싶은 Loading이라는 컴포넌트가 있다면 React에서는 아래와 같은 방법 또는 이외의 방법이 더 있습니다.

// && 연산자
<div>
	{isLoading && <Loading/>}
</div>

// 삼항 연산자
<div>
	{isVisible ? <Loading/> : null}
</div>

Vue에서는 v-if라는 문법으로 아래와 같이 가능합니다.

<div>
	<Loading v-if="isLoading"/>
</div>

또 리스트를 보여주고 todos가있을경우 React는 아래처럼 사용합니다.

<ul>
	{
            todos.map(todo => (
            	<li key={todo.id}>{todo.content}</li>
            ))
	}
</ul>

이외에도 for, forEach등을 이용하여 구현이 가능합니다. 하지만 Vue에서는 v-for 문법으로 가능합니다.

<ul>
	<li v-for="todo in todos" :key="todo.id">{{todo.content}}</li>
</ul>

위와 같은 차이점만을 가지고서라도 구현이나 접근성덕에 낮은 러닝커브를 이점으로 빠르게 배워서 SPA구현이 필요한 개발자들에게 더더욱 추천 해줄 프레임워크입니다.

이외에 속도측면이나 타입스크립트 지원 부분에대한 차이점 등등 여럿 존재하나 링크로 남기고 이후 React와 Vue의 자세한 문법들을 알아보도록 하겠습니다.

React인가 Vue인가 ? - 캡틴판교

React 인가 Vue 인가?

(번역) 프론트엔드 프레임워크 왕 React 와 신흥강자 Vue 를 프레임워크 특성에서 비교한 글

joshua1988.github.io

2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 2 - 네이버 D2

2021.12.19 - [Vue] - Vue 시작하기 !

내가 자주쓰는 git 명령어 !

baegofda_ — Sun, 22 Aug 2021 15:06:09 +0900

로컬로 원격에있는 브랜치 가져오기

 $ git remote update  

 $ git branch -r  

 $ git checkout -t origin/원하는 브랜치

브랜드 이름변경

 $ git branch -m 이전이름 변경될이름

브랜치 삭제하기 (로컬)

 $ git branch -d <branchname>

브랜치 삭제하기 (원격)

 $ git push origin --delete <branchname>

브랜치 생성

 $ git branch branch-name

// 또는

 $ git branch child-name parents-name

// 또는 따올 브랜치에서

 $ git branch 생성할브랜치이름

브랜치 생성후 바로 체크아웃

 $ git checkout -b branch-name

생성한 브랜치 원격 저장소에 저장하기

 $ git push -u origin branch-name

머지하기

머지당할 브랜치로 이동후

 $ git merge 병합할브랜치

특정 브랜치에서 땡겨오기

 $ git pull origin 브랜치이름

로컬 변경사항 저장하기

 $ git stash

최근 stash 목록에서 삭제 및 로컬 적용하기

 $ git stash pop

git push 인증하기

personal acces

personal access 인증하는법

ssh key 등록 및 인증하기

ssh key 인증하여 자동으로 인증하기

git merge 취소하기

https://velog.io/@henotony/git-%EB%AA%85%EB%A0%B9-%EC%B7%A8%EC%86%8C%EB%90%98%EB%8F%8C%EB%A6%AC%EA%B8%B0

Flux 패턴 ?

baegofda_ — Fri, 20 Aug 2021 09:00:20 +0900

‍♀️ Flux 란?

Flux는 MVC 모델의 단점을 보안하기 위해 만든 페이스북에서 발표한 패턴(pattern)입니다.
React, Redux의 디자인 패턴이기도 합니다. 이러한 Flux 패턴에 영감을 받아 Vue에서는 Vuex를 만들어서 사용합니다.

MVC 패턴 ?

MVC(Model View Controller) 패턴은 "무엇을 할지"(Model) 내부 비지니스 로직을 처리하고, "무엇을 보여줄지"(View) 유저에게 화면을 보여주기 위함을 처리하고, "어떻게 처리할지"(Controller) 사용자의 요청을 받아서 어떻게 처리하고 보여줄지 Model과 View를 요청합니다.

*Java MVC2

MVC 한계

MVC(Model View Controller) 패턴에는 Model과 View가 양방향 패턴에서 나오는 의존성을 가진다는 특성이 있습니다. 이는 복잡한 어플리케이션을 서비스하게 된다면 새로운 기능이 추가 될 떄마다 시스템의 복잡도를 기하급수적으로 증가 시키고, 예측 불가능한 코드를 만들게 되며, 예측 못할 버그들이 쏟아지게 됩니다.

페이스북이 가졌던 문제점 중 한가지는 바로 알림(notification)버그 입니다. 페이스북에 로그인 했을 때 메시지 아이콘에 알림이 떠 있지만, 그 메시지 아이콘을 클릭하면 아무런 메시지가 없는등의 버그가 생긴겁니다. 또 알림은 사라지겠지만, 몇 분 뒤 알림이 다시 나타나고 다시 아무런 메시지는 나타나지 않습니다.

이러한 악순환은 페이스북 개발자들이 문제를 해결하더라도 다시 문제가 생기는 사이클이 계속 반복되었습니다.
때문에 이를 해결하기 위한 Flux라는 흐름을 도입하게 되었습니다.

Flux !

위의 MVC패턴을 벗어나고자 고안해낸것이 다른 종류의 아키텍처 Flux입니다.

Flux의 가장 큰 특징은 단방향 데이터 흐름입니다. 흐름은 항상 Dispatcher에서 Store로 Store에서 View로, View는 Action을 통해 다시 Dispatcher로 데이터가 흐릅니다. 이러한 단방향 데이터 흐름을 이용하면 데이터의 변화를 예측 하기 쉽게 만들게 됩니다.

자세히 알아보기

1. Dispatcher

Dispatcher는 데이터의 흐름을 관리하는 허브 역할입니다. Action이 발생되면 Dispatcher로 전달되며 Dispatcher는 전달된 Action을 보고, 등록된 콜백을 실행하여 Stroe에 데이터를 전달하게 됩니다.

2. Action

Dispatcher에서 콜백함수가 실행되면 Store가 업데이트 되는데 이때 데이터가 담겨있는 객체를 인수로 전달합니다. 이때 전달 되는 객체를 Action이라고 합니다.

3. Store

Store는 애플리케이션의 모든 상태와 관련 로직을 가지고 있습니다. Store의 state 변경이 완료가 되면 View에 상태가 변경 했다는 것을 알려주게 됩니다.

4. View

Flux의 View는 화면에 나타내는 것 뿐만아니라, 자식의 View로 데이터를 흘려 보내는 View Controller 역할도 같이합니다. 애플리케이션 내부에 대해서는 아는 것이 없지만, 받은 데이터를 처리하여 사람들에게 보여주기 위한 일을 합니다.

Flux 카툰 안내서

Flux와 MVC

React-Router

baegofda_ — Thu, 19 Aug 2021 08:57:47 +0900

‍♀️ Routing(라우팅) 이란?

라우팅은 프로세스인데 우리가 네트워크에서 있는 traffice의 path를 선택하는 프로세스이다.
즉, 네트워크에서 url를 이용했을때 어떤 데이터를 받아올지 결정해주는것

홈페이지에 들어왔을때 -> www.baegofda.com/
회원가입을 눌렀을때 -> www.baegofda.com/register
로그인 페이지로 들어갔을때 -> www.baegofda.com/login
프로필 페이지로 들어갔을때 -> www.baegofda.com/profile

와 같이 어떤 페이지를 보여줄것인지 결정하고 도와주는것
React-Router 말고도 Reach-Router, Next.js등의 대안이 있습니다.

Why ?

React 뿐만아닌 Vue, Angular, Svelte등은 SPA(Single Page Application)를 구현하기 위함입니다.
SSR 방식의 HTML 페이지가 바뀌는거와 달리 하나의 HTML 에서 CSR 방식으로 리로드 되지않고 동적으로 가져와서 보여줍니다.
때문에 북마크, 페이지 뒤로가기 앞으로가기가 불가능합니다. 위와같은 문제를 해결하기위해 Routing 이라는 개념이 중요합니다.

(관련 참고) SSR이란? - NaverD2

(관련 참고) SPA 그리고 SSR, CSR

코드로 알아보기

Key Point
React-Router에는 다양한 컴포넌트들이 있습니다.
그 중 저희는 BrowserRouter, Switch, Route, Link, NavLink 대해 알아볼 것 입니다.
위의 컴포넌트들의 위치와 사용을 중점적으로 봐주시길 바랍니다.

전체의 파일 구조는 아래와 같습니다.

셋팅하기

먼저 react-router-dom를 설치합니다.

# npm
npm install react-router-dom
# yarn
yarn add react-router-dom

src>index.js

먼저 index.js의 코드는 아래와 같습니다.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

Routing을 위해 BrowserRouter 컴포넌트를 사용하며 편의상 alias로 "Router"를 명시하여 App.js을 감싸줍니다.

src>App.js

App.js의 코드는 아래와 같습니다.

import { Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <>
      <Header />
      <main className="main">
        <Switch>
          <Route exact path={"/"} component={Home} />
          <Route path={"/Board1"} component={Board1} />
          <Route path={"/Board2"} component={Board2} />
          <Route path={"/Login"} component={Login} />
          <Route path={"/Register"} component={Register} />
        </Switch>
      </main>
    </>
  );
};

export default App;

먼저 <Route exact path={"/"} component={Home} /> 내부의 exact가 없다면 모든 path의 내부엔 "/"가 포함되어있기 때문에 Routing시 Home 컴포넌트가 함께 렌더링됩니다.
때문에 구분을 명확해주기 위해 exact 사용하며 Switch는 Routing 시 해당하는 path가 있다면 해당 패스의 컴포넌트를 보여주고 끝나게 됩니다. 또 404 Page를 제공할 수 있습니다.

src>components>Header.jsx

아래는 Header 컴포넌트의 코드입니다.

import React from "react";
import "./Header.scss";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <nav className="nav">
      <h1>React-Router-DOM</h1>
      <ul className="items">
        <li className="item">
          <Link className="link" to="/" exact>
            Home
          </Link>
        </li>
        <li className="item">
          <Link className="link" to="/Board1">
            Board1
          </Link>
        </li>
        <li className="item">
          <Link className="link" to="/Board2">
            Board2
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Header;

Routing 즉, 링크를 클릭하여 페이지를 이동하기 위해서는 anchor 태그를 사용했었습니다. 하지만 anchor 태그는 클릭시 리로드가 되기때문에 React-Router에서는 Link혹은NavLink를 사용하며 이동할 url의 주소는 href라는 attribute 아닌 to라는 props를 사용하여 명시하여줍니다.

하지만 서비스를 제공하는 입장에서는 현재의 서비스가 어디에 위치하고있는지 알려줘야하며 이용자는 이를 알 권리가 있습니다.

import React from "react";
import "./Header.scss";
import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <nav className="nav">
      <h1>React-Router-DOM</h1>
      <ul className="items">
        <li className="item">
          <NavLink className="link" to="/" exact>
            Home
          </NavLink>
        </li>
        <li className="item">
          <NavLink className="link" to="/Board1">
            Board1
          </NavLink>
        </li>
        <li className="item">
          <NavLink className="link" to="/Board2">
            Board2
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Header;

이전에는 class를 추가하는 식으로 기능을 제공하였으나 위와같이 NavLink 컴포넌트를 사용하면 쉽게 구현이 가능합니다.

위와 같이 자동적으로 active 라는 class가 추가적으로 생기기때문에 쉽게 사용이 가능합니다.

import React from "react";
import "./Header.scss";
import { NavLink } from "react-router-dom";

const Header = () => {
  return (
    <nav className="nav">
      <h1>React-Router-DOM</h1>
      <ul className="items">
        <li className="item">
          <NavLink className="link" to="/" activeClassName="toggle" exact>
            Home
          </NavLink>
        </li>
        <li className="item">
          <NavLink className="link" to="/Board1" activeClassName="toggle">
            Board1
          </NavLink>
        </li>
        <li className="item">
          <NavLink className="link" to="/Board2" activeClassName="toggle">
            Board2
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Header;

만약 위의 기능을 제공할 시 className을 active 가아닌 다른 className으로 변경하고 싶다면 위와같이 activeClassName 이라는 props를 사용하여 변경이 가능합니다.

리액트 라우터 공식 사이트

라우터내의 컴포넌트에 props를 넘기려면?

Sass(SCSS)

baegofda_ — Wed, 18 Aug 2021 09:00:10 +0900

Sass(Syntactically Awesome Style Sheets)?

Sass는 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성과 가독성을 높여줍니다.

CSS pre-processor(CSS 전처리기) ?

CSS를 확장하는 스크립팅 언어로서, 컴파일러를 통하여 브라우저에서 사용 할 수 있는 일반 CSS 문법 형태로 변환합니다.

Sass, Less, PostCSS, Stylus etc...

1. 셋팅하기

Sass를 사용하기위해 node-sass를 설치합니다.

yarn add node-sass

이후 Sass를 사용하기위해 css파일의 확장자명을 .scss를 사용하여 생성합니다.

.sass 와 .scss
Sass가 처음 릴리즈 되었을때는 .sass확장자로 CSS와 문법이 많이 달랐습니다.
때문에 Sass버전 3이상부터는 주 문법으로 .scss로 변경되었습니다.
.scss는 .css의 상위 집합으로 css와 동일한 문법에서 Sass의 특별한 기능이 추가되었습니다.

2. 살펴보기

2-1. Comment (주석)

.scss내부에서 주석을 할 경우 한줄 주석은 //로 표기합니다.

/*This is comment*/

// This is comment

/*
This
is
comment
*/

/*This is comment*/

/*
This
is
comment
*/

2-2. Variable (변수)

Sass에서 변수의 개념을 사용할 수 있습니다. 원하는 변수명의 앞에 $문자를 사용합니다.

/* Sass */
$personal: #369fff;

.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

/* css */
.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: #369fff;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

2-2-1. Variable Scope (변수 범위)

Sass의 변수는 javascript와 마찬가지로 Block Scope를 사용합니다.

/* Sass */
$personal: #369fff;

.btn {
  $personal: #000;
  padding: 5px 20px;
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.p {
  color: $personal;
}

/* css */
.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: #000;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.p {
  color: #369fff;
}

2-2-2. Variable Scope (!global)

Block Scope내에서 변수를 선언하더라도 !global 플래그를 사용하면 전역에서 사용이 가능합니다.

/* Sass */
$personal: #369fff;

.btn {
  $personal: #000 !global;
  padding: 5px 20px;
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.p {
  color: $personal;
}

/* css */
.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: #000;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.p {
  color: #000;
}

2-2-3. Variable Scope (!default)

추가적인, !default 플래그를 사용하면 해당 변수가 설정되지 않았거나 값이 null때 해당 값을 사용합니다. (* 대부분 mixin을 작성 할 때 사용)

/* Sass */
$personal: #369fff;

$personal: #000 !default;

.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.p {
  color: $personal;
}

/* css */
.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: #369fff;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.p {
  color: #369fff;
}

2-3. Built-in Functions (내장함수)

Sass에서는 여러 내장함수를 제공합니다.(darken, lighten, saturate etc...)
예를들어 darken은 색과 인수값을 던져주면 얼마나 어둡게할지, lighten은 얼마나 밝게할지 계산하여줍니다.

/* Sass */
$personal: #369fff;

.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;

  &:hover {
    background-color: darken($personal, 10%);
  }
}

/* css */
.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: #369fff;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.btn:hover {
  color: #0387ff;
}

Sass 내장함수 알아보기

2-4. Nesting (중첩)

Sass에서는 선언의 중첩이 가능합니다. 기본 CSS에서는 아래와 같이 작성합니다.

/* css */
.wrap {
  width: 100%;
}

.wrap .wrap-title {
  color: #000;
}

Sass에서는 아래와 같이 작성합니다.

/* Sass */
.wrap {
  width: 100%;

  .wrap-title {
    color: #000;
  }
}

또 버튼의 hover 경우를 작성하자면 CSS에서는 아래와 같습니다.

/* css */
.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: #369fff;
  border-radius: 3px;
  border: 0;
  outline: 0;
}

.btn:hover {
  color: #0387ff;
}

Sass에서는 부모선택자를 참고할때 &문자를 사용하여 간편하게 표현가능합니다.

//  Sass
.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: #369fff;
  border-radius: 3px;
  border: 0;
  outline: 0;

  &:hover {
    background-color: darken($personal, 10%);
  }
}

@at-root를 사용하게되면 선택자 내부에 @at-root 선택자의 선택자를 포함한 경우 css를 적용시킵니다. .wrap 내부에 @at-root .root에 대한 css를 지정 하고

// Sass
.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  @at-root .root {
    color: red;
  }
}

아래와 같이 .wrap 내부에 .root를 포함한 요소가 존재한다면

/* Page.jsx */
import React from "react";
import Button from "../components/Button";
import "./Page.scss";

const Page = () => {
  return (
    <div className="wrap">
      <Button />
      <div className="container root">
        container
        <div className="box">box</div>
      </div>
    </div>
  );
};

export default Page;

위와 같이 적용을 받게 됩니다.

2-5 Import

import 기능을 이용하여 나눠져있는 스타일 파일들을 불러와서 사용 할 수 있습니다. 아래와 같은 구조로 있을 경우

_colors.scss 파일에 작업에 사용할 color를 변수 선언을 하고

$personal: #369fff;

작업할 파일에서 @import "path"; 의 형식으로 선언을 하면 아래와 같이 사용이 가능합니다.

@import "../_common/colors";

.btn {
  padding: 5px 20px;
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;

  &:hover {
    background-color: darken($personal, 10%);
  }
}

Partial 기능
만약 .sass 파일이나 .scss 파일의 이름을 _로 시작 할 경우 css 파일로 따로 컴파일 되지 않습니다.
해당 css 파일을 불러올 일이 없고 import 만 되는경우 이 기능을 사용하시면 됩니다.

2-6 Extend

특정 선택자를 상속 할 때 @extend를 사용합니다.

/* Sass */
.box {
  border: 1px solid gray;
  padding: 10px;
  display: inline-block;
}

.success-box {
  @extend .box;
  border: 1px solid green;
}

/* css */
.box,
.success-box {
  border: 1px solid gray;
  padding: 10px;
  display: inline-block;
}

.success-box {
  border: 1px solid green;
}

%를 사용하면 상속은 할 수 있지만 해당 선택자는 컴파일되지 않습니다.

/* Sass */
%box {
  padding: 0.5em;
}

.success-box {
  @extend %box;
  color: green;
}

.error-box {
  @extend %box;
  color: red;
}

/* css */
.success-box,
.error-box {
  padding: 0.5em;
}

.success-box {
  color: green;
}

.error-box {
  color: red;
}

2-7 Function

위의 Built-in Function과는 달리 사용자 지정 함수입니다. 파라미터 값을 계산하여 값을 반환하며 @function을 사용하여 선언합니다.

// Sass
@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

.my-module {
  width: calc-percent(650px, 1000px);
}

/* css */
.my-module {
  width: 65%;
}

2-8 Mixin

Sass에서는 가장 유용한 기능인 Mixin입니다. @mixin을 사용하여 선언을하고 @include를 이용하여 내부에서 사용을합니다.

// Sass
@mixin title {
  font-size: 1.25rem;
  font-weight: 500;
}
@mixin title-sub {
  font-size: 0.875rem;
  font-weight: 400;
}

.title {
  @include title;
}

.title-sub {
  @include title-sub;
}

/* CSS */
.title {
  font-size: 1.25rem;
  font-weight: 500;
}

.title-sub {
  font-size: 0.875rem;
  font-weight: 400;
}

✨ 3. 활용하기

파일 구조는 아래와 같습니다.

3-1. className 활용

className에 전달받은 size 따라서 element의 크기를 변경할 수 있습니다. "small"과 "large"일 경우의 css를 작성 한 뒤

// Sass
@import "../_common/colors";

.btn {
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;

  &.small {
    padding: 5px 20px;
  }

  &.large {
    padding: 10px 40px;
  }

  &:hover {
    background-color: darken($personal, 10%);
  }
}

/* css */
.btn {
  color: #fff;
  background-color: $personal;
  border-radius: 3px;
  border: 0;
  outline: 0;
}
.btn.small {
  padding: 5px 20px;
}
.btn.large {
  padding: 10px 40px;
}
.btn:hover {
  background-color: #0387ff;
}

Button 컴포넌트의 props에 size를 넘겨줍니다.

// Page.jsx
import React from "react";
import Button from "../components/Button";
import "./Page.scss";

const Page = () => {
  return (
    <div className="wrap ">
      <Button />
      <Button size="large" />
    </div>
  );
};

export default Page;

// Button.jsx
import React from "react";
import "./Button.scss";

const Button = ({ size }) => {
  return <button className={`btn ${size}`}>Button</button>;
};

Button.defaultProps = {
  size: "small",
};

export default Button;

이때, size를 넘겨주지 않을경우 Button.defaultProps에 의해 size는 "small"이 됩니다.

3-2. font-style 활용

mixin()을 사용하여 디자인 가이드에 맞는 폰트 스타일을 관리하여 사용 할 수 있습니다.

// _font-style.scss
@mixin font-style-24 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

@mixin font-style-20 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.05em;
}

@mixin font-style-14 {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.05em;
}

@mixin font($size, $color: false) {
  @if ($size == 24) {
    @include font-style-24;
  }
  @if ($size == 20) {
    @include font-style-20;
  }
  @if ($size == 14) {
    @include font-style-14;
  }

  @if (type-of($color) == color) {
    color: $color;
  }
}

// Content.jsx
import React from "react";
import "./Content.scss";

const Content = () => {
  return (
    <div>
      <h1 className="title">이것은 font-style-24 입니다.</h1>
      <p className="sub">이것은 font-style-20 입니다.</p>
      <p className="content">이것은 font-style-14 입니다.</p>
    </div>
  );
};

export default Content;

@import "../_common/font-style";

.title {
  @include font(24, red);
}

.sub {
  @include font(20, blue);
}

.content {
  @include font(14);
}

3-3. reponsive 활용

mixin()을 사용하여 Mobile, Tablet, Desktop등의 기기에 대응이 가능합니다.

// _media.scss
@mixin media($screen) {
  @if ($screen == T) {
    @media all and (min-width: 768px) and (max-width: 1023px) {
      @content;
    }
  }
  @if ($screen == D) {
    @media all and (min-width: 1024px) {
      @content;
    }
  }
}

이때 해당 element의 안에서 mixin()의 내용을 정의하기 위해서는 @content를 사용해야 합니다.

@import "../_common/font-style";
@import "../_common/media";

.title {
  @include font(24, red);
  @include media(T) {
    color: #fff;
    background-color: #000;
  }
  @include media(D) {
    color: #000;
    background-color: #fff;
  }
}

.sub {
  @include font(20, blue);
}

.content {
  @include font(14);
}

이외에도 필요에 따라 많은 용도로 활용이 될 수 있습니다.

더 알아보기