Dalin's Archive

4월 내내 작성합니다. 작은 따옴표 안의 글은 직접 인용한 부분입니다. 프론트엔드 (번역) 🔥 자바스크립트 메모리 관리: 일반적인 메모리 누수를 방지하고 성능을 개선하는 방법 자바스크립트 메모리 관리 -> 애플리케이션 성능에 영향 자바스크립트 메모리 관리 가비지 컬렉터 : 더이상 사용하지 않는 객체를 식별해서(참조되고 있는지 체크) 제거. 사용 중인 모든 객체 '표시' -> 힙을 '정리' 사용중이지 않은 객체 제거하는 과정을 주기적으로 수행. (번역) 프런트엔드 개발의 종말 제목부터 무섭다 ㅠㅠ chat GPT 등 인공지능이 발달하면서, 앞으로 발생할 일에 관한 저자의 가설이다. LLM(Large Language Models)은 프롬프트가 주어지면, 그 뒤에 올 가능성이 높은 문자 집합을 찾아낸다. LL..

싸피 팀 프로젝트에서부터 사용했던 Pritter, ESLint. 회사에서 추가로 사용하는 Stylelint. 사용하면 자동으로 스타일을 맞출 수 있고, 문법 오류도 잡아줘서 편리하다. 하지만 잘못하면 엄청 귀찮아진다 ㅠ 코드 전부 빨간 줄이 생기고..ㅠㅠ 오늘도 그런 일이 있었다. 분명히 ESLint, Prettier, vscode setting에서 모두 작은따옴표를 사용하게 했는데(single quote), 파일을 저장하면 자동으로 큰 따옴표로 바뀌는 것이었다. 그리고 규칙에 안 맞는다고 코드에 전부 빨간 줄을 쳐서 보여줬다 ㅠㅠ 이건 vscode setting에서 Editor: Default Formatter를 잘못 설정해서 생긴 문제였다. 아래와 같이 'Prettier ESLint'로 해야 하는데,..

보호되어 있는 글입니다.

저번 스프린트에 메인 페이지에서 여러 애니메이션을 적용하는 걸 했다. 그때 css 속성 중에 cubic-bezier라는 게 있었다. 그게 뭔지 알고 싶어서 써보는 글이다. bezier 곡선은 두 개 이상의 점을 가지고 정의되는 곡선이다. 점 몇 개로 특정한 곡선을 만들 수 있어서 컴퓨터 그래픽 분야에서 많이 쓰인다고 한다. 나무 위키, 이 블로그에서 베지어 곡선에 대해 잘 설명해준다~~ 1차, 2차, 3차,..... n차가 있는데, cubic-bezier는 3차이다. n개의 조절점으로 베지에 곡선을 만들면 n-1 차 베지에 곡선이라고 한다. 그러면 cubic-bezier는 4개의 조절점이 필요하다는 것이다. 그런데 두 점은 이미 정해져 있다. 시작점인 (0, 0)과 끝 점인 (1, 1)! 그래서 두 점만..

평소 유튜브를 구독하고 있는 향로님(이동욱님)이 쓰신 책이라서 알고는 있었다. 이제 개발자로 일한지도 1년이 가까워 오면서, '성장하고 있는 것인가?', '계속 개발자 일을 할 수 있을까?', '어떤 개발자가 되어야 할까?' 고민이 됐는데, 여러 선배 개발자들의 이야기를 읽으면 도움이 될 것 같아서 읽었다. 편하게 슥슥 읽을 수 있고, 자극도 많이 받았다 :) 쓸모 있는 소프트웨어를 만들자 - 개발자 원칙/ 박성철님- 무엇보다 프로그래머라고 해서 프로그래밍만 잘하면 되는 것이 아니라는 것을 알게 되었습니다. 여러 사람에게 설명도 할 줄 알고 협상도 하고 계획도 세울 줄 알아야 하고 무엇보다 진행 중에 닥치게 되는 난관을 해치고 목표를 달성하며 이를 위해 여러 결정도 스스로 내릴 수 있어야 한다는 것도 배..

