코딩하는 감자

다시 개발공부를 시작하면서 가볍게 듣기 좋은 강의를 찾다가 발견한 강의, 가볍게 it관련 정보부터 지식까지 훑어보기 좋아서 비전공자라면 추천! ! 강의 링크 : https://class101.page.link/yNrA 개발자가 되고 싶은 당신을 위해, 개발자가 되는 로드맵 A to Z | 그랩 클래스 소개 영상 개발자가 되고 싶은데, 어떻게 시작할지 막막하세요? 첫번째, 개발자가 되고 싶은데 뭐부터 해야할지 모르겠어요. 두번째, HTML이나 파이썬 같은 쉬운 것부터 코딩을 하는게 맞 class101.net 아래내용은 강의 커리큘럼만 참고하여 추가 조사하여 정리한 내용이니 강의는 직접 찾아보길 추천합니다! 아래 개념정리는 계속하여 추가할 예정 :) CHAPTER 2 컴퓨터 시스템의 핵심 - OS 컴퓨터 간..

React 복잡한 코드를 숨기고 사용자 정의 태그(컴포넌트)를 만들어 부품처럼 사용할 수 있도록 해줌 1. 개발환경 - node.js 설치 - vscode를 사용하여 개발 - 터미널에 npx create-react-app my-app 입력 - 설치가 완료되면 npm start로 시작 🔔 npm: 자바스크립트를 위한 패키지 관리자, 런타임 환경 Node.js의 기본 패키지 관리자 이다. - index.js 파일에 코드를 작성 , 각 기능을 구현한 여러 js파일을 import하여 사용 - npm run build : 배포판을 생성 - npx serve -s build: 배포 서버를 생성 2. 컴포넌트 생성 컴포넌트(함수형) 이름은 대문자로 시작 컴포넌트 생성 전 코드 //기존의 코드 function App(..

1. JSON - JavaScript Object Notation : simplest data interchange format key-value 프로그래밍 언어나 플랫폼에 독립적 - Object to JSON : stringfy(value,replacer?) json=JSON.stringify(['apple','banana']); //["apple","banana"] const rabbit={ name:'tori', color:'white', size: null, birthDate: new Date(), //함수는 json에 제외 +symbol도 제외 jump: ()=>{ console.log(`${this.name} can jump!`); }, }; json=JSON.stringify(rabbit);..

1. 배열(Array) index는 0부터 시작 한 배열안에는 동일한 타입의 데이터를 넣음 (javascript는 여러 타입이 가능하지만 권장x) - 선언(Declaration) const arr1=new Array(); const arr2=[1,2]; const fruits=['🍎','🍌']; console.log(fruits); - index position: index로 접근 console.log(fruits[0]); //apple console.log(fruits[fruits.length-1]) //마지막 data - 전체 탐색 a. for for(let i=0;iconsole.log(fruit)); callback 함수 forEach(callbackfn:(value: T, index: numbe..

1. class vs object - class : 틀의 역할(template) class Person{ constructor(name, age){ this.name=name; this.age=age; } speak(){ console.log(`${this.name}:hello!`); } } 객체지향 언어의 특징, 캡슐화, 상속,,, 한번만 정의(데이터는 x) 속성(field) : name, age method: speak() - object: 틀에 데이터를 넣어 생성한 것(instanxe of a class) const jieun=new Person('jieun',24); console.log(jieun.name); console.log(jieun.age); jieun.speak(); 여러번 생성 가능..

1. 스크립트 태그 처리 방법 html태그를 parsing하다가 script태그를 만나면 js파일을 서버에서 다운받아서 실행하고 다시 parsing하는 순서 1) head안에 script 포함 => 만약 js가 너무 크고 느리다면 문제 발생 2) body안에 script 포함 => 사용자가 기본 html 컨텐츠는 빨리 볼 수 있지만, 자바스크립트에 의존적인 웹이라면 정상적인 사이트를 볼때까지 딜레이가 발생 3) head+async속성 => 병렬로 js파일을 다운로드하고 계속 parsing을 진행하다가 다운로드가 완료되면 js파일을 실행 => 시간이 절약되지만, html이 더 빠르고 설치가 끝났을때 parsing이 멈추기 때문에 딜레이 발생 가능 4) head+defer => parsing과 함께 js파일..

반응형 웹디자인(responsive web Design) => 최근 다양한 사이즈의 기기가 생겨나며 필요성이 생김 "content is like water" 1. fluid layout을 위한 속성 => flex grid, flex box, %, vw, vh 2. 보통 규격 mobile: 320px~480px tablet: 768px~1024px desktop:1024px~ 3. 재배치 되는 기능: Media queries @media screen/print/speech/all and/not/only/, (min-width:800px) {} 4. 반응형 웹 실습: 화면 크기가 줄어들면 네비게이션 메뉴 변경 ① 기본 메뉴: 3개의 박스로 나누어 flexbox의 속성들을 이용하여 정렬 display: fle..

1. HTML 여러 태그는 MDN web docs를 참고하는 것을 추천! HTML: Hypertext Markup Language | MDN HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기 developer.mozilla.org validator을 이용하여 올바른 태그를 사용하였는지 검사 가능 The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions ..

1. WEB 정의 안내 페이지 HTML, CSS, JavaScript 파일 분리 그리드를 이용하여 구성 day/ night 버튼 클릭시 배경과 글자색 변경 객체와 함수를 이용하여 자바스크립트 구현 https://github.com/handje/WEB_Study.git GitHub - handje/WEB_Study Contribute to handje/WEB_Study development by creating an account on GitHub. github.com

🔔토글(toggle): 토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다. 1. 조건문: 현재 value 값을 이용하여 조건문 구현 if(document.querySelector('#ToggleButton').value==='night') 리팩토링 사용자가 보이는 외부 화면의 변경 없이 코드의 구조를 재조정하여 가독성을 높이고 유지보수를 편하게 하는 행위를 뜻한다. 1. 반복되는 부분을 변수로 처리하거나, this를 이용하여 구현 var target=document.querySelector('body'); if(this.value==='night..