코딩앙마님의 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh&index=1&t=3774s 구조 분해 할당(Destructuring assignment) :배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 let [x, y] = [1, 2]; console.log(x); //1 console.log(y); //2 let users = ["Mike", "Tom", "Jane"]; let [user1, user2, user3] = users; // let user1 = users[0]; // let user2 = users[1]; // l..
코딩앙마님의 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=vI-XtN_Zdfg&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=10 본격적인 페이지 만들기 이제 페이지를 만들기 위해 불필요한 파일들을 다 삭제해준 후 먼저 토익 영단어 앱을 만들기 위해 먼저 헤더를 만들어준다. export default function Header() { return ( 토익 영단어(고급) 단어 추가 Day 추가 ); } 그다음 App 컴포넌트에서 연결해주면 이렇게 뜬다. 이제 이 밑에 day 별로 영단어를 확인할 수 있도록 해야 하는데 그러기 위해선 day별 영단어를 json으로 더미 데이터를 구현해야 한다. 이런 식으로! 데이터는 코딩앙마님의..
코딩앙마님의 리액트 강의를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=DuJC2ATdGtw&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=8 create-react-app 기본 폴더 설명 node_modules 폴더는 이 프로젝트를 실행할 때 사용되는 dependencies 모듈들이 모여있는 것이다. 여기에 설치되어 있는 내용들은 package.json 파일에 기록되어 있다. 이 폴더가 없으면 프로젝트를 진행할 수 없는데, 폴더가 없는 경우 npm install을 하면 그대로 다시 설치할 수 있다. 그래서 이 폴더는 내용도 많고 무겁기 때문에 깃에 올리지 않는다. 하지만 package.json에 내용이 기록되어 있기 때문에 다른 ..
유튜버 코딩앙마님의 자바스크립트 중급 강좌를 보며 정리한 내용입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh&index=1&t=2396s Array arr.splice(n, m) : 특정 요소 지움 : n부터 시작해서 m개 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 2); console.log(arr); //[1, 4, 5] arr.splice(n, m, x) : 특정 요소 지우고 추가 let arr = [1, 2, 3, 4, 5]; arr.splice(1, 3, 100, 200); console.log(arr); //[1, 100, 200, 5] 두 번째 인자로 ..
유튜버 코딩앙마님의 강의를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh 숫자, 수학 메소드 toString() :10진수를 2진수 또는 16진수로 변환 괄호 안에 2를 넣으면 2진수로, 16을 넣으면 16진수로 변환하여 문자열로 만들어진다. let num = 10; num.toString(); //'10' num.toString(2); //'1010' let num2 = 255; num2.toString(16); //'ff' Math Math.ceil(): 올림 let num1 = 5.1; let num2 = 5.7; Math.ceil(num1) //6 Math.ceil(nu..
이전에 진행했던 노마드 코더 바닐라 JS를 통해 배운 To Do List에 기능을 추가하여 사이트를 만들었습니다. To Do List를 메인으로 계산기, 이미지 슬라이드, 캘린더 기능을 추가하였고 모두 바닐라 JS로 구현하였습니다. 캘린더는 fullcalendar 라이브러리를 사용하였습니다. netlify를 통해 호스팅한 사이트의 주소입니다. Document (to-do-site-jy.netlify.app) Document 0 0 7 8 9 C 4 5 6 ÷ 1 2 3 × +/- 0 . - = + ❮ ❯ to-do-site-jy.netlify.app 디자인 사이트를 만들기 전에 피그마를 통해 대략적인 디자인을 계획하였습니다. 로그인 화면 저장된 사용자의 정보가 없을 땐 로그인 화면이 나타납니다. 입력 칸..
이전 블로그에서 2022.06.22에 작성한 포스팅입니다. 노마드 코딩의 바닐라 JS 2주 챌린지가 끝났다! 이렇게 순식간에 끝나다니... 무료 강의였음에도 불고하고 이번 챌린지와 강의를 통해 감을 잡아갈 수 있어서 좋았다. 졸업작품으로 강의에서 배운 to do List 사이트를 만들어야 했다. 만들고 싶은 테마랑 기능들이 있어서 다 구상해놨는데 어쩌다보니 코테 준비하는 기간이랑 겹쳐버려서 기존에 만들어놨던 거를 좀 더 수정해서 냈다 ㅠ 시간을 내면 낼 수 있었을 텐데 아쉽다. 그래도 구상해뒀던 건 틈틈이 만들어서 포폴에 넣을 예정이다! 그리고 졸업 작품을 git.io로 냈어야 해서 그냥 기계적으로 git에 알고리즘만 올리다가 처음으로 제대로 사용해봤다. (git 강의도 들어야돼..) 그래서 그것도 ..
유튜버 코딩앙마님의 자바스크립트 중급 강좌를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh&index=1&t=639s var과 let의 차이점 var은 재선언이 가능하지만 let은 불가능하다. var name = 'mike'; var name = 'snake'; //가능 let name = 'mike'; let name = 'snake'; //에러 hosting :스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 var은 선언하기 전에 사용할 수 있다. console.log(name); //undefined var name = 'mike'; 이렇게 var을 선언하기..
readonly public 일 때 접근할 순 있지만 내용을 수정하진 못하게 한다. class Dict { private words: Words constructor(){ this.words = {} } add(word: Word){ if(this.words[word.term] === undefined){ this.words[word.term] = word.def; } } class Word{ constructor( public readonly term:string, public readonly def :string ) {} } const kimchi = new Word("kimchi", "한국의 음식"); kimchi.def = "..." //readonly이기 때문에 불가능하다. readonly인 경..
