윤민 13

[React] React란 무엇인가?

📢 현재 추구하는 목표 현 목표하는 프로젝트는 기도제목 업로드 SNS이다. 기도제목을 업로드하고 인스타그램과 같이 좋아요 기능, 업로드 기능, 프로필 기능을 구현하기 위해 공부를 시작했고, 내가 만들고 싶은 프로젝트가 있고, 이를 웹 앱으로 만들고 싶었던 것이다. 유튜브에서 찾아보니 정말 방대한 양의 데이터가 쏟아져 나왔다. 그중 내가 선택해야 할 개발 언어는 JS(javascript)라는 것을 알게 되었고, react.js나 vue. js 같은 라이브러리를 사용하면 보다 크리에이티브하고 좋은 웹을 만들 수 있다 하기에 바로 공부에 들어갔다. 그전에 가장 중요한 것은 react,vue,angular와 같은 라이브러리의 뿌리인 바닐라 JS를 알고 갔어야 했다. 강의를 선택하는데 처음엔 너무 막막하기만했다...

Front-end/REACT 2021.12.18

[Clone Coding]노마드 강의 수강 브러쉬 웹 만들기

https://paintbrushweb.y00nmin.repl.co/ Paint JS paintbrushweb.y00nmin.repl.co 노마드 코더 강사분 사이트에 올라온 무료 강의 바닐라 JS로 그림판 만들기 강좌를 수강 완료하였습니다. 한편으로 아쉬웠던 부분은 강의가 빠르게 흘러가서 제가 충분히 이해하고 넘어가는 시간보다는 따라서 치기 급급했던 모습이 아쉬운 점으로 남아있는 것 같습니다.... +) 보완해야 할 점 클론 코딩을 완료했으니 리액트를 고민해보거나 다른 JS요소를 채울 수 있는 강의를 통해 바닐라 JS실력을 높여서 제가 섹션을 구현해보는 걸 목표로 삼아야 하는 게 중요하다 생각합니다.

Front-end 2021.12.13

[Clone Coding] TO DO LIST WEB PAGE 만들기

https://ToDoListWEB.y00nmin.repl.co Yoon To do List web nomadeu-keurom-aeb-mandeulgi.y00nmin.repl.co (상단) 직접 만든 웹 사이트 노마드코더 바닐라JS 크롬 웹 만들기 수강 후기 노마드 코더 선생님의 강의 바닐라 JS로 크롬 웹 만들기 강의를 듣고 웹 TO DO LIT 웹 만들어보았습니다 :) 생활 코딩 바닐라 JS 수업을 듣고 나서 수강하니 수월하게 흘러갔던 것 같은데, 기초지식 없이 무턱대고 시작하면 어려움을 많이 겪을 수 있는 수업이라 생각했습니다...! 기초 지식을 배운 후 배운다면 정말 큰 도움을 주는 수업이지 않았나 싶습니다! CSS관한 내용은 코코아톡? 강의를 통해 알 수 있다했는데, 이미 HTML,CSS는 약간..

Front-end 2021.11.28

[JavaScript]객체지향 - 표준 내장 객체의 확장

표준 내장 객체란? 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. Object Function Array String Boolean Number Math Date RegExp [Regular Expression(정규표현식)] 따라서 표준 내장 객체와 상응되는 것은 사용자 정의 객체라 볼 수 있다 배열의 확장 첫번째 ..

[JavaScript] 상속(inheritance), 프로토타입

상속이란? 객체는 연관된 로직들로 이루어진 작은 프로그램이라고 할 수 있다. 상속은 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능을 의미한다. 단순히 물려받는 것이라면 의미가 없을 것이다. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해 준다. 쉽게 생각하기 위해 예제를 들어보자 객체는 하나의 컨테이너라 생각해 본다. 그 안에는 변수, 메소드가 포함되어 있다. 이때 객체의 특성을 통해 기존 객체를 물려받은 새로운 객체를 만들 수 있다. 이때 물려 받은 아들 객체(새로운 객체)는 부모 객체(원본 객체)와 동일한 기능을 가지게 된다. 아들 객체(새로운 객체)는 부모 객체(원본 객체)의 특정 기능은 제거, 추가하여 자신의 맥락에 맞게 재활용하게 된다.이러한 과정이 상..

[JavaScript] this(함수,메소드,생성자)

this this는 함수 내에서 함수 호출 맥락(context)[사용하는 상황에 따라 변화하는 가변적인 것을 맥락이라 한다.]를 의미한다. 즉, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다. 📢함수 안에서 this라는 keyword는 그 함수가 소속되어있는 그 객체를 가르킨다. 즉,this는 메소드가 속해있는 객체를 가르키도록 약속된 특수한 예약어라고 보면된다. 쉽게 코드로 알아보자 var yoon = { name = 'yoon', first = 10, second = 20, sum:function(){ return this.first+this.second; }/..

[JavaScript] arguments

arguments 함수에는 arguments라는 객체가 존재한다. 함수 안에서 여러가지의 인자의 정보를 담고있는 객체이다. 사용법이 매우 배열과 유사하기 때문에 유사배열이라 볼 수 있다. 즉, 함수를 이용하는 사람이 매개변수에 집어 넣는 값을 의미한다. function sum(){ //현재 인자 값이 존재하지 않는다. 그 이유는 인자가 들어오는 수를 예측 할 수 없기 때문이다. //함수 안의 arguments객체 안에 존재하는 값들을 꺼낸 후 sum에 더해 return해주면 결과를 알 수 있다. var _sum = 0; for(var i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i..

[JavaScript] 값으로서의 함수와 콜백

값으로서의 함수 함수는 객체이다. 일종의 값이라고 볼 수 있다. 거의 모든 언어가 함수를 가지고 있다. But, JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. ※ function a( ){ }를 다른 방식으로 표현 하면 var a = function() {}(변수 a의 값은 함수이다.)이라고 표현할 수 있다. a = { b:function(){ //여기서 함수는 값이고 객체에 저장될 수 있다. /* key = b ->변수와 같은 역할을 해주고 있다. value = function(){} key값을 속성,property라 부른다. 그리고 value값을 메소드라 부른다. 즉, 객체 안에 정의되어있는 함수를 메소드라 부른다. */ } } 상단의 코드의 key값을..

[WEB]API & UI & Interface

API: Application Programming Interface API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다 사전에서의 API 출처[위키피디아] 즉, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다. 기반이되는 시스템이 우리에게 제공한 interface를 응용해서 소프트웨어를 만드는 것입니다.(code의 형태를 띄고있는 interface.) ex) 응용프로그래밍 개발자가 alert이라는 명령어를 프로그래밍해서 웹브라우저에게 전달하면 우리는 alert..

Front-end 2021.10.23

[JavaScript] 함수[재사용성,입력(input), 출력(output)]

함수: 상자 함(函) 셈 수(數) function: 기능 함수란? 함수는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다 재사용성이란? 1.내가 작성한 코드를 여러 맥락에서 다시 사용 할 수 있도록 도와준다. 2. 코드 작성 시간을 단축 할 수 있다. 3. 코드 자체의 변화가 생기면, 모든 코드가 동시에 변화가 일어난다. 4. 코드의 가독성 증가 즉, 유지 보수의 용이한 특성을 가졌다. 함수(function)의 기본 문법틀 function 함수명([인자...[,인자]]){ 코드 return 반환값 } function numbering(){ document.write(1); } //함수를 정의(선언)함, (변수를 선언하듯) numbering(); //함수를 실행. 괄호()가 있기..