Front-end 개발

CRLF will be replaced by LF 오류 해결 방법Git을 사용하다 보면 터미널 또는 Git Bash에서 warning: CRLF will be replaced by LF라는 메시지를 접할 때가 있습니다. 이 메시지는 오류(Error)가 아니라 경고(Warning)이지만, 정확한 의미를 이해하고 필요에 따라 설정을 변경하는 것이 중요합니다. 이번 글에서는 CRLF와 LF의 차이, 경고 메시지가 발생하는 이유, 해결 방법을 정리해보겠습니다.1. CRLF와 LF의 차이CRLF(Carriage Return + Line Feed)와 LF(Line Feed)는 줄바꿈을 표현하는 방식이 다릅니다.CRLF (\r\n): 윈도우(Windows) 운영체제에서 사용LF (\n): 유닉스(Unix) 및 리눅스..

1. CSS에서 텍스트에 취소선 적용하기웹 개발 시 텍스트에 취소선을 적용하는 방법은 주로 text-decoration 속성을 활용하는 것입니다. CSS에서 기본적으로 제공하는 text-decoration: line-through; 속성을 사용하면 손쉽게 취소선을 추가할 수 있습니다.(1) 기본 취소선 적용.strikethrough { text-decoration: line-through;}이 텍스트에는 취소선이 적용되었습니다.결과: 이 텍스트에는 취소선이 적용되었습니다.2. 취소선의 스타일 조절하기CSS3부터 text-decoration 속성과 함께 text-decoration-thickness, text-decoration-color, text-decoration-style 등의 속성을 활용하여..

1. 코파일럿이란?코파일럿(GitHub Copilot)은 AI 기반 코드 작성 도우미로, 개발자의 코드 작성 속도를 높이고 효율성을 극대화하는 도구입니다. Visual Studio Code(VS Code), JetBrains IDE, Neovim 등 다양한 코드 편집기에서 사용할 수 있으며, OpenAI의 GPT 모델을 기반으로 코드를 예측하여 자동 완성 기능을 제공합니다.2. 코파일럿 설치 방법(1) 코파일럿 사용을 위한 사전 준비코파일럿을 설치하려면 아래 준비물이 필요합니다:GitHub 계정 (유료 구독 필요: Copilot 개별 또는 기업 플랜)지원되는 코드 편집기 (VS Code, JetBrains, Neovim 등)인터넷 연결(2) Visual Studio Code에서 코파일럿 설치VS Code..

1. Toast UI Editor란?Toast UI Editor는 NHN에서 개발한 오픈소스 마크다운 에디터로, 웹에서 손쉽게 마크다운(Markdown) 문서를 작성할 수 있도록 도와줍니다. 실시간 미리보기 기능과 풍부한 플러그인 지원을 제공하여 블로그, 위키, 문서 관리 시스템 등에 널리 활용됩니다.(1) 주요 특징마크다운 지원: 마크다운 문법을 사용하여 간편하게 문서 작성 가능실시간 미리보기: 입력한 마크다운을 즉시 HTML로 변환하여 확인 가능플러그인 확장 기능: 코드 하이라이트, 테이블, 멀티미디어 삽입 등 다양한 기능 추가 가능다양한 모드 지원: WYSIWYG(What You See Is What You Get) 모드와 마크다운 모드 제공오픈소스: 누구나 무료로 사용 가능하며 커스터마이징 가능2..

웹 개발을 하다 보면 반복적으로 동일한 색상, 글꼴 크기, 간격 등을 설정해야 할 때가 많습니다. 이럴 때 유용하게 활용할 수 있는 것이 바로 **CSS 변수(CSS Custom Properties)**입니다. CSS 변수는 웹 스타일링 작업의 효율성을 높이고, 유지보수를 쉽게 만들어주는 강력한 도구입니다.1. CSS 변수란 무엇인가요?CSS 변수는 값을 재사용하기 위해 선언할 수 있는 사용자 정의 프로퍼티입니다. CSS 변수는 --로 시작하며, var() 함수를 사용해 참조합니다. 이를 통해 코드의 가독성을 높이고, 유지보수를 간편하게 할 수 있습니다.예::root { --main-color: #3498db; --font-size: 16px;}2. CSS 변수 선언하기CSS 변수는 일반적으로 :ro..

1. 엔터티코드란?엔터티코드는 HTML과 XML 문서에서 특수 문자를 표현하기 위한 문자열 코드입니다.특정 기호나 문자는 HTML 태그로 인식되거나 제대로 표시되지 않을 수 있기 때문에, 이를 안전하게 표시하려면 엔터티코드가 필요합니다.예시:동일하게 >는 >, &는 &로 작성해야 합니다.2. 엔터티코드 종류 (최대한 많은 코드 소개)2.1 기본 특수 문자 코드문자 엔터티코드 설명<Less Than (작다)>>Greater Than (크다)&&Ampersand""Double Quote''Apostrophe (작은따옴표)2.2 수학 기호문자 엔터티코드 설명++Plus (더하기)-−Minus (빼기)××Multiplication ..

1. 리액트 서스펜스란?리액트 서스펜스는 컴포넌트가 렌더링되기 전에 필요한 데이터나 리소스가 준비될 때까지 로딩 상태를 선언적으로 관리할 수 있게 해주는 기능입니다.2. 서스펜스를 사용하는 이유비동기 작업의 로딩 상태를 더 우아하게 처리할 수 있습니다.코드 스플리팅과 데이터 페칭을 더 간단하게 구현할 수 있습니다.사용자 경험을 향상시킬 수 있는 로딩 UI를 쉽게 구현할 수 있습니다.3. 서스펜스 사용법기본적인 사용 예시:import { Suspense } from 'react';function App() { return ( Loading...}> );}4. 주요 사용 사례데이터 페칭function ProfilePage() { return ( }> );..

