미누에요

웹 프론트엔드 개발자로 수많은 프로젝트를 진행하다 보면 컴포넌트의 사이즈를 정할 때 px을 사용하지 말라고 많이 들었을 것이다. px은 정적인 단위로, 데스크톱, 태블릿, 모바일까지 다양한 기기로 웹페이지를 접속하는 현 시점에서 불리하기 때문이다.그와 동시에, rem 혹은 em을 사용하라는 말도 들어봤을거라 생각한다. remrem은 root 폰트 사이즈를 1rem으로 계산하여 사용하는 방식이다. 부모 폰트 사이즈를 기준으로 하는 em과는 다르게, 가장 상위에 존재하는 root의 폰트 사이즈를 기준으로 하기에 보다 일관적인 UI를 나타낼 수 있다. 하지만 나는 개발을 하면서 왜 rem이 반응형인지 의문이 들기 시작했다.root 의 폰트 사이즈를 기준으로 철저히 계산된 정적인 값이 아닌가? 하지만 언제까지나..

비교적 최근 AI 시장을 떠들썩하게 했던 그 DeepSeek.  AI 의 세계는 너무 깊고 심오하기에 컴퓨터공학전공의 기준에서, 적당히 호기심을 가지고 있는 입장에서 가볍게 파고들어 보았다. DeekSeek가 무엇인가DeekSeek는 중국 헤지펀드 회사 환팡퀀트 소속 인공지능 연구 기업의 이름이다.기업의 이름이자, 해당 기업에서 만든 AI 모델의 이름이기도 하다. 현재 시중에서 많이 거론되는 모델은 DeekSeek V3, DeepSeek R1이 있다.  신생 기업인가 ? 왜 이전까지는 들어보지 못했던거지 ?2025년 1월, DeekSeek R1 모델이 출시되고, 사람들이 DeekSeek라는 중국의 기업에 대해 관심을 가지기 시작했다. 하지만 그 전부터 DeepSeek는 꾸준히 모델 연구를 이어오고 있었다..

최근 프로젝트를 하던 중 다른 팀원의 코드에 interface를 사용하여 props를 받는 부분을 보았다. typescript를 아직 많이 사용해보지 않아 기본적으로 type을 사용하고 있었는데, 이 코드를 보고 interface와 type은 각각 어떨 때 사용하는거지 ? 라는 의문이 들어 찾아보게 되었다.    type 을 사용하는 경우단순히 원시 값, 튜플(tuple) 등을 선언할 때!type Name = string; type은 일반적으로 모든 선언에 사용할 수 있다.선언해둔 것을 확장할 수 없다.type Student = { name:string; stdNo:string;};type Student = { age: number;}; // Error 또한 type으로 선언한 것들은 선언적 확장(..

프론트엔드 개발을 하다보면 처음에 배웠던 JavaScript 외에도 TypeScript라는 것을 사용하게 된다.이름만 들었을 때, type이 추가된건가 ? 싶다. 이에 대해서 차근차근 정리해보자. TypeScriptTypeScript는 JavaScript의 상위 집합이다. 즉 쉽게 말해서, JavaScript에서 type을 추가하여 확장한 언어라고 생각하면 좋다. JavaScript에다 타입 관련 기능을 추가한 언어이므로, 기존 JavaScript에서 사용하던 문법들을 100% 사용할 수 있다.  TypeScript 공식 웹 페이지에서는 TypeScript의 강점을 위처럼 서술하고 있다.JavaScript에 추가적인 문법을 통해 타입 안정성을 확보하여 에러를 빠르게 잡을 수 있다.TypeScript는 J..

작년 여름방학에  LG AIMERS라는 아주 좋은 프로그램을 알게 되었고, 5기를 진행하며 내가 많이 부족하다는 걸 깨달았었다.그리고 그 후로 머신러닝/딥러닝 관련 스터디를 진행하며 내가 잘 알지 못하는 부분에 대한 학습을 진행하였고, 올해 초에 LG AIMERS 6기를 진행하게 되었다.   처음에 수강하는 강의의 내용은 5기와 완벽하게 동일해서, 빠르게 넘어갔다.그리고 시작된 온라인 해커톤....이번에는 elice가 아닌, dacon에서 진행되었다! 나는 처음에 엄청난 삽질을 했다.....코드에서 자꾸 train데이터에서 선택한 Feature가 test 데이터에 존재하지 않아 학습시킨 모델에 test 데이터를 넣지 못하고 있다는 것. 처음에 RandomForest 점수가 0.60, XGboost가 0...

