Line Break 줄바꿈 할 때 사용됨 끝 태그가 없는 빈 태그(empty tag) 이지만, xhtml에서는 로 열고 닫는 태그를 대신함. Paragraph 문단을 구분할 때 사용됨 앞뒤로 여백이 들어가며, 태그를 두 번 사용한 것과 같은 결과가 나옴 Preformatted Text 입력한 그대로 화면에 출력되는 태그 문장 안에 있는 여백이나 줄바꿈도 그대로 표시 코드 등을 표현할 때 사용됨 Non-breaking Space 태그는 아니고 HTML Entity 하나 이상의 공백을 표현하기 위해 사용

2023.07.11 불안정했던 프리랜서 생활을 마무리짓고 지인의 사내추천을 받아 한 회사에 정규직으로 입사하게 되었다. 지난주는 입사 첫주였는데 오자마자 격동의 한주를 보냈다. 이틀간 신규입사자 OT를 진행했고, 팀원분들과 인사를 나눈 뒤, 바로 다음날 IT실 워크샵을 갔다. 돌이켜보니 엄청난 스케줄.. 그래도 새로 들어온사람 입장에서 같은실 분들과 인사드리고 이야기 나눌 수 있는 시간을 보내서 오히려 좋았다. 일주일을 함께해본 결과 팀원분들은 다들 친절하고 상냥하신 것 같다~ 신규입사자가 조직에 금방 적응할 수 있도록 내부 시스템이 계속 디벨롭 되고 있지만 나도 팀원분들께 먼저 다가가도록 노력해야겠다. 개발팀은 22년 10월에 신설되었고 FE 개발자로 합류한 건 내가 처음이다. 즉, 나 빼고 전부 BE..

2022년 2월 7일부터 Vue.js 라이브러리와 공식문서의 기본 버전이 3버전으로 바뀌었다. Vue2의 지원은 2023년 12월 31일에 종료된다고 한다. 내가 가장 마지막에 Vue를 사용한건, k8s 스터디에 참여하기 위해 2020년 10월 17일에 Spring boot + Vue로 만든 To Do List이다. 당시에 Vue2 버전을 사용했었고, 공식 문서 한글번역이 매우 잘 되어있어 편했던 기억이 난다. 이후로 계속 React만 써왔지만 추후 Vue를 사용하는 프로젝트에 참여하게 될 수도 있어서 빠르게 훑고 넘어가려고 한다. 템플릿 문법 같은 기본적인 틀은 Vue2와 비슷하고, 두드러지는 특징은 composition API인 것 같다. template 텍스트 바인딩 데이터 바인딩의 가장 기본 형태..

2023.05.11 사건의 발단 예전부터 항공케이블이 가지고 싶었는데 이번에 규림님(@kyurimkim)이 C to C 케이블을 판매하시길래 구매해봤다. 사실 블루투스 키보드라 케이블 필요 없는데 예쁘면 다야. 아이패드도 키보드도 잘 안써서 이 두 개를 연결해서 활용해보려했다. 근데 내 키보드 연결 포트가 사진처럼 안쪽에 숨겨져있고, 항공케이블 C타입 대가리도 케이블 자체도 커서 안들어갔다... 하지만 이게 항공케이블 특징인걸... 그래서 키보드를 새로 사야하나 고민됐다. 솔직히 핑계삼아 새 키보드 사고싶은것도 맞다. 해피해킹은 아직까진 범접하기 좀 그렇고 키크론이랑 듀가드 예쁘더라 술먹고 귀가 후 갑자기 생각나가지고 다시 꺼내서 세팅해봤다. 오 힘으로(??) 어찌저찌 끼우니까 연결에 성공했다! 너무 귀..

이전에 다니던 회사에서 작업한 서비스들은 모두 MSA로 애플리케이션을 구현했었다. 그래서 MA의 특징과 MA와 MSA의 차이점, 그리고 각각의 장단점에 대해서 몰랐다..! 앞으로 신규 프로젝트를 설계할 때 어떤 아키텍처를 선택할 지 기준을 세우기 위해 정리해봤다. MA vs MSA MA(Monolithic Architecture: 모놀리식 아키텍처) MSA(MicroService Architecture: 마이크로서비스 아키텍처) 모놀리식 서비스 아키텍처 Monolithic: 단단히 짜여 하나로 되어있는 어플리케이션이 하나의 아키텍처로 구성되어있는 형태 대부분의 기업용 어플리케이션이 이에 해당 여러 비즈니스 로직들을 담은 하나의 시스템이 하나의 DB와 하나의 애플리케이션과 상호작용 모든 기능들이 하나의 시..

