본문 바로가기
728x90
반응형

분류 전체보기362

한글 서브셋 폰트 웹 페이지를 만들 때 폰트는 빠질 수 없는 존재다! 모든 글씨가 브라우저 기본 폰트나 희한한 궁서체로 되어있다면... 바로 나가기 버튼행. 마음에 드는 (무료)폰트를 다운로드한 후, CSS를 통해 해당 폰트를 적용시켜주면 된다. 그런데 문제... 폰트의 크기가 무지막지하게 크다! 2021.05.12 - [Deploy] - Lighthouse로 performance 측정하기 Lighthouse로 performance 측정하기 우리의 친구 개발자 도구(F12)는 개발 시 유용한 도구들을 제공한다. (console이라던지... console이라던지...) 그중 페이지 performance의 전반적 결과를 측정할 수 있는 Lighthouse를 사용해보자! 크롬 개발 23life.tistory.com 해당 글에 .. 2021. 6. 15.
알쏭달쏭 현대사회 매일 집에 오면 피곤해서 그런지 별 것도 안 했는데 벌써 잘 시간이란 생각이 종종 들었다. 그런데 몇 주 전 운동을 시작한 후부터 퇴근하고 집에서 보내는 시간이 꽤나 길게 느껴졌다. 아무 일도 없을 때는 '언젠가 하지 뭐'라고 생각하면서 결국에는 뎅굴뎅굴 거리다 잠자리에 들었는데, 9시부터 10시는 운동가기! 를 정해두고 나니 그 이외의 시간을 (강제로) 더 알차게 보내게 됐달까나. 세상살이 아이러니한 건 쉬는 시간이 무한정 주어졌을 때보다 약간의 제약 상황 속에서 쉴 때가 쉼의 효율(표현이 이상하다 쉬는 것의 효율? 아무튼)이 더 커진다는 것. 오늘은 휴대폰 보는 것도 질려 책을 봤는데 매일 코드 아니면 인도 개발자가 쓴 걸 번역기로 돌린 글만 읽다가 하나의 이야기 를 읽으니 오랜만에 머리가 팽팽 도는.. 2021. 6. 8.
알고리 즘 지난 여름방학과 겨울방학 때 알고리즘 문제를 풀었다. 그런데 그 때는 대체 왜 이런 걸 하는가!란 생각이 많았다(코딩 테스트란게 왜 있는거지?!) 그냥 퀴즈쇼를 푸는 듯한 느낌이었달까나. 근데 요 며칠 일을 하며 느낀 건 믓찐 개발자는 단순히 여러 기술들을 다룰 수 있느냐 뿐만 아니라... 거창하게 말하면 문제 해결 능력이고 소박하게 말하면 알고리즘 잘 푸는 힘을 길러야 한단 생각이 들었다. 어떻게 하면! 원하는 목표를! 효율적으로! 구현할 것인가! === 알고리즘 문제 였다는 걸 몸소 느끼며 하루하루 코드를 작성하는 중. 2021. 6. 3.
patch-package 사용하기 역시 groomer 페이지를 만들다 발생한 issue. 메인 페이지의 Carousel 기능(흔히 말하는 슬라이드! 영어로는 Carousel로 표현한다)을 위해... Swiper라는 라이브러리를 사용했다. https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 다양한 효과를 적용할 수 있고, 커스텀도 손쉬운데... 문제는 기본 색상이나 위치를 디자인에 맞게 수정하는 것! 개발 환경에서는 node_modules에서 해당 스타일 파일을 찾아 수.. 2021. 5. 24.
API 활용하기 API란 뭘까? 윽. 보기만 해도 정신이 혼미해진다. 간단히 이해하자면... 우리가 만든 웹 서비스에 필요한 기능들 중 널리 쓰이는 녀석들을 쉽게 가져다 쓸 수록 한 것! 오늘은 그 중에서도 카카오 맵과 카카오 소셜 로그인을 이용할 예정. 1. 카카오 디벨로퍼 가입 및 애플리케이션 만들기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 계정이 있다면 누구나 Kakao Developer가 될 수 있다. 만세! 별 다른 회원가입 없이 존재하는 카카오 계정으로 로그인 후 약관에 동의하면..... 2021. 5. 23.
CRA에 Next.js 적용하기 3 - Next.js 기본 구조 - AWS Amplify 배포 관련 이슈 1. Artifact directory doesn't exist: build build란 디렉터리를 찾지 못해 발생하는 에러. next build를 실행하면 .next라는 파일에 서버/클라이언트에게 제공될 build 파일이 생성되는데... → Amplify 측에서 build 디렉터리가 없다고 판단해버린다. - 해결책 yarn build시 .next란 폴더 말고 build라는 폴더에 build 하면 해결. next.config.js 폴더에 다음을 추가해 custom할 수 있다. 2. Non-Zero Exit Code detected 에러 코드 자체는 build 파일 내 강제 exit 코드가 있어 build가 중지되어 발생한 것. but .. 2021. 5. 14.
CRA에 Next.js 적용하기 2 2021.05.13 - [Frontend/React] - CRA에 Next.js 적용하기 1 CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제 23life.tistory.com Next.js가 어찌 돌아가는지 대...충이나마 감을 잡았으니! CRA으로 만든 기존 앱에 이를 적용시켜보자. 1. 기본 환경 설정 이전에 썼던 글을 참고! → 설치 및 package.json 수정, pages폴더 생성까지 진행하면 된다. 2. 구조 변경하기 한번 더 짚고 넘어가자면... Next.js는 기본적으로 최상위 루트의 pages.. 2021. 5. 13.
CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제, 이미 프로젝트는 CRA을 바탕으로 개발이 끝난 상황! 따라서 어쩔 수 없이 기존에 작성된 코드에 Next.js를 입혀야 한다. 으악. CRA에 Next.js 적용하기 1. 필요 모듈 설치 일반적으로는 create next-app을 통해 기초 세팅을 자동으로 진행한다. 하지만 이미 CRA으로 애플리케이션을 제작한 상태이므로... 손수 설치해주자. react, react-dom, next를 add 해주면 된다. 2. 기본 환경 설정 Next.js는 pages라는 폴더를 필요로 한다! → 요 pages.. 2021. 5. 13.
해보기 전에 알 수 있다면 안다는 건 뭘까. 조언을 듣거나, 책을 읽거나, 경험담을 접하면 마치 그것에 대해 아는 듯한 기분이 든다. 하지만 사실 우리가 무엇인가에 대해 정말로 아는 순간은... 실제로 이를 경험하고 난 뒤 일 수밖에 없다. 막연하게 머릿속을 떠다니던 개념들이, 추상적인 형태로만 존재하던 단어들이, 그저 그렇구나 하고 넘어갔던 상황들이, 직접 경험한 뒤에야 이해되고 만다. 왜 이런 얘기를 꺼냈냐면... 개발을 하다보면 이것저것 모르는 걸 여쭤볼 때가 많은데 설명을 들을 때면 가끔(사실은 종종) 당최 무슨 소리를 하시는 건가.... 할 때가 있다. 흩어지는 정신을 붙잡고 주워들은 단서들로 이것저것 하다 보면 '얼레? 얘기해주신 거랑 다른 방향으로 가는 것 같은데..??' 하는 순간이 찾아온다. 이 때는 뭔가 스스로가.. 2021. 5. 12.
728x90
반응형

티스토리툴바