Front-end 개발

[TIP] 프론트엔드 개발환경 세팅하기 – VSCode, Prettier, ESLint 완벽 가이드

📄 본문프론트엔드 개발에서 효율적인 작업과 코드 품질 유지를 위해서는 제대로 된 개발환경 세팅이 필수입니다.이번 글에서는 VSCode 편집기, 코드 자동 포맷터 Prettier, 그리고 코드 품질 검사 도구 ESLint를 중심으로 개발환경을 세팅하는 방법을 자세히 안내합니다.1. VSCode 설치 및 기본 설정1-1. VSCode 설치Visual Studio Code 공식 사이트에서 운영체제에 맞게 설치설치 후 기본 UI와 테마, 단축키 등 취향에 맞게 설정 가능1-2. 필수 확장 프로그램 설치Prettier – Code formatter: 코드 자동 정렬ESLint: 자바스크립트 문법 및 스타일 검사ES7+ React/Redux/React-Native snippets (React 개발 시)2. Nod..

[SEO] 구글 태그매니저로 이벤트 추적하기 – 클릭/스크롤 트래킹과 GA4 연동 완전 정복

📄 본문디지털 마케팅과 웹 분석에서 중요한 것은 사용자 행동을 정확히 파악하는 것입니다.그 핵심 도구 중 하나가 **구글 태그매니저(Google Tag Manager, GTM)**입니다.이번 글에서는 GTM을 활용해 클릭 이벤트와 스크롤 이벤트를 추적하는 방법과, 이 데이터를 **Google Analytics 4(GA4)**와 연동하는 팁을 상세히 안내합니다.1. 구글 태그매니저(GTM) 기본 개념태그(Tag): 웹사이트에 삽입하는 코드 조각. 이벤트, 전환, 분석용 스크립트 포함트리거(Trigger): 태그가 실행될 조건(예: 클릭, 페이지뷰, 스크롤 등)변수(Variable): 태그와 트리거가 활용하는 값(클릭한 요소의 클래스명, URL 등)GTM은 태그, 트리거, 변수를 한 곳에서 관리할 수 있는..

[GIT] Git으로 협업하기: PR과 리뷰 프로세스 완벽 가이드

📄 본문팀 개발에서 Git은 필수 도구입니다. 여러 명이 동시에 작업하면서도 효율적으로 충돌을 최소화하고, 코드 품질을 관리하는 데 **Pull Request(PR)**와 코드 리뷰 프로세스가 핵심 역할을 합니다.이번 글에서는 GitHub Flow를 기반으로 한 협업 워크플로우를 소개하고, 효과적인 PR 작성과 리뷰 방법을 자세히 안내합니다.1. GitHub Flow란?GitHub Flow는 간단하고 직관적인 분산 버전관리 브랜치 전략입니다.주요 특징은 다음과 같습니다.항상 main(또는 master) 브랜치는 배포 가능한 상태 유지새로운 기능, 버그 수정 등 작업 시 별도의 브랜치 생성작업 완료 후 PR(Pull Request) 생성 및 리뷰 진행리뷰 승인 후 main 브랜치에 병합(Merge)2. ..

1. 구글 검색 엔진 등록 – Google Search Console준비구글 계정사이트의 소유권을 인증할 수 있는 권한 (FTP, HTML 수정 등)📋 등록 절차Google Search Console 접속:👉 https://search.google.com/search-console사이트 등록좌측 상단 ‘속성 추가’ 클릭도메인 또는 URL 접두어 방식 중 선택(가능하면 도메인 방식 추천)소유권 확인DNS 레코드 추가 (도메인 방식)HTML 파일 업로드 / 메타 태그 삽입 / GA 계정 연결 등 선택 가능사이트맵 제출사이트맵.xml 주소 입력 (예: https://yourdomain.com/sitemap.xml)인덱싱 요청 (선택)URL 검사 도구 > URL 입력 > "인덱싱 요청" 클릭2. 네이버 검색..

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) 및 리눅스..

안녕하세요, 오늘은 웹 개발의 기초 중에서도 가장 자주 접하게 되는 **HTTP 상태 코드(Status Code)**에 대해 정리해보겠습니다.웹 개발자뿐 아니라 API를 다루는 백엔드·프론트엔드 개발자, QA, 기획자들도 자주 마주치는 코드인데요. 숫자로만 되어 있어서 처음 접하면 헷갈릴 수 있죠.이 글에서는 100번부터 500번까지의 상태 코드를 범주별로 요약하고, 자주 쓰이는 대표 코드들을 예시와 함께 정리해 드릴게요.1. HTTP 상태 코드란?HTTP 상태 코드는 클라이언트가 서버에 요청을 했을 때, 서버가 응답한 결과를 숫자로 알려주는 약속된 규칙입니다.보통은 3자리 숫자로 구성되며, 앞자리 숫자(첫 번째 자리)에 따라 응답의 유형이 달라집니다:범위의미1xx정보(Informational): 요청을..

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를 사용하기 때문에, 서..

# 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..