나도 개발자 시켜주세요

Node.js 장점 스크립트 언어이기 때문에 어느환경에서도 동작한다. 성능이 빠르고 좋다. 배우기 쉽다. Javascript를 쓰는 개발자가 많다. 백엔드 구축 npm 노드 패키지 관리 틀 npm 사용 npm init : 프로젝트 시작 명령어 npm init --yes : package.json이 생성될 때 기본값으로 생성 npm install packageName : 프로젝트에서 사용할 패키지 설치, 설치된 패키지의 이름과 정보는 package.json의 dependencies에 입력 됨. nodejs 노드 서버 구축시 필수 설치 nvm ubuntu 환경에서의 진행을 위해 노드의 버전 설정 모듈 필요한 함수들의 집합이다. const test_module = require("module_name"); E..

서버 클라이언트에게 네트워크를 통해 서비스를 제공하는 컴퓨터 서버 구축 방법 본인의 컴퓨터를 직접 서버로 구축하는 방법 일정 요금을 내고 외부 서버를 임대해 사용하는 방법 서버 호스팅 : 서버 임대 자체적인 관리 필요 유동적인 작동 환경 웹 호스팅보다 비쌈 웹 호스팅 : 서버의 일부분만 임대하여 다른 사용들과 서버 공유 저렴한 가격 서버 자체를 호스팅 사에서 운영 → 쉬운 사용 트래픽, 용량 등의 제약 클라우드 서버 실제 물리적인 컴퓨터 한대로 서버를 운영하는 것이 아닌 프로그램으로 가상의 컴퓨터를 생성해 서버를 운영하는 방식이다. 짧은 시간에 서버를 만들 수 있고, 컴퓨터의 물리적인 한계를 넘어서 저장공간을 무한으로 사용할 수 있다. 이론상의 많은 접속량이 발생해도 서버가 다운되지 않는다. Naver ..

프로젝트가 끝나고 팀장님 저장소에만 있던 repository 를 내 저장소로 가져와서 미래의 내가 수정할 수 있다. 이번 프로젝트에서는 하나의 저장소에서 브랜치를 나눠서 사용했는데 포크를 해서 여러 저장소를 만들고 pull request 하는 경우도 있다고 한다. 그치만 난 이미 다 끝났기에 그냥 내 레포지토리에 fork 해서 혼자서만 끄적일 것 같다. fork 하는 방법은 아주 간단한데, 깃에서 포크하는 방법만 알려주고 뒷 이야기는 알려주지 않는 글이 많아서, 난 돌고 돌아왔다. 물론 내가 글을 제대로 안읽은 거일 수도 있지만;) 복사하고 싶은 repository 에 가서 fork를 누르기만 하면 된다. Create fork 를 누르고 나면 내 repository 로 복사가 된다. 그럼 이제 깃허브는 ..

jQuery 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있는 자바스크립트 라이브러리이다. - 대부분의 웹 브라우저에서 지원 - html dom, css 스타일 적용 가능 - 같은 동작이어도 더 짧게 구현 가능 - 오픈 라이센스를 적용해 누구나 사용 가능 but, 현재 jquery를 사용하지 않아도 바닐라 자바스크립트로 구현이 가능하여 사용하지 않는 추세이다! 그래도 예전에 만든 코드를 유지보수 하기 위해 공부할 필요도 있는 것 같다. https://www.samsungsds.com/kr/insights/jquery.html 제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 | 인사이트리포트 | 삼성SDS 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소..

DOM HTML 문서는 node와 object의 집합으로 구성된다. dom 으로 각각의 node 또는 object에 접근해 문서 구조 , 스타일, 내용 등을 변경할 수 있다. Document : 웹 페이지에 존재하는 HTML 요소에 접근할 때 .querySelector('선택자')요소 선택자를 사용해 요소를 가져오는 메소드문서에서 만나는 첫번째 요소를 반환console.log(document.querySelector(".pink")); //핑크1 클래스 가져오기 .querySelectorAll('선택자')문서에 존재하는 모든 요소를 배열의 인덱스에 맞게 배열 요소로 반환 1 2 3 console.log(document.querySelectorAll(".box")); //모든 요소를 배열의 인덱스에 맞게 ..

