목록개발공부 (70)
코딩쌀롱
4월 22일 무조건 코드가 깔끔한 것이 좋은 것이 아니라, 다양한 사람들로부터 어떻게 발전시켜 나갈지에 대해서도 생각해야 한다. 예전에 비슷한 글을 봤었는데, 그 글은 더 효율적이고 빠른 코드로 수정을 했지만, 협업을 하는 면에서는 그것이 무조건 좋은 것은 아니라는 내용이었다. 중복되지 않고 깔끔한 것, 효율적인 코드가 협업하는 의미에서 무조건 좋은 것은 아닌 것 같다. 지금 학습과정에선 필요한 것 같지만 클린코드충이 되지 말자! 얽매이지 말자! 잘가, 클린 코드 25일 일단 글이 길어서 읽기 힘들었다. 모든 내용들이 다 이해되지는 않았다. 호스트 트리, 호스트 객체 이 부분 특히. 호스트 트리가 브라우저의 DOM 트리인지, 리액트의 virtual DOM 트리인지 아직 모르겠다. 알게된 것들은 왜 직접 ..
문제 프로그래머스 소수 찾기 문제 input: 숫자로 이루어진 문자열 output: 숫자를 조합해서 만들 수 있는 소수 개수 네이스 풀이 분석 두 시간 안에 풀지 못해서 네이스 풀이를 분석했다. 코드 고마워요🙂 네이스 코드를 복사해서 vsc에서 디버깅하면서 공부했다. function solution(numbers) { const answer = new Set(); const visited = []; findPrime('', visited, answer, numbers); // N! * logN return answer.size; } function findPrime(prevSum, visited, answer, numbers) { if (visited.length === numbers.length) re..
✱ class 예시 코드 // Car 부모 클래스 class Car { constructor(brand) { this.carname = brand; } present () { return `I have a ${this.carname}` } } // Car를 상속받는 Model 클래스 class Model extends Car{ constructor(brand, mod) { super(brand) this.model = mod; } show () { return this.present() + `, It is a ${this.model}` } } const mycar = new Model('Ford', 'Mustang'); mycar.show() //"I have a Ford, It is a Mustang"..
✱ 10진수 → 16진수 const dec = 65; const hex = dec.toString(16); // "41" dec값은 number, 반환값은 string ✱ 16진수 → 10진수 const hex = '4E'; const dec = parseInt(hex, 16); // 78 hex값은 영어 대소문자 상관없고, string도 가능하고 number도 가능하다. (알파벳 포함 16진수라면 당연 문자열로) 반환값은 number ✱ 10진수 → 아스키코드 문자 String.fromCharCode(65, 66, 67); // "ABC" String.fromCharCode(69, 118, 101); // "Eve" String 개체의 메서드인 fromCharCode에 10진수를 인자로 주면 아스키코드..
✱HTML 파일 email: ajaxsend ✱JS 파일 // ajaxsend 버튼 이벤트 등록 document.querySelector('.ajaxsend').addEventListener('click', function() { const inputdata = document.forms[0].elements[0].value; sendAjax('http://127.0.0.1:3000/ajax_send_email', inputdata); }) // 이벤트 핸들러 function sendAjax(url, data) { const data = {'email': data}; data = JSON.stringify(data); const xhr = new XMLHttpRequest(); xhr.open('POST..
const express = require('express') const app = express() app.listen(3000, function() { console.log('start! express server on port 3000); } ✘ app.listen(3000, 함수) 3000포트를 기반으로 함수 실행, 대기 중인 상태로 머물러있음 localhost:3000은 127.0.0.1:3000과 같다. // (1) app.get('/', function(req, res) { res.send("codingSalon") }) // (2) app.get('/', function(req, res) { res.sendFile(__dirname + "public/main.html") }) ✘ app.g..
1. package.json 파일 만들기 npm init // 직접 정보 입력 npm init -y // 디폴트값으로 자동 생성 2. express, nodemon 설치 + package.json의 scripts에 "start": "nodemon app" 추가 npm i express npm i -D nodemon // -D는 --save-dev의 줄임말로, 개발자용 패키지로 설치하는 것. // package.json의 devDependencies 속성에 저장된다. 3. app.js 파일 작성 const express = require('express'); const app = express(); app.set('port', process.env.PORT || 3000); app.get('/', (req..
서비스에 필요한 패키지를 하나씩 추가하다 보면 어느새 패키지 수가 100개를 훌쩍 넘어버리게 된다.(아직 나는 그래본 적 없음ㅎㅎ) 패키지 별로 버전이 있고, 버전마다 기능이 다를 수 있으므로 프로젝트를 설치할 때 패키지도 동리한 버전을 설치해야 한다. 이때 설치한 패키지의 버전을 관리하는 파일이 package.json이다! 따라서 노드 프로젝트를 시작하기 전에는 폴더 내부에 무조건 package.json부터 만들고 시작해야 한다. $ npm init $ npm init -y // -y 옵션은 --yes와 같다. 디폴트값으로 생성해줌 npm init을 하면 정보들을 일일이 입력해줘야 한다. npm init -y를 하면 디폴트 값으로 package.json이 생성된다. ✱ package.json의 "scr..
웹에서 파일을 입력 받으려면 HTML에서 input type="file"으로 받을 수 있다. input 태그에 대해서는 다음 링크를 참조! (input type="file"의 HTML, CSS 링크) ✱ JavaScript 코드 전체적으로 설명하자면, 1. 사용자가 input으로 파일을 선택하면 'change' 이벤트가 발생한다. 2. 파일이 선택되면 input의 'files' 속성에 'FileList' 형태의 유사배열객체가 저장된다. 3. 'FileReader' 객체는 파일을 읽을 수 있게 도와주는 객체다. 4. FileReader의 메서드 readAsText로 텍스트를 읽어올 수 있다. 5. 읽기 성공하면 'load'이벤트가 발생한다. 6. 읽어들인 파일의 내용은 FileReader 객체의 resul..
파일을 읽는 것은 JavaScript로 가능하고, 이것에 관한 글은 다음 링크를 참고! (JS로 파일 읽기 링크) 웹에서 사용자의 로컬 파일을 입력받기 위해서 input 태그의 type 속성을 file로 지정하는 방법을 사용한다. 이렇게만 했을 때 크롬 브라우저에서 확인하면 아래와 같이 나온다. ✱ input type="file"의 속성들 사용할 수 있는 여러가지 속성들이 있다. ‣ accept, multiple, files, value, capture accept : 입력받을 수 있는 파일의 유형을 지정하는 속성 지정하지 않으면 모든 유형의 파일을 입력받을 수 있다. 여러 종류의 파일을 입력받기 위해서는 쉼표로 목록을 구분하여 작성한다. 값으로는 확장자명과 MIME 타입을 적는다. - 확장자명 : .t..