Front-End11

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

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

• 자식 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.

• [React] API 데이터 캐싱/ 연관 데이터 자동 갱신을 위한 Reudx Toolkit Query 회사 프로젝트 개발 중 전역적으로 정보가 필요한 비동기 데이터(워크스페이스, 채널, 유저 정보 등등...)를 다룰 때, 해당 비동기 데이터를 캐싱할 필요성이 있었습니다. React-query와 Redux ToolKit Query 중 어느 것을 적용할지에 대한 고민을 했는데, 기존 프로젝트 프론트에서 이미 Redux ToolKit를 사용하고 있고 기능도 React-query와 비슷해서 Redux ToolKit Query를 적용하기로 결정하였습니다. 사용하다보니, axios 대신 사용해도 괜찮을 거 같다는 생각이 드네요 😀 해당 글은 공식문서를 참고하여 Redux ToolKit Query 적용 및 유용한 기능에 대하여 기재한 글입니다. 지속적으로 업데이트 예정이며, 언급되지 않은 옵션도 많으니 필요한 기능이.. Front-End/React 2023. 2. 21.

• [Javascript] 알쓸신잡(알아두면 쓸모있는 신기한 잡아스크립트) - 1 다양한 자바스크립트 서적과 글을 보고 다양한 문제를 직면하면서 생소하게 느낀 부분들을 정리해논 글 입니다. (목차를 보고 관심있는 부부만 읽어도 좋습니다.)단순히 제 주관으로 판단하고 작성하는 글이기 때문에 가이드가 될 수는 없으니 주의해주시면 감사하겠습니다 🌟  1. REPL(Read Eval Print Loop)기본적으로 Javascript는 컴퓨터가 한줄 씩 읽는 인터프리터 방식의 언어입니다.이 Javascript는 브라우저의 콘솔에서도 사용할 수 있습니다. 이 때, 브라우저의 콘솔에서 한 줄씩 입력(Read)받고 받은 입력을 평가(Eval)한 후 결과를 출력(Print)합니다. 그 후 다시 프롬프트가 나타나 새로운 입력을 기다립니다.(Loop)이 과정을 REPL(Read-Eval-Print-Lo.. Front-End/JavaScript 2023. 2. 5.

• [Next.js] 참고 링크.zip Next.js 관련하여 참고하면 좋을 것 같은 링크 모음집입니다. 이전에는 참고할만한 링크들을 모아 글로 직접 작성하였지만, 결국 또 다른 중복된 글을 만드는 거라고 생각되어 좋은 글들을 모으는 방식으로 방향을 바꿨습니다. (다만, 찾아도 나오는 글이 없다면 직접 작성할 예정입니다.) 🚗 동작 방식 및 Life Cycle Next js 구동방식 과 getInitialProps 🛰 Redux next-redux-wrapper가 필요한 이유 Front-End/Next.js 2023. 1. 9.

• [Javascript] 비구조화(구조분해) 할당 미세(?) 팁 자바스크립트를 다루다보면 비구조화 할당은 많이 접해보셨으리라 생각됩니다. 리액트 스터디 중 mdn web docs 를 보는데, 기본적인 비구조화 할당에 대한 글은 많이 봤지만 아래 내용에 관한 글은 본 기억이 없어서 작성하게 되었습니다. (제가 못 본 걸 수도,,,) 선언 없는 할당 var a, b; ({a, b} = {a: 1, b: 2}); 할당 문을 둘러싼 괄호()는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다. {a, b} = {a:1, b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다. 하지만, ({a, b} = {a:1, b:2})는 유효한데, 해당 문법은 var {a, b} = {.. Front-End/JavaScript 2022. 12. 27.