나도 개발자 시켜주세요

🗣️ 프로젝트 소개 양방향 통신을 위한 웹 소켓 기술을 활용하여 채팅 기능 구현 ✍ 기능 채팅 기능 보낸 시간 채팅 라인 수 확인 대화 상대 목록 공백 입력 X ✍ 코드 기술 static index.css my-chat 사용자가 보낸 채팅 메시지는 오른쪽 div 요소에 메시지 내용과 함께 사용자의 닉네임 출력 other-chat 상대방이 보낸 채팅 메시지 왼쪽 index.js 채팅 애플리케이션의 프론트엔드 코드 Socket.io 소캣 객체 생성 socket.on(' ', ()=>{...}); 소켓에 연결되었을 때 실행할 이벤트 핸들러 등록 views chat.ejs chat.js node.js, Socket.io 로 클라이언트와 서버 간의 양방향 통신을 구현 express 모듈 사용 클라이언트가 웹페이지..

더보기 front -> back 을 지나서 다시 front로 돌아왔다. 지금부터 가장 많이 사용하고 있는 react에 대해 배웠다. 아직 순수 자바스크립트만으로 코드 짜는 것도 벅차지만, 리액트를 배우면서 하나씩 더 채워나갈 예정이다. React 현재 가장 많이 활용하는 UI 화면을 만들기 위한 자바스크립트 라이브러리이다. 웹의 규모가 커지면, DOM을 직접 건드리게 되면서 코드가 복잡해진다. 리액트는 UI 상태가 변경되었을 때, 처음부터 새로 만들어서 보여주자는 아이디어에서 생겨났다. 속도와 성능의 문제는 가상 Dom인 Virtual Dom으로 빠르게 변경하고 Virtual Dom과 Dom을 비교하여 브라우저 Dom에 패치한다. react는 특정 환경에 렌더링하기 위해 다른 라이브러리와 함께 사용될 뿐..

더보기 ⚙️ 네트워크 지식이 필요한 부분이었다고 생각한다. 처음 듣는다면 정말 멍 때리고 있을 것 같다. 학교 수업 좀 더 열심히 들을 걸 후회한다. 오늘도 뼈저리게 느끼고 가는 전공지식의 중요성...🤣 그렇지만 통신에 대해 빠져버리니 끝도 없이 공부할 게 계속해서 나온다. 더 깊게 공부하는 것이 맞는지, 코드를 구성하기 위한 지식만 이해하고 넘어가는 게 맞을까라는 의문이 든다. 이해는 되지만,코드는 내 맘대로 안 짜져지는 슬픔이 있었기에 이론을 한 번 더 정리해보고 넘어가는 것도 많은 도움이 될 것 같다. 소켓 소켓은 프로그램이 네트워크 상에서 데이터를 주고 받을 수 있도록 서버랑 클라이언트를 연결해주는 도구이다. 휴대폰을 충전하고자 콘센트 구멍을 찾고 있었다. 그러나 구멍이 없는 벽에 코드를 넣는다 ..

