본문 바로가기

전체 글48

[css] - clamp() 가변적인 사이즈 지정하기 반응형 웹을 만들기 위해 js뿐만 아니라 css에서 먼저 지원되는 기능이 갈수록 많아지는데, container query나 media query 등이 가장 대표 주자이지 않을까.그래도 그 외에도 간단하게 쓸 수 있는 min, max를 포함해서 좀 더 유연하게 객체를 지정 할 수 있는 css가 있어서 기록하려고 한다. 1. clamp기본적으로 calc처럼 안에 수식을 추가하면 되는데, clamp(최솟값, 가변값, 최대값) 이렇게 작성하면 된다. .box { width: clamp(100px, 200px, 300px) font-size: clmap(13px, 16px, 20px)} 위처럼 객체 사이즈나, 폰트 사이즈, 패딩 등의 다양한 값들을 지정 할 수 있는데, width값은 100px 미만으로 작아.. 2025. 12. 9.
10월 중순에서 11월 중순까지 입사한지 약 한달이 지났다. 레드오션도 이런 레드오션이 없는 불바다를 어떻게 헤엄쳤는지 모르겠지만, 아직 어정쩡하게 탈출한 계약직 인턴이지만! 입사 후 약 일주일 정도는 개발 셋팅을 설정하고, 회사에서 필요한 정보 들을 받거나 컨벤션을 읽어 회사에서의 개발이 어떻게 이루어지고, 어떤 방향을 지향하는지를 분석했다.그러는 동안 간단한 업무를 받았는데 원래 기존 클라이언트에서는 이메일을 이미지로 만들어서 보냈었는데, 이번에 다국어 대응- 번역을 위해 html로 이메일을 보내기로 결정이 난 듯 했다. 그래서 그 이메일을 html로 만드는 일을 진행했다.앞으로 보낼 이메일도 내가 담당해서 할 듯 하다. 그 후 2주 째부터는 회사 홈페이지에 올라갈 회사 포트폴리오를 만들었다. html, css와 js(gsap)을 .. 2025. 11. 17.
[Gemini CLI] - AI로 개발하기 근데 터미널을 곁들인 역시 개발자분들께 가장 핫한 주제를 꺼내자면 AI가 아닐까 싶다. Chat GPT가 처음 나왔을 때만 해도 아는 분들만 쓰곤 했는데 몇달이 지나자마자 대부분의 개발자 분들이 Chat GPT를 사용하셨었다. 그런데 시간이 조금 더 흐르니 이제는 IDE에 AI를 접목하고 IDE에 파일 권한을 넘겨 AI가 수정도 해주고 파일도 생성해주는 시대가 와버렸다. (e.g. 커서 IDE)정말 AI의 시대가 와버렸구나 싶은 찰나 최근 구글에서 CLI로 AI를 호출하여 특정 IDE가 아닌 내가 사용하는 컴퓨터 환경에서 더 편하게 사용할 수 있는 Gemini CLI를 발표했다. 이번 포스팅의 주인공이다. 1. Gemini CLI?Gemini는 구글에서 만든 오픈 소스 AI로 Chat GPT와 비슷하게 이미지 생성, 질문과 .. 2025. 7. 17.
[RN] - 기본 컴포넌트 구조 알아보기 앱 개발은 처음인지라, A to Z부터 공부가 필요했다.그 중에서도 가장 생소했던 부분을 고르라면 웹과는 다른 리액트 네이티브 전용의 앱 컴포넌트가 그랬다.웹과 같은 경우에는 사실 기능 자체로는 div로만 구성해도 구현할 수 있지만, RN 앱에서는 태그 내에서가 아니라면 글이 작성되지 않았다. 또한 웹 표준화처럼 웹 페이지 구조를 명확하게 구분하는 것 같았다. 1. 기본적인 리액트 네이티브 구조와 태그 html에서 가장 기본적으로 많이 쓰이는 태그라고 한다면, 개인적으로는 div일 것 같다. 물론 리액트 네이티브에서도 div같은 개념이 존재한다. 바로 태그인데, 다만 차이점이라면 div와는 달리 없이 글씨가 써지지 않는다. 더하여 스크롤도 되지 않는다.스크롤 기능을 구현 하고 싶다면 태그를 사용하면.. 2025. 7. 3.
[RN] - Expo로 개발 설정하기 이번에 진행하고 있는 프로젝트는 반응형 웹이 아닌 대신에 앱을 따로 만들어서 진행하려고 처음부터 기획했다. 때문에 처음이지만 앱 개발에 도전 해보려고 한다.사실 리액트 네이티브를 쓰기에 앞서 Flutter가 더 각광 받고 있는 것을 알았지만, 리액트를 쓸 줄 알기 때문에 불필요한 러닝 커브를 줄일 수 있을 것 같아 리액트 네이티브로 개발을 결정했다. 역시 처음 공부 할 땐 공식문서를 확인 하는 것이 좋은 것 같다. 리액트 네이티브는 Expo라는 프레임워크를 같이 사용하는 것을 추천하고 있었다. 현재 내 개발 상황을 설명하자면 Mac OS에 IPhone을 사용 할 예정이다.0. Expo란?Expo 공식문서에 들어가보니 스스로를 이렇게 설명하고 있었다.파일 기반 라우팅, 네이티브 모듈의 표준 라이브러리 등.. 2025. 6. 5.
[BueaFit] - Auth 인증 관리 3 저번 포스팅에서는 쿠키 보안 정책 때문에 쿠키를 사용 할 수 없어서 세션 스토리지를 사용했었다.하지만 이번에 SSL(HTTPS)이 추가 되면서 요청과 도메인이 같은 url이 아니어도 쿠키를 전달 할 수 있게 되어 다시 쿠키로 인증 관리를 하는 방법으로 전환했다. const login = async () => { try{ const response = await fetch(`${process.env.NEXT_PUBLIC_BUEAFIT_API}/auth/login`, { method: "POST", credentials: "include", headers: { "Content-Type": "applicatio.. 2025. 6. 1.

티스토리툴바