나도 개발자 시켜주세요

더보기 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..

body-parser 데이터 처리에 도움이 되는 라이브러리 Post로 정보를 전송할 때 요청의 req.body로 받을 수 있음. express 버전 4부터 내장되어 있어 따로 설치가 필요X 단점, 멀티파트 데이터(이미지, 동영상, 파일 등) 처리X => multer 사용 파일 업로드 multer : 클라이언트에서 서버로 데이터 전송을 할 때 사용, 파일 선택 버튼 {userfile: ' /png', title: ' '} //설치 npm install multer //app.js에 multer 불러오기 const multer = require('multer'); 클라이언트 준비 form 태그에 enctype = "multipart/form-data"를 반드시 설정해야 동작한다. 파일 업로드 경로 설정 co..

더보기 💡MVC 구조 어디선가 들어본 것 같은데 배운 적은 없는 구조 혼자서 코드를 짜는 게 아니라 협업에 있어서 도움이 되는 백엔드 구조 방식에 대해 배웠다. 글을 다시 보니까 오타도 보이고, 수정할 부분이 많이 보인다. 이제는 이론보다는 코드의 구조적인 면을 더 깊게 파악해야되서 글로 정의하기가 어렵다. 그냥 어렵다. 더 많은 시도가 구조를 파악하는데 도움이 될거라 생각한다. MVC (Model View Controller) 소프트웨어 설계(데이터 및 논리 제어), UI를 구현하는데 사용되는 디자인 패턴이다. => 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론 mvc 이용 웹 프레임 워크 : spring(java), django(python), express(javascript), ruby..

✏️ 계속 누적되는 수업 내용에 하루라도 밀리면 안되겠다는 생각이 들었다.요청 방식에 따라 전송방식이 어떻게 달라지는지 직접 코드로 확인했다. 아무래도 백 다루는 것에서 더 많은 흥미를 가지고 공부하게 된다. + 동기 방식 vs 비동기 방식 더보기 동기 방식 : 하나 밖에 일을 못한다. 비동기 방식 : 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리 가능 동적 폼 전송 데이터를 input, button의 type 이 submit 인 속성들로 전송 시 페이지 이동이 일어난다. 최근 페이지를 보면 모든 동작에 있어서 페이지 이동이 일어나지 않는 부분도 있다. 예를 들어 로그인 화면에서 아이디나 비밀번호가 틀렸을 때, 페이지 이동이 되는 것이 아닌 비동기 HTTP를 사용해 같은 페이지 안에서 동작이 이..

동기 처리 vs 비동기 처리 작업을 어떤 흐름으로 처리할거야? 세탁기가 다 돌아가야 설거지를 시작할 수 있어! => 동기 처리 세탁기가 돌아가는 동안 설거지를 하자! => 비동기 처리 동기 처리(Synchronous) : A가 B의 작업 완료 여부를 확인하고 완료를 기다리는 것 비동기 처리(Asynchronous) : A가 B를 부를 때 콜백함수를 같이 보내서 B의 작업이 끝나면 콜백함수를 실행하고, 호출 이후, B가 완료하든 말든 신경쓰지 않는다. setTimeout() setTimeout() 메서드는 시간이 만료되면 지정된 코드를 실행하는 타이머 역할이다. //delay동안 기다리다가 code 함수 실행 setTimeout(code, delay); 기다리지 않고 다음 줄을 실행함 => 비동기 처리 비..