전체 글247

• 

  [HTML]  (non-breaking space, 줄 바꿈 없는 공백)이란? FE 개발을 하다 보면 JSX나 HTML에 명시적으로 공백을 표시해야 할 때가 있다. 텍스트 요소 길이가 너무 길 때 줄을 바꾸고 그곳에 nbsp를 쓰는 식이다. nbsp가 정확히 무엇을 의미하는지와 사용해야 하는 경우, 사용하면 안 되는 경우를 알아 보았다. 1. nbsp란? nbsp는 사실 공백을 표시하는 데 쓰는 것이 아니다. 하지만 공백의 역할을 한다. nbsp를 쓰면 공백이 표시됨과 동시에 그 위치에서는 줄 바꿈이 일어나지 않아 그 이전 공백이나 이후 공백에서 줄 바꿈이 일어나게 한다. 그러니까 극단적으로 한 p 태그 안의 모든 공백을 nbsp로 대체해 표시하면, p 태그의 콘텐츠가 p 태그를 감싸고 있는 div의 오른쪽 바깥을 한 줄로 뚫고 나가게 된다. 줄 바꿈 없는 공백을 HTML이 인식할.. Programming/HTML, CSS 2024. 3. 26.

• 

  2024년 1월 회고: 만 1년차 개발자 되다, 사이드 프로젝트, 계절학기, 이메일 개발, 멘토링, 웹 접근성 교육, 의자 구매, 팰월드, 토플 준비 1월은 사이드 프로젝트 MVP를 개발하느라 퇴근 후 거의 모든 시간을 쓴 것 같다. 그래서 이제야 1월 회고를 쓸 여유도 생겼다. 회사에서도 몇 가지 까다로운 버그와, 처음으로 이메일 관련 개발을 하게 되어서 이메일 클라이언트 별 대응 방법(Gmail for iOS는 style 태그 안 font family 조차 무시하고 Times New Roman으로 기본 적용을 해 버리고는 한다... sans serif 추가 필수 ^^;)에 대해 공부하느라 바빴다. 다행히 사이드 프로젝트도 완벽하진 않지만 핵심 기능을 완성했고, 이메일 관련 기능도 기한 내에 완료할 수 있었다. 또 웹 접근성 툴 WAVE를 만든 유타 주립 대학의 WebAIM으로부터 직접 웹 접근성 교육을 들을 기회도 있었다. 새벽 시간이어서 집중이 .. My/Riverlog 2024. 2. 15.

• 

  [HTML] <a> 태그 'target' 요소 target 요소는 주로 _blank를 사용해서 새로운 탭에서 페이지를 열려고 할 때 말고는 사용한 적이 거의 없었다. 하지만 이번에 기능 하나를 개발하면서 다른 요소를 사용해야 하는 경우를 만나서 mdn을 보고 정리해 보았다! 의미 target 요소는 링크한 URL을 표시할 '위치'를 말한다. 위치는 브라우징 맥락을 말하는데, 탭, 창, 의 이름 등이 될 수 있다. target 요소에는 총 네 가지 값이 들어갈 수 있다. _self: URL을 현재 브라우징 맥락에 표시한다. (기본값) _blank: URL을 새로운 브라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다. _parent: URL을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않으면.. Programming/HTML, CSS 2024. 1. 27.

• 

  [WIP] [JavaScript] 모던 자바스크립트 Deep Dive 02장 자바스크립트란? 비록 다른 객체지향 언어와의 차이점에 대한 논쟁이 있긴 하지만 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다...상속, 정보 은닉을 위한 키워드가 없어서 객체지향 언어가 아니라고 오해하는 경우도 있지만 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어다. -p.15 브라우저와 Node.js 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 브라우저와 Node.js에서 ECMAScript 이외에 추가로 제공하는 기능은 호환되지 않는다. -p.17 03장 자바스크립트 개발 환경과 실행 방법 간단한 웹 애플리케이션은 브라우저만으로도 개발할 수 이싿. 하지만 프로젝트의 규모가 커짐에 따라 React, Angula.. Programming/Javascript, Typescript 2024. 1. 2.

