study 코딩하자

Node.js 사용이유 Node.js를 사용하려면 먼저 JavaScript를 배워야한다. Node.js는 JavaScript를 사용하기 위해 만들어진 것이기 때문이다. JavaScript는 C/C++, Java 와 같은 프로그래밍 언어이다. 하지만 이름에서 알 수 있듯 JavaScript는 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 웹 브라우저 프로그램 안에서만 동작을 한다. 즉, 웹 브라우저(크롬, 사파리, 익스플로러, 파이어폭스 등)가 없으면 사용할 수 없는 프로그램이다. 여기서 Node.js가 나오는 이유가 된다. 즉, JavaScript 를 웹 브라우저에서 독립시킨 것으로 Node.js를 설치하게 되면 터미널프로그램(윈도우의 cmd..

Node.js란? Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임이다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다. Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다. Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. Node.js는 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 특히 서버사이트에서 많이 사용되고 있다..

JSX JavaScript eXtension React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다 Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다. HTML요소에 class값을 정의할 때, 원래 HTML에서는 과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다. 마찬가지 이유로 루프문 예약어와 겹치는 for은 h..

리액트란? 유저 인터페이스를 만드는 데 사용되는 오픈 소스 자바스크립트 라이브러리로 메타에서 개발하였다. SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다. 이와 더불어 타입스크립트나 sass 같은 언어..

break문 반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료합니다. 즉, break 문은 반복문을 강제로 종료할 때 사용합니다. 다음은 for문과 while 문에서 break 문이 사용된 기본형입니다. break 문이 코드보다 앞에 있으므로 코드는 실행되지 않고 for 문과 while 문이 바로 종료됩니다. for(초깃갑; 조건식; 증감식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; } var 변수 = 초깃값; while(조건식){ break; // 반복문을 강제로 종료합니다. 자바스크립트 코드; 증감식; } 다음은 for 문을 이용하여 1부터 10까지 반복하도록 작성한 예제입니다. 그리고 break 문을 사용하여 변수 ..

방법 li > a에 포지션 relative를 주고, transition을 0.3으로 자연스럽게 한다. 마우스 오버와 마우스 오버하지 않을 때의 차이를 주기 위하여 미세하게 컬러를 바꿔주었다 .footer_menu >div li a { color: rgb(57,57,57); transition: all 0.3s; } .footer_menu >div li a:hover { color: #000; } 가상요소를 주기 위하여 li > a 에 position:relative를 주고, 가상요소에는 position: absolute를 한다. 그리고 transform: sacleX(0)을 0으로 한다 .footer_menu >div li a { position: relative; } .footer_menu >div l..

개요 가끔, 제목이 길거나 적당히 띄어주지 않으면 내 레이아웃을 넘어서 저 어딘가로 글이 나아가고 있다 그 때 주는 것이 한줄 효과 즉, 한 줄로 나타내는 것인데 이것을 분해해보겠다 분해 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } overflow: hidden; 글이 넘치는 걸 숨겨준다! 정해진 크기에 맞게 딱 없었던 것 처럼 잘라 쓰기 편하다 white-space: nowrap; white-space란, 공백 문자를 처리하는 방법이다. nowrap을 하게 되면 줄글이 밑으로 가지 않게 한다 text-overflow: ellipsis; 출처 : https://aboooks.tistory.com/382 text-overflow는..

반복문 반복문은 프로그래밍에서 가장 중요한 요소 중의 하나다. 인간은 반복적인 작업을 잘하지 못한다. 실수하고, 지루해한다. 컴퓨터는 이런 반복적인 작업을 대행하기 위해서 만들어진 기계다. 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다. 반복문의 문법 반복문의 문법은 몇가지가 있다. 각각의 구문은 서로 대체 가능하기 때문에 상황과 취향에 따라서 선택해서 사용하면 된다. while 형식은 아래와 같다. 1 2 3 4 while(조건){ 코드 코드 } 아래의 예제를 실행해보자. 다음 예제는 무한반복을 발생시킨다. 저장되지 않은 작업이 있다면 모두 정리한 후에 이 명령을 실행하자. 콘솔에서 실행할 경우 Ctrl+C 나 Cmd+. 단축키를 이용해서 무한반복을 중지 할 수 있다. 실행하기 않아도 된다. /..