12 함수 12.1 함수란?프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것함수 정의만으로 함수가 실행 되는 것이 아님.인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야됨. 이를 함수 호출이라 함 12.2 함수를 사용하는 이유함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이 용이재사용이 높은 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높임 코드의 가독성을 향상 시킴 12.3 함수 리터럴함수 리터럴은 function 키워드, 함수 이름, 매개변수, 변수목록, 함수 몸체로 구성 var f = function add (x,y) { retrun x + y ;};리터럴은 값을 생성하기 위한 표기법이고, 함수 ..

08 제어문 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용 8.1 블록문블록문은 0개 이상의 문을 중괄호로 묶은 것, 코드 블록 또는 블록이라고 부르기도 함자바스크립트는 블록문을 하나의 실행 단위로 취급블록문은 단독 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적 8.2 조건문자바스크립트 if ... else, switch 문으로 두가지 조건문을 제공 8.2.1 if ... else 문대부분의 if ... else 문은 삼항 조건 연산자로 바꿔 쓸 수 있음. 8.2.2 switch 문switich ( 표현식 ) {case 표현식1 : switch 문의 표현식과 표현식1이 일치하면 실행될 문;break ;default:swtich 문의 ..

04 변수 4.1 변수란 무엇인가? 왜 필요한가?변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별하기 위해 붙인 이름-> 값을 가리키는 상징적인 이름let result = 300result = 변수이름(식별자)300 = 변수 값변수에 값을 저장하는 것 = 할당(대입, 저장)변수에 저장된 값을 읽어 들이는 것 =  참조 4.2 식별자식별자 = 어떤 값을 구별해서 식별할 수 있는 고유한 이름식별자는 값이 아니라 메모리 주소를 기억 4.3 변수 선언변수를 사용하려면 반드시 선언이 필요, 변수를 선언할 때는 var, let, const 키워드를 사용 var 키워드로 선언한 변수는 값을 할당하지 않아도 undefined로 초기화  선언하지 않은 식별자에 접근하면 Refere..

파이널 프로젝트가 마무리되어 가는 와중에 유저피드백을 받은 폼을 살펴보던 도중 타인의 메시지까지 다보인다는 문제점을 받았고, 해당 로직을 수정 처음에는 모든 채팅방 및 메시지를 불러오고, 거기서 속한 메시지를 선별하는 식으로 가져오다보니 본인 것 외에 타인의 메시지까지 모두 가져와서 타인의 메시지까지 보인다는 점과 더불어 랜더링시 페이지 요청이 늘어나는 단점까지 있었는데, 위의 코드와 같이 요청시에 로그인한 유저가 속한 채팅방과 메시지만 조회를 해서 가져오게 수정을 하였고, 그 결과 본인의 메시지만 가져오게 했고, 네트워크 요청 또한 눈에 띄게 줄었다. 예를들어 채팅을 위해 왼쪽 이미지를 클릭을 하면 오른쪽 이미지가 열리게 되는데 그럴 시에 기존 400개씩 되던 네트워크 요청이 130정도로 확 줄었다.

채팅방 입장하면 헤더부분에 물품이미지가 보이는데, 그 부분에 네비를 줘서 클릭을하면 해당 상품 페이지로 이동하도록 구현, 그런데 이게 다른 컴포넌트 페이지에서는 잘 이동이 되는데, 같은 디테일 페이지 내에서는 쿼리가 바뀌면서 리렌더링 되지만 디테일 페이지는 변하지 않는 에러가 발생. 물품 이미지 부분을 눌렀는데 쿼리부분만 바뀌고 디테일 페이지는 수정 안되는 모습을 볼 수 있다. 리액트 라우터 돔 v.5.x에서 이런 에러가 많이 발생하고, v.6 버전대로 업데이트를 하면 해결 이 된다고 한다 그러나, package.json에 보이는 버전은 v.6.xx 번대 버전으로 해당 되는 사항이 없었고, 라우터 설정시 꼬여 있으면 그렇다고해서, 확인을 하면서 , 최상단 루트에 index.tsx 브라우저 라우터 를 옮겨..

초기 채팅 기능 개발시 컴포넌트 분리 한 채로 기능 구현 하기에는 어렵다는 판단하에 한 컴포넌트에 몰아서 기능을 구현을 하였더니 아래와 같이 537줄 정도 되는 코드길이의 파일이 만들어졌고, 그와 더불어 초기에 채팅내역을 불러오는 코드 부분도 한 파일에 몰아 넣어서 330줄 정도 되는 코드 양이었는데 그 코드들을 왼쪽에 market이라는 폴더에 기능별로 컴포넌트화 시켰고, 그 결과 원래 길었던 코드를 가 파일들은 아래와 같은 이미지를 얻게 되었다. 컴포넌트를 리팩토링 하는 과정에서 웃지 못할 해프닝이 생기기도 했는데 다른 컴포넌트에 컴포넌트를 활용하려면 이런식으로 접근을 해야하는데 컴포넌트 분리 전에 있던 함수 {ChatHeaderMessages()}이걸 바꿀 생각은 안하고 분리된 컴포넌트에서 R..