• 

  2023년 회고 일 회고만 1년차 개발자가 되다이번 달로 만 1년차 개발자가 되었다. 처음 프로그래밍을 공부한 시점으로부터는 2년차다. 아직도 내가 수 년, 수십 년 경력을 가진 개발자들과 한 회사에서 일을 하고 있다는 것이 신기하지만, 이제 정말 주니어 마인드를 버리고 문제 해결을 위해 더 적극적으로 나설 때라는 생각이 드는 요즘이다. 이 고비를 잘 넘기고 진짜 전문가가 되어 가는 길을 걷고 싶다.첫 회사에서의 5개월과 두 번째 회사에서의 5개월예상치 못한 이직을 하면서(이직 관련 포스팅) 일 년 중 반은 국내 SI 회사에서, 나머지 반은 외국 서비스 회사에서 개발자 생활을 하게 되었다. 백엔드부터 애니메이션까지 다양한 기술을 제품에 적용해볼 수 있었고, 시간 압박 속에서 신기능을 런칭하는 경험도 해봤다. 자주, 솔직.. My/Riverlog 2023. 12. 27.

• 

  [JavaScript] JavaScript Cheatsheet (ES6-ES10) Programming/Javascript, Typescript 2023. 12. 26.

• 

  [WIP] [리팩터링 개정판] 02. 리팩터링 원칙 리팩터링: [명사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 리팩터링(하다): [동사] 소프트웨어의 겉보기 동작은 그대로 유지한 채, 여러 가지 리팩터링 기법을 적용해서 소프트웨어를 재구성하다. - p.79 나는 소프트웨어를 개발할 때 목적이 '기능 추가'냐, 아니면 '리팩터링'이냐를 명확히 구분해 작업한다. 켄트 벡은 이를 두 개의 모자에 비유했다. 기능을 추가할 때는 '기능 추가'모자를 쓴 다음 기존 코드는 절대 건드리지 않고 새 기능을 추가하기만 한다...반면 리팩터링할 때는 '리팩터링' 모자를 쓴 다음 기능 추가는 절대 하기로 다짐한 뒤 오로지 코드 재구성에만 전념한다...소프트웨어를 개발하는 동안 나는 두 모자를 자주 바꿔 쓴다.... 카테고리 없음 2023. 12. 25.

• 

  [인프런] 프로그래밍, 어떻게 공부할 것인가? - 김창준 지난 인프런 세일 때 김창준님의 강의를 구매했었다. 학교도 종강을 했고 이번 연말 휴가 때 듣기 좋을 것 같았다.(계절학기 시작이 얼마 안남은 건 함정 ^^;) 내가 효율적으로 공부하고 있지 못했던 부분이 있었다면 많이 배우는 기회가 되었으면 좋겠다. 총 3시간 38분 분량이지만 3개월의 수강 기한이 있다.    프로그래밍, 어떻게 공부할 것인가 강의 - 인프런프로그래밍, 그냥 시간만 쏟아 부으면 공부가 될까? 좀 더 과학적이고 효과적인 방법은 없을까?, 🔔 강의 오픈 기념 Q&A 세션을 진행합니다!2023년 11월 15일 (수) 19:00~21:00, 인프랩 오피스프로그래www.inflearn.com 전문성에 대한 미신들 1실험: 고정 사고관을 가진 사람들에게는 IQ/시험 점수의 변화가 없었지만 성장.. My/Careerlog 2023. 12. 19.

• 

  2023년 11월 회고: 신기능 (또) 런칭, 연간 리뷰, 김장하기, 생신 모임, 연말 준비 두 번째 회사에서의 5개월차 회고 11월은 입사 이후 가장 역사적인 한 달이었다. 새로운 PM과 함께 유저 참여도를 개선할 수 있는 Gamification이 포함된(고려해야 할 경우의 수와 에지 케이스가 많다는 이야기 ^^;) 신기능을 런칭했는데, 혼자 모든 프론트엔드 개발을 맡았다. 기능이 한 페이지가 아닌 앱 전체에 걸쳐 있고, DnA팀에서 요청한 Optimizely A/B 테스팅 및 Segment 유저 트래킹까지 적용해야 했기에 프로덕션에서 발견된 버그 Hotfix를 두 번이나 하는 등 몇 번의 식은땀 나는 순간이 있었지만, 초보 개발자 치고는 성공적인 런칭을 한 것 같다!(원인을 모르는 버그 아직 두 개나 있음^^;) Growth를 우리 팟의 주력 분야로 가져가게 되면서 여러가지 마케팅 툴을 Re.. My/Riverlog 2023. 12. 2.

• 

  [CSS] 속성 선언 순서 CSS 속성의 선언 순서를 스스로 정리해 본 적이 없는 것 같아 네이버의 CSS 코드를 참고해 정해 보았다. 평소 best practice나 클린 코드 관련 글들에서 읽은 것과 결이 같아 좋은 기준이 될 것 같다.display - 표시(관련 속성: visibility)overflow - 넘침float - 흐름(관련 속성: clear)position - 위치(관련 속성: top, right, bottom, left, z-index)width & height - 크기margin & padding(그룹) - 간격border(그룹) - 테두리background(그룹) - 배경font(그룹) - 폰트(관련 속성: color, letter-spacing, text-align, text-decoration, text.. Programming/HTML, CSS 2023. 11. 12.

• 

  업무 네 달차 회고 이번 달은 cross-team 기여를 할 수 있어 뿌듯했던 시간이었다. 입사 전에는 만져본 적 없던 WordPress를 공부하고 Growth/Ops 팀을 위해 문서도 작성했다. 그리고 첫 번째 Shoutout을 받기도 했다! How it is going 10월에는 네 개의 PR을 머지했다. 지난 세 달차 회고글을 보니 두 달 동안 네 개를 머지했는데 속도가 두 배로 늘었다! 10월 team update 미팅에서 지난 신기능 런칭 관련 shoutout을 받았다. 원래 우리 팟 담당 프로젝트는 아니었지만 중간에 인력 지원(?) 차원에서 기능 일부를 개발했는데 기한 내에 런칭하는 데 도움을 줬다. 그 때문에 3주 동안 바쁜 시간을 보내기는 했지만 내가 처음부터 쌓아 올린 기능이 데모 발표에 쓰이고 실제 사용되.. My/Careerlog 2023. 11. 1.

• 

  미국 회사 재택근무 세 달 회고 와우 offsite 참석까지 하고 나니 순식간에 세 달차가 되었다. 자칫하다가는 선배님들이 종종 주의를 주곤 하시는 발전 없이 경력을 쌓은 개발자의 사례가 되기가 생각보다 쉽다는 섬뜩한 두려움도 스쳐 지나간다. 그동안 놀지는 않았고, 개발 티켓 처리는 물론 회사 AWS Lambda와 CloudFront도 담당하게 되고, 여러 버그 해결과 Confluence 문서화에도 기여했다. 즐겁게 업무에 몰입했던 두 달이었다! How it is going... 입사 후 2-3번째 달 동안 다섯 개의 PR을 만들어 머지됐으며, 새로 출시되는 기능 내지 서비스의 한 페이지 전부를 맡아 성공적으로 출시했다. 이 과정에서 Production hot fix 배포도 경험했다. 전사 offsite에 참가해 동료들을 만났고 주로 .. My/Careerlog 2023. 9. 26.

• 

  JWT(JSON Web Tokens), OAuth(Open Authorization) Programming/ETC 2023. 9. 24.

• 

  2023년 9월 2일 ~ 9월 8일 미국 샌프란시스코/솔트레이크시티 여행 & 회사 offsite 회고 회사의 연간 offsite(원래의 장소에서 떨어진~ 등의 의미다) 행사에 참여하기 위해 모회사의 HQ가 있는 솔트레이크시티에서 한 주 정도 머무르게 됐다. 비행편을 알아보니 솔트레이크시티까지 직항이 없어 이번 기회에 환승하는 샌프란시스코를 이틀 정도 둘러보고 이동하기로 했다. 기억이 더 흐려지기 전에 귀국 비행기를 기다리며 여행기와 offsite 후기를 글로 담아본다. 사진은 후첨하기로...샌프란시스코 여행 샌프란시스코 여행은 약간의 아쉬움을 남겼다. 시차 적응을 하지 못해서 계속 골골거리는 상태로 이틀을 보냈기 때문이다. 그래도 기억에 남는 좋은 경험들이 많았다. 악명 높은 유나이티드 항공, 실제로 타보니... 회사에서 비행편과 숙소를 제공했기 때문에 개인적으로 가장 좋아하는(아마 색깔 때문인듯) 아시.. My/Careerlog 2023. 9. 9.

• 

  [Low-code] 로우 코드 서비스 개발 툴, Retool 최근에 low-code 툴인 'Retool'에 대해 알게 되었다. admin 페이지 등 UI를 직접 개발할 필요 없이 약간의 JS와 SQL 지식만으로 웹 페이지를 만들고 운영할 수 있는 툴이라고 한다. 데이터에 관한 여러 대시보드를 만들 수 있을 뿐만 아니라 데이터를 직접 조작할 수도 있다. 홈페이지 https://retool.com/ Build any business software, remarkably fast. Retool is the fast way to build internal tools. Drag-and-drop our building blocks and connect them to your databases and APIs to build your own tools, instantly. C.. Programming/ETC 2023. 8. 28.