더보기 이론으로 처음 들어본 듯한 표현식의 이름이라 생소했다. swap 부분에서는 다른 언어로 코드를 짜는 것보다 훨씬 코드가 짧고 간결해서 보기 좋았다. 그리고 자바에서 하던 get set..을 여기서 또 만났다. 언어를 많이 접한다는 건 좋은 거니까..ㅎㅎ 자바스크립트 es5까지만 해도 자바스크립트에는 클래스가 없었다고 한다. ES6 버전이 되면서 클래스와 비슷한 구조 문법을 추가하였다고 하니, 사용하는 것이 개발자의 숙명이지 않을까 라는 생각이 든다. 구조 분해 할당 구조 분해 할당은 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는다. 구조 분해 할당에는 배열 구조 분해와 객체 구조 분해가 있으며, 할당이라는 말이 익숙하듯 "변수의 값을 할당한다"랑 비슷하다. 배열 구조 분해 const[변수..

더보기 🍪 특정 사이트에 들어가는 순간 보이는 팝업 창은 모두 닫아버리는 나였다. 눈에 거슬리던 것들이 cookie 라니,, 한 두 개의 팝업이면 모를까 , 여러 개면 더욱더 거추장스럽다. 나처럼 보기 싫은 사람들을 위한 첫 화면에서 많은 쿠키가 있다면 모든 쿠키를 한 번에 제거할 수 있는 방법을 개발하면 좋을 것 같다. Cookie 웹 브라우저 ( 클라이언트)에 저장되는 키와 값(이름, 값, 만료일, 경로 정보)이 들어있는 작은 데이터 파일이다. 개발자 도구 Appliction > Cookie > 확인 가능 ex. 자동 로그인, 안내문의 "☐ 오늘 그만 보기" 동작 방식 클라이언트가 페이지를 요청한다. 서버에서 쿠키를 생성한다. http 헤더에 쿠키를 포함하여 보내고, 만료기간이 끝나지 않았다면 쿠키를..

더보기 📂 이 모든 것을 알고 나면 편안해지는 게 맞겠죠? ORM 패키지인 Sequelize를 배우고 정리해봤다. 더 자세한 것을 알기 위해서는 공식 문서를 읽어보는 것이 정답일 수도 있겠다. 문제가 생긴다면 가장 빠른 해결 방법은 구글링이라 생각한다. 이전에 sql문을 작성할 때는 실수가 잦았는데, sequelize를 사용하니 좀 더 편리하다는 생각이 들었다. Sequelize ORM 라이브러리 중 하나로 데이터베이스의데이터를 자바스크립트 구문을 통해 sql 문으로 변환한다. 이를 활용하면 sql 언어를 사용하지 않아도 DB 설정이 가능하다. 많은 RDBMS를 지원하고 promise 기반으로 구현되었기에 비동기 로직을 편하게 작성할 수 있다는 장점도 있다. 기존에는 SQL문 쿼리를 작성해서 CRUD를 ..

더보기 📂 프로젝트 생성만 N번째, 이제는 눈감고도 칠 것 같지 않다. 이제 조금 늘었다는 생각이 드는 건 npm install 에서 install 다 안치고 i 만 쳐버린다. 이 자신 정말 장하다 장해! 저번 시간에 배운 mvc 방식에 mysql 을 연결하여 사용하는 방법을 알아봤다. 아직 mvc도 잘 모르겠는데 내가 어떻게 mysql 연결까지 하지 라는 생각을 했지만 또 질질 끌려가고 있다. 📂 프로젝트 폴더 구조 controller Cvisitor.js View 와 Model 연결 부분 model Visitor.js 데이터 처리 node_modules routes index.js 경로 설정 views 404.ejs index.ejs visitor.ejs UI 관련 처리 .gitignore app.j..

.DS_Store? Desktop Services Store 의 약자로 macOS 에서 정의한 파일 포맷이다. 맥 OS 시스템이 finder로 폴더에 접근할 때 자동으로 생기는 파일로, 해당 폴더에 대한 메타데이터를 저장하는 파일이다. 맥 환경에서만 사용되지만, window 환경과 공유하는 과정에서는 문제가 생긴다. DS_Store 파일은 프로젝트와 관련없는 파일이며, git status를 사용했을 때나 발견되는 파일이라 깃허브로 넘기기 전에 삭제해도 된다. .DS_Store 삭제 방법 1) 생성된 파일 삭제 이미 .DS_Store 가 생성된 상태에서 삭제하기 위해서는, 파일 상위 디렉토리로 이동 후 아래 코드를 쳐주면 된다. find . -name .DS_Store -print0 | xargs -0 g..

데이터베이스 데이터를 저장하는 구조/자료의 모음으로 데이터의 종합소이다. 데이터 간의 중복은 없어야 한다. 데이터베이스가 없을 때는 파일 시스템을 사용해서 데이터를 저장해왔다. 그러나, 데이터가 중복되고 데이터 간 불일치가 발생하였고, 이를 DBMS로 해결하였다. DBMS(DataBase Management System) 파일 시스템이 가진 문제를 해결하기 위해 만들어졌다. 데이터베이스에 접근하고 이를 관리한다. - 관계형 데이터베이스 = RDBMS(Relational DBMS) 데이터베이스 용어 열 = column = atrribute = 속성 행 = record = tuple = 튜플 테이블 = table = relation key : 데이터베이스에서 튜플을 찾거나 순서대로 정렬할 때 구분하고 정렬의..

로컬저장소로 데이터 불러오기 전에 git fork 하고 원격저장소에서 로컬로 가져오는 거 기억나는데로 했다가 다시 add 할 때 쓰디쓴 맛을 봐버렸다. 그냥 폴더만들고 pull 받을 걸.. $ cd 저장하고_싶은_디렉토리 $ git clone 복사한_git주소 //원격 저장소의 이름 가지고 오기 처음에는 origin만 뜸 $ git remote //새로운 원격 저장소 추가 $ git remote add 새로운_원격저장소_이름 fork한_git주소 //로컬 저장소에는 없지만 원본 저장소에 있는 데이터 가져오기, fetch 명령어 $ git fetch 새로운_원격저장소_이름 1) 터미널을 열고 clone 할 저장소 폴더로 이동(cd) 2) git clone (github 주소) => 이렇게 했다가 파국을 맞..