코딩연습장

FormData란 ajax로 폼 전송을 가능하게 해주는 Form객체입니다. 보통은 ajax로 form을 전송할 일이 거의 없고 JSON구조로 데이터를 전송합니다. 하지만 이미지를 ajax로 업로드할 때 form전송을 필요로 합니다. 물론 base64, buffer, 2진data형식으로 서버로 전송해도됩니다. 보통 form을 제추랗면 action 속성에 의해 지정한 페이지로 이동하면서 데이터를 전송합니다. ajax는 반대로 제출버튼을 누르면 기본 폼 동작은 e.preventDefault()로 멈추고 페이지 전환 없이 데이터를 전송합니다. 페이지 전환 없이 폼 데이터를 제출하고 싶을 때 바로 FormData객체를 사용합니다. FormData객체는 window.FormData에 위치합니다. //payload로..

오늘은 이미지데이터가 옮겨지지 않던 걸 수정했다. base64를 사용해 인코딩해서 보내주려다가 결국 formData()를 사용해서 잘 보내주게 되었는데 사실 어떻게 왜 그게 해결된지는 모르겠다. 원하는 데이터 형식이 Array였지만 나는 File을 보내고있었고, formData가 어떤 형식인지 사실 나는 모른다. 지금도 모르겠다. 내일 스터디시간을 이용해서 공부해보려고한다. 왜 이미지 file형식은 데이터가 payload값에 실리지 않았는데 formdata를 사용하면 잘 전달이 되었는지.... base64로 인코딩해서 보내주면 서버에서는 어떻게 그걸 저장하는건지? 생각해보니 굳이 디코딩한 후 저장할 필요가 없지 않나 싶다. 쩃든 오늘 이것 저것 고치고 정신이 없다. 기능이 별로 없다고 쉬울거라 생각했는데..

태그의 분류 block 태그 block태그는 새로운 라인에서 시작되며, block태그 다음에 오는 모든 태그들은 새 라인에서 시작 block태그들은 css 속성 중 height width margin padding을 작성할 수 있다. / inline 태그 inline태그들은 새 라인에서 시작하지 않고 현재 라인에서 시작 inline태그들은 css 속성 중 height width margin padding등의 속성을 적용할 수 없다. 쌍으로 된 태그 태그의 시작과 끝이 따로 있어 시작과 끝 사이에 코드를 넣는 태그 : 코드내용 / 등 쌍이 아닌 태그 태그의 시작과 끝이 따로 없는 태그 : 또는 / 등 p태그 단락을 나눌 때 사용 HTML에서는 엔터를 쳐서 여러문장을 입력하더라도 줄바꿈이 적용되지 않음 p태..

이번주는 json-server을 만들어 해당 서버와 통신하는 과제를 진행했다. 이번주에는 개인과제가 아닌 같은 FE끼리 팀으로 한 프로젝트를 만드는 것이었다. 일단 토요일부터 코로나때문에 건강이 좋지 않았다. 요새 항상 하루종일 늦게까지 코딩했었고, 실수로 하루 창문을 열고 잤는데 그때 면역력이 확 낮아져서 코로나가 빠르게 발현된 것 같다. 어쨋든 풀스택 이후로 처음으로 협업을 해서, git으로 브랜치를 나누는 방법도 몰라 좀 고생했다. 뼈대를 잡고 그것을 main으로 뿌리고, 개인 branch를 만들어 개개인의 작업을 하고 main에 merge한다. 겹치는 파일이 있을 땐 conflict가 나지 않도록 조심해야한다. 그리고 처음으로 axios도 사용해보았다. 서버와 통신하기위해 사용하는 것 인데, 이번..

오늘 백엔드분들이 API서버를 배포해주셔서 간단하게 메인페이지의 데이터를 get할 수 있었다. 다행히 별 다른 문제 없이 잘 받아왔다. 그런데 글을 등록하는 곳에서 문제가 발생했다. 특정 데이터들을 담은 객체를 만들고 그 객체를 Thunk에 dispatch해주어야했는데, dispatch가 실행될 때 아래와같이 오류가 발생했다. Uncaught TypeError: Cannot read properties of undefined (reading 'type') 해결하려고 여기저기 뒤져봤는데 잘 나오지 않았다. 머리도 제대로 안돌아가서 일단 쉬고 일요일에 좀더 작업해 볼 생각이다. 끝.

1. 브라우저 세션 기간 동안만 사용할 수 있고, 탭이나 창을 닫으면 삭제된다. 2. 새로고침을 해도 유지된다. 3. 변경된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용할 수 있다. //밸류를 세션스토리지에 저장 sessionStorage.setItem('name', 'minkyu'); //세션스토리지로부터 밸류값 가져오기 sessionStorage.getItem('name');//minkyu //세션스토리지 밸류 제거하기 sessionStorage.removeItem('name');//name값 제거 sessionStorage.clear();//모든 값 제거

1. 사용자 세션 데이터를 유지할 수 있다. 2. 브라우저를 닫고 다시 열 때에도 지속된다. 3. 탭을 여러개 열어도 공유된다. 4. 명시적으로 삭제될 때 까지 지속된다. 5. 변경사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있다. ====>>>>> 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 만료날짜 없이 사용자 정보 데이터를 저장한다. //밸류값 local storage에 저장하기 localStorage.setItem('name','minsoo'); //local storage에 있는 밸류값 가져오기 localStorage.getItem('name')//'minsoo' //local storage에 있는 밸류 값 삭제하기 localStorage.removeItem('nam..

오늘 미니프로젝트를 시작했다. 주특기를 배우고 백엔드분들과 처음 협업하는 것이라 좀 두렵다. 백엔드분들은 이래저래 슥슥 api를 작성하고 팍팍 하는게 신기했다. 프론트엔드는 첫날 와이어프레임 짜고, api명세서 읽어보고, View를 작성하느라 정신이 없다. api명세서는 익숙하지도 않아서 이게왜 이건지,, 모를때도 많다... 오늘 희석님께서 SA작성을 주도하셨는데, 정책(제한사항)도 미리정하는 것이 신기했다. 또 github 협업 repo에서 project를 만들어 issue가 한 곳에서 확인이 가능 하도록 하는 것도 신기했다. 오늘은 딱히 trouble shooting도 없었다. 첨부파일의 크기를 확인하는정도? const foodImgChangeHandler = (e) => { //첨부파일 정보 변수화..

주특기 심화주차 팀프로젝트가 끝이 났다. 마지막에 배포하는 부분에서 문제가 발생했었다. db.json파일을 vercel로 배포했는데, vercel로 배포한 db.json은 읽기전용이어서 get요청은 잘 작동하지만, patch, post 등 데이터를 변경하는 행동은 작동하지 않았다. 다행히 동석님께서 도와주셔서 db.json을 복사해서 변환하고 그걸 동일화하는 작업을 설정해주셔서 해결이 되었지만 결국 또 동석님의 도움을 받아 ec2로 배포를 할 수 있었다. 배포는 너무 어렵다~

오늘 댓글 수정을 하는 버튼에대한 기능을 완성했는데, 수정하기 버튼을 누르면 이전에 있던 값이 input창에 미리 적어져있기를 바랬다. 그래서 수정버튼으로 수정하는 공간을 보이게 할 때 comment에 저장되어있는 commentdesc가 NewCommentDesc로 미리 setState를 해 input칸에 들어가있도록 설정했다. 아직 코로나기운이 많이 남아있어 너무 힘들다. 어지럽고 기침이나오고 목이아프고 빨리 나아서 금요일에 시작하는 프로젝트에 지장이 없으면 좋겠다.