문자열 관련 메소드 .length : 문자열 길이 반환(공백포함) .toUpperCase()&toLowerCase() : 문자열 전체를 대문자&소문자로 변경 .indeexOf(' ') : 매개변수로 문자열을 받아서 몇 번째 인덱스인지 숫자 반환 .slice(starIdx, endIdx) : start부터 end-1까지 슬라이싱 반환, 음수값도 가능 .replace(문자열1, 문자열2) : 1을 2로 변경 .replaceAll(문자열1, 문자열2) : 문자열1을 모두 문자열2로 변경 .repeat(n) : 문자열 n번 반복 .trim() : 문자열의 양끝 공백 없애기 .split() : 매개변수로 들어온 문자열 기준으로 str 쪼개서 배열 저장 배열 관련 메소드 .push() : 배열 끝에 추가 .pop(..

조건문 조건문 if if {} else{} if(조건1){ //조건1이 참이라면 실행할 문 }else{ //조건1이 거짓이라면 실행할 문 } 조건문은 if 옆에 조건을 써주고 대괄호 안에 조건1이 참일 때 실행할 문을 작성해준다. else{} 안에는 조건1이 거짓이라면 실행할 문을 작성하면 된다. if{} else if{} else{} if(조건1){ //조건1이 참이라면 실행할 문 }else if (조건2){ //조건 2가 참이라면 실행 }else { //조건 1, 2가 모두 거짓일 때 실행 } 중첩 if if (조건1) { if (조건2) { //조건1을 만족하면서 조건2도 만족 } else { //조건1은 만족하지만 조건2는 만족하지 않음 } } for (let i = 0; i 조건식 2) 조건식이..

내장 방식 어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등 - 간단하게 생성가능 - 특정 페이지에서만 작동하는 기능일 경우 내장 방식만 따로 구현 가능 링크 방식 java script 파일을 따로 만들어서 링크를 거는 방식 (ex.css) 어디에서나 사용 가능 : head 태그 내부 / body 태그 내부 / head 와 body 사이 / body 아래 등 - js 코드의 양이 많으면 파일로 따로 관리하는 것이 더 유용 - 같은 기능을 다른 페이지에서 사용하고 싶을 때 링크만 걸어서 간단하게 사용 가능 - 유지 보수 용이성 편 데이터 종류(자료형) String 문자형 데이터 문자와 변수를 동시에 사용할 때 - 메소드의 매개 변수로 넣..

transition : 요소의 값이 변할 때마다 전환되는 모션을 추가하는 속성이다. transition은 속성 자체로 스타일을 주는 속성이 아니라 가상 클래스 (ex. :hover) 나 자바스크립트의 부가적인 액션에 의해 사용된다. transition: 속성명 지속시간 타이밍함수 대기시간; transition-property : 효과를 적용할 속성 이름 지정 all : 모든 속성에 지정 속성 이름 : 전환 효과할 속성 이름 지정 - 여러 개 지정할 시 쉼표(,) 로 구분 transition-duration : 전환 효과의 지속시간 지정 os : 전환효과x 시간 : s 지정 transitio-timing-function : 전환 효과의 타이밍 함수 지정 ease 느리게-빠르게-느리게 cubic-bezier..

flex 구조 flex 구조는 item이 설정된 속성에 따라 container 안에서 배치된다. display: flex; flex컨테이너를 사용하기 위해서는 display: flex; 를 정의한다. 각각의 아이템은 자신의 너비만큼 공간을 차지하고 높이는 컨테이너의 높이만큼 공간을 차지한다. 배치할 축을 main axis를 주축으로, cross axis 를 교차축으로 정렬한다. .container{ /* - main axis : 주축 (주축의 기본방향 좌 -> 우) - across axis : 교차축 */ display: flex; } flex-direction : 주축(main axis) 방향 설정 아이템이 배치되는 축을 좌->우 / 우-> 좌 / 위->아래 / 아래-> 위 로 지정한다. flex-di..