Git CRLF 에러 관련 해결 방법개발을 하다 보면 Git에서 “CRLF will be replaced by LF” 또는 "LF will be replaced by CRLF"와 같은 경고 메시지를 본 적이 있을 것입니다. 이 문제는 주로 서로 다른 운영 체제 간의 줄바꿈 문자 차이로 인해 발생합니다. 이번 글에서는 이 에러의 원인과 해결 방법에 대해 알아보겠습니다.CRLF와 LF란?CRLF (Carriage Return Line Feed): 윈도우 운영 체제에서 사용되는 줄바꿈 문자입니다.LF (Line Feed): 유닉스 및 리눅스 운영 체제에서 사용되는 줄바꿈 문자입니다.에러 발생 원인Git은 기본적으로 유닉스 스타일의 줄바꿈(LF)을 사용합니다. 하지만 윈도우에서는 CRLF를 사용하기 때문에, 서..

파이썬 win10toast 라이브러리를 사용하면 간단하게 윈도우 알림을 만들 수 있습니다. 1. 설치 pip install win10toast 2. 기본 사용법 from win10toast import ToastNotifier toaster = ToastNotifier() toaster.show_toast("제목", "내용") 3. 사용 가능한 옵션 icon: 알림 아이콘 경로 (ICO 파일) duration: 알림 지속 시간 (초) threaded: 알림 백그라운드 표시 여부 callback: 알림 클릭 시 실행할 함수 toaster.show_toast( "제목", "내용", icon_path="C:\\path\\to\\icon.ico", duration=5, threaded=True, callback..

1. swiper 사용 시 필요한 파일 import 2. swpier tag 삽입하기 3. CSS 삽입 아래 코드를 꼭 넣어야 합니다. 그래야 작동중 끊김 현상 (슬라이드가 끊다고 다시 시작할때) 을 방지 할수 있습니다. .swiper-wrapper{-webkit-transition-timing-function:linear!important; transition-timing-function:linear!important; } 4. swpier 컨트롤 하기 $(function(){ var swiper = new Swiper('.swiper-container', { spaceBetween: 0, freeMode: false, enteredSlides: true, speed: 5000, autoplay: { ..

[^0-9]/g : 숫자가 아닌 모든 문자를 나타내는 정규 표현식입니다. ^ : 문자열의 시작을 의미합니다. [^0-9] : 0에서 9 사이의 숫자가 아닌 모든 문자를 의미합니다. / : 정규 표현식의 끝을 의미합니다. g : 모든 일치 항목을 바꾸는 것을 의미합니다 /* 처음 ex 010 */ /* 중간 ex 1234 */ /* 마지막 ex 5678 */ var replacePN = /[^0-9]/g; $(".inputPN").on("focusout", function() { let i = $(this).val(); if (i.length > 0) { if (i.match(replacePN)) { i = x.replace(replacePN, ""); } $(this).val(i); } }).on("ke..

# jdk설치 방법(AdoptOpenJDK) brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8 위 방법으로 jdk 많이 설치 했을겁니다. 그치만 doptopenjdk 지원 종료로 temurin을 사용해야 합니다. 1. Homebrew 설치 맥에서 패키지를 관리하기 위한 Homebrew를 먼저 설치해야 합니다. 터미널을 실행하고 다음 명령어를 입력합니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. JDK 설치 2.1.cask 란? cask는 Homebrew에서 제공하는 패키지 관리 도구입니다. macOS 운영 체제..

1. Homebrew 홈페이지: https://brew.sh/ 홈페이지 접속하여 메인에 보이는 커맨드 복사하여 설치 합니다. 또는 아래 커맨드를 복사하여 설치 합니다. Homebrew The Missing Package Manager for macOS (or Linux). brew.sh /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. 설치 했지만 아래처럼 오류 메시지가 나온다면 명령어를 입력 해줍니다. Warning: /opt/homebrew/bin is not in your PATH. Instructions on how to configure your shell for Hom..

- LinkedIn 개발자 토큰이란? LinkedIn API에 접근하는 데 사용됩니다. inkedIn API를 사용하여 프로필 정보, 게시물, 연결 정보 등을 가져올 수 있습니다. 1. 애플리케이션(APP) 생성하기(Menu → My apps → Create app) https://www.linkedin.com/developers/apps App Name: 애플리케이션 이름을 입력합니다. LinkedIn Page: 링크드인 페이지 (Company) 입력 합니다. (페이지는 만들때 1촌 1명이상 맺어져 있어야 생성가능합니다.) App Logo : 로고 이미지 업로드합니다. 2. 제품(권한)을 요청합니다. Products에서 추가 하고싶은(Added products) 제품 액세스 요청(Request acce..

1. Selenium 설치 Selenium을 설치하기 전에 Python과 pip가 설치되어 있는지 확인해야 합니다. Python 설치: https://www.python.org/downloads/ pip 설치: https://pip.pypa.io/en/stable/installation/ Selenium 설치: pip install selenium 2. WebDriver 설치 Selenium은 웹 브라우저를 제어하기 위해 WebDriver를 사용합니다. 사용하려는 브라우저에 맞는 WebDriver를 설치해야 합니다. 크롬: https://chromedriver.chromium.org/downloads 파이어폭스: https://github.com/mozilla/geckodriver/releases Web..

파이썬은 프로그래밍 언어 중 가장 인기 있는 언어 중 하나이며, 맥북에서도 쉽게 설치할 수 있습니다. 맥북에 파이썬을 설치하는 두 가지 방법을 알려드겠습니다. 1. 공식 웹사이트에서 설치 1.1 다운로드 Download Python 3.x.x 버튼을 클릭하여 맥북에 맞는 파이썬 설치 파일을 다운로드합니다. 1.2 설치 다운로드한 설치 파일을 실행합니다. 설치 마법사의 지시에 따라 설치를 진행합니다. 설치 과정에서 사용자 경로를 설정할 수 있습니다. 기본적으로 /usr/local/bin에 설치되지만, 원하는 경로로 변경할 수 있습니다. 설치가 완료되면 터미널을 실행하고 python3 --version 명령어를 입력하여 버전 정보를 확인합니다. 1.3 가상 환경 설정 (선택 사항) 여러 프로젝트에서 서로 다..

1. NVM(Node Version Manager) 이란? 각 상황에 맞게 node버전 변경하고 사용할 수 있게 해주는 Node.js의 버전 관리자입니다. 2. 사용방법 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant ba..

"a" 태그는 하이퍼링크를 생성하는 데 사용되며 여러 속성을 포함할 수 있습니다. 1. href: 링크의 대상 URL을 지정합니다. 이 속성은 필수입니다. (＊href 옵션) Visit Example.com 2. target: 링크를 어떻게 열지를 지정합니다. 주로 사용되는 값은 "_blank"로, 새 창이나 탭에서 링크를 엽니다. Visit Example.com 3. title: 링크에 대한 추가 정보를 제공합니다. 이 정보는 사용자가 마우스를 링크 위에 올릴 때 툴팁으로 표시됩니다. Visit Example.com 4. download: 링크를 클릭했을 때 리소스를 다운로드하도록 지정합니다. 이 속성은 태그가 다운로드 링크로 사용될 때 유용합니다. Download PDF 5. rel: 링크의 관계를 ..

1. Lottie란? 웹 및 모바일 애플리케이션에서 벡터 애니메이션을 쉽게 사용할 수 있게 해주는 라이브러리입니다. Lottie는 Adobe After Effects에서 만든 JSON 파일을 로드하여 애니메이션을 렌더링합니다. 2. lottie 사용방법? -라이브러리 설치 Vue 3 + Typescript Support npm install lottie-web-vue OR yarn add lottie-web-vue Vue 2 (v2 사용시 1.2.1로 설치하세요.) npm install lottie-web-vue@1.2.1 - Vue 2.x import Vue from 'vue' import LottieAnimation from 'lottie-web-vue' Vue.use(LottieAnimation);..

코드 편집을 더 효율적으로 수행할 수 있도록 도와주는 몇 가지 주요 단축키를 소개합니다. 단축키를 사용하면 코드 작성과 편집을 빠르게 할수있습니다. 1. 자동 완성: 기본 자동 완성: Ctrl + Space 스마트 자동 완성 (메소드 추론 등): Ctrl + Shift + Space 정적 메소드 및 상수 자동 완성: Ctrl + Space (두 번 누르기) 2. 코드 이동 및 편집: 메소드 또는 클래스로 이동: Ctrl + B 메소드 추출하기: Ctrl + Alt + M 변수 추출하기: Ctrl + Alt + V 파라미터 추출하기: Ctrl + Alt + P 인라인: Ctrl + Alt + N 코드 주석 토글: Ctrl + / 3. 코드 포맷팅: 전체 코드 포맷팅: Ctrl + Alt + L 선택한 코드..