hahagarden의 블로그

모든 재귀함수 반복문은 while 또는 for 반복문으로 표현할 수 있다. 하지만 반복문이 너무 깊어지면 가독성이 안좋고 이해하기 어렵다.(현재는 재귀가 이해하기가 더 어렵지만 ..) 반복문을 작성하기는 쉬운데 재귀함수로 작성하는 것은 정말 어렵다. 코딩테스트 문제를 재귀함수로 작성한 풀이를 보며 연습해보자. 프로그래머스의 삼총사 문제를 푸는데 첫번째 트라이에는 삼중for문밖에 생각이 나지 않았다ㅎㅎ function solution(number) { let result = 0; const combination = (current, start) => { if (current.length === 3) { result += current.reduce((acc, cur) => acc + cur, 0) === 0..

HTTP는 stateless하다 HTTP는 웹 서버와 웹 브라우저가 데이터를 주고받기 위한 약속이다. HTTP는 상태를 가지지 않는다. 이 말은 웹에서 데이터를 주고받을 때 상태를 가지지 않는다는 것이다. 클라이언트가 서버에 어떤 요청을 하면 서버는 그 요청을 곧이곧대로 듣고 적절한 응답을 해주지만, 처리 후에 그 일을 기억하고 있지 않다. 항상 아메리카노를 주문하는 카페에 가서 '늘 마시는 것으로 주세요'라고 해도 처리를 못하는 것이다. 카페 입장에선 항상 처음 보는 사람이고 어떤 메뉴를 주문했는지 정보를 알고 있지 않다. 단골 손님인데 매번 처음 보는 사람으로 인식한다면 손님 입장에서는 항상 장황하게 주문을 해야하고 불편할 것이다. 그래서 카페에서 어떤 특별한 영수증을 준다. 이 영수증을 가지고 오면..

1️⃣ 카카오 로그인 1. 네이버 로그인을 구현한 후 카카오 로그인을 추가했다. 둘은 isLoggedIn상태를 공유한다. 네이버 로그인을 하거나 카카오 로그인을 하면 setIsLoggedIn상태끌어올리기를 통해 isLoggedIn상태가 true로 갱신되고, MyGptea컴포넌트가 조건부 렌더링된다. 2. 네이버 로그인 api는 함수를 제공하여 code를 받고 access_token을 요청하는 과정 없이, 로그인 버튼을 누르면 바로 redirect url로 access_token을 발급해주었다.(함수 내부에서는 과정을 거친다.) 카카오는 redirect url로 Authorization Code를 받아 이것으로 access_token을 요청하는, Authorization Code Grant Type 과정을..

1️⃣ 네이버 로그인 네이버 로그인 API 공식문서는 예전 버전 이후로 업데이트가 안된 것 같다. 또한 gptea프로젝트는 타입스트립트를 사용하므로 다른 블로그들도 함께 참고하였다. 1. App컴포넌트의 isLoggedIn 상태를 상태 끌어올리기를 통해 1. Loggedin컴포넌트와 2. MyGptea컴포넌트의 Nav컴포넌트가 공유한다. isLoggedIn이 true이면 MyGptea컴포넌트를 렌더링하여 서비스를 이용할 수 있고, false라면 Welcome컴포넌트를 렌더링하여 로그인버튼이 있는 페이지가 뜨도록 했다. 컴포넌트별로 url을 다 다르게 할지, 지금처럼 같은 '/'경로에 조건부 렌더링을 할지 고민했는데, github가 이렇게 되어있어서 참고했다. '/'경로인 홈에서 github 로그인 페이지..

1️⃣ API 요청하기 백엔드로부터 API문서를 받았다. chats, messages, scrapbooks, scraps를 GET으로 받아오는 것이다. 다른 요청들은 작업중이라고 한다. fetch를 사용해서 요청을 하는데 CORS에러가 나왔다. 이제 CORS가 무엇인지 안다! 그런데 어떻게 해결하지..? CORS에러는 출처가 다른 곳에서 자원을 공유할 때, 필요한 설정이 되어있지 않아서 생기는 문제이다. 백엔드 서버는 구축이 되었고, 사용할 홈페이지 주소와 홈페이지 테스트용 주소만 허용을 해놓았다고 한다. 나는 지금 localhost에서 작업중이므로 임시로 proxy를 쓰기로 했다. 리액트에서 제공하는 간단한 방법이 있어 다음 포스팅과 같이 해결하였다. React CORS에러 해결 CORS에러가 떴다. ..

CORS는 다른 출처의 리소스를 사용할 수 있도록 해주는 정책이다. 출처란 scheme(프로토콜), 호스트(도메인), 포트로 정의된다. 같은 출처에서 요청하고 응답을 해야 하는데 그렇지 않은 경우 CORS에러가 발생하고 proxy설정을 해줌으로써 해결할 수 있다. CORS에러는 브라우저가 기본적으롤 동일출처정책 SOP을 가지기 때문에 브라우저 단에서 뱉는 오류이다. proxy를 두면 proxy가 중간에서 대리인 역할을 하여 요청과 응답을 탈취하여 처리하기 때문에 브라우저를 속인다고 할 수 있다. 1. package.json에 proxy 추가하기 Webpack dev server에서 제공하는 기능이다. CORS에러가 떴다. 응답받을 서버 주소와 내가 요청하는 로컬호스트의 출처가 서로 달라서 생긴 문제이다...

지난번 프로토타이핑 작업에 이어서 다음을 추가하였다. 구현한 것 - Chat컴포넌트: Prompt 클릭하면 커서 깜빡임 → . 누르면 질문 입력됨 → Enter 누르면 질문 등록됨 → action delay이용하여 GPT 답변 입력됨 → Prompt 다시 클릭하면 처음으로 돌아감 '데이터베이스' 대화창, '데이터베이스 심화' 대화창 모두 Chat컴포넌트의 인스턴스. - Bookmark컴포넌트: 클릭하면 색칠됨 → 다시 클릭하면 색칠 해제됨 완성본 🙌 gptea 피그마 프로토타입 링크 🙌 Figma Created with Figma www.figma.com

Redux 공식문서에서 Redux Toolkit 사용을 공식적으로 적극 추천한다. 기존 Redux에서 작업을 단순화하고, 흔한 실수를 방지하여 Redux 어플리케이션을 더 쉽게 만들 수 있도록 한다. 기존의 Redux를 React, vanillaJS에서 사용하는 방법은 각각 다음의 포스팅에서 확인할 수 있다. Redux란 / Redux React에서 사용하기 Redux는 JavaScript 어플리케이션의 상태를 관리할 수 있는 상태 관리 라이브러리이다.(React, Vue, Angular, vanilla JS 등 모두 사용할 수 있다.) React로 상태 관리를 할 때 props drilling이나 상태끌어올리기를 hahagarden.tistory.com Redux vanillaJS에서 사용하기 html..

인터넷과 웹 인터넷은 전세계적으로 연결된 컴퓨터 네트워크 통신망이다. 웹 뿐만 아니라 온라인 게임, 이메일, 모바일 앱을 포함한다. 웹은 문서, 이미지, 영상 등을 볼 수 있는 공간이다. 웹은 인터넷에 포함되어 있다. 이 공간은 인터넷 익스플로러, 크롬, 파이어폭스, 오페라 등 다양한 웹 브라우저가 있다. 그런데 2000년대 초에 어떤 사이트가 어떤 웹브라우저에서는 작동을 하고 어떤 브라우저에서는 작동을 안하거나, 어떤 브라우저에서는 버튼이 보이고 어디에서는 안보이는 등의 호환성 문제가 있었다. 그래서 개발자들이 동일한 서비스를 만드는데 브라우저별로 구현을 해주어야 했다. 힘들었을 것 같다. 😰 이러한 브라우저 호환성 문제를 해결하기 위해 웹 표준이 등장했다. 웹 개발 형식을 통일시킨 것이다. 그래서 생..

html파일에서 간단하게 증감버튼을 만들고, JavaScript파일로 DOM조작을 하고, Redux로 상태를 관리한다. add minus DOM조작을 위해 브라우저 환경에서 작업하였다. 리액트를 주로 사용했어서 자연스럽게 npm install redux를 하고, commonJS 또는 모듈import/export로 createStore메서드를 가져와서 사용하려니 불가능했다. 이는 node.js 환경에서 가능한 것인데 말이다. (브라우저 환경이 아닌 node.js 환경에서 웹 어플리케이션을 만드려면 다양한 node.js 패키지들을 설치하고 세팅해주어야 한다. 그렇기 때문에 이러한 것들을 미리 설치하고 세팅해놓은 보일러 플레이트 CRA를 이용해서 리액트 앱을 시작하는 것이다.) redux를 브라우저 환경에서 ..

🙌 gptea 피그마 프로토타입 링크 🙌 Figma Created with Figma www.figma.com 구현한 것 - 전체컴포넌트: 호버효과와 클릭하여 페이지 전환 기능, - Chats컴포넌트: ChatItem 이름 수정아이콘 기능(데이터베이스->데이터베이스 심화->데이터베이스) - Scraps컴포넌트: Scrap 클릭하면 확장, 다시 클릭하면 축소 기능, 화살표아이콘 누르면 해당 Chat으로 이동 추가할 것 - Chat컴포넌트에서 propmt 커서 깜빡임 구현 ✅ - propmt 질문 입력하면 메세지 추가되는 UI 구현 ✅ - Scrap마크 클릭하면 색칠되고, 다시 클릭하면 투명해지는 UI 구현 ✅ 추가한 내용은 다음 포스팅에서 다루었다. gptea☕ Figma 프로토타이핑 추가 완성본 🙌 gp..

Redux는 JavaScript 어플리케이션의 상태를 관리할 수 있는 상태 관리 라이브러리이다.(React, Vue, Angular, vanilla JS 등 모두 사용할 수 있다.) React로 상태 관리를 할 때 props drilling이나 상태끌어올리기를 사용하거나 컴포넌트 안에서 상태 변경 로직이 구현되어 코드가 복잡할 때가 있다. Redux는 상태 또한 컴포넌트처럼, React 컴포넌트로부터 분리하여 다룬다. Redux에는 세 가지 원칙이 있다. 1. Single Source of Truth 동일한 데이터는 항상 같은 곳에서 가져와야 한다. Redux의 Store가 단 한개만 존재한다는 것과 관련있는 것이다. 2. State is read-only React의 상태는 상태변경함수를 통해서만 변경..