📖 들어가며 이 포스팅은 Next.js 11 버전(page router) 환경에서 작성된 글입니다. 13버전 이후 app router 환경에서 구현하는 방법은 이 포스팅에서 1 ~ 1-3까지만 보시고 여기를 참고해주세요. Next.js + Typescript 환경에서 토이 프로젝트를 진행하던 중 카카오톡으로 공유하기 기능이 필요해서 구현을 했었는데, 몇몇 오류도 마주치고 따로 정리를 하면 좋을 것 같아서 이렇게 정리하게 됩니다. 1. 애플리케이션 등록하기 일단 첫 번째로 개발하기에 앞서서 Kakao Developers에서 어플리케이션 등록을 해줘야 합니다. 1-1 로그인 사이트에 접속 해주시고 첫 화면에서 로그인을 해주시고 '내 애플리케이션'을 클릭해주세요. 1-2 애플리케이션 추가하기 그러면 이렇게 애..

📖 들어가며 리액트는 자바스크립트 라이브러리 중 하나로 웹사이트 개발 시 많이 사용되는 언어입니다. 특히 최근들어 많은 사람들이 관심을 가지고 있고, 실제로 회사에서도 적극적으로 활용되고있는 추세죠. 이번 포스팅에서는 리액트가 어떤 특징을 가지고 있는지 알아보고자 합니다. 리액트(React.js)는 무엇일까 ❓ React.js는 특히 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. React는 Facebook에서 일하는 소프트웨어 엔지니어 jordan walke가 처음 만들었습니다. 웹 및 모바일 앱의 view layer를 처리하는 데 사용됩니다. 데이터 바인딩 기법을 통해서 여러가지 정보를 한 곳에 모아..

📖 들어가며 React를 처음 학습하던 시절, Redux가 무엇인지, 그리고 왜 필요한지에 대한 명확한 이해 없이 'Redux를 왜 배워야 하는지'에 대해 의문을 갖곤 했습니다. 하지만, React를 이용하여 클론 코딩을 하거나 실제 프로젝트를 진행하면서 데이터를 사용하고자 하는 컴포넌트가 멀리 떨어져 있어 자식 컴포넌트에게 불필요하게 많은 Props를 전달해야 하는 상황(Props Driling)을 겪게 되었습니다. 이런 경험을 통해 "전역 상태 관리"의 필요성을 체감하게 되었습니다. 그래서 이번 포스팅에서는 Redux에 대해 알아보려 합니다. Redux란 ❓ Redux는 JavaScript 애플리케이션의 상태를 효과적으로 관리하는 데 도움을 주는 라이브러리입니다. Redux는 React와 함께 사용되..

📖 들어가며 이번에 팀 프로젝트로 팀 프로젝트를 구하는 웹앱을 클론 코딩하게 되면서 프로젝트 진행 기간을 선택할 수 있게 하는 Input이 필요했습니다. 그래서 캘린더가 표시되고 캘린더에서 날짜를 선택하면 Input에 해당 날짜가 입력될 수 있게 구현하고 싶었습니다. 캘린더를 일일이 구현하기에는 많은 시간이 걸릴 거 같아서, 리액트 캘린더 관련 라이브러리를 찾아보던 중에 react-datepicker라는 라이브러리를 발견했습니다. 지금껏 공부하면서 캘린더 관련해서는 처음이기 때문에 알게 된 내용을 정리하려 합니다. react-datepicker react-datepicker는 리액트에서 달력을 매우 간단하고 재사용이 쉽게 가능하게 만들 수 있게 한 라이브러리입니다! npm 사이트의 주간 다운로드 횟수를 ..

📖 들어가며 리액트로 팝콘 타임을 클론 코딩하는 포트폴리오를 제작하면서 공부 중에, Link (react-router-dom)을 클릭하면 url은 변경이 되지만 컴포넌트가 업데이트가 되지 않아서 제대로 기능이 작동하지 않는 문제를 겪었다. 해결하고 나니깐 정말 별 것 아니었지만...(개념 부족) 무엇이 문제이고, 어떻게 해결했는지 다시 복습하기 위해 정리해본다. ❗ 문제 문제의 화면이다. Detail 컴포넌트에서 해당 영화의 관련 영화 데이터를 받아와서 보여주는 컴포넌트다. Detail 컴포넌트에서 관련 영화를 보여준 뒤, 관련 영화를 클릭하면 그 관련 영화의 Detail 컴포넌트가 렌더링 되게 구현하고 싶었다. 하지만 사진에 보이는 바와 같이 클릭을 하면 url은 잘 변경이 되지만 해당 영화의 Deta..

