분류 전체보기 (28) 썸네일형 리스트형 리액트 메모 모음 리액트 - 페이스북에서 만든 UI를 만들기 위한 자바스크립트 라이브러리 - View 레이어를 담당(MVC) - React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(데스크랍 어플리케이션) - 그외 : Angular(프레임워크) : Vue(프레임워크와 라이브러리의 중간) 리액트 특징 - Component로 이루어진 UI라이브러리 - Component는 한 가지 기능을 수행하는 UI단위 - 리액트 어블리케이션은 꼭 하나 이상의 Component로 이루어져 있음 - 최상위 컴포터넌트는 Root - 컴포넌트 내부의 State가 존재함 - 메모리에 Virtual DOM Tree를 가지고 있음 -> 트리에있는 자식컴포넌트의 render함수가 호출이 됬을때, 이전의 .. 프로젝트 링크 100min project https://www.mapoeum.com/ https://www.mapoeum.com/ www.mapoeum.com 첫 웹 프로젝트 https://youtu.be/e5I-bbJJQGY 클론 https://mellow-scone-748b1f.netlify.app/ astoncm.com WELCOME At Aston we strive to understand our clients and deliver to their needs. Every day, every step of the way, we’re here to help our clients get things done: making foreign currency exchange transparent. Seamless. Assu.. node.js 메모 모음 1. package.json 생성하기 npm init 으로 package.json 생성 2. Node.js 실행하기 node 1_test.js 터미널애서 서버종료 ctrl + c 3. fs 모듈 - 파일처리와 관련된 모듈 - node.js에서 가장 중요하고 기초가 되는모듈 메소드 readFile() : 파일을 비동기적으로 읽음 readFileSync() : 파일을 동기적으로 읽음 writeFile() : 파일을 비동기적으로 씀 writeFileSync(): 파일을 동기적으로 씀 4.이벤트 루프 - Node.js는 서버가 실행되면 변수들을 초기화 하고 함수를 선언하고 이벤트가 발생할때까지 기다림 - 이벤트가 감지되었을때 callBack 함수를 호출 5.시스템 이벤트 exit : 프로그램이 종료되거나 종료되.. vscode 코드정렬 단축키 전체선택 ctrl + a 파일내 텍스트 검색 ctrl + f 파일내 동일텍스트 순차 지정 텍스트 영역 블럭지정후, ctrl + d HTML 코드 정렬 ctrl + k + f css 코드 정렬 alt + shift + f 작업 영역 내 전체 텍스트 검색 ctrl + shift + f 일괄 변경(replace) ctrl + shift + h 이후 일괄 저장 필수, alt + ctrl + s beauty (extension) 설치시, 코드정렬 ctrl + shift + b 그외 유용한 단축키 파일명으로 검색하기 ctrl + p 단어 단위 커서 이동 ctrl + 방향키 단어 블록 ctrl + shift + 방향키 코드 라인 변경 alt + 방향키 익스텐션 prettier : code formmater inden.. css 속성 - filter filter filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다. 사용 예) filter: blur(1px); Filter 속성 속성 단위 효과 blur px 흐림 효과 grayscale % 회색조 (100% = 완전흑백) sepia % 세피아 (100% = 완전세피아) saturate % 채도 (0% = 완전 무채색) hue-rotate (0~360deg) 색조 회전 invert % 반전 효과 (100% = 완전 반전) opacity % 불투명도(0% = 투명) brightness % 밝기 (0% = 검은색) contrast % 대비 (0% = 검은색) drop-shadow(x, y, blur) px 가로,세.. a태그 연관 속성 target 사용 예 ) _self: URL을 현재 페이지에 로드함. _blank: 새 창을 열어 URL을 페이지에 로드함. _parent: 현재 URL의 부모페이지 에 URL을 로드함. 상위 항목이 없는 경우 _self와 동일한 방식으로 동작함. _top: URL을 최상위 페이지로 로드함. 상위 항목이 없는 경우 _self와 동일한 방식으로 동작함. (즉, 더 이상의 parent 페이지가 존재하지 않는 "가장 최상위" 페이지) _self: Load the URL into the same browsing context as the current one. This is the default behavior. _blank: Load the URL into a new browsing context. This is usua.. JavaScript - Hoisting 이란? (var , let , const) 자바스크립트에는 호이스팅이란것이 있습니다. 말 그대로 끌어올리는것인데요. 간단하게 호이스팅의 개념과 var, let, const의 차이점에 대해 알아보도록 하겠습니다. 우리는 코딩을 할 때 변수를 먼저 선언하고나서 선언한 변수를 사용할 수 있습니다. c, java 등 대부분의 언어에서요. 이는 우리가 작성한 코드를 컴퓨터가 해석할 때 위에서 부터 아래로 읽어오기 때문입니다. (절차적 프로그래밍) var sum = 10 //변수의 선언, 할당 console.log(sum) 자바스크립트는 굉장히 유연한 언어인데, 그렇게 만들어주는 기능중의 하나가 호이스팅입니다. 자바스크립트 엔진은 코드를 실행하기 전 모든 선언부의 스코프를 최상단으로 끌어오게 됩니다. 따라서 아래와 같이 console.log를 실행하고 나서.. Ajax통신을 활용한 json 데이터 불러오기(get 방식) ajax를 이용하여 json데이터를 불러오는 방법을 알아보도록 하겠습니다. 그림과 같이 버튼을 누르면 json데이터를 불러옵니다. 짱쉬움 xmlHttpRequest, axios , fetch 등 다양한 방법이 있지만 본 게시글에서는 ajax를 쓰기위해 제이쿼리를 사용하도록 하겠습니다. 제이쿼리를 써야하므로 html 헤드 영역에 아래와 같은 소스를 삽입하겠습니다. 본문 내용은 다음과 같이 작성해보겠습니다. 순번 이름 전화번호 주소 상태 비고 날짜 json 불러오는 버튼 별다른건 없고 테이블 내용에 table_body라고 class명을 주었습니다. 버튼을 클릭하면 getJSON()이라는 자바스크립트 함수가 실행됩니다. 별다른건 없고 제이쿼리의 $.each() 반복문을 이용하여 받아온 data값을 배열형태로 .. 웹 개발할 때 유용한 사이트 모음 1. 디자인 템플릿 / 아이콘 폰트어썸 / CDN기반 아이콘 제공 / 부분 유료 https://fontawesome.com/ 구글 폰트 https://fonts.google.com/ 스타일리시한 아이콘 / 벡터 이미지 등 / 디자이너용 /부분유료 https://www.flaticon.com/kr/ 각종 상업용 웹사이트 레이아웃 참고 https://www.dbcut.com/bbs/index.php 2. 라이브러리 메이븐 기반 디펜던시 제공 https://mvnrepository.com/ 2-1. 안드로이드 라이브러리 레트로핏 https://square.github.io/retrofit/ 글라이드 https://github.com/bumptech/glide 2-2. 디자인 라이브러리(React) Styled.. 웹 개발 기본 #2 - HTML 1. HTML HTML은 HyperText Markup Language의 줄임말이다. 하이퍼텍스트란 문서를 서로 연결해주는 링크를 의미한다. 웹문서를 만드는 언어이다. html5 : 2014년 11월에 발표된 html 표준규약은 이전 버전과 구별하기위해 한동안 html5라 불렀다. 이전에 사용하던 html4에 비해 다양한 기능이 추가 되었고, 현재는 대부분의 웹브라우저에서 html5를 지원하면서 html5 = html을 의미한다. 2. html의 구조 visual studio를 통해 만들 수 있는 기본적인 html의 기본구조는 다음 코드와 같다. 웹 문서의 유형을 지정하는 선언문 , 웹브라우저에 현재 문서가 html5문서라고 알려주는것이다. ~ 은 웹문서의 시작을 선언하는것이고 은 웹문서의 끝을 알리는것.. 이전 1 2 3 다음
