노마드코더 <TIL>HTML CSS 자바스크립트 #2 자바스크립트는 브라우저에 이미 있다. 브라우저는 HTML을 열고 HTML이 CSS와 JS를 가져옴. HTML이 접착제 역할. • 콘솔에 이 값을 출력한다. • 자바스크립트는 위에서 아래로 읽는다. • 길이가 긴 변수를 선언할 때 → Camelcase 바꾸는게 더 게으를 수 있다. • const는 값을 업데이트 할 수 없다. • const나 let은 처음 변수를 생성할 때만 써준다. • nul... 노마드코더크롬앱만들기노마드코더 [typescript] interface를 활용한 typing typing을 할 수 있는 방법은 여러가지가 있지만, 노마드코더 수업에서는 interface를 활용해서 정리해보고자 한다. 예시는 Ts Doc에서 가져왔다. interface 활용 printCoord라는 함수에 pt변수를 만들고 직접적으로 :number를 붙이지 않고 interface를 활용했다. Point라는 객체를 따로 정의해서 연결하였다. 결과는, 노마드코더 참고... interface노마드코더typescriptinterface TIL | Get Ready for Django - 2 파이썬은 유명한 객체 지향 언어(Object-Oriented Programming, OOP)이다. 객체 지향 언어의 장점 중 하나는 하나의 객체를 만들어서 여러 객체를 생성할 수 있고, 객체를 관리하기 편하다. <프엔이와 백엔이의 하루 일과> 아침 8시 - 기상 9시 ~ 12시 - 업무 보고 일지 작성 13시 ~ 15시 - 교육 15시 ~ 16시 - 회의 16시 ~ 18시 - 새로운 프로젝트... 노마드코더노마드코더 html 강의 끝!!😎 노마드코더의 html강의는 다들었다. 이제 자신감을 가지고, 스스로 찾아보면서 공부하자. 뭔가 내용을 더 배워야한다. 부족하다는 편견을 버리자. 당분간 스파르타코딩클럽 강의를 듣느라 노마드코더의 강의는 많이 못들을 듯하다. 근데 정말 좋은 강의였다. 내가 코딩에 더욱 흥미를 갖게해준 사람이다. (Thank u NICO) 아니 근데 이 블로그 왤케 빡치냐 그냥 코드 적으려고 했는데 걍 다 실행... 비전공개발코딩노마드코더노마드코더 21.8.3 html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. 리스트 안에(ol/ul) 사용할 수 있는 태그 : list item (li) html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. element당 하나의 id만 가질 수 있다. 사진과 같이 css를 작성할 수 있다. span은 옆에 다른 span이 올 수 있다. 옆에 다른 요소가 못 오는 것을 block, ... 클론코딩Today I learned카카오톡TIL노마드코더TIL [React] Coin Tracker 강의 정리 🚨 이 글은 노마드 React JS 마스터 강의를 본 후 정리한 글입니다. App.css App.test.tsx 파일 삭제 후 App.tsx, index.tsx, index.html 파일 내부도 깔끔하게 정리해줍니다. React Router 6버전으로 진행 시 @types/react-router-dom를 설치하지 않아도 타입을 불러옵니다. 2. styled-reset 패키지를 설치 후 com... clonecodingreact typescriptReact노마드코더React [파이썬] 딕셔너리를 활용한 CRUD구현 bts를 활용하여 dictionary 연습을 해보았다. -노마드코더 복습... CRUDpythonif파이썬dict노마드코더CRUD #2 PRACTICE 해당 HTML 코드를 자바스크립트에서 Document 객체를 사용하여 수정하기 title.style.color = 'red'; 아래처럼 console.dir() 을 사용하여 해당 객체(태그)의 프로퍼티들을 확인 할 수 있다. title.style.color = "blue"; 해당 함수를 실행하면 title 객체의 프로퍼티인 style의 프로퍼티인 color의 값을 "blue"로 할당한다. 즉... 노마드코더노마드코더 No.4 ReactJS로 영화 웹 서비스 만들기 따라서 state의 상태를 변경할 때 react가 render function을 호출해서 바꿔줘야한다. react는 html을 개발자 도구로 보게 된다면 신기한 동작을 하는데 이 동작은 변화가 있는 부분만 업데이트를 하는것을 볼 수 있다. render를 할 때, react는 virtual DOM을 가지고 있기 때문에 바뀐 부분만 다시 렌더링해준다. react는 setState를 functio... React노마드코더nomad coder리액트React [트위터 클론코딩] - 파이어베이스 셋팅하기 파이어베이스를 사용해서 트위터 클론코딩을 해 볼 예정이다. 우선, firebase를 설치한다. 또는 해당 링크로 이동해서 프로젝트를 만들고, apiKey를 생성한다. 프로젝트를 생성하면 다양하게 SDK 설정을 할 수 있다. 내가 사용한 firebase 버전은 8.10.0 버전이다. 프로젝트에서 firebase.js 파일을 생성해준 뒤, SDK에서 생성된 apiKey를 입력해준다. index.... 클론코딩프론트앤드파이어베이스초보노마드코더노마드코더 [TIL] JS: 바닐라 JS로 크롬 앱 만들기 02 ⭐ form에 Username을 입력하면 Hello 'Username' 하고 greeting 문구가 뜨도록 하기 ! event.preventDefault() username 입력 후 submit 되지 않도록 했다. localStorage.setItem() username을 localStorage에 저장하여 다시 이름을 물어보지 않도록 했다. .classList.add(SHOWING_CN) .... 노마드코더js바닐라jsjs [react] PropTypes 타입검사 PropTypes CDN 설치 코드가 많아지고 그에 따른 props가 많아진다면, props의 type에 따른 버그가 생길 수 있다. 이 버그는 syntax error에 들어가지 않아서 console창에 뜨지 않기 때문에 PropTypes를 설치하여 console창에 검사를 할 수 있도록 만들어보자. 잘 설치됬는지 확인하기 위해 console창에서 PropTypes를 쳐본다. 위와 같이 잘 ... Reactproptypes노마드코더React [강의노트] [React] useScroll은 스크롤을 했을 때 색상을 바꾸는 등의 어떤 이벤트가 일어나는 것 출처 노마드코더... 노마드코더리액트ReactReact [트위터 클론코딩] - 파이어베이스 셋팅하기 2 firebase 기본 셋팅을 마치고, 인증부분을 셋팅하려고 하는데 강의 내용를 바탕으로 셋팅하려고 했으나, 버전의 차이로 인한 문제가 보여서 최신 버전으로 구현을 하자, 라는 생각에 9.6.0 버전으로 다시 설치하고 셋팅을 계속 이어나갔다. 저번 포스팅에서 생성했던 firebase.js의 코드는 다음과 같이 수정되었다. firebase version 9 setting code 구글링을 통해 ... 클론코딩노마드코더초보파이어베이스프론트앤드노마드코더 📃노마드코더 Vanilla JS 메모1 자바스크립트nomadcoderJavaScriptvanillajs노마드코더JavaScript 📃노마드코더 Vanilla JS 메모2 h1 변수 선언(class="hello"의 h1 태그 선택) h1의 innerText를 "Click Me"로 변경 addEventListener를 사용하여 "click", "mouseenter", "mouseleave" 등의 이벤트를 추가하고 함수를 통해 실행. h1.onclick = handleTitleClick; 과 h1.addEventListener("click", handleTitle... JavaScriptnomadcoder노마드코더vanillajs자바스크립트JavaScript
<TIL>HTML CSS 자바스크립트 #2 자바스크립트는 브라우저에 이미 있다. 브라우저는 HTML을 열고 HTML이 CSS와 JS를 가져옴. HTML이 접착제 역할. • 콘솔에 이 값을 출력한다. • 자바스크립트는 위에서 아래로 읽는다. • 길이가 긴 변수를 선언할 때 → Camelcase 바꾸는게 더 게으를 수 있다. • const는 값을 업데이트 할 수 없다. • const나 let은 처음 변수를 생성할 때만 써준다. • nul... 노마드코더크롬앱만들기노마드코더 [typescript] interface를 활용한 typing typing을 할 수 있는 방법은 여러가지가 있지만, 노마드코더 수업에서는 interface를 활용해서 정리해보고자 한다. 예시는 Ts Doc에서 가져왔다. interface 활용 printCoord라는 함수에 pt변수를 만들고 직접적으로 :number를 붙이지 않고 interface를 활용했다. Point라는 객체를 따로 정의해서 연결하였다. 결과는, 노마드코더 참고... interface노마드코더typescriptinterface TIL | Get Ready for Django - 2 파이썬은 유명한 객체 지향 언어(Object-Oriented Programming, OOP)이다. 객체 지향 언어의 장점 중 하나는 하나의 객체를 만들어서 여러 객체를 생성할 수 있고, 객체를 관리하기 편하다. <프엔이와 백엔이의 하루 일과> 아침 8시 - 기상 9시 ~ 12시 - 업무 보고 일지 작성 13시 ~ 15시 - 교육 15시 ~ 16시 - 회의 16시 ~ 18시 - 새로운 프로젝트... 노마드코더노마드코더 html 강의 끝!!😎 노마드코더의 html강의는 다들었다. 이제 자신감을 가지고, 스스로 찾아보면서 공부하자. 뭔가 내용을 더 배워야한다. 부족하다는 편견을 버리자. 당분간 스파르타코딩클럽 강의를 듣느라 노마드코더의 강의는 많이 못들을 듯하다. 근데 정말 좋은 강의였다. 내가 코딩에 더욱 흥미를 갖게해준 사람이다. (Thank u NICO) 아니 근데 이 블로그 왤케 빡치냐 그냥 코드 적으려고 했는데 걍 다 실행... 비전공개발코딩노마드코더노마드코더 21.8.3 html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. 리스트 안에(ol/ul) 사용할 수 있는 태그 : list item (li) html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. element당 하나의 id만 가질 수 있다. 사진과 같이 css를 작성할 수 있다. span은 옆에 다른 span이 올 수 있다. 옆에 다른 요소가 못 오는 것을 block, ... 클론코딩Today I learned카카오톡TIL노마드코더TIL [React] Coin Tracker 강의 정리 🚨 이 글은 노마드 React JS 마스터 강의를 본 후 정리한 글입니다. App.css App.test.tsx 파일 삭제 후 App.tsx, index.tsx, index.html 파일 내부도 깔끔하게 정리해줍니다. React Router 6버전으로 진행 시 @types/react-router-dom를 설치하지 않아도 타입을 불러옵니다. 2. styled-reset 패키지를 설치 후 com... clonecodingreact typescriptReact노마드코더React [파이썬] 딕셔너리를 활용한 CRUD구현 bts를 활용하여 dictionary 연습을 해보았다. -노마드코더 복습... CRUDpythonif파이썬dict노마드코더CRUD #2 PRACTICE 해당 HTML 코드를 자바스크립트에서 Document 객체를 사용하여 수정하기 title.style.color = 'red'; 아래처럼 console.dir() 을 사용하여 해당 객체(태그)의 프로퍼티들을 확인 할 수 있다. title.style.color = "blue"; 해당 함수를 실행하면 title 객체의 프로퍼티인 style의 프로퍼티인 color의 값을 "blue"로 할당한다. 즉... 노마드코더노마드코더 No.4 ReactJS로 영화 웹 서비스 만들기 따라서 state의 상태를 변경할 때 react가 render function을 호출해서 바꿔줘야한다. react는 html을 개발자 도구로 보게 된다면 신기한 동작을 하는데 이 동작은 변화가 있는 부분만 업데이트를 하는것을 볼 수 있다. render를 할 때, react는 virtual DOM을 가지고 있기 때문에 바뀐 부분만 다시 렌더링해준다. react는 setState를 functio... React노마드코더nomad coder리액트React [트위터 클론코딩] - 파이어베이스 셋팅하기 파이어베이스를 사용해서 트위터 클론코딩을 해 볼 예정이다. 우선, firebase를 설치한다. 또는 해당 링크로 이동해서 프로젝트를 만들고, apiKey를 생성한다. 프로젝트를 생성하면 다양하게 SDK 설정을 할 수 있다. 내가 사용한 firebase 버전은 8.10.0 버전이다. 프로젝트에서 firebase.js 파일을 생성해준 뒤, SDK에서 생성된 apiKey를 입력해준다. index.... 클론코딩프론트앤드파이어베이스초보노마드코더노마드코더 [TIL] JS: 바닐라 JS로 크롬 앱 만들기 02 ⭐ form에 Username을 입력하면 Hello 'Username' 하고 greeting 문구가 뜨도록 하기 ! event.preventDefault() username 입력 후 submit 되지 않도록 했다. localStorage.setItem() username을 localStorage에 저장하여 다시 이름을 물어보지 않도록 했다. .classList.add(SHOWING_CN) .... 노마드코더js바닐라jsjs [react] PropTypes 타입검사 PropTypes CDN 설치 코드가 많아지고 그에 따른 props가 많아진다면, props의 type에 따른 버그가 생길 수 있다. 이 버그는 syntax error에 들어가지 않아서 console창에 뜨지 않기 때문에 PropTypes를 설치하여 console창에 검사를 할 수 있도록 만들어보자. 잘 설치됬는지 확인하기 위해 console창에서 PropTypes를 쳐본다. 위와 같이 잘 ... Reactproptypes노마드코더React [강의노트] [React] useScroll은 스크롤을 했을 때 색상을 바꾸는 등의 어떤 이벤트가 일어나는 것 출처 노마드코더... 노마드코더리액트ReactReact [트위터 클론코딩] - 파이어베이스 셋팅하기 2 firebase 기본 셋팅을 마치고, 인증부분을 셋팅하려고 하는데 강의 내용를 바탕으로 셋팅하려고 했으나, 버전의 차이로 인한 문제가 보여서 최신 버전으로 구현을 하자, 라는 생각에 9.6.0 버전으로 다시 설치하고 셋팅을 계속 이어나갔다. 저번 포스팅에서 생성했던 firebase.js의 코드는 다음과 같이 수정되었다. firebase version 9 setting code 구글링을 통해 ... 클론코딩노마드코더초보파이어베이스프론트앤드노마드코더 📃노마드코더 Vanilla JS 메모1 자바스크립트nomadcoderJavaScriptvanillajs노마드코더JavaScript 📃노마드코더 Vanilla JS 메모2 h1 변수 선언(class="hello"의 h1 태그 선택) h1의 innerText를 "Click Me"로 변경 addEventListener를 사용하여 "click", "mouseenter", "mouseleave" 등의 이벤트를 추가하고 함수를 통해 실행. h1.onclick = handleTitleClick; 과 h1.addEventListener("click", handleTitle... JavaScriptnomadcoder노마드코더vanillajs자바스크립트JavaScript