분류 전체보기22

• 인터프리터 언어인 자바스크립트에서는 어떻게 호이스팅을 할까? 자바스크립트가 인터프리터 언어임에도 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 실행하기위해 컴파일 단계와 실행 단계 를 통하여 코드를 단순히 한 줄씩 바로 해석하고 실행하지 않고, 먼저 컴파일 단계에서 코드를 파악하고 필요한 메모리를 확보하는 과정을 거치기 때문입니다.이를 통해 코드 내에서 선언 위치와 상관없이 변수를 사용할 수 있는 유연성을 제공합니다.컴파일 단계자바스크립트 엔진은 스크립트를 실행하기 전에 먼저 컴파일 단계를 거칩니다.이 과정에서 함수 및 변수 선언을 한 부분이 메모리에 할당되고 변수와 함수 선언을 미리 메모리에 올려두기 때문에 실제 코드에서 선언된 위치보다 앞에서 접근이 가능해지는 것입니다. let, const와 다르게 var를 통해 변수가 선언되면, 컴파일 단계에서 변수가.. Front-End/JavaScript 2025. 1. 17.

• 웹 애플리케이션의 성능을 최적화할 수 있는 방법 코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드 : 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식이미지 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법캐싱을 활용하여 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용하여 성능을 크게 향상스크립트 로딩 시 비동기 로딩(async) 이나 지연 로딩(defer) 을 적용하여 자바스크립트가 DOM을 차단하지 않도록 하는 방법 : 페이지가 로딩되는 동안에도 자바스크립트 파일을 병렬로 불러오거나, 적절.. Front-End/JavaScript 2025. 1. 17.

• 글씨에 다양한 질감을 주는 AI https://brunch.co.kr/@jisungmin/100 28화 글씨에 다양한 질감을 주는 AIAdobe firefly, 구성 참조 | 온라인 쇼핑몰 또는 SNS 광고 배너 중에 많이 보이는 스타일의 배너가 있습니다. 예를 들어 보여드리면 다음과 같습니다. 이 배너에서 “60%” 부분을 주목해 주세요. 과거brunch.co.kr배너 중에 입체적인 느낌을 주는 디자인을 어도비의 일러스트레이터와 어도비 파이어 플라이를 사용해 쉽게 만들 수 있음간략하게 만드는 방법 요약일러스트레이터로 가이드 이미지를 색깔로 구분하여 제작파이어 플라이 접속텍스트를 이미지로 클릭프롬프트에 3개의 파란색, 노란색, 빨간색의 둥근 네온사인 처럼 입력하고 생성하기 클릭화면에 4장의 이미지 생성 후 마음에 드는 이미지 위에 마우.. TIL (Today I Learned)/디자인 2025. 1. 8.

• 기획전 애니메이션 모듈 개발 https://devblog.kakaostyle.com/ko/2024-10-07-1-animation-module/ 기획전 애니메이션 모듈 개발지그재그는 상품 판매를 촉진하기 위해 이벤트나 기획전을 주요 마케팅 수단으로 활용합니다. 기획전은 한정된 기간 동안 고객에게 특정 상품 정보와 추가적인 할인 혜택을devblog.kakaostyle.com지그재그는 상품 판매를 촉진하기 위해 이벤트나 기획전을 주요 마케팅 수단으로 활용CMS(Content Management System)로 개발자를 통하지 않고 직접 기획전을 만들고 있음기존에는 애니메이션이 들어간 콘텐츠는 개발자를 통하여 개발하였음그래서 애니메이션 모듈을 개발하여 애니메이션을 CMS에서 설장할 수 있게하였음애니메이션 편집 모듈 개발 시 고민 사항 콘.. TIL (Today I Learned)/개발 2025. 1. 8.

• SaaS 핵심 인사이트 https://bizdevkr.ghost.io/bizdev_ops2/ 역대급 불황기 성장 전략의 핵심 열쇠, BIzops의 역할(+ SaaS 핵심 인사이트)어떠한 전략이 생존을 넘어 성장에 적합하고, 어떠한 지표를 추종하고 관리해야할까요? SaaS 신사업 시 시행착오를 극단적으로 아껴드릴 인사이트를 모아보았습니다.bizdevkr.ghost.io채널톡에서 어떻게 사업개발을 하고 어떤 데이터를 볼까?Biz Ops의 4가지 역할핵심 지표를 설정하고해당 지표를 쉽게 볼 수 있는 환경을 구축합니다이 데이터를 바탕으로 지속적인 관리 및 예측을 수행하고이 과정에서 발견된 문제를 해결하기 위한 전략을 수립하고 실행합니다.핵심 지표 설정 : SaaS 비즈니스 모델은 구독 기반의 과금 모델로, 반복적인 결제를 통해 예측 .. 카테고리 없음 2025. 1. 6.

• 2025년 생성형 AI 기술 및 시장 요약 https://channy.creation.net/blog/1905 2025년 생성형 AI 기술 및 시장 요약 :: Channy's Blog올해 생성형 AI 기술 및 시장을 조망하기 위해 2024년말에 나온 몇 가지 좋은 자료를 요약해 보고자 합니다. 우선 허진호 대표님이 작성해 주신 State of AI Opportunities — 2025년을 맞으며 (2024년 12월)channy.creation.net최신 대규모 언어 모델(The state of art, SOTA LLM)의 발전이 정체되고 있으며, 올해 GPT-5와 같은 성능을 가진 모델이 발표될 가능성은 낮아 보이고 상대적으로 작은 규모의 모델에 더 많은 학습 데이터를 투입하고, 전체 시스템 구조를 확장하는 방식이 다음 단계 SOTA 모델이 될 .. TIL (Today I Learned)/AI 2025. 1. 6.

