개발일지

우리는 클론 주차에 웹소켓을 중점으로 잡았기 때문에 먼저 나는 프론트 리덕스 툴킷( 상태관리 )를 완성 후 투입을 해야 겠다고 생각했다. 다만 회고에 작성한대로 웹소켓에 대한 지식부족으로 후에 컴포넌트 분리 과정에서 코드를 벌려 써서, 파라미터값이나 props를 불러 들이기가 정말 헷갈렸고 깨지는 css를 마지막에 다듬지도 않고 일단 소켓을 연결해보자! 라는식으로 방치하게 되었다. 이 상황에 기획의 중요성과 도전하려는 기술에 대한 지식습득이 필요하다는 것을 느꼈다. 먼저 나는 채팅홈 뷰, 채팅방 조회, 생성, 삭제와 채팅메세지 조회, 추가 부분을 맡았다 저번 첫날에 기획을 끝내고 초기 세팅(깃, 폴더, 컴포넌트 등)을 하고 채팅방을 클릭하면 그 해당 채팅방 메세지가 조회되게 설정하였다. 질문 중에 map..

https://ko.javascript.info/optional-chaining 옵셔널 체이닝 '?.' ko.javascript.info 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 옵셔널 체이닝이 필요한 이유 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 다른 사례..

폴더는 이렇게 되어있었고 chatSlice.js에서 axios의 instace 변수를 가져오려고했다 전에 쓰던 함수들의 대부분이 근처 폴더였기 때문에 ./ 정도만 하면 바로 미리보기가 나와서 쉽게 설정이 가능했다 근데 지금은 폴더를 나오고 나와서 폴더를 들어가 설정해야했다 src폴더로 나와 shared폴더에서 axios.js를 설정해줘야하는데 이걸 한참해맸다 정답은 import instance from "../../shared/axios"; 처음에 늘 하던대로 ../ 했지만 같은 폴더안에 있는 작성중인 파일만 나오고 아무것도 나오지 않았다. 그전에는 그냥 이러면 나오겠지하고 자세히는 안알아봐서 그렇다 나도 그렇지만 초보자들은 분명히 헷갈릴 것 같아서 작성합니다!! - 3가지를 간단히 정리하자면, 1 '/..

63, 표준과 프로토콜의 세계 전화시스템은 전 세계의 전화기를 연결한다. 그럼 전 세계의 컴퓨터를 연결하려면 어떻게 해야 할까? 장비와 기술이 변화함에 따라 전체 네트워크가 매끄럽게 확장되도록 하려면 어떻게 해야 할까?? 서로 멀리 떨어져 있더라도.. 우선 네트워크와 컴퓨터를 식별하기 위해 이름과 주소가 필요하고, 직접 연결되지 않은 네트워크 사이의 경로를 찾을 수 있어야 한다. 모든 네트워크에서, 특히 인터넷에서 오는 데이터를 어떤 형식으로 구성할지, 누가 먼저 말할 것이고 어떤 응답이 이어질 수 있는지, 오류를 어떻게 처리할지 등에 대한 합의는 프로토콜(protocol)로 처리된다. 프로토콜은 일반적인 대화에서 이루어지는 약속과 어느 정도 비슷하다. 즉, 상대방과 소통하기 위한 일련의 규칙이다. 하지..

메서드와 this 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다. let user = { name: "John", age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다. 메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해 줍시다. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sa..

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행합니다. 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지합니다. 그렇다면 더는 쓸모 없어지게 된 것들은 어떻게 처리될까요? 지금부턴 자바스크립트 엔진이 어떻게 필요 없는 것을 찾아내 삭제하는지 알아보겠습니다. 그 전에 생명주기 먼저 알아가보시라고 링크 남겨드렸습니다!! ​1. Allocate memory(메모리 할당) : 프로그램이 사용할 수 있도록 운영체제가 메모리를 할당하는 단계입니다 2. Use Memory(메모리 사용) : 할당된 메모리를 실제로 프로그램이 사용하는 단계를 말합니다. 3. Release Memory(메모리 해제) : 프로그램에서 필요하지 않은 메모리 전체를 되돌려주어 재활용 하게 만드는 단계입니다. 가비지 컬..

이번에 미니 프로젝트로 첫 협업을 경험했다. 다들 어렵다 뭐다 하는데 당연히 어렵다 하지만, 재밌었다ㅎㅎㅎㅎ 일단 아쉬운점으로는 내 실력이 뭔가 백엔드분들의 실력을 따라가지 못한 느낌이었고 백엔드에서 스프링의 코드를 모르다보니 내가 어디까지 해야되고 어느정도를 해야 돌아오는지도 몰랐다. 내 생각은 2~3일 걸릴일이였는데 하루 만에 끝내서 결과를 내주고 기다리셨다. 근데 그 이후에 서버 배포 부분에서 오류가 나더라도 이게 정확히 누구 잘못인지도 모르고 같이 찾기도 했지만 끝내 해결하지 못했다ㅠㅠㅠ 오류도 각각 해결해봐도 결국 서버 배포 문제로 갔고 발표 전에는 로컬까지 고장나서 발표도 망쳐버렸다.. 현타가 좀 오더라 질문이라도 잘해서 마무리했어야하는데 로컬에 질문리스트를 버킷처럼 적어놨는데 날아가니 잠깐 ..

참조에 의한 객체 복사 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다. 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조’할 수 있는 값이 저장됩니다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않습니다. 예시: let user = { name: "John" }; let admin = user; // 참조값을 복사함 변수는 두 개이지만 각 변수엔 동일 객체에 대한 참조 값이 저장되죠. let user = { name: 'John' }; let admin = user; admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨 alert(user.name)..