진주의 개발괴발

🍮 react app 파일구조 SIMPLEROUTE라는 폴더에 만든 리액트앱의 구조이다. node_modules, public, src, package.json, package-lock.json, README.md로 이루어져 있다. node_modules는 너무 많아서 펼치진 않았지만 모듈들이 들어있다. 모듈 추가할 때 게시물에 적었던 파일이다. public에는 많이 만지지 않았던... index.html과 리액트 아이콘 사진파일이 들어있다. manifest.json은 뭔지... 모르겠다. src에는 App.js이 들어있는데 여기서 주로 앱구성을 한다. src폴더가 주된 코드를 짜는 파일이 많은 폴더이다. App.js에서 export default App을 하고 있다. 이것을 index.js에서 impo..

자바스크립트는 싱글 스레드이다. 그 말인 즉슨, 한번에 한 개의 일만 처리할 수 있다는 의미이다. 실제로도 자바스크립트 코드를 작성하다보면 위에서부터 아래로 쭉 훑고 내려오며 위에서 에러가 생기면 아래 코드까지는 읽지도 않는다는 느낌을 받을 수 있다. 위 그림은 자바스크립트 엔진이 어떻게 구성되어 있는지를 보여준다. Call Stack이 한개이기 때문에 자바스크립트를 싱글 스레드라고 부른다. 그런데 이런 자바스크립트에서 비동기라니. 혼자 공부를 하며 이해가 되지 않았다. 스스로 찾아보며 생각한 결론은 '자바스크립트는 동기적이다.' 라는 것이었다. 그럼 setTimeout()과 같은 대표적인 비동기 함수는 어떻게 된걸까? 자바스크립트는 동기적이지만, 자바스크립트 런타임들은 비동기적이다. 그리고 그 런타임들..

오늘은 함수에 대해서 다시 공부해 보려고 한다. 점점 DOM으로 넘어가면서 javascript의 함수가 헷갈리고 있기 때문이다... 😢 우선 함수를 만드는 데에는 세가지 방법이 있다. 함수 선언문function isOdd(num) { if(num % 2 === 1) { return true; } } 내가 가장 많이 사용하고 익숙한 방법이다. 호이스팅이 일어난다. 표현식함수 let isOdd = function (num) { if(num % 2 === 1) { return true; } } 화살표 함수 let isOdd = (num) => {if(num % 2 === 1) {return true;}} 위와 동일하게 사용하기 위해 if를 넣었지만 보통은 아래 예제처럼 사용하는 것 같다. 그리고 {return..

Number : 문자열 숫자로 강제 변환 형변환 되지 않으면 NaN 반환 Number('123') // 123 Number('+456') // 456 Number('-1.1') // -1.1 Number('08') //8 Number('1e10') //10000000000 (16진법) Number(null) // 0 Number('') // 0 Number('1000won') // NaN Number('happy') // NaN 숫자가 아닌 문자가 들어가면 인식하지 못하고 NaN을 반환한다. parseFloat : 문자열을 숫자로 파싱하는 것 : 부동 소수점 숫자 반환 :공백이 아닌 첫 문자를 숫자로 변환할 수 없는 경우 NaN 반환 parseFloat('+421') // 421 parseFloat('-..

반복문 : for , while for(초기화, 조건, 증감문) 이 세 개의 조건은 전부 생략이 가능하지만, 반복문의 무한 반복을 탈출할 수 있는 장치가 필요하다. 💡return , continue, break 차이점 return : 함수에서 사용, 사용하는 즉시 함수 밖으로 주어진 값 반환 반복문에 사용했을 경우 : 반복문 끝남 continue : 반복문의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 다음 루프를 시작한다. let text = ''; for (let i = 0; i < 10; i++) { if (i === 3) { continue; } text = text + i; } console.log(text); // expected output: "012456789" 3만 ..

💡index 인덱스를 사용할 수 있다. let str = '안녕하세요' console.log(str[0]) // '안' let arr = ['의자','책상','소파'] console.log(arr[0]) // '의자' 인덱스를 이용한 메소드를 사용할 수 있다.( indexOf, slice 등) str.indexOf('안') // 0 arr.indexOf('의자') // 0 💡length 길이가 존재한다. let str = '안녕하세요' console.log(str.length) // 5 let arr = ['의자','책상','소파'] console.log(arr.length) // 3