• TIL을 습관으로 만들어볼까? 새해에는 누구나 새로운 습관을 만들고 싶어하기 마련입니다. 저도 마찬가지죠 😅올해에는 TIL 쓰는 걸 습관으로 만들어볼까 합니다.꼭 깔끔하게 정리된 글이 아니더라도 TIL을 작성하는 것에 의의를 두고 시작해봅니다  🎯 TIL (Today I Learned) 2025. 1. 6.

• 자식 Element가 있을 때 Drag&Drop Event 가 여러 번 호출 되는 이슈 0. 개요팀 내 코드 리뷰 중 React 컴포넌트에서 Drag&Drop Event가 여러 번 호출되어 컴포넌트가 Drag&Drop Event가 호출되는 만큼 리렌더링되는 이슈가 있었습니다.의도한 동작은 컴포넌트에 mouse over 유무에 따라 컴포넌트가 변경되는 것이었기 때문에 계속해서 리렌더링되는 이슈는 잡아야 할 필요가 있었습니다.이 글에서는 해당 이슈에 대한 원인과 이슈를 해결하는 방법에 대해 살펴보겠습니다.(아래 예제들은 개발자 도구를 열어 console.log를 확인하면서 테스트 해보는 게 좋습니다.)See the Pen Drag&Drop Event Example by 윤창현 (@ibgcsnij-the-selector) on CodePen.  1. 원인위 예제를 토대로 원인을 알아보자면, D.. Front-End/JavaScript 2024. 12. 8.

• 

  [Javascript] 알쓸신잡(알아두면 쓸모있는 신기한 잡아스크립트) - 2 다양한 자바스크립트 서적과 글을 보고 다양한 문제를 직면하면서 생소하게 느낀 부분들을 정리해논 글 입니다. (목차를 보고 관심있는 부부만 읽어도 좋습니다.)단순히 제 주관으로 판단하고 작성하는 글이기 때문에 가이드가 될 수는 없으니 주의해주시면 감사하겠습니다 🌟  1. 스코프(Scope)스코프는 컨텍스트는 값과 "표현식"이 "표현"되거나 참조 될 수 있는 현재 실행되는 컨텍스트를 의미합니다. 만약 변수 또는 표현식이 "해당 스코프"내에 있지 않다면, 사용할 수 없습니다. // 불가능한 케이스function exampleFunction() { const x = "declared inside function"; // 변수 x는 안에서만 사용 가능합니다. console.log("Inside functio.. Front-End/JavaScript 2024. 11. 19.

• 

  plop 라이브러리로 디자인 시스템 컴포넌트 파일을 템플릿화 해보자! 이 글로 얻을 수 있는 정보1. plop를 이용한 파일 템플릿화2. plop 라이브러리 설치 및 사용법2. plop 템플릿3. handlebars 템플릿 0. 개요디자인 시스템 컴포넌트를 구성하면서 스토리북 관련 구글링 중에 파일을 템플릿화 하여 쉽게 생성할 수 있는 plop 라이브러리를 알게되어 디자인 시스템 파일 템플릿 방법을 알아보고 템플릿을 공유해보려 합니다. 1. plop 라이브러리란?plop라이브러리는 개요에서 말했듯이 파일을 템플릿화 하여 쉽게 생성할 수 있게 도와주는 라이브러리 입니다.plop은 프롬프트 라이브러리인 inquirer와 텍스트 형식을 생성하는 템플릿 언어를 사용해 템플릿을 만드는 handlebars 라이브러리로 만들어졌습니다. 즉, 프롬프트를 통해 정보를 입력받고 그 정보로 .. Front-End/JavaScript 2024. 11. 17.

• style lint selector-max-type: 0은 어떻게 작동할까? 0. 개요업무 코드리뷰 중 동료분이 클릭 가능 여부에 따라 다른 스타일이 필요하여 다음과 같은 코드를 제시해주셨는데, style lint selector-max-type: 0에 걸려 에러가 발생하게 되었습니다.selector-max-type 룰은 태그 선택자를 사용함으로 인해서 여러 컴포넌트가 중첩되어 있을 때 하위 컴포넌트의 스타일에 영향을 주는 걸 차단하기 위해서 적용해 두었습니다&__content { background-color: #{$opacity-gray-16}; &:where(button) { &:hover { background-color: #{$opacity-gray-24}; } &:active { background-color: #{$opacit.. Front-End/HTML,CSS 2024. 10. 27.

• input,label을 감싸는 div click event가 두 번 실행되는 이슈 이 글로 얻을 수 있는 정보1. Event와 CustomEvent ( + dispatchEvent )2. 합성 이벤트의 개념 3. 이벤트 발생 방식 및 순서4. input,label에서 click event가 두 번 실행되는 이슈의 해결 방법 0. 개요업무(Next.js 14, storybook 사용 중) 코드 리뷰 중 다음 예시와 같이 input과 label을 연결 후, onClick 이벤트를 넣은 div로 감싸는 마크업을 구성하게 되면 label 영역을 눌렀을 때 click event가 두 번실행되는 이슈가 발생하여 해당 이슈에 대해 알아보려고 합니다.See the Pen Untitled by 윤창현 (@ibgcsnij-the-selector) on CodePen.     1. 문제 접근 방법1-1.. Front-End/HTML,CSS 2024. 10. 21.