YELOPER

✅ 저번에는 전체 칵테일에 대한 api를 불러왔었다면 이번에는 개별 상세 데이터 불러오기와 검색 기능을 구현하였다! ✅ 그 과정에서 원래 구현하려고 했던 추천 칵테일, TOP10 칵테일 api는 유로라는 것을 발견하였고.. 어찌해야할까 고민하다가 결국 약간 디자인을 변경하기로 결정했다. 1️⃣ 변경된 메인페이지 디자인 메인페이지에 넣으려고 했었던 추천 레시피, TOP10 레시피가 빠지니까 너무 휑해보이고 그렇다고 레시피 페이지에 있는 전체 리스트를 또 메인페이지에 보여주는 건 아닌 것 같고,,, 고민하다가 조금 감각적(?)으로 가는 것도 좋을 것 같아서 이런 식으로 변경하기로 결정했다! 저 디자인에 비하면 조악하지만,, 나름 애니메이션도 들어있다 하하 최종디자인은 아니라 조금씩 고쳐나가면 그래도 좀 괜찮..

프로그래머스에서 피보나치 수열 코딩테스트 문제를 풀다가... 신나게 재귀함수로 풀어야지~~ 하고 풀었지만 시간초과, 런타임 에러... 프로그래머스에서 제공하는 코딩테스트 연습 힌트 모음집을 보니까 딱 나의 케이스에 대한 내용이 있었다🤣 일반적인 재귀를 단순히 사용 시 동일한 작은 문제들이 여러 번 반복 되어 비효율적인 계산이 되어 시간초과가 난 것이었다,, return f(n) = f(n-1) + f(n-2) 이렇게 하게 되면 f(n-1)에서 한 번 구한 값을 f(n-2)에서 또 같은 값을 구하는 과정을 반복하게 되기 때문에 100번째 피보나치 수를 구하기 위해 호출되는 함수의 횟수는 기하급수적으로 증가하는 것이다. 그러나 한 번 구한 작은 문제의 결과 값을 저장해두고 재사용하게 되면 앞에서 계산된 값을..

🚀 Redux-Toolkit 내부 thunk로 비동기 처리 Redux-Toolkit에는 내부적으로 thunk를 내장하고 있어서, 다른 미들웨어를 사용하지 않고도 비동기 처리를 할 수 있음 createAsyncThunk와 createSlice를 사용하여 Redux Toolkit만으로 비동기 처리를 쉽게 할 수 있으며, redux-saga에서만 사용할 수 있었던 기능까지 사용할 수 있음 https://redux-toolkit.js.org/usage/usage-with-typescript Usage With TypeScript | Redux Toolkit redux-toolkit.js.org 난 타입스크립트로 하고 있기 때문에 이 공식문서를 참고하면서 만들었다! 1️⃣ thunk 만들기 - createAsyn..

🚀 Redux-toolkit 리액트에서는 반드시 전역 상태 관리라는 것을 해야한다. 한두 번만 props로 넘기면 괜찮지만 안 그럴 때도 많으니,, 보통 많이 사용하는 게 Redux, MobX, ContextAPI, recoil, zustand인데 나는 Redux로 해보기로 결정! 가장 사용자가 많기도 하고 그럼 정보도 더 많을거니까 ㅎㅎ 📚 Redux와 Redux-toolkit의 차이 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷 Redux-Toolkit을 사용하면 Redux의 문제점 해결 Redux 스토어 구성이 너무 복잡하다. Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. Redux에는 너무 많은 상용구 코드가 필요하다. 📔 Redux-To..

