분류 전체보기

오늘은 주식 공부를 하다 보면 가장 먼저 마주치는 세 가지 지표에 대해서 정리해보았다. 핵심은 '수익성'과 '자산가치'를 구분해서 보는 것! 📌 핵심 요약 (3줄 요약)PER은 기업의 '수익(이익)' 대비 주가 수준 (비싸게 사나, 싸게 사나?)PBR은 기업의 '재산(자본)' 대비 주가 수준 (망해도 남는 게 있나?)ROE는 내 돈을 굴려 뽑아낸 '수익률' (경영진이 장사를 잘하나?)✅ 1. PER (Price Earning Ratio, 주가수익비율)"이 회사가 지금 버는 돈에 비해 주가가 비싼가?"기업이 1년 동안 벌어들이는 이익에 비해 주가가 몇 배로 거래되고 있는지를 나타내는 지표.공식: PER = 주가 / EPS(주당순이익)비유: 연봉이 5,000만 원인 사람의 몸값이 5억 원이라면? PER은..

최근 진행한 프로젝트에서 텍스트의 제목과 본문에 폰트를 적용하는 기능을 개발하면서 다양한 폰트 관련 문제에 직면했습니다. 이 과정에서 React에서 폰트를 적용하는 방법을 익히고, 발생한 문제들을 해결한 경험을 정리해보았습니다. 또한 폰트 문제 해결의 과정 속에서 자연스럽게 폰트 성능 최적화에 대해서도 고민하게 되었습니다. 이를 바탕으로 React에서 폰트를 적용하는 방법과 폰트 성능 최적화 관련 내용을 정리 해보는 시간을 가졌습니다. 웹 폰트 왜 나왔을까?웹 폰트가 나온 배경을 이해하기 위해서는 웹 세이프 폰트를 먼저 살펴봐야합니다.웹 세이프 폰트 / 웹 폰트 이 두 폰트는 모두 디지털 폰트 파일입니다. 하지만 중요한 차이점이 존재합니다. 웹 세이프 폰트 (Web Safe Font)웹 세이브 폰트는 일..

올해 두 번의 프로젝트를 통해 Editor.js 라이브러리를 활용한 에디터 제작을 경험했습니다. Editor.js는 공식 문서에 API와 관련 자료가 잘 정리되어 있고, 다양한 플러그인을 제공해 필요한 기능을 확장하며 개발하기에 매우 유용한 라이브러리입니다. 에디터를 개발해야 하는 상황이라면 Editor.js 라이브러리를 정말 추천합니다‼️ 하지만, 아직 상용화 사례가 많지 않아 참고할 수 있는 개발 사례가 부족하다는 점 아쉬운 부분이었습니다. 특히, 특정 기능을 구현하려고 할 때 Editor.js의 어떤 API를 활용해야 하는지 명확히 이해하기 어려운 경우가 많았습니다. 예를 들어, 에디터에서 블록 데이터를 커스터마이징 하거나 플러그인을 직접 개발해야 할 때, 문서를 읽는 것만으로는 실제 구현 방법을 ..

Transition?Transition의 사전적 정의는 “전이, 이행, 변천, 과도기”입니다. 웹 개발 관점에서 Transition은 한 상태에서 다른 상태로 변화하는 과정을 의미합니다. 이 과정은 단순히 화면 전환뿐만 아니라 모든 UI 상태 변화에 적용될 수 있습니다. 예를 들어, 버튼이 눌렸을 때 색상이 변화하거나, 요소가 점차적으로 나타나고 사라지는 등 다양한 액션에서 Transition은 더욱 자연스럽고 안정적인 사용자 경험을 제공합니다. 개발자가 이 변화의 흐름을 효과적으로 제어하려면 초기 및 종료 상태에 대한 정의가 필요합니다. 이를 통해 각 상태 전환을 세밀하게 조작할 수 있으며, 결과적으로 부드럽고 직관적인 UI 전환 효과를 구현할 수 있습니다. 아래는 인프런 사이트의 카드 디자인을 참조하..