React React는 Facebook에서 제공하는 프론트엔드 라이브러리이다. 주로 SPA(Single Page APplication)나 모바일 애플리케이션을 만들 때 사용된다. React를 사용하는 이유 1. Virtual DOM의 사용 DOM은 Document Object Model의 약자이며 HTML, XML, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다. 기존의 DOM은 페이지가 바뀔 때 마다, 새 HTML을 로드하면서 DOM 전체를 변경한다. React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다. Virtual DOM은 가상의 Document Object Model을 말합니다. 실제 DOM을 제어하지 않고, 이벤트가 발생할 때 마다 ..

도커 공부를 하다보니 재미있는 제품을 협찬받았어요. 인카토스에서 판매하는 도커 각티슈 케이스 입니다. 도커의 컨테이너모양을 한 각티슈 케이스입니다 ㅎㅎ 개발자라면 누구나 가지고싶을 아이템이라고 생각되네요 구성품에 각티슈 케이스와 휴대용 휴지가 함께 있어 나중에 휴지를 다 사용했을 경우에만 리필하면 되어서 편리했습니다. 제품은 조립식으로 되어있는데요, 제품 박스 후면에 조립방법에 대한 설명이 그림으로 그려져있어 어렵지 않게 조립할 수 있었습니다. 조립을 한 번 해보았습니다. 내부 철제 프레임이 휴지를 아래에서 위로 올려주는 역할을 해서 휴지를 끝까지 뽑아 쓸 수 있는 방식으로 구성되어있습니다. 지금보니 제가 철제 프레임을 거꾸로 장착했네요.. 😵‍💫 얼른 다시 정방향으로 바꾸어주었습니다. 그만큼 조립과 해..

2023.01.05조직개편으로 기존 팀이 해체되기 전 마지막 점심회식을 했다. 판교 테크원 지하에 있는 오리지널 팬케이크 하우스!!! 맨날 지나가면서 웨이팅이 너무 길어서 포기했는데 테이블링 원격줄서기로 3트만에 성공했다.이곳 특징이 메뉴를 하나 시키면 기본으로 팬케이크 세 장이 같이 나온다. 그걸 모르고 주문했다가 팬케이크가 계속 나와서 팀원분들이 큰일났다고 너무 많이 시킨 것 같다고 하셨지만 나혼자 다먹을 수 있을 것 같은데요? 라고 했다.우리팀 먹짱 피카(pika.96)도 중간에 K.O. 하셨고 나만 포크를 놓지않고 안남기고 다먹었다. 평소에는 잘 안먹는 이미지였는데 양식을 좋아해서 열심히 달렸더니 다들 놀라기도 하고 웨인(wayne.kai)이랑 슘(sum.merci)은 잘먹는모습을 좋아하시기도 했..

2022.12.08if(kakao) dev 2022 세션이 열렸다.세 분 다 업무에 도움 많이 주셨는데 이렇게 능력있고 나이스한 분들이랑 함께 일한다니 새삼 감동...Sentry를 이용한 에러 추적기, React의 선언적 에러 처리 - 클로이, 나나카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 - 에릭  2022.12.13울프스덴에서 파스타랑 스테이크를 먹으면서 첫번째 공식 팀회식을 했다. 베스(jabez.lee)께서 비싼 술을 가져오셔서 두방울만 마셔봤는데 너무 쓰고 충격적인 맛이었다..! 😵‍💫파스타가 제일 맛있었는데, 먹느라 정신팔려서 사진을 하나도 못찍어서 아쉽다.  2022.12.15다가오는 연말을 맞이해서 회사에서 송년회를 진행했다.플리마켓, 게임배틀, ..

PR 양식중에 NFR이라는 모르는 단어가 튀어나와서 정리해보았다. 🤔 비기능 요구사항 (NFR: Non-Functional Requirements) 시스템에 부과되는 제약조건 또는 요구사항. 소프트웨어의 품질 속성을 지정. 확장성, 유지 관리 가능성, 성능, 이식성, 보안, 안정성 등을 다룸. 비기능 요구사항 품질 속성 전체 품질을 결정하는 시스템의 속성 보안, 성능 및 사용성 제약 시스템에 부과된 제한 사항 시간, 리소스 및 환경 비기능 요구사항의 장점 시스템이 사용자의 요구사항을 충족하는지 확인하는 데 도움이 됨 시스템이 목적에 맞는지 확인하는 데 도움이 됨 시스템의 확장 가능성, 안전성, 신뢰성을 확인하는데 도움이 됨 시스템의 사용, 유지 관리 가능성에 도움이 됨 비기능 요구사항의 단점 이해하고 구..