create react app 지원 중단 create react app이 지원 중단에 따라서 새로운 프로젝트의 빌딩 방법을 다르게 해야 한다. 기존까지는 npx create-react-app my-appcd my-appnpm start이 명령어로 만들게 되었다. 뒤에 my-app이 자신의 프로젝트 이름이 된다. (대문자 금지)(관련 리액트 글)https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html 새로운 React 앱 만들기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org이제 이런 방법을 리액트에서는 권장하지 않는다. 다른 방법으로 빌딩해야 한다.그럼 어떻게 해야 하는가?하는 방법은 여러 개가 있다.. 2025. 3. 7. 카카오톡에 챗봇 연결하기 카카오톡에 챗봇을 넣어서 cs를 자동화하거나 질문을 받아보는 법을 배워보자.(실제 카카오 문서)https://kakaobusiness.gitbook.io/main/tool/chatbot/tutorial/make_chatbot/tutorial_1 튜토리얼 1단계 | kakao business 비즈니스 가이드 kakaobusiness.gitbook.io(참고 영상)https://www.youtube.com/watch?v=8ctJMO9KyDI챗봇 시작하기https://business.kakao.com/info/chatbot/ 카카오비즈니스비즈니스, 톡처럼 쉬워지다.business.kakao.com 2025. 3. 7. 프론트엔드 개발자가 고려해야 할 접근성 사항 프론트 작업을 할 때, 여러 가지를 고려해야 하지만, 그중 "접근성" 부분을 신경 쓰는 것은 쉽지 않다. 그러나 몇 가지 요소만 제대로 파악하고 있으면 좀 더 쉽게 접근성을 보완할 수 있을 것이다.> 글https://velog.io/@eunbinn/accessibility-essentials-every-front-end-developer-should-know [번역] 모든 프런트엔드 개발자가 알아야 할 접근성 필수 사항기능 구현에 집중하다 보면, 접근성을 간과하는 경우가 종종 발생합니다. 이러한 상황이 반복되면, 어느새 접근성은 부담으로 다가오곤 합니다. 그러나 몇 가지 기본 원칙을 지키기만 해도 접근velog.io(출처: @eunbinn) 2025. 2. 28. 리액트 로딩창 구현 리액트에서 로딩창을 구현하는 방법은 여러 가지가 존재하지만, 그중 React spinners 라이브러리를 이용하는 방법을 작성하고자 한다.(참고로 npm으로 깔 때 오타내서 react-spinner라고 쓰면 리액트는 이해를 못 한다. 이 부분 조심하자.)React spinner 설치하기npm install react-spinners사용법 - Spinner 모양 선택하기 https://www.davidhu.io/react-spinners/ React Spinners www.davidhu.io 이 사이트에 들어가서 여러 가지 스피너 중 마음에 드는 스피너를 선택하면 된다.사이트 내에서 커스텀할 수도 있고 리액트 코드에서 확인하면서 커스텀할 수 있다.색깔 같은 것은 사이트 내에서 바로 확인 가능하다.(예시코드.. 2025. 2. 25. 리액트 emotion 사용법 Emotion 은 JS로 css 스타일을 작성하도록 설계된 라이브러리다.Emotion은 프레임워크에 구애받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다. 특히 이 라이브러리를 토스에서 쓰고 있다.https://tosspayments-dev.oopy.io/cc9367e4-4ff6-4241-8189-9f3cf250f5d2#162ece7b-e09f-4711-92a1-7100aa27aeb6 토스 프론트엔드 챕터의 모든 것토스 프론트엔드 챕터를 소개합니다! 이 문서에는 프론트엔드 챕터에 대해서 궁금하신 분들께서 꼭 알았으면 하는 정보들이 담겨 있습니다.tosspayments-dev.oopy.io특히나 css의 props를 이용한 방법을 즐겨 쓴다고 한다.https://emotion.sh/docs/.. 2025. 2. 23. 리액트 zustand란? 이번 글은 리액트의 상태 관리 라이브러리 중 하나인 zustand를 알아보도록 하겠다.리액트 zustand란?프론트엔드에서 상태는 렌더 하는 데 있어서 영향을 미칠 수 있는 값을 뜻한다. 상태를 어떻게 관리하느냐에 따라 웹을 렌더 하는데 영향을 미칠 수 있다. 즉, 프론트엔드 개발자에게 상태관리는 중요한 임무가 되었다.리액트는 독립적인 컴포넌트 단위로 구성되어 있다. useState hook을 사용하여 하나의 컴포넌트에서 상태를 관리하고 props를 통해 부모-자식 간에 상태를 전파할 수 있다.상태가 시작된 지점과 어떤 컴포넌트를 거쳐가는지, 모든 흐름을 이해하고 기억한다면 useState와 props를 사용하는데 무리가 없다. 하지만 프로젝트의 규모가 커짐에 따라 관리해야 할 상태의 개수는 늘어날 것이.. 2025. 2. 21. 리액트 쿼리란? 이번 글은 "리액트 쿼리"에 대한 전반적인 내용을 담은 글이다. 리액트 쿼리가 무엇인지 시작해서, 코드는 어떻게 작성하는지? 언제 사용하는지 등등.. 이야기할 것이다.제대로 시작하기 전에, 공식 문서가 궁금하다면?공식 문서https://tanstack.com/query/latest/docs/framework/react/examples/basic React TanStack Query Basic Example | TanStack Query DocsAn example showing how to implement Basic in React using TanStack Query.tanstack.com위 링크 들어가면 리액트 쿼리의 베이직한 예시를 확인할 수 있다. (문서도 있으니 확인하자.)리액트 쿼리란?공식문서.. 2025. 2. 20. 깃허브 ReadMe.md에 이미지 올리는 법 깃허브 이슈를 통해 이미지를 올리는 방법https://aiday.tistory.com/83 [Github] 깃허브 README.md에 이미지 올리기 (feat.Issue)README.md readme.md 파일은 깃허브에서 프로젝트에 대한 소개와 설명을 제공하기 위한 파일입니다. 깃허브 프로젝트의 루트 디렉터리에 위치하며, 프로젝트에 대한 간략한 설명, 사용법, 설치 절차,aiday.tistory.com 2025. 2. 7. 깃허브 라이센스 추가하는 방법 내 삼식아 프로젝트에 MIT 라이선스를 추가했다.그 방법은?https://blog.naver.com/dhdh6190/221145291899 github repository에 라이센스 추가하는 법이번에도 매번 까먹어서 또 검색을 하고 있는 내 모습을 발견하고 글을 쓰게 되었다. 라이센스 추가하는 법...blog.naver.com위 글을 참고하자.+ 추가 글라이센스 같은 건 코드 push를 하고 난 뒤에 추가하는 것을 추천한다.라이선스 추가 이후다시 vs code로 가서, git pull --rebase origin maingit push origin main를 넣어주면 에러가 안 뜬다. (master이면 master로 바꿔주면 된다.) 2025. 2. 7. 리액트 Swiper (슬라이더) 적용 리액트 slick도 있긴 한데, DOM 요소의 부분에서 문제가 생길 수 있고.Swiper는 리액트에 좀 더 친숙해서 이 라이브러리를 채택하였다.관련 글을 링크로 달아두겠다.https://velog.io/@ooo3289/React-Swiper-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-Navigation-Pagination React Swiper 적용하기 (Navigation, Pagination)Swiper 공식 문서 참고퍼블리셔일 때 슬라이드 써야하는 일이 있으면 무조건 Swiper를 사용했었다.React 환경에서는 처음 쓰는거라 기대 만빵확실히 html, javaScript위에서 쓰는 것 보다 더 쉬웠음!!일단velog.io사람마다 라이브러리 선택은 당연히 다르겠지만.내가 써본.. 2025. 1. 27. README.md 미리 보는 방법 일단 밑 영상에서 알게 되었다.https://youtu.be/-KOtsS20TsY?si=ytfRUdL0KEulnDu5리드미 쓸 때 미리보고 싶으면 마켓 플레이스에 Markdown Preview 깔면 된다. 사진 참고하자.단축키는 ctrl + k + v가 될 거다. (윈도우 기준) 맥북이면 cmd + k + v일거다. 아마 단축키를 바꿀 수는 있는데, 그냥 그대로 쓰자. (아님 말고) 2025. 1. 24. 메뉴 밑줄 슬라이딩 애니메이션 헤더에 주는 메뉴 밑줄 슬라이딩 애니메이션을 만드는 법을 알고 싶다면 밑의 링크를 참고하자.https://youtu.be/O54PjSD9BUg?si=_SLLCsgV66BhdfYHhttps://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/SyujQp2L(핵심은 결국 자바스크립트 문법이다.)리액트에서는 자바스크립트 파일을 만든 이후, 함수로 묶어서 함수를 부르는 방향으로 진행해도 괜찮을 듯하다.아니면 jsx 파일 안에다가 바로 구현하는 방법도 있다. 이러면 useState를 써야 할 것. 2025. 1. 14. 파파고 음성을 mp3로 바꾸기 TTS는 쓰고 싶고... 근데 무료에다 얼추 쓸만한 것이 없을까... 싶었는데. 사실 찾자면 엄청나게 많다.(해외에는 일레븐렙스가 유명하고, 국내에는 타입캐스트가 유명하다. 브류도 있기는 한데... 타입캐스트가 브류보다는 훨씬 좋다. 비싸서 그렇지)찾다보니, "파파고"에 있는 여성 목소리 TTS가 눈에 들어왔다.보면 내가 번역하고자 하는 한국말도 들을 수가 있다. 당연히 영어도 들을 수 있다. (일본어도 되고, 중국어도 된다. 다른 언어도 물론 가능하다.)이 부분에 착안, 파파고를 쓰는 것은 무료이며, 사용 시간에 제한이 없다. 즉 "무제한"이라는 점.그러면 TTS화 하려면 어떻게 해야 할까? 이 부분에 대한 정답은 밑의 티스토리 글을 참고하자.https://22ww.tistory.com/290 텍스트로.. 2025. 1. 8. 브라우저의 작동 원리 렌더링이나 DOM, 브라우저의 기본 구조 등등에 관한 내용이다. (전반적인 브라우저 작동 원리)https://youtu.be/Mqh13dNI8jc?si=C6H9qRgs5lTPhhDvhttps://yozm.wishket.com/magazine/detail/1338/ 프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 | 요즘IT프론트엔드 개발자에게 있어 브라우저는 거의 모든 것과도 같습니다. 하지만 그렇다고 해서 프론트엔드 개발자가 브라우저의 모든 원리에 대해 잘 알고 있는 것은 아니지만, 복잡한 웹 어플리yozm.wishket.com 2024. 12. 27. 모달 창 구현하는 방법 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 현재 윈도우의 레이어를 쌓아서 보여주는 형식의 팝업을 의미한다. (웹과 앱에 꽤 많이 쓰인다.) - 팝업 창 구현하는 것도 추후에 작성하겠다.자바스크립트를 기반으로 웹/앱 Dom을 조작하거나 직접 CSS style을 수정하는 방식이다.즉, css의 display 상태를 자바스크립트의 DOM요소로 제어하는 것.디테일한 부분은 다음 글들을 참고하자.https://velog.io/@seungmimi/javascript%EB%AA%A8%EB%8B%AC-%ED%8C%9D%EC%97%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [javascript]모달 팝업 구현하기🧐 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 .. 2024. 12. 23. Netlify Page Not Found 오류 해결 리액트 프로젝트를 진행하고, 백엔드를 연결하는 것까지는 오케이. 문제는 이걸 Netlify에 올렸는데, Page Not Found가 떠버린다. 이걸 해결하는 방법을 작성하고자 한다.방법은 쉽다.public 폴더에 redirects 추가public 폴더에 _redirects 라는 이름의 파일을 만들고 아래와 같은 내용을 작성해 주면 된다.public/_redirects/* /index.html 200즉, 리액트의 public에 _redirects 를 세팅하는 것이 정론이다.https://doooodle932.tistory.com/160 [Netlify] 페이지 새로고침 시 Page Not Found 오류 해결netlify로 올려놓았던 프로젝트에서 페이지 새로고침 시 Page Not Found가 뜨는 오.. 2024. 12. 6. 리액트 - 유튜브 영상 넣기 리액트에 mp4로 영상을 넣는 방법도 있지만, 좀 더 편하게 유튜브 영상을 넣는 방법이 있다.(mp4로 하려면 mp4를 다운로드하고, 라이브러리도 깔아줘야 하고... 아무튼 복잡함)1. 라이브러리 깔기$ npm install react-youtube일단 npm 라이브러리를 깐다. 코드는 위와 같다.2. import 설정import YouTube from 'react-youtube';jsx 파일에 import문을 작성한다. 코드는 위와 같다.3. 예시 코드 >.jsx.youtube { display: flex; justify-content: center; align-items: center; margin: 0 auto; padding-top: 20px; padding-bottom: 20px;}리.. 2024. 11. 27. 카카오 단풍톤 3기를 마무리하며... 예선 해커톤이 마무리가 되었다. 해커톤을 마무리하게 되면 가장 먼저 해야 할 일은 바로 "문서화"라고 생각한다.해커톤을 하면서 내가 느낀 점, 깨달은 점 등을 적어보도록 하겠다. 해커톤에서 가장 중요한 것. 내가 생각하기에, 그리고 대부분이 인정할 것인데.. 그건 바로 "사람"이다.단풍톤을 하면서 시간이 지남에 따라 "아이디어"라던지.. 프로덕트의 기능이라던지 등등. 이런 부분은 점점 시간이 지남에 따라 잊어가지만, "사람"만큼은 계속에 기억에 남을 것이다.그리고 코드를 작성하는 건은 결국 사람이다. 협업도 사람과 한다.그러니 개발자에게 가장 중요한 역량이 뭐냐고 물어본다면 1순위로 "경청과 질문"이라고 보고 있다. (물론 개발 실력도 중요함)이런 역량을 확실히 키우고 성장하여 사람과 같이 더 좋은 프로.. 2024. 11. 24. 깃허브 - REDEME 꾸미기 깃허브에 작성되는 REDEME.md 파일을 꾸밀 수 있다. 여러 방법이 있는데, 밑의 포스팅을 참고하면 된다.사실 별 거는 아니지만, 그래도 이쁘게 꾸미면 소위 "간지"가 난다.https://yoon990.tistory.com/38 [Github] ReadMe 리드미 꾸미기 (및 매우 소소한 팁들)그동안 하고 싶었던 깃허브 리드미를 드디어 간단하게 꾸며봤다. 나도 여러개의 블로그를 보면서 꾸민거라서 수정할 때 언제든지 볼 수 있도록 정리하려고 한다. 우선 리드미를 꾸미기 전에 가yoon990.tistory.comhttps://whkakrkr.tistory.com/m/entry/Github-Readme-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EC%B4%9D%EC%A0%95%EB%A6%AC-%F.. 2024. 11. 22. 깃 충돌 해결법 개발자끼리 깃, 깃허브로 그룹 프로젝트를 하거나 혹은 회사에서 협업을 할 때에 깃허브를 이용하게 된다. 이때 "머지"를 이용해서 코드를 합치게 될 건데, 이러한 방향성에서 깃이 충돌하는 경우가 있다.이때 깃 충돌을 어떻게 해결해야 하는지, 그리고 코드를 어떻게 짜야 깃 충돌을 피할 수 있는지 등..에 대한 영상이다.https://youtu.be/PGQIJE4tHAs?si=drhHJpdoz_yTklmi(출처: 코딩알려주는 누나) 2024. 11. 15. 이전 1 2 3 4 5 6 7 8 ··· 14 다음
