감귤밭 호지차 농장

HTTP 특징은 비연결성 = 연결한 적이 있어도 연결을 끊어버린다. -> 대안책 : Polling, Long Polling, Websocket, SSE SSE ( Server - Sent - Event ) 클라이언트의 별도 추가 요청 없이 서버에서 업데이트를 스트리밍할 수 있는 단방향 통신입니다. SSE의 장점과 단점 장점 1. HTTP를 통해 통신하므로 다른 프로토콜은 필요가 없고, 구현이 굉장히 쉽다는 것이다. 2. 네트워크 연결이 끊겼을 때 자동으로 재연결을 시도한다. 3. 실시간으로 서버에서 클라이언트로 데이터를 전송할 수 있다. 폴링 같은 경우는 실시간이라고 보기 어려운 점이 있는데, 이러한 한계를 극복한다. 단점 1. GET 메소드만 지원하고, 파라미터를 보내는데 한계가 있다. 2. 단방향 통..

하도 공고에 반응형 웹 과 관련해서 우대 사항이 많기 때문에 겸사 겸사 간단한 반응형 웹 프로젝트를 만들어보려고 합니다. 이전 메인 프로젝트 리팩토링 작업은 아무래도 주소가 달라서 서버랑 통신을 못해서 네틀리파이로 배포가 안되더군요.. ㅠㅠ 눈물을 머금고.. 손을 놓기로 결심하였습니다. 아래는 피그마 작업 입니다. 크게 웹과 모바일 + 태플릿 크기로 간단하게 만들어볼 예정입니다. 기술 스텍은 이번에는 제가 사랑하는 TailwindCSS를 사용하지 않고 순수 CSS 로 제작해보겠습니다. 겸사 겸사 연습인 거죠. Styled-Components 정도는 사용해서.. 야무지게 만들어보겠습니다. 시간이 되면 주말에 Express 도 곁들여서 게시판도 한번 만들어 보고 싶은 욕심은 언제나 계속 생겨나네요... 디자..

슬프고 힘들 땐.. 피그마 작업이 제일 재밌다는... 아시는 분께서 프리랜서이신데 그분의 소개 사이트와 컨택 오는 연락 들을 컨트롤 하는 대시보드 (어드민) 페이지를 만들어드려볼까 라는 생각을 했답니다. 이제 기술 스텍을 고민해야 하는데... 대충 유저 플로우랑 어떤 성능 들어갈 지를... 고민 중인데요... 사실 혼자서 풀스텍 해보려고 하는 거라.. 될 지 모르겠네요 ㅋㅋㅋㅋㅋㅋㅋ 취업 도 안되고... 이 차걉디 차갸운 취업 시장 ㅠㅠㅠ 견디려면 다른 곳에 정신을 쏟는 수 밖에...

https://pagespeed.web.dev/analysis/https-portfolly013-netlify-app/jsys44hxgw?form_factor=desktop PageSpeed Insights 올바른 URL을 입력하세요. pagespeed.web.dev Page Speed Insight 를 사용해서 내 메인 프로젝트 성능을 측정해보았다. 아 - 찔 근데 이건 그 초반에 애니메이션 페이지의 성능이었고... 메인 페이지로 들어가면ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그렇다면 커뮤니티 페이지로 가보면 ㅋㅋㅋㅋ 아니 데이터는 왜 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 아 깜짝이야 url 잘못 찍었었네 .. 하지만 그래도... ㅋㅋㅋㅋㅋㅋㅋㅋ아 - 찔 두근두근 신나는 상세 페이지까지 들어가볼까나... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ..

구글 oAuth 로그인 로직을 구현하기 앞서 기본적인 핑퐁핑퐁에 대해서 정리해보자면,,, * : 클라이언트 파트 1. 클라이언트 -> OAuth Server ( 사용자 인증 ) : 클라이언트가 OAuth server에 허가 코드를 요청 : 2. OAuth Server -> 클라이언트 : OAuth Server가 "허가코드를( Authorization Code ) " Redirect URL을 이용해서응답 - OAuth로 사이트에서 발급받은 "ID/Password/Credit"등을 넣는다. - 대부분의 OAuth는 Developer Tap에서 API와 ID 등을 발급 받을 수 있다. * Authorization Code - Redirect URL 구글 OAuth의 승인된 redirection URL 은 정상..