1. 추상자료형이란? 어떤 데이터의 구체적인 구현 방식은 생략한 채, 데이터의 추상적인 형태와 그 데이터를 다루는 방법만을 정해놓은 것 ADT(Abstract Data Type) 2. 스택(Stack) 데이터를 집어넣을 수 있는 선형(linear) 자료 나중에 집어넣은 데이터가 먼저 나옴. LIFO(Last In First Out) 데이터를 집어넣는 push / 데이터를 추출하는 pop / 맨 나중에 집어넣은 데이터를 확인하는 peek class Stack { constructor() { this._arr = []; } push(item) { this._arr.push(item); } pop() { return this._arr.pop(); } peek() { return this._arr[this._a..

1. 해시 테이블이란? 자료구조 종류 중 하나로 key와 value를 가짐 직업 : 개발자 나이 : 28 2. 해시란? 해시함수라고 하는 함수를 이용해서 입력값을 고정길이 문자열로 치환하는 것 배열은 key값에 숫자만 받을 수 있지만 해시는 문자열까지 받을 수 있음 문자열로 받은 key 값을 해싱이라는 과정을 통해서 일정 길이의 주소값으로 바꿔서 저장해두고 있기 때문 --> 해시 함수의 역할 3. 자바스크립트에서는 좀 더 쉽게 해시 테이블을 사용할 수 있게끔 해주는 자료구조가 있다. --> Map 4. Map이란? key가 있는 데이터를 저장하는 데 쓰이는 자료구조 Map의 key값은 문자열 가능 --> 해시에 이용 가능 5. Map 메서드 new Map() --> Map의 객체를 만들 때 사용 map...

일단 제일 큰 고비였다고 생각한 회원가입, 로그인 부분이 끝났으니 이제 진도만 쭉쭉 나가면 된다!! ✅ 해야할 것 1. 메인페이지 퍼블리싱 2. 서브페이지 퍼블리싱 - 레시피 페이지 - 게시판 페이지 - 마이페이지 3. 로그아웃 1️⃣ 메인페이지 퍼블리싱 1. 메인페이지 ('/') - 추천 레시피, TOP10 레시피 누르면 레시피 페이지로 이동 2️⃣ 서브페이지 퍼블리싱 1. 레시피 페이지 ('/recipe') - 더미데이터로 아이디만 따로 만들어서 레시피를 클릭하면 상세페이지로 이동하게끔 하였다. 2. 레시피 상세페이지 ('/recipe/${id}') 3. 게시판 페이지 ('/board') - 게시판 페이지도 마찬가지로 게시글을 클릭하면 상세페이지로 이동하게끔 하였다 4. 게시판 상세페이지 ('/boa..

🚀 Next-Auth로 로그인, 회원가입 구현 모든 걸 나 혼자 정해야하니까 어떤 라이브러리로 해야 좋을지 고민하는 시간만 한 세월.. 열심히 찾아보다가 next-auth가 일반 이메일 가입뿐만 아니라 구글, 네이버, 카카오 등 sns 로그인도 제공하고 있어서 결정! 나중에 sns 로그인도 추가할 예정이라,, ㅎㅎ https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org next.js app-router에 관한 정보도 별로 없을 뿐더러 app-router에 next-auth를 적용한 사례도 많지 않아서 괜찮을까 하는 중에 아주 좋은 블로그를 발견해서 그 글을 참고해 개발을 하려고 한다! https://mycoding..

🚀 Next.js 14 사용하기 - 예전 회사에서는 Next.js 13의 Pages Router를 주로 써봐서 App-Router에 대해 자세히 모르기도 했고 얼마전 Next14버전이 업데이트가 되었다는 소식에 새로운 것을 해보고 싶어 Next.js 14 App-Router로 하기로 결정했다. https://nextjs.org/blog/next-14 Next.js 14 Next.js 14 includes included performance, stability for Server Actions, a new course teaching the App Router, and more. nextjs.org 📚 Pages-Router vs App-Router 1. Pages-Router 정적인 공통 마크업은 _d..

1. 문제 설명 2. 답안 const NUM = 3; function solution(number) { let answer = 0 const tmp = [] const backtrack = (cur) => { // tmp 길이가 3이면 if (tmp.length === NUM){ // tmp의 합을 계산 후 0이면 answer에 1 더하기 answer += tmp.reduce((a,b)=> a + b) ? 0 : 1 return } // tmp 만들기 for (let i = cur; i < number.length; i++){ tmp.push(number[i]) // 재귀호출할 때마다 cur을 사용하여 다음 인덱스로 이동 backtrack(i + 1) // 다음 경우를 탐색하기 전 현재 요소를 제거 tm..