프로젝트가 커지고 다양한 데이터를 처리해야 할 때, API 호출 로직을 효율적으로 관리하는 것은 프론트엔드 개발자에게 필수적인 역량입니다. 구조화되지 않은 API 호출 코드는 복잡성과 중복을 증가시켜 코드의 가독성과 유지보수성을 떨어뜨릴 수 있습니다. 따라서 초기 단계에서 API 호출 로직을 체계적으로 설계하고 구성하는 것이 매우 중요합니다. Nuxt3는 useFetch, useAsyncData, $fetch와 같은 다양한 도구를 제공하여 API 호출을 보다 효율적으로 관리할 수 있도록 돕습니다. 그러나 기존에 fetch나 axios를 사용해왔다면, 이러한 새로운 데이터 패칭 방식이 다소 생소하게 느껴질 수 있습니다. 하지만 이 개념을 잘 이해하고 프로젝트에 적용하면, 코드의 확장성과 유연성을 크게 높일..

지금까지 회사 내부에서 진행한 프로젝트에서는 access token과 refresh token 모두 쿠키로 관리해왔습니다. Nuxt.js를 기술 스택으로 활용하면서, Nuxt에서 제공하는 useCookie 컴포저블을 사용해 쿠키 값을 관리해왔습니다. 하지만 이전 JWT 관련 포스팅의 마지막 부분에서 언급했듯이, 나는 보안적인 이유로 access token은 전역 변수로, refresh token은 httpOnly, secure, samesite 옵션이 적용된 쿠키로 저장하는 것이 더 적절하다고 판단했습니다. 따라서, 기존의 토큰 관리 방식을 개선하기 위해 회사 내부 템플릿 코드를 수정한 경험을 공유하고자 합니다. useCookiehttps://nuxt.com/docs/api/composables/use-..

JWT는 Json Web Token의 약자입니다. 현재 가장 널리 사용되고 있는 표준 인증 방식 중 하나입니다. 그동안 "JWT! JWT!" 하며 많이 사용해 왔지만, 정작 JWT가 왜 등장했는지, 기존 인증 방식의 어떤 문제점을 보완하기 위해 나왔는지, 그리고 JWT의 장단점은 무엇인지 정확히 알지 못한 채 사용해 왔던 제 자신을 돌아보며, 이번 기회에 확실히 정리해봤습니다.  왜 JWT를 사용하게 되었을까?JWT를 제대로 이해하기 위해서는, 기존의 인증 체계가 어떻게 운영되었는지 살펴보는 것이 중요합니다. 과거에는 주로 Cookie와 Session을 기반으로 한 인증 방식을 사용했습니다. 이 방식들은 몇 가지 장점을 가지고 있었지만, 동시에 여러 가지 문제점과 한계를 지니고 있었습니다. 이러한 문제점..

객체 지향 프로그래밍의 기본 개념은 작은 독립적인 단위의 객체를 만들어 조립하는 것입니다. 이 개념이 정립되고 다듬어지면서, 프로그래밍의 세계에서 큰 빛을 발하게 되었습니다. 하지만, 단순히 클래스와 객체를 많이 사용한다고 해서 좋은 코드가 만들어지는 것은 아닙니다. 좋은 객체 지향 설계를 위해서는 객체들 간의 관계를 신중하게 설정하고, 초기 설계 단계에서 많은 노력을 기울여야 합니다. 객체 지향 프로그래밍은 그 자체로 복잡함이 따르지만, 이러한 복잡함을 관리하기 위한 여러 원칙과 방법이 발전해왔습니다. 그 중에서도 프로그래밍 세계에서 널리 통용되는 SOILD 원칙에 대해 정리해보았습니다.SOLID 원칙이란?SOLID는 좋은 설계를 위한 다섯 가지 원칙으로, 이를 지키면 견고한 소프트웨어를 만들 수 있습..