팀원들과 깃 PR을 올리다가 역시나 충돌 대환장 파티 내꺼는 컴포넌트 단위로 올려서 충돌 나는 부분이 없었는데 갓 댐... 전체 파일로 PR제출 하신 두 분이 충돌이 나 버렸다. 어제 그니까 30일 화요일 스터디 당시에는 도저히 제 시간 안에 해결 할 수 없을 거 ㅅ같아 잠시 보류 하고 다른 작업을 했다. 30일 진행 한 작업 1. figma전체 디자인 수정 작업 완료 2. 각자 PR한 부분 코드 리뷰 및 답변하기 + 기능 구상 31일오늘 시간을 내어 충돌 난 부분을 해결 하기 위해 검색을 해봄... 우선.. 휴.. 음 간단하게 git fetch 쓰면 되지 않을까 했는데 git remote된게 아니고 이 터미널로 연결 된 작엄이 내 레포지토리와 연결 된거라서 공용 레포지토리의 작업물을 받아 오는게 불가했..

기간 : 1.5월 18일 목요일 시작 : 4명의 팀원 주제 및 만들고 싶은 사이트 정하기 테마 어림 잡아 정하기 *5/21 : 팀원 한명 의견 불일치로 탈퇴 2.5월 23일 화요일 디자인 수정 회의 + 피그마 작업 : 메인 / 로그인 페이지 작업 시작하기 : 기능 분배 * 목표 각자 맡은 업무 80% 정도 완료해오기 * hj : 로그인 페이지 + sso * jy : 푸터 + 플레이 리스트 ui 컴포넌트 * me : header + article ui 컴포넌트 # 05.30 [1]깃을 통해 pr 작업을 시도하려던 중 , header 브랜치를 먼저 만들기 이후에 structure 브랜치를 만들고 거기서 작업을 하다가 pages를 폴더를 만들고 여기서 pr 을 한뒤 다시 header브랜치로 돌아가니 만들어 두..

북마크 저장 1. 서버에 저장 2. localStorage : 클라이언트 영구 저장소 브라우저 내에 있는 자체 Storage 예전에는 cookie 브라우저를 껐다 켜도 그대로 저장되어 있다. 하지만 다른 컴퓨터로 가면 동기화가 되지 않는다. Ex. 장바구니 3. 메모리 SPA라서 브라우저 끄기 전가지는 날라가지 않는다. # 무한 스크롤 Intersection observer API 로직 잘못 짜면 로직 상 에러 발생 비동기가 호출되는 시점 잘 지정 해야 합니다. 해야 되는 거 1. SSO : Single Sign OIn 카카오 / 구글 / 네이버 구현 2. 무한 스크롤 3. 반응형 웹 4. HM 클론 마무리 5. navbar 중단 후 다른 youtube api로 적용 6. 깃 정리 7. 코플릿 - 알고리..

구현 기능_01 : weather api에서 날씨 온도에 따라 제공되는 아이콘 불러오기 [ 오류 발생 & 실수 구덩이 ] ㅇㄹㅇㄹㅇㄹ 구현 기능_02 : 도시를 option 선택으로 변경할 수 있게 구현하기 [ 오류 발생 & 실수 구덩이 ] 옵션을 선택했을 때의 값을 props로 넘기면 바로바로 값이 바뀔 것으로 생각했으나 바뀌지 않아 한참을 고민하다가 작업을 종료 했었습니다. 그러다가 자려고 누워서 생각해보는데 아차차!!! useRef 로 api를 처음 페이지가 랜더링 될 때 딱 한번만 불러오도록 설정했다는 것이 기억 났습니다. 그렇다면 선택 값이 바뀔 때마다 재 랜더링을 할 수 있게 설정한다면 되지 않을까? 해서 다시 코드를 수정해보았습니다. 깃 충돌 : 깃 PR 후 merge 충돌 에러 [ 오류 발..

Title : 리액트로 페이지네이션 구현하기 드디어 염원하던 리액트로 페이지네이션을 구현해보았습니다. 추후 CRUD 기능, 검색 기능을 구현해보고 싶습니다. 페이지네이션 라이브러리 페이지네이션을 구현하는 라이브러리 중 인기 상위인 페이지네이션 라이브러리 입니다. 라이브러리를 이용해서 구현해보지는 않았지만 라이브러리를 적용하는 방법을 익히기 위해 따로 공부해보아야 할 것 같습니다. react-js-pagination 리액트로 페이지네이션 구현하기 Component 나누기 App.js ┗ main : 메인 글 목록들과 페이지네이션 구현 ┗ header : Nav 파트 담당 ┗ datas : 임시 dummy datas Main Component 이 Main 부분에는 ' 현재 페이지에 나타낼 글 목록 ' 과 '..