코딩연습장

소켓통신이란? 소켓이란 두 프로그램이 서로 데이터를 주고 받을 수 있도록 양쪽에 생선되는 통신 단자이다. 소켓통신이란 서버와 클라이언트 둘이 양방향으로 연결이 이루어지는 통신으로, 클라이언트의 요청이 없더라도 서버가 클라이언트로 요청을 보낼 수 있는 통신이다. 보통 스트리밍이나 실시칸 채팅 등 실시간으로 데이터를 주고 받아야 하는 경우 connection을 자주 맺고 끊는 HTTP통신보다 소켓 통신이 적합하다. 소켓 통신은 계속 연결이 되어있기 때문에 HTTP통신에 비해 많은 리소스가 소모된다. 리액트에서는 socket.io-client나 stamp 등의 패키지를 사용한다.

HTTP란? 기존에 사용하던 HTTP통신은 클라이언트에서 서버로 요청을 보내면 서버가 응답하는 방식으로 통신이 이루어진다. 응답에는 클라이언트의 요청에 따른 결과를 반환한다. 클라이언트의 요청이 있을 때만 응답이 가능하여 단방향 통신이다. 응답을 받은 후 연결이 끊어지는 것이 보통이지만, 성능 상 필요하다면 Keep Alive옵션을 주어 일정시간동안 연결을 유지하는 것이 가능하다.

https://mukstagram.vercel.app/ 먹스타그램 mukstagram.vercel.app 완성했다! 디버깅도 마무리했고, 새로운 기능을 사용한건 딱히 없지만 저번주까지 배운 것을 활용했다는 것에 의미를 두고자했다.. 서버와 통신을 처음해보고 response값도 사실 여태까지 몰랐는데, 이번에 처음으로 response를 활용하여 작업을 진행했다. 물론 완벽히 사용한 것은 아니겠지만 그래도 활용했다는 것이 얼마나 중요할까! 진짜 어려웠지만 진짜 재밌었다. 내일부터 클론코딩인데 다음주는 새로운 기술스택을 쌓을 수 있는 기회가 될 것 같아 너무 기대된다. 끝!

오늘 기능을 마무리했다. 헤더에 토큰도 담아서 보내주고, 그 토큰을 백엔드에서 유효한지 검사하여 보내준 response값에 따라서 특정 기능의 작동유무를 결정한다. 이제야 api에서 응답코드 (ex)200, 400, 404)나 message를 보내주는 이유를 알게 되었다. 팀원분인 태근님께서 axios module에서 페이지를 이동하는 방법을 여쭤보셨다. 예전에는 history라는 패키지를 사용하여 해결했던 것 같은데 이제는 navigate를사용하기 때문에 history를 사용하지 않아서 res값에따라 window.location.href ='~~~' 를 진행하도록 하였다. post나 put 명령을 보내고, 메인페이지에서 get할 때 변경된 데이터가 들어오지 않는 문제도 있었다. 이는 dispatch명령..

태그정리1 = https://codingpracticenote.tistory.com/125 221219 태그 정리 태그의 분류 block 태그 block태그는 새로운 라인에서 시작되며, block태그 다음에 오는 모든 태그들은 새 라인에서 시작 block태그들은 css 속성 중 height width margin padding을 작성할 수 있다. / inline 태그 codingpracticenote.tistory.com img 태그 이미지를 가져온 src 속성 : 가져올 이미지의 주소 alt 속성 : 이미지 불러오기 실패 시 보여줄 문자열 width 속성 : 이미지의 가로의 길이 height 속성 : 이미지의 세로의 길이 input 태그 입력창을 만드는 태그 속성 type에 따라 다양한 속성을 가진 입..

얼마 전 기능을 구현하고자 dispatch를 사용했었다. 그런데 dispatch부분만 주석을 제거하면 자꾸 에러가 발생했다. 결론부터 말하자면 thunk함수를 import하는데, 중괄호로 감싸지 않았기 때문이었다. 그래서 오늘은 이 중괄호를 사용해야하는 것과 아닌 것을 구분해보려고한다. export { react }; export const angular = 3; export default vue; 여기서 위 3가지는 아래와 같이 임포트 할 수 있다. import view, { react, angular as ANGULAR } from 'App.js' 1. react변수는 중괄호를 사용하여 그 내부에서 임포트해야한다. 2. view는 어디서 나온 것 일까? vue를 view로 명명한 것 뿐이다. 이는 어..

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도 사용해보았다. 서버와 통신하기위해 사용하는 것 인데, 이번..