이번에 해커톤을 진행하면서 "공유하기" 버튼을 눌렀을 때, 모바일에서 공유할 어플리케이션을 선택하는 부분이 뜨는 걸 구현하게 되었다.  아이폰 유저들은 위 사진을 많이 봤을 것이다.나는 웹 페이지에서 "공유하기" 와 같은 버튼을 누르면 위 공유 창을 띄워 공유할 곳을 선택하고 싶었다. 그러다 이 기능은 Web Share API를 사용하여 개발하게 된다는 것을 알게 되었다. Web Share APIMDN에서 만든 공유 api이다.텍스트, 링크, 파일 및 기타 콘텐츠를 운영체제의 공유 매커니즘을 활용해 공유할 수 있도록 하는  api Web Share API에서는 두 가지 메서드를 기본적으로 제공한다.navigator.canShare()navigator.share() navigator.canShare()해당..

우리는 링크를 카카오톡으로 공유하면 링크와 함께 미리보기 창이 뜨는 것을 많이 보았다.이렇게 공유할 때 정보를 함께 띄우려면, OG태그라는 기술을 사용해야 한다.  OG태그(Open Graph Tag)웹페이지가 소셜 미디어에서 공유될 때 어떻게 보일지를 정의하는 메타 데이터.소셜 미디어에서는 이 태그 정보를 참조하여 미리보기를 구성하게 된다.  OG 태그가 적용된 예시 페이지 이 페이지는 소셜 미디어에서 공유될 때 OG 태그를 활용하여 미리보기 정보를 제공합니다. OG태그는 주로 HTML 파일의 내부에 태그로 정의한다.  OG태그의 주요 구성 요소로는 아래와 같다.og:title - 페이지의 제목og:description - 페이지의 설명og:image - 대표 이미지의 URLog:url - 페이..

JavaScript의 ES6에서는 이전과는 많이 다른 형태의 함수 선언 방법이 제시되었다.그 방법은 바로 화살표 함수 방법이다.   화살표 함수(Arrow Function)화살표 함수 표현식을 사용하여 함수를 나타내는 방법은 아래와 같다.const 함수이름 = (인자)=>{ 함수 내용}; 딱 봐도 함수가 비교적 간단해 보이지 않는가 ? 보는 것처럼, 화살표 함수는 일반 함수에 비해 생략된 기능을 가진다. 화살표 함수는 this를 가지지 않는다.화살표 함수는 arguments를 가지지 않는다.화살표 함수는 생성자 함수로 사용할 수 없다. 화살표 함수는 this를 가지지 않는다. 기본적인 함수 선언에서 this는 동적으로 바인딩된다.객체의 메서드에서 this일반 함수 this생성자 함수에서 this객체..

나는 지금 동아리 홍보 차 간단한 테스트를 통한 이벤트성 웹앱을 만들고 있다.기능 상으로 구현이 마무리되었고, 3월에 있을 교내 동아리 박람회 이전에 태블릿 사이즈로 홍보를 진행하고자 반응형 작업이 필요하게 되었다. 디자이너 팀에게 768px 사이즈로 반응형 디자인을 요청드렸고, 반응형 디자인이 마무리된지는 꽤 지났지만 개인적인 일정으로 이제야 반응형 작업을 시작하게 되었다.  먼저, TailwindCSS에서 반응형 다자인은 아래와 같이 기본적으로 제공된다.   중단점      최소 넓이   CSS중단점최소 넓이CSSsm640px@media (min-width: 640px){ ... }md768px@media (min-width: 768px){ ... }lg1024px@media (min-width: 1..

나는 웹 프론트엔드 개발을 공부하며 현재 React를 메인 기술 스택으로 공부하고 있다.하지만 8월부터 얼떨결에 앱 개발을 하게되었는데............ 연구실 선배들이 하다가 놔두고 간 프로젝트를 가지고 기능을 추가하라는 교수님의 명령이었다............... Flutter, 강력한 개발툴이라는 것은 알고있었지만 한참 Google이 자사 프로젝트들을 많이 폐기처분하던 시점이었다.그래서 나도 Flutter를 공부하다가도 이게 사라져버리면 어떡하지? 라는 마음을 가지고 공부를 했던 거 같다.   우선 개발하게 된 플랫폼은 "Chrip-aid"로, 보육원 기부 플랫폼이다.자세한 설명은 뒤로하고, 마주했던 문제와 에러에 대해서 설명하겠다. 우선, 기능을 추가하면서 개발하며 "관리자 페이지"를 만들게..