블로그 포스트 제목이나 링크가 너무 길어서 페이지를 어지럽히는 문제가 있으셨던 경험 없으신가요?이럴 때 Tailwind CSS의 overflow-hidden, text-ellipsis, whitespace-nowrap를 사용하면, 긴 텍스트를 한 줄로 깔끔하게 정리하고 "..."으로 표시할 수 있습니다. https://dietisdie.tistory.com/?tasdfyasdfpe=poasdfst&returasdfnURdsfaL=%2Fmasdfanageasdf%2Fposts%2F이렇게 속성을 적용할 경우https://dietisdie.tistory.com/... 이렇게 표시됩니다.1. overflow-hidden내용이 부모 컨테이너의 크기를 넘으면 숨기기 위한 클래스입니다.텍스트가 너무 길어도 화면 밖..

async/await는 자바스크립트에서 비동기 작업(돟시에 여러 일 가능)을 훨씬 쉽게 처리할 수 있게 도와주는 도구입니다. Promise를 사용하지만, 마치 동기적으로 코드를 작성하는 것처럼 보이게 만들어주죠. 이 덕분에 코드가 더 깔끔하고 이해하기 쉬워집니다!async와 awaitasync 함수는 항상 Promise를 반환합니다. 이 함수 내부에서 비동기 처리를 할 수 있어요. => async는 비동기await은 Promise가 완료될 때까지 기다렸다가 그 값을 반환합니다. 단, await은 async 함수 안에서만 사용할 수 있어요. => await는 동기왜 async/await이 필요한가요? 🤯비동기 작업을 처리할 때, 콜백 함수나 복잡한 Promise를 사용할 필요가 없습니다. 예를 들어, 아..

개발을 하다보면, 지금하고 있는 작업이 전부 끝나야만 다음 작업을 시작할 수 있어라는 조건을 줄 때가 한번쯤은! 있을겁니다. 이때 알아야 할 부분이 비동기 작업과 Promise입니다.🧑‍💻 이번 글에서는 프론트엔드 개발자가 비동기 작업을 어떻게 다루고, Promise가 어떻게 사용되는지 알아보겠습니다.비동기 작업이란? 🤔비동기 작업은 '먼저 시작한 작업이 수행되는 도중 중간중간 다른 작업도 동시에 할 수 있.' 라는 개념입니다. 마치 밥을 하면서 설거지하고, 빨래까지 한 번에 처리하는 느낌이라고 할까요? 비동기적인 처리 방식은 웹 브라우저가 동시에 여러 작업을 수행할 수 있도록 합니다.console.log('밥을 시작합니다'); setTimeout(() => { console.log('밥이 다 ..

Next.js를 사용하시는 분들이라면, 공부를 해보신 분들이라면 "use client"로 페이지 렌더링을 어떻게 할지 설정한 경우가 있을 거에요. 아 혹시!! 렌더링을 설정한다는 것도 모르겼나요?? 괜찮습니다. 제가 그랬거든요.오늘은 "use client"!!!!"대체 언제 써야 하고, 왜 중요한 거지?" 에 대해서 알려드릴게요!1. Next.js: 서버에서? 브라우저에서?Next.js는 SSR(서버 사이드 렌더링) 덕분에 서버에서 HTML을 미리 만들어서 쏴줍니다. 덕분에 SEO에도 좋고 초기 로딩도 빠르죠! 근데… 모든 걸 SSR로 해결할 수는 없어요. 🤔 예를 들어, 우리가 버튼을 클릭하거나 스크롤 이벤트를 처리하고 싶다면 브라우저에서 실행해야겠죠?여기서 바로 CSR(클라이언트 사이드 렌더링)이 ..

평소와 같이 next를 설치중에 갑자기 못보던 문구가 생겼다.Would you like to use Turbopack for next dev? ??? 뭐지,, 분명 이런 조건설정은 없었는데. 이 글에 들어온 당신도 나와 비슷한 의문이 들었을거라 생각하여 글을 작성한다.만약 설치 과정에서 "Would you like to use TurboPack for next dev?"라는 질문을 받았다면, 이는 기존의 Webpack을 대체할 차세대 개발 서버로 TurboPack을 사용할 수 있음을 의미한다. (Next.JS는 기본으로 Webpack을 사용함.) 지금부터 TurboPack이 무엇인지, 어떤 장점이 있는지, 그리고 왜 Next.js에서 추천되는지 설명하겠다.🌪️ TurboPack이란?TurboPack은 V..

처음엔 혼자 프로젝트를 해볼까도 생각했다. 솔직히 나름 주변 친구들보다는 디자인 감각이 좀 낫다고 생각했기 떄문이다. 몇 번 “오, 너 디자인 꽤 괜찮다?” 이런 말도 들었으니까... 근데 그건 어디까지나 컴퓨터공학과라는 우리 울타리 안에서의 얘기였지, 사실 주변 친구들 대부분은 디자인에 대해 아예 문외한이다. 그런 칭찬이 의미가 있나 싶었다. 그래서 더 객관적으로 나 자신을 돌아봤다. 막상 디자이너와 협업해서 프로젝트를 해보면, 그 결과물의 퀄리티 차이가 확연히 드러나는 걸 느꼈기 때문이다.특히나 프론트엔드 개발은 단순한 기능 구현만으로는 부족하다는 걸 깨달았다. 요즘 사용자들은 기능만 보고 웹사이트를 사용하지 않기 때문이다. 디자인이 사용자 경험의 절반 이상을 좌우한다고 해도 과언이 아닐 정도로 중요..

1️⃣ GitHub API란?GitHub API는 개발자들이 GitHub의 데이터를 가져와서 앱이나 웹사이트에 활용할 수 있도록 도와주는 서비스입니다.예를 들어, 유저 프로필, 레포지토리 목록, 팔로워 수 같은 데이터를 API를 통해 얻을 수 있어요.저는 이 프로젝트에서 유저 프로필 정보를 조회하는 API를 사용했습니다.API URL 예시:https://api.github.com/users/{username}→ {username} 부분에 조회하고 싶은 GitHub 유저의 이름을 넣으면 됩니다.예시:https://api.github.com/users/kimjusnu2️⃣ GitHub API 연결 준비GitHub API는 기본적으로 비인증 요청도 지원합니다.하지만 비인증 요청은 시간당 60회로 제한되어 있어..

중간고사가 끝났는데, 10월도 끝나가네요. 2024년도 끝나가고요, 25년까지 100일도 안남았다는데,,사담은 각설하고 GitHub Profile Viewer 프로젝트 회고 정리합니다.https://www.notion.so/GitHub-Profile-Viewer-12aeaede9dc58013a601c71d15bfae5d?pvs=4시험이 끝나고 약 3일간의 일정을 잡고 개발을 진행했습니다.💡 GitHub Profile Viewer, 어떤 프로젝트인가요?kimjusnu/github_profile_viewer: GitHub_Profile_Viewer GitHub - kimjusnu/github_profile_viewer: GitHub_Profile_ViewerGitHub_Profile_Viewer. Cont..