📖 들어가며이렇게 자바스크립트의 for문의 종류에 대한 글을 정리하는 이유는 현재 나중에 취업을 위한 코딩 테스트 알고리즘을 자바스크립트로 준비하면서 for문을 작성할 때가 많은데, 공부를 하면서 for문에 종류가 다양하게 있는 건 알았지만 실제로 자바스크립트를 공부하면서 제가 자주 사용한 for문은 기본적인 for문과 forEach문만 자주 사용하였고, 그 외에는 거의 한 번도 사용해 본 적이 없었다. 자바스크립트로 알고리즘 공부를 하면서 다양한 for문과 접촉 해보면서 각각의 상황에 따라 각 for문마다 장점이 있고, 성능의 차이도 있기 때문에 이번 기회에 확실하게 알면 좋을 것 같아서 간단하게 어떤 역할을 하는 정도인지에 대해서 정리한다.💡 알아볼 것들(전형적인) forfor infor offo..

📖 들어가며 공부한 내용을 한번 더 정리하고 복습하기 위해 글을 작성해본다. ❓ 문제 일곱 난쟁이 왕비를 피해 일곱 난쟁이들과 함께 평화롭게 생활하고 있던 백설공주에게 위기가 찾아왔다. 일과를 마치고 돌아온 난쟁이가 일곱 명이 아닌 아홉 명이었던 것이다. 아홉 명의 난쟁이는 모두 자신이 "백설 공주와 일곱 난쟁이"의 주인공이라고 주장했다. 뛰어난 수학적 직관력을 가지고 있던 백설공주는, 다행스럽게도 일곱 난쟁이의 키의 합이 100이 됨을 기억해 냈다. 아홉 난쟁이의 키가 주어졌을 때, 백설공주를 도와 일곱 난쟁이를 찾는 프로그램을 작성하시 오. (문제 출처 : 한국정보올림피아드) 입력 아홉 개의 줄에 걸쳐 일곱 난쟁이의 키가 주어진다. 주어지는 키는 100을 넘지 않는 자연수이며, 아홉 난쟁이의 키는 모..

📖 들어가며 최근 React를 공부하는 도중에 react router를 설치해야 하는 상황이었습니다. react router를 설치 했는데, 로그에 npm error가 여러 개 발생했습니다. 리액트로 실행 시키자 아래와 같은 오류가 발생했습니다. ./src/App.js Module not found: Can't resolve './src/components/Navbar/Navbar' in '/Desktop/React_Components/test/src' Module not found: Can't resolve './node_modules/react' 💡 해결 방법 create-react-app으로 구성된 리액트 파일은 아래와 같이 되어있습니다. 프로젝트 내부에 있는 package-lock.json 또는 ..

📖 들어가며 안녕하세요. 오늘은 자바스크립트에서 버튼 클릭으로 오디오를 제어하는 방법에 대해서 정리하려고 합니다. 버튼 클릭으로 음악을 켜고 끄고, 다음 음악으로 넘기는 여러 음악을 제어하는 기능을 구현하면서 HTML에는 audio태그를 사용하지 않고, 오직 자바스크립트에서만 audio 제어를 했다가 막혔지만, 결국 잘 해결을 해서 따로 정리하게 됩니다. 아주 간단한 예를 들어서, const audio = new Audio('audio_file.mp3'); audio.play(); HTML에 따로 오디오 태그를 작성하지 않고 이런 식으로 audio 코딩을 해서 로컬에서 잘 작동하는 것을 확인하고, 깃허브 퍼블리싱을 하여 사이트로 배포하니깐 아래와 같은 오류로 오디오 재생이 작동하지 않는 것을 확인했습니다..