분류 전체보기(6)
-
[ML] - 머신러닝 배우기 전 간단 배경 지식
머신 러닝 공부에 앞서 배경으로 알고 있으면 좋을 개념들을 정리한다 1️⃣ML에서 컴퓨터가 스스로 학습한다의 의미컴퓨터가 문제를 잘 풀 수 있게 스스로 개선해 나가는 과정규칙을 반복해서 시도하고, 오류를 줄이며, 개선해나가는 것2️⃣사람이 직접 규칙을 짜는 방식 vs 머신러닝 방식🧠 사람 방식 (전통적인 프로그래밍) 사람이 직접 if/else 같은 규칙을 만들고, 로직을 코드로 작성이 규칙은 보통 경험이나 직관을 바탕if (email.title.includes("광고")) { return "스팸";} 🤖 머신러닝 방식사람이 직접 규칙을 만들지 않고, 데이터를 바탕으로 알고리즘이 규칙을 자동으로 학습답을 알려주는 대신, 예시를 많이 보여주고 스스로 패턴을 찾게 만드는 것수학적 모델/알고리즘(예:..
2025.03.25 -
[Insight] - AI와 Vibe Coding (feat. 프론트엔드 개발자)
최근에 항해 플러스 측에서 AI 웨비나를 진행한다는 연락을 받고 인사이트를 얻고자 지원하여 참여했다.여러 부분에 대해 스스로 정리가 되었다. 앞으로 커리어에 있어 터닝포인트가 되지 않을까 싶다.나의 생각과 느끼는 압박감은 다수의 주니어 개발자라면 느낄 것으로 판단된다.내 생각을 알리고 앞으로 동업자로서 같이 잘 성장할 수 있으면 좋겠다는 생각으로 글을 써보려한다. 🤗About me~ Now2년차 비전공자 프론트엔드 개발자회사가 원하는 것을 맞추어 개발하는 것이 최선이라 생각하는 사람AI를 현업에 사용하는 것을 회의적으로 받아들이던 사람From now개발자 경험(DX, Developer Experience) 향상의 가치를 쫓는 사람기본에 충실하기Vibe Coding 🧐내가 ChatGPT에 대해 회의적이..
2025.03.20 -
[FE] Trouble Shooting - CSS Animation vs Transition
💥문제 상황keyframes animation으로 SideBar 구현을 시도했더니 아래와 같이 뚝뚝 끊기며 동작했다 위 GIF의 코드는 아래와 같다const narrowToWide = keyframes` from { width: 10% } to { width: 20% }`;const wideToNarrow = keyframes` from { width: 20% } to { width: 10% }`;const animation = Object.freeze({ narrowToWide: css` ${narrowToWide} 1s ease-in forwards /** 👉🏻forwards 속성을 부여하면 keyframes의..
2025.03.04 -
[FE] Trouble Shooting - Next.js / FOUC, 화면 깜빡임 장애 해결
FOUC, Flash of Unstyled ContentSSR 시 스타일이 처음에 적용되지 않다가 나중에 적용되어 깜빡이는 현상 💥문제 상황좌측 상단에 보면 스타일이 뒤늦게 적용되어 UI가 깨지는 모습을 볼 수 있다Styled-Components로 스타일을 진행하였다 ❓원인 - Next.js 렌더링 방식 : SSR (Server Side Rendering) 1. HTML 렌더링 => Client 전달2. JS 렌더링 => Client 전달 👉🏻 Styled-Components : CSS-in-JS→ HTML 렌더링 후, Styled-Components의 JS 파일 적용 간 타이밍 이슈 발생 ❗해결 방법 - 서버에서 스타일을 미리 렌더링 : Next.js 공식 문서1️⃣Styled-Component..
2025.02.27 -
[CICD] Next.js / Turborepo / Vercel - Monorepo 환경 구축
프로젝트 선정 배경개인 블로그를 만들고 싶다꾸준히 가지고 놀 개인 놀이터를 만들고 싶다풀스택 개발을 해보고 싶다Monorepo 선정 이유꾸준히 가지고 놀기에 적합한 환경이라 생각다수의 기업들이 2023년 기준으로 monorepo 적용을 하는 것을 본 경험개발 환경 구축을 직접 해보는 경험에 대한 욕심Vercel vs Github PagesVercel이 Next.js와 같은 동적 프레임워크 호환성이 좋다Turborepo와 같은 Monorepo 환경에서의 빠른 배포 제공항목GitHub PagesVercel주요 용도정적 사이트 배포 (HTML, CSS, JS)정적 및 동적 웹 애플리케이션 배포지원하는 프로젝트정적 파일 (HTML, CSS, JS), JekyllNext.js, React, Vue, Svelte ..
2025.02.22 -
[FE] Next.js - export default vs export
Next.js로 작업 시 한 번쯤 왜?라는 의문이 생기는 부분이라 생각하여 정리하기로 했다. 오늘 주제와 관련하여 에피소드 하나가 있어 간략히 소개하고 시작하려고 한다.※ 하기 에피소드는 Next.js 없이 React만 사용하여 개발할 때의 이야기이다.작업하실 때 export default 쓰지 마세요. - Senior 개발자님 이유는 명확했다.나의 코드에서 export와 export default의 정확한 차이점을 모르고 쓰는 것이 보임1의 이유에 따라 export default를 사용함으로써 생길 수 있는 네이밍 오류 예방하기 위함첫 회사에서 받은 피드백은 꽤 큰 영향을 끼쳐 export default 혐오(?)증 까지 생겼었다.그런데.Next를 공부하니까 export default를 안쓰면 오류..
2025.02.11