상황 설명 🌈 이번 스프린트에 사용자가 송장(invoice)을 신청하고, pdf로 받아볼 수 있는 기능을 추가했다. 나는 인보이스 신청하는 프론트엔드 코드도 작성하고, pdf생성을 위한 html,css를 작성해서 백엔드 개발자님에게 넘기기로 했다. 디자인도 심플하니까 빨리 할 수 있을 것이라고 생각했다. 그.런.데. 생각보다 오래 걸렸다 🥹 디자이너님도 많이 괴롭혔다 🥹 (죄송하고 감사해요...) 웹 브라우저에서 보는 것과 pdf로 뽑은 결과물이 많이 달랐기 때문이다!! 그래도 이번 시간을 통해서 인쇄용일 때는 html, css을 어떻게 작성해야 할지, 무엇을 고려해야 할지 알게 됐다. 엄청 고생하면서 알게 된 것들이라서ㅠㅠ 블로그에 남기려고 한다 ㅎㅎ (pdf로 뽑는 것은 인쇄용과 동일했기 때문에, 인..

요즘 엄청나게 귀찮은 ..; 작업을 하고 있다. 페이지나 컴포넌트, 에러 처리 등에서 직접 문구를 쓰던 것을 i18n을 사용해서 정리하고 있는 것이다. 맨 처음에는 i18n을 적용했었다. 그런데 현재 한 언어만 지원하고(추후 다른 언어도 지원 계획은 있음) 있어서 그냥 직접 작성하기로 한 것이었다. 그랬더니 문구 수정, 번역이 될 때마다 기획/번역하시는 분이 엑셀에 정리하고 이걸 프론트개발자가 또 파일에서 수정해야 하는 번거로움이 있었다. 그래서 다시 i18n으로 정리하기로 했다. 하나 하나 하다보니 무척 번거롭다. 그래도 한번 하면 편리하게 코딩할 수 있겠지~

저번 스프린트는 지금까지 진행했던 스프린트 중에서 가장 힘들었다. 일이 계속 딜레이 됐고, 스프린트에 하기로 했던 일을 다 하지 못했기 때문이다ㅠㅠ 스프린트 중에도 계속 압박을 느꼈고, 바빴다ㅠㅠ (바쁜 것도 일이 딱딱 진행되면 재밌게 바쁜데, 이건 일이 계속 늦춰지니까 우울하게 바빴다..ㅠ) (내가 기운 없어하는 게 보였는지 커피, 간식을 주신 동료 분이 계셨다ㅠㅠ 너무 감사했다!) 결국 스프린트 마지막 날, 팀장님(... 정확한 직급이 있는 건 아닌데 그런 분..!)과 면담을 했고 티켓들을 백로그로 내렸다. 따듯하고 도움이 되는 조언을 해주셨다. 죄송하고 감사했다 ㅠㅠ 이유 1. 처음 해보는 일이 있었는데, 시간 산정을 잘 못했음. 2. 디자인, 기획 변동 등으로 시간이 딜레이 됨. 3. 기한 내에 ..

https://html-css-js.com/css/generator/box-shadow/ Box Shadow CSS Generator Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview html-css-js.com https://cssgenerator.org/box-shadow-css-generator.html Box Shadow CSS Generator A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations. cssg..

어제 일이 생각대로 잘 안되고, 생리통도 심해서 우울하게 하루를 시작했다. 그때 동료 분이 커피를 사러 가셨다가 내 것까지 사 오셔서, 자리에 앉아 있는 내게 주셨다. 별말씀 없으셨지만 너무 감사했다ㅠㅠ 우울함과 힘듦이 한순간에 감동, 따듯함으로 바뀌었다. 정말 감동의 눈물을 흘릴 뻔했다. 덕분에 힘내서 일할 수 있었다! 돌이켜보니 이런 경우가 꽤 있었다. 코로나 걸렸다가 회사에 돌아왔을 때 따듯한 유자차를 자리에 놓아주신 분, 신입 시절에 여러 번 커피를 사주시면서 소소한 이야기를 건네주시던 분, 좋은 일이 있다면서 팀 전체에 커피를 돌리던 분.. 커피 한잔으로 따스함을 충전해주시던 분들..♥ 나도 "커피 사러 갈건데 같이 가실래요? 제가 살게요~ " 하면서 먼저 말을 건네고, 때로는 힘들어보이는 동료..