전체 글

[회고] 2024년 연말회고 - 대학생 인턴이었던 내가 정신 차려보니 풀타임 개발자?

학업과 직장 생활을 병행한 2024년은 저에게 많은 변화와 새로운 도전을 가져다주었습니다. 1년이 정말 빨리 지나갔는데, 이상하게 지난달에 있었던 일은 한참 전에 있었던 일처럼 느껴지네요. 정신없었던 한 해를 마무리하고 2025년을 기대하는 마음으로 지난 12월 27일 금요일, 회사에서 기년회가 열렸습니다. 기년회를 준비하며 2024년을 쭉 돌아보고 연말 회고록을 작성했는데요, 그 내용을 공유해 드립니다. 연말 회고 방법도 간단히 메모로 남겼으니 참고해 주세요! 😉🌱 신입 개발자가 연말 회고하는 법 🌱1년 간의 기록 전부 모아서 정리데일리 로그주간 회고프로젝트 회고개인 기술 블로그캘린더, 갤러리 사진시간 순서대로 있었던 일 쭉 나열아래 3가지 중심으로 회고작년과 비교해서 개선된 것, 새롭게 배운 것..

🌱 회고 2025. 1. 13. 09:56

[SEO] FE 개발자가 준비해야 하는 것들 2탄 - meta 태그, og 이미지 등록

🌱 SEO 처리를 위해 프론트엔드 개발자가 준비해야 하는 것들✔️ 4. meta 태그 작성💡 메타 태그 작성 시 참고하면 좋을 내용 👉🏻 https://searchadvisor.naver.com/guide/markup-content페이지 제목별도의 글자 수 제한은 없지만 검색 결과에서 표현이 가능한 수준으로 제목의 길이를 제한하여 작성페이지 설명페이지의 콘텐츠에 대한 간략한 설명. 1-2개의 문장으로 구성된 짧은 단락 사용하기 (80자 이내)오픈 그래프이미지 크기가 150 X 150 보다 커야 함.이미지 파일 사이즈 크기가 5,000 byte 이상이어야 함.이미지 가로:세로 비율이 3:1을 넘지 않아야 함.작성 예시 example ..

🔎 SEO 2025. 1. 12. 18:37

[SEO] FE 개발자가 준비해야 하는 것들 1탄 - 구글 서치 콘솔, 네이버 서치 어드바이저

✨ SEO(Search Engine Optimization: 검색 엔진 최적화)란?검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정🌱 SEO 처리를 위해 프론트엔드 개발자가 준비해야 하는 것들✔️ 1. robots.txt1. 파일 내용User-agent: *Sitemap: https://example.ai/sitemap.xml 2. 프로젝트 루트 디렉터리에 파일 업로드 → Next.js 사용하고 있다면 public 폴더에 파일 넣어주면 됨.✔️ 2. sitemap.xml1. 아래 주소에서 사이트맵을 생성할 웹사이트의 URL을 입력해서 생성👉🏻 https://www.xml-sitemaps.com/ 2. 프로젝트 루트 디렉터리에 파일 업로드 → Next.js 사용..

🔎 SEO 2025. 1. 12. 18:15

[dotLottie] Lottie 파일로 애니메이션 리소스 적용 + gif 파일 json 파일로 변환하는 법

✨ Lottie란? JSON 기반의 애니메이션 파일✨ Lottie 왜 쓰나요? 작은 파일 크기Lottie 애니메이션은 GIF나 MP4 같은 다른 형식에 비해 품질은 같으면서 훨씬 더 작음.자유로운 크기 조정Lottie 애니메이션은 벡터에 기반하기 때문에 해상도의 영향을 받지 않고 확대하거나 축소할 수 있음.다양한 플랫폼 지원과 라이브러리IOS, 안드로이드, 웹, React Native에서 수정하지 않고 바로 사용할 수 있음.✨ dotLottie란?Lottie 라이브러리✨ dotLottie-react란? React 애플리케이션에 로티 애니메이션을 쉽게 삽입할 수 있는 React 컴포넌트🌱 설치npm install @lottiefiles/dotlottie-react🌱 예시 코드// importimport..

📚 라이브러리 2025. 1. 12. 17:58

[Lucide] React 프로젝트에 Lucide 아이콘 연결하기

✨ Lucide 아이콘이란?1000개 이상의 벡터(svg) 파일을 제공하는 오픈 소스 아이콘 라이브러리🖌️ propsnametypedefaultsizenumber24colorstringcurrentColorstrokeWidthnumber2absoluteStrokeWidthbooleanfalsestrokeWidth 테두리 두께를 조절할 수 있는 props.특별히 따로 조정할 일은 없을 듯.absoluteStrokeWidthtrue로 설정하면 아이콘의 크기에 관계없이 strokeWidth 가 일정하도록 조정할 수 있음.특별히 따로 조정할 일은 없을 듯.🌱 설치npm install lucide-react🌱 사용 예시import { Camera } from 'lucide-react';// Usagecons..

📚 라이브러리 2025. 1. 12. 17:45

[PostgreSQL] Docker로 로컬 DB 환경 구축하기

Docker로 PostgreSQL에 접속하는 방법을 기록합니다. Docker에 대해서 궁금한 분들은 아래 글을 참고해 주세요!👉🏻 2025.01.12 - [📦 setup] - [Docker] Docker란? [Docker] Docker란?🩵 Docker란?개발자가 컨테이너를 빌드, 배포, 실행, 업데이트, 관리할 수 있는 오픈 소스 플랫폼이다. Docker의 핵심 개념은 이미지와 컨테이너다. Docker 이미지에는 소프트웨어 실행에 필요한 모u-ryu-logs.tistory.com🫧 Docker로 PostgreSQL 접속하기Docker 컨테이너에 PostgreSQL 설치하기1. PostgreSQL 이미지 가져오기docker pull postgres2. PostgreSQL 이미지 확인docker ..

📦 setup 2025. 1. 12. 17:31

[MariaDB] 1탄 - Docker로 로컬 DB 환경 구축하기

Docker로 MariaDB에 접속하는 방법을 기록합니다. Docker에 대해서 궁금한 분들은 아래 글을 참고해 주세요! 👉🏻 2025.01.12 - [📦 setup] - [Docker] Docker란? [Docker] Docker란?🩵 Docker란?개발자가 컨테이너를 빌드, 배포, 실행, 업데이트, 관리할 수 있는 오픈 소스 플랫폼이다. Docker의 핵심 개념은 이미지와 컨테이너다. Docker 이미지에는 소프트웨어 실행에 필요한 모u-ryu-logs.tistory.com 🫧 Docker로 MariaDB 접속하기1. MariaDB 이미지 가져오기docker pull mariadb2. MariaDB 컨테이너 생성하고 실행하기docker run -p 3306:3306 --name {컨테이너 이..

📦 setup 2025. 1. 12. 17:20

[Supabase] 로컬 DB 환경 구축하기

🫧 Supabase 로컬 환경에서 설정하기1. installing the Supabase CLIbrew install supabase/tap/supabase2. supabase loginnpx supabase login 3. supabase initsupabase init4. supabase startsupabase start 5. .env 파일 작성6. studio URL 접속해서 확인해 보기supabase stopsupabase status 참고 자료Local development with schema migrations

📦 setup 2025. 1. 12. 17:14

페이징

1 2 3 4 ··· 8

티스토리툴바