본문 바로가기

분류 전체보기

 (397)
클래스 컴포넌트의 state속성에 대하여, ref 속성에 대하여 클래스 컴포넌트 안의 state역시 속성(property)이다. 그리고 클래스 컴포넌트의 속성은 변수와 같은 개념이라고 우선은 알아두자. 리엑트에서 데이터는 1. 변수에 넣거나 2. state에 넣는다. 리엑트를 웹앱처럼 동작하게 만들고 싶다면 중요한데이터는 state를 사용한다. state로 등록된 데이터가 바뀌면 그것은 곧 새로고침 없이도 리랜더링된다. 변수와 state로 관리되지 않는 것은 변경되어도 자동 re-rendering이 되지 않음. ====================================================================================== useState만 사용하면 해당 인수가 prop이 변경될 때마다가 아니라 처음에만 사용되기 때문에 작동하..
import와 require의 공통점과 차이점 그리고 module.exports와 export default 의 공통점과 차이점에 대하여 참고: https://velog.io/@ylyl/React-import-require React관련 동영상을 보면 어느곳에서는 import, export default를 사용하고 어느 동영상에서는 require, module.exports를 사용하는데, 시험삼아 두개를 서로 바꾸어 보아도 정상적으로 동작을 하였다. 이런 것을 보고 이것들의 차이점은 무엇인지 궁금하여 이글을 쓰게된다. 요약: import : es2015(React) 모듈 문법으로 정적 import 로써 항상 파일 상단에서만 사용된다. 이에반해 require은 Node의 모듈 문법(common.js)으로 동적 import에 해당하며 파일 어디에서나 사용가능하다. 쉽게 생각해서 React에서는 import 가 필요할때는 require를 쓰면 ..
React launch2! (매우중요) 출처:https://www.youtube.com/watch?v=6GECT2Jrr_g (실습 내용은 내 프로젝트파일인 REACTPROJECTS를 참고) pages폴더와 그 안에 Home.js파일을 만듬 // import React from "react"//jsx문법을 쓰기위해 필요함 // //JSX문법은 HTML태그를 사용할수 있으므로 아래와 같은 것을 return하는게 가능한 것임 // //함수형 컴포넌트의 예 // function Home(){ // return Home화면입니다. // } // export default Home; //클래스형 컴포넌트의 예 import React, {Component} from "react"; class Home extends Component{ render(){//..
TailwindCSS설치방법 # TailwindCSS 설치방법 #npm #CDN 출처: https://www.youtube.com/watch?v=zun40BxCzYU&list=PLTb3qGCzYjS3DHl3q0Hlq8kRT5fd9aK5_&index=2 (위의 영상은 https://tailwindcss.com/docs/installation 여기에 있는 내용을 자세히 설명한 것이다. 여기서 주의할 점은 아무리 영상을 봐도 결국은 그것은 흔들리는 지식이다. 내가 굳건하게 설려면 공식문서를 해석하는 힘을 길러야 한다. 이 힘을 기르는 좋은 방법은 저런 친절한 영상과 문서를 비교해가면서 보고 어떤 내용이 공식문서에는 생략되어 있는가, 그리고 공식문서에서는 어떤 방식으로 설명하는가, 둘의 차이점을 비교하면서 공부하는 것이다) (복습. npm..
npm에 대하여 출처: https://m.blog.naver.com/magnking/220961896609 npm은 Node Packaged Manager의 약자! 먼저 Node는 Node.js를 의미하는 것 같습니다. Packaged라는 것은 package로 만들어진 것들을 의미하는 것 같습니다. package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고 Manager는 잘 아시는 것처럼 관리자를 의미합니다. 이걸 합쳐보면 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 것이 됩니다. 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 ..
자바스크립트의 this #자바스크립트 this #js this 출처: https://poiemaweb.com/js-this (this뿐만 아니라 apply/call/bind까지다루고 있다) 요약: Java와 달리 자바스크립트의 경우 Java와 같이 this에 바인딩(식별자와 데이터를 연결)되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다(하지만 내 생각에는 어떻게 호출했는가 뿐만 아니라 어떻게 선언 되었는가도 영향을 주는것 같다. 아래의 예시를 보면 객체안에 함수표현식 방식으로 선언된 함수에서의 this는 해당..
Front, Back 분리시 동작 원리, 배포, 개발, 내가 궁금했던 것들(웹 서비스 구조) #배포 #분리하여개발 #서버 #프론트엔드 서버 #백엔드 서버 (아래가 정리된 내용으로 출처 말고 아래서 보기를 권함) 출처: https://it-eldorado.tistory.com/85 좋은글 출처: https://iborymagic.tistory.com/94 도움이 되는 채팅: https://okky.kr/questions/874573 https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html : Web server와 WAS의 차이와 웹 서비스 구조에 대해 설명한 매우 유익한 글 1. 일반적인 웹 어플리케이션의 동작 원리 : 풀 스택 (Full Stack) 프론트 엔드와 백 엔드가 구분되지 않는 일반적인 웹 어플리케이션의 동작 원리는 어떠할까? 파이..
비동기식 처리 모델과 Ajax 출처: https://poiemaweb.com/jquery-ajax-json 1. Introduction 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 전환이 발생한다. 이것은 브라우저와 서버와의 통신에 의한 것이다. 서버는 요청받은 페이지(HTML)를 반환하는데 이때 HTML에서 로드하는 CSS나 JavaScript 파일들도 같이 반환된다. 클라이언트의 요청에 따라 서버는 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 서버로부터 웹페이지가 반환되면 클라이언트(브라우저)는 이를 렌더링하여 화면에 표시한다. Traditional Web Page Lifecycle Ajax(Asynchronous JavaScript and XML)는 자바스크립트..

티스토리툴바