Jaeilit

1. 이미지 미리보기 위 사진 inputValue 는 입력 값에 대한 state 이고, preview useState가 미리보기에 관한 state 입니다. imgPreview : state에 img file에 관한 정보들을 넣어둡니다. (미리보기를 위해서) deletePreview : delete를 누를시 setPreview 를 초기화 해줍니다. (삭제) 2. formDate 로 백엔드에 전송하기 백엔드에 axios 로 전송해야합니다. formData.append("key", value) 로 만들어준 뒤에, Axios post 요청 하면 됨, 주의사항 header에는 multipart/form-data 로 전송을 해야한다.

카카오 로그인 구현 로직 프론트엔드 기준 카카오에서 인가코드를 받아온다. 받아 온 인가 코드를 백엔드에 넘겨주고, 토큰을 념겨받는다. 1. 카카오 디벨러퍼에서 콜백URL을 설정 2. 받아 올 데이터들을 설정.. 3. 인가코드 받기 4. 인가코드 받기 (코드) 5. 인가코드 5. 인가코드

변경 전에는 useState를 반복적으로 인풋만큼 4개를 사용했다. 하지만 여러개를 하나로 압축시키는 법을 알고 나서는 하나로 썼다. 하나로 하는 방법 useState 하나에 값을 userid, username, password 등 나열한다. 이 값들은 input 의 name 속성과 일치해야 할 것이다. 그 inputvalue 들을 비구조화 할당으로 하나씩 까놓고 onChange 함수에 e.target.value 를 이용해서 e.target 또 한 까놓는다. name과 value로 지금 그 name은 아까 인풋의 name과 일치해놓은 그 부분이고 value는 값이 된다. 바뀐 값을 받아 올 setInputValue({}) 안의 불변성을 위해서 ...inputValue를 한번 불러온 뒤에 해당 값만 덮어씌..

const getCookie = (name) => { // 쿠키 값을 가져옵니다. let value = "; " + document.cookie // 키 값을 기준으로 파싱합니다. let parts = value.split("; " + name + "=") // value를 return! if (parts.length === 2) { return parts.pop().split(";").shift() } else if (parts === "; ") { return undefined } else { return parts.pop().split("=")[1] } } // 쿠키에 저장하는 함수 const setCookie = (name, value, exp = 1) => { let date = new Date..

참고 글 https://data-jj.tistory.com/53

인스타그램 클론코딩 1. 유투브 데모 영상 https://youtu.be/ip5CI4AHH9Y 2. 간단한 회고 저번주에 이어 이번주도 백엔드와 작업을 하게 됬습니다. 이번주에도 멋진팀원들을 만나서 정말 기대이상의 결과물을 만들었습니다. 백엔드와 작업하면서 api 설계 이런 부분에서 잘 알지 못했던 부분에서 점점 이해가 됬고 프론트에서 서버와 통신을 하면서 에러코드에 대해서도 좀 익숙해지면서 에러코드를 보면 대충 어디부분이 잘못이구나 라는 감도 조금씩 생겼습니다. 또, api 통신에 대해서도 메인페이지에서 게시글마다 댓글을 뿌릴 때 서버에 댓글따로 게시글따로 요청하는게 아니라 게시글 api에 댓글을 심어서 리스폰을 줌으로써 1번 1번하던 통신도 1번으로 줄고 프론트의 작업이 좀 더 수월해질수있다는 걸 경..

import React, { useCallback, useEffect, useState } from "react" import _ from "lodash" export const InfinityScroll = (props) => { const { children, callNext, is_next, loading } = props const _handleScroll = _.throttle(() => { const { innerHeight } = window const { scrollHeight } = document.body // 스크롤 계산! const scrollTop = (document.documentElement && document.documentElement.scrollTop) || docum..

const date = (a, b) => { let dateA = new Date(a[res.data.postingDate]).getTime() let dateB = new Date(b[res.data.postingDate]).getTime() return dateA > dateB ? 1 : -1 } const date_sorting = res.data.sort(date) 최근 게시물을 위로 올리고싶을 때 사용하는 코드

소개 프론트/백 주특기를 기초/심화 각각 1주일씩 총 2주를 배운 후 실제로 협업을 체험해보고 배운 주특기도 써보는 시간을 가졌다. 프로젝트 내용 제목 : 종원이의 냉장고 내용 : 냉장고를 부탁해를 모티브로 본인 냉장고에 썩고있는? 재료를 검색하면 그 재료로 만들 수 있는 음식리스트를 제공해주고 그 리스트들 중 마음에 드는 음식이 있다면 레시피까지 제공해주는 내용입니다. 프로젝트 상세정보(와이어프레임, api 설계 등) https://foregoing-ursinia-218.notion.site/16-ab85549ccb3d452ba6267dde8448d993 배포 사이트 http://eternalclash.shop.s3-website.ap-northeast-2.amazonaws.com/ 깃 repo htt..

웹소켓 vs REST (양방향 통신, 단방향 통신)