본문 바로가기
conventional commits (커밋 메세지 작성 가이드라인) 깃허브에 commit을 남길 때, 다들 어떤 식으로 남기는가? 자신만의 규칙이 있는가? 아님 그냥 되는대로, 느낌대로?나의 경우는 "느낌"대로 올리는 것 같다. 물론 commit에는 내가 올린 기능에 대한 설명을 남기는 부분이지만, 그 "규칙"이라는 것에서는 느낌대로 올린다.이때, 사실 commit를 올리는 것에 정답은 없다. 그러나 일정한 프로덕트를 만드는 프로젝트에서는 이 commit 규칙이 필요하게 된다. (뿐만 아니라 깃 협업의 흐름도 정해져야 한다.)이때 쓰이는 스펙이 "conventional commits"이다.conventional commits 이란?일단 공식 문서의 링크는 다음과 같다.https://www.conventionalcommits.org/en/v1.0.0/ Conventiona.. 2025. 4. 5.
안드로이드 스튜디오 xml 코드 (텍스트/버튼) 대충 정리 안드로이드 스튜디오의 xml의 기본적인 버튼과 폰트에 대한 코드를 얼추 여기에 정리하겠다.(복습용으로 대충 썼다)🎨 1. 버튼 (Button) 스타일링 android:layout_height="wrap_content" android:text="클릭하세요" android:textSize="18sp" android:textColor="#FFFFFF" android:background="@color/blue" android:padding="10dp" android:gravity="center" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf=".. 2025. 4. 4.
타입스크립트의 동작원리 여기까지는 이론. 다음부터는 실제의 코드를 이야기할 것이다.대다수의 프로그래밍 언어는 어떻게 동작하는가?"컴파일" 을 들어봤을 것이다.컴퓨터는 이진수만 이해할 수 있다. 인간은 이진수를 이해하기 "매우" 힘들고 우리만의 언어를 사용하기 때문에, 중간 과정을 해석해 주는 컴파일이 반드시 필요하다.그리고 컴파일을 해주는 도구가 컴파일러이다.자바스크립트의 컴파일를 거치면 바이트 코드가 된다.물론 그냥 바로 바뀌는 것은 아니고 AST(추상 문법 트리)를 통해서 변환 후에 AST를 바이트 코드로 바꾸게 된다.그렇다면 타입스크립트는 어떻게 실행이 될까?쉽게 말하면. 타입스크립트는 대다수의 프로그래밍 언어처럼 컴파일하는 것과 비슷하게 작동하지만, 중간에 타입을 검사하는 과정이 추가된다.(이때에는 바이트코드가 아니고 .. 2025. 4. 3.
타입스크립트는 무엇인가? 타입스크립트는 2012년에 마이크로소프트의 개발자이자 C#의 창시자로 알려진 아주 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)의 손에서 처음으로 탄생했다.또한, 타입스크립트는 오픈소스이다.현재 많은 사람들이 이 소스의 개발 및 유지에 참여하고 있다.또한, 타입스크립트는 피할 수 없는 대세 프론트엔드 언어이다. 사실상 프론트엔드로 회사에 들어가고 싶다면, 타입스크립트를 무조건 배워야 한다.타입스크립트는 자바스크립트의 확장판이다.자바스크립트는 유연하다. 그게 장점이지만 또 단점이다. 프로덕트의 규모가 커지고 협업자가 많아질수록 언어의 유연함은 미래 가능성에서 많은 오류를 가져올 수 있다. 이 부분을 해결하는 것이 타입스크립트다.쉽게 생각하면, 자바스크립트에 타입을 넣어.. 2025. 4. 2.
깃 특정 부분 add 하는 방법 지금까지 그냥 git add .으로 모든 코드를 올리고 commit를 남겼다면, "특정 부분"만 add 하는 방법을 알아보자.(하는 방법은 되게 쉽다.)https://infinitecode.tistory.com/64 [Git] 특정 파일 혹은 폴더만 add하기당황하지않고 git Master가 되는 그 날까지. 지금껏 작업한 내용물을 add처리 할 때 뒤따라오는 경로를 .으로 하여 모든 수정내역들을 Staging Area로 이동하기만 했습니다. 그런데 특정 파일 혹은 폴더infinitecode.tistory.com https://70825.gitbook.io/git-tutorial/add-commit-push-deep/add-unit-file-and-folder 특정 파일/폴더만 add 하기 | Git T.. 2025. 4. 2.
한 입으로 먹는 타입스크립트 아실 분은 아시겠지만, 인프런에서 4월 1일 만우절 기념으로 몇 개의 강의가 무려 "1천 원"으로 팔리게 되었다.나도 몇 가지 강의를 샀는데 그 중 하나가 타입스크립트 관련 강의였다.(비트코인도 사고, 자바스크립트도 사고, 노션 데이터베이스도 사고, 도커도 사고.. 아무튼 많이 샀다.)타입스크립트를 좀 더 깊게 배우고 싶었는데, 정말 좋은 기회가 온 거 같다. 배운 부분을 글로 작성하고자 한다. 추후에코드를 깃허브에 푸시할 수 있는데, 그건 따로 링크로 올리도록 하겠다.인프런 강의 링크https://inf.run/EvrS5 한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , 거짓말 같은 이벤트 2탄 🎁 아래의 강의들도 .. 2025. 4. 1.
깃허브 포크 (Fork)하는 방법 깃허브의 오픈 소스에 기여하고 싶거나, 혹은 관련 코드를 가져와서 자신만의 오브젝트를 디벨롭할 때 많이 쓰이는 "Fork".일단 포크의 정의는 다음과 같다. Fork는 다른 사람의 원격 저장소를 복제해서 내 저장소를 따로 만드는 방법이다. 쉽게 말하면, 복제하고 내 저장소로 따로 가져오는 것.자, 그럼 어떻게 하는 것일까? (많이 쉬움)TMI > 그리고 Clone도 있는데 차이는 무엇일까? 다음 글을 참고하자.https://ittrue.tistory.com/90 [Git / Github] 포크 (Fork) 하는 방법 (오픈 소스 프로젝트 복제하기)Fork란? 오픈 소스 프로젝트를 공부하거나 Contributors가 되고 싶을 때, 해당 원격 저장소(Remote Repository)를 자신의 원격 저장소로.. 2025. 4. 1.
토스에서는 "이렇게" 프론트엔드 서비스를 최적화한다. 프론트엔드가 하는 일은 여러 개가 존재하지만, 그중 "성능 최적화"가 있을 것이다.여러 부분의 성능 최적화가 있는데, 토스는 어떤 식으로 최적화를 할까? 그 고민과 답을 다음 영상에서 찾아보자.https://www.youtube.com/watch?v=upUON56UEYo https://toss.tech/article/firesidechat_frontend_9 프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! | EP.9 모닥불프론트엔드 개발자라면 한 번쯤 고민해봤을 성능 최적화! 토스 개발자들이 전하는 최적화의 본질과 실무 노하우를 공개합니다. 초기 로딩부터 런타임 최적화까지, 토스의 박서진, 박건영, 조유toss.tech 2025. 3. 30.
Next.js의 기존 프로젝트에서 ts 추가하는 법 ✅ 1. TypeScript 패키지 설치bash npm install --save-dev typescript @types/react @types/nodetypescript: TypeScript 컴파일러@types/react, @types/node: React와 Node.js의 타입 정의 파일✅ 2. tsconfig.json 자동 생성bash npx tsc --init또는 Next.js가 자동으로 생성하도록 하기:bash touch tsconfig.json npm run dev🚀 npm run dev 실행 시, Next.js가 기본 tsconfig.json 파일을 자동으로 생성해 줌.✅ 3. 파일 확장자 변경프로젝트 내의 파일들을 .js → .ts 또는 .tsx로 변경.컴포넌트 파일 → .tsx서버 액션.. 2025. 3. 28.
[VSCode]한글이 깨져 보이는 파일 인코딩 변경하기 커서 콘솔에 한글이 깨지는 버그가 있어서 찾게 되었다. vs code도 똑같이 통하니 참고할 것https://dewble.tistory.com/entry/change-encoding-of-a-file-that-looks-broken-in-korean [VSCode]한글이 깨져 보이는 파일 인코딩 변경하기파일의 인코딩 문제로 인해 한글이나 특수 문자가 깨져 보일 때가 있습니다. 이런 문제를 해결하기 위해 VSCode를 사용하여 파일의 인코딩을 변경하는 방법을 소개하겠습니다. 1. 원본 파일을 VSCoddewble.tistory.com 2025. 3. 27.
커서 ai로 코딩하기. 바야흐로 대 "AI" 시대. 코딩에 특화된 AI도 정말 많이 나왔다. 그중에서 유명한 "커서"가 있다. 뭐 물론 커서 말고도 다른 AI들이 많다. 챗GPT나 클로드... 코파일럿 등등.. 그러나 이 글에서는 커서 AI에 대해서만 이야기하겠다.공식 홈페이지https://www.cursor.com/ Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com공식 홈페이지 링크는 다음과 같다. 참고하길 바란다.커서란 무엇인가?커서는 vs code 에디터에 삽입되어 "자동"으로 코드를 추천해주며, 에이전시 모드 등으로 실시간으로 내 코드와의 반영을.. 2025. 3. 27.
프론트엔드에서의 사이드 이펙트란? 쉽게 말해서 개발에서 "예측할 수 없는 효과"를 뜻한다. 프론트엔드에서 사이드 이펙트가 발생했다는 것은 당연히 안 좋은 뜻이다.이에 관한 자세한 내용은 다음 글을 참고하라.https://choisuhyeok.tistory.com/52 [side effect] 사이드 이펙트 ?여러 문서를 읽다 보면 side effect라는 단어를 보게 된다. 번역하면 부작용인데 다들 side effect는 피하라고 하는 거 보니 안 좋은 뜻인 거 같아 보이긴 한다. 개발에서 side effect는 의도하지 않은 (choisuhyeok.tistory.comhttps://yooneeee.tistory.com/129 [프론트엔드 기술면접] 순수함수란? 불변성과 사이드 이펙트와 연결순수함수란 무엇인가요? 불변성과 사이드 이펙트와.. 2025. 3. 26.
Next.js의 다이나믹 라우팅 예를 들어, "아이디"같은 고유의 키 값이 필요한 페이지. 동일한 페이지 레이아웃을 틀을 가지지만, 그 안에서의 고유 값은 달라지는 페이지의 라우팅이 존재한다고 생각해 보자.그리고 관련 프로세스에 대해 10개의 라우팅이 필요하다고 여겨보자.그러면 우리는 page.tsx를 10개를 만들어서 컴포넌트를 세팅해줘야 할까? 뭐 물론 10개를 만들어 줄 수는 있다.근데 만약 1천 개라면? 1억 개라면?만일 당신이 유튜브 페이지를 만든다고 쳐보자. 각 영상에 대한 컴포넌트를 당신이 "전부" 만든다고 생각해 보자. 진짜 끔찍하지 않겠는가?이런 라우팅을 커버하기 위해 등장하는 기술이 "다이나믹 라우팅"이다.고유의 id를 이용해서 동일 페이지 레이아웃에서 달라지는 고유 UI를 각각 구현할 수 있다.이에 관한 문서는 다음.. 2025. 3. 22.
Next.js의 데이터 가져오기(Data fetch) 리액트에서 데이터를 가져오는 방법보다 Next.js에서 데이터를 가져오는 방법이 훨씬 편하다.참고로 데이터를 가져오는 것을 "Data Fetch"라고 부른다!공식 문서데이터 패칭에 관한 Next.js의 공식 문서 링크는 다음을 참고하자. (좀 더 딥하게 들어감.)https://nextjs.org/learn/dashboard-app/fetching-data App Router: Fetching Data | Next.jsLearn about the different ways to fetch data in Next.js, and fetch data for your dashboard page using Server Components.nextjs.org또한, 이 부분을 번역한 글도 있다. 다음 글을 참고하자.h.. 2025. 3. 21.
Next.js의 메타데이터(Metadata) 이번에는 Next.js의 메타데이터에 대한 이야기를 할 것이다. 우리가 HTML를 배울 때, 메타데이터를 기입해서 SEO을 최적화하는 부분을 했었다. 리액트에서는 메타데이터를 세팅하는 것이 "매우" 힘들다. (불가능한 건 아니다. 다 방법이 있다. 그게 복잡해서 문제...)Next.js에서는 메타데이터를 지원해 준다. 편하게 메타데이터를 세팅하면 된다.공식 문서공식 문서는 다음과 같다. 참고하자.https://nextjs.org/learn/dashboard-app/adding-metadata App Router: Adding Metadata | Next.jsLearn how to add metadata to your Next.js application.nextjs.orghttps://nextjs.org/.. 2025. 3. 21.
Next.js의 Hydration(하이드레이션)이 무엇일까? Next.js는 초기 HTML 파일을 먼저 전달하고 이후 HTML 요소들을 React 컴포넌트로 변환 및 이벤트리스너를 부착하여 React DOM에서 관리하게 만든다. 이 과정을 Hydration이라고 부르게 된다.이런 렌더링 작동 원리 덕분에, 빠른 웹페이지 로딩이 가능해진다. (왜냐하면 일단은 HTML을 빠르게 웹 페이지에 띄우고, 이후에 자바스크립트를 가져오는 것이기 때문. 리액트는 일단 모든 파일을 다 가져와야 하기 때문에, 초기 로딩 속도가 느리다.)노마드코더 영상https://nomadcoders.co/nextjs-for-beginners/lectures/4696 All Courses – 노마드 코더 Nomad Coders초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!nomadcode.. 2025. 3. 20.
SSR 과 CSR (서버 사이드 렌더링/클라이언트 사이드 렌더링) Next.js나 리액트를 배울 때, 서버 사이드 렌더링이랑 클라이언트 사이드 렌더링 이야기가 나온다. 간단하게 말하면 렌더링에서 차이가 나는 것인데,서버 사이드 렌더링은 "서버"에서 미리 렌더링을 하고 클라이언트로 보내주는 것이고, 클라이언트 사이드 렌더링은 "클라이언트"에서 렌더링을 담당하는 것이다.자세한 내용은 다음 글을 참고하자.https://velog.io/@jhyun_k/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-vs-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-SSR%EA%.. 2025. 3. 20.
Next.js의 Not Found Routes Next.js에는 특별한 파일들이 존재한다.page.tsx 와 layout.tsx가 대표적인 파일이다.근데, 여기에 추가적으로 특별한 파일이 하나 더 있다. 이 부분을 설명하고자 한다.404 not found유저가 잘못된 경로로 이동하면 뜨는 not found를 Next.js에서는 기능으로 넣어두었다.만드는 법은 쉽다.일단 폴더명은 다음 폴더 이름으로 "무조건" 설정해야 한다.app/not-found.tsx이후 본인이 코드를 작성해 주면 된다.(예시코드)import Link from 'next/link' export default function NotFound() { return ( Not Found Could not find requested resource Ret.. 2025. 3. 18.
Vercel로 프로젝트 배포하는 방법 Vercel 이란Vercel은 프론트엔드 개발자를 위한 클라우드 서비스를 제공하고 있는 회사이다. 또한 Next.js를 개발하고 있는 회사이다. Next.js의 프로젝트를 배포할 때 가장 최적화되어 있다. Next.js를 배포하고 싶다면 이 호스팅 서비스를 쓰면 된다.물론 호스팅만 제공하는 것은 아니다. 다양한 서비스도 존재한다.회원가입다음 링크로 들어간 이후, Sign Up를 클릭해서 회원가입을 진행하면 된다.https://vercel.com/home Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, wor.. 2025. 3. 17.
Next.js의 데이터 베이스 세팅 이번에는 데이터 베이스를 이용해 볼 것이다. 그중 Postgres 데이터 베이스를 이용할 것이다. 기본적인 세팅부터 시작해 보자. Postgres 데이터 베이스에 관한 공식 문서는 다음 링크를 참고하자.https://www.postgresql.org/ PostgreSQLThe world's most advanced open source database.www.postgresql.org일단, 데이터 베이스를 세팅하기전에, 깃허브에 프로젝트를 올리고, Vercel과 연동할 것이다. (이 부분에 대한 글은 아예 또 추가로 올리겠다.) 이후 프로젝트와 Postgres 데이터 베이스와 연동할 것이다. 그다음으로 초기값으로 데이터 베이스에 데이터를 넣어둘 것이다. data fetch는 다음 글에서 작성하겠다.깃허브.. 2025. 3. 16.

티스토리툴바