월드스토리의 코딩 나라

[ 목차 ]  1. form 전송주로 form 테그 내 버튼을 클릭했을 때 발생되는 이벤트페이지 이동과 함께 처리되는 동기 방식과, 서버에 데이터를 보낸 후 처리될 때까지 기다리는 비동기 방식이 있다.비동기 방식은 다른 말로 dynamic 통신이라고도 한다. 2. 비동기 HTTP 통신 방법XMLExtensible Markup LanguageHTML과 비슷한 마크업 언어로 사용자가 정의해 사용할 수 있는 것이 가장 큰 특징 AjaxAsynchronous javaScript And XML의 약자자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받음JQuery를 통한 쉬운 조작이 가능하며, Error, Success, Complete의 상태를 통해 흐름을 조절할 수 있음.하지만 Promise 기반이 ..

[ 목차 ]1. Node.js 란?구글 크롬의 자바스크립트 엔진(V8 Engine)에 기반해 만들어진 JavaScript 런타임이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리 2. package.json- 패키지들이 서로 의존되어 있어, 문제가 발생할 수 있는데 이를 관리하기 위해 필요한 것.- 프로젝트에 대한 정보와 사용 중인 패키지 이름 및 버전 정보가 담겨 있는 파일 3. package.json의 내부 정보 “name” : 패키지 이름 “version” : 패키지의 버전 “main” : 자바스크립트 실행 파일 진입점 ( 문답식에서의 entry point ) “description” : 패키지에 대한 설명 “scripts” : npm ru..

[ 목차 ] 1. setTimeout(함수, 지연시간)- 설정된 지연시간이 지난 후에 함수를 실행시킴 2. 비동기 처리란?1. 특정 코드와 연산이 끝날 떄까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성2. 서버로 데이터 요청시 서버가 언제 그 요청에 대한 응답을 줄지 모르는 상황에서 마냥 기다릴 수는 없음.3. 만약 동기처리를 하게 된다면 웹 하나를 실행하는데 엄청 오랜 시간이 걸리게 됨. 3. 콜백(callback) 함수1. Javascript는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수 2. 즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수로 비동기 방식으로 작성된 함수를 동기 처리하기 위해 사용3. 함수를 선언할 때는 parameter(인..

[ 목차 ] 구조분해 할당(Destructuring assignment)배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담는 것.JavaScript에서 많이 쓰이는 자료구조인 배열과 객체를 편하게 사용하기 위함객체나 배열에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용배열과 객체에서 사용된다.배열의 구조 분해 할당const arr5 = ['tomato','kiwi','banana'];const [tomato,kiwi,banana] = arr5; //같은 의미console.log(tomato); let tomato = arr5[0];let kiwi = arr5[1];let banana = arr5[2]; //같은 의미변수를 선언한 순서대로 배열의 요소가 값으로 할당됨.const [변수] = 배열;..

1차 구현 결과1차 프로젝트는 HTML, CSS, JS, JQuery에 대해 어느 정도 습득한 상태에서 프로젝트를 진행하였기에 보이는 부분에 초점을 맞춰서 개발을 진행했다. 최대한 배운 내용을 토대로 주제를 선정하였고, 우리 조는 처음 정했던 대로, 소니 웹페이지의 음향기기 전용 사이트로의 리뉴얼하는 프로젝트를 시도했다.  우리가 만든 '소니 웹페이지'는 총 세개의 페이지로 구성되어 있다.1. 메인페이지2. 기술력 페이지3. 회사의 연혁 및 제품의 발전과정 우리 조는 4명씩 개발했던 다른 조와 달리 3명으로 팀을 짜서 개발을 진행했기에 시간상 워낙 빠듯했기에 그 부분에 있어서도 고민이 있었다. 강사님께서는 팀원의 숫자와 프로젝트의 퀄리티는 크게 연관이 없다고 용기를 주셨지만, 사람 마음이란 게 편한 마음..

팀 프로젝트의 주제부트캠프를 통해 학습한 HTML, CSS, JavaScript, jQuery를 활용하여 첫번쨰 홈페이지를 제작하게 되었다.우리 팀은 소니의 음향기기 분야를 주제로 홈페이지를 리뉴얼해보기로 하였다.주제를 선정한 이유소니는 업체의 기원이라 할 수 있는 음향기기부터 카메라, 게임기, 스마트폰 등 복합적인 전자기기를 개발, 유통하는 회사이다. 따라서 홈페이지 또한 여러 전자기기가 복합적으로 섞여있는 구성을 갖고 있다. 하지만 소니의 뿌리라 할 수 있는 사업분야는 음향기기 사업이다. 그래서 음향기기를 전문적으로 다루는 홈페이지를 제작해보기로 논의한 끝에 결정하였다. 나의 담당 업무 1주일이란 짧은 개발 기간과 몇주 동안 공부했던 짧은 식견을 바탕으로 하였기에, 일단, 메인페이지, 화사에 대한 소..

Git에서의 협업2명 이상의 개발자가 하나의 프로젝트에서 서로 다른 작업을 진행하기 위한 방식이때, 브랜치는 하나의 main브랜치에서 여러가지 작업을 위한 브랜치를 생성하는 것으로 소규모 협업에 적당함.100명 이상의 개발자가 브랜치를 생성하고 올리는 작업을 한다면, 복잡하고 관리하기가 어려워진다.이때는 git 저장소를 통째로 복사하여, 나중에 merge하는 방식을 쓴다.  소규모의 협업 원래 개인 github 스토리지에 코드를 직접 푸쉬할 수 있는 사람은 본인 뿐이다.다른 사람이 내 원격저장소에 위치한 파일을 푸쉬하게 하려면 협력자로 등록해야 한다.원격저장소의 Setting에서 Collaborators에 작업을 보낼 사용자의 이름이나, 이메일을 입력하면 된다.  대규모 협업하기원격저장소를 복제하여 협업..

Waterfall(폭포수 모델)1. 가장 익숙하고 고전적인 소프트웨어 개발 기법2. 각 개발 단계가 완전히 끝났다고 판단됐을 때, 다음 단계로 넘어가는 방식3. 단순한 모델이라 이해하기 쉽고, 단계별로 정형화된 접근이 가능하다.4. 프로젝트의 진행상황을 한눈에 명확하게 알 수 있다.5. 프로젝트를 개발하던 도중 제기된 변경사항을 적용하기 어렵다.6. 시스템의 동작 여부를 시스템 테스트 단계에 돌입하고 나서야 확인이 가능하다.7. 대형 프로젝트에 적용하는 것이 부적합하고, 일정이 지연될 가능성이 매우 크다.  Agile 방법론- 짧은 주기의 개발 단위를 반복해 하나의 큰 프로젝트를 완성해 나가는 것.- 협력과 피드백을 통해 유연한 일 진행과 사용자의 요구 사항에 빠른 반영이 가능하다.-요구 사항을 작은 단..

Git이란?소스코드를 효율적으로 관리하기 위해 만들어진 "분산형 버전 관리 시스템"소스 코드의 변경 이력을 쉽게 확인할 수 있고 프로젝트 개발 중 오류가 발생하였을 경우, 특정 시점으로 롤백하는 것이 가능해지는 장점이 있다. Github 원격 저장소의 생성 1. New 버튼을 눌러 Github 저장소를 생성한다.2. 저장소의 영문명과  저장방식을 선택하고 레포지토리를 생성한다.3.  git bash를 실행하고 프로젝트의 루트폴터로 이동한다.4. git init 명령어를 사용하여 루트 위치에 .git 파일을 생성한다.5. .git 파일이 원격저장소를 알 수 있도록 git remote 명령어를 사용하여 주소를 등록한다.- git remote add origin https://github.com/ 이름/저장소..

프레임워크개발자가 소프트웨어를 개발함에 있어 코드를 구현하는 시간을 줄이고, 코드의 재사용성을 증가시키기 위해 일련의 클래스 묶음이나 뼈대 등을 미리 만들어 모아놓은 것을 말한다. 프레임워크의 특징 - 개발자가 따라야 하는 가이드를 제공하기에 개발 시간을 단축할 수 있다.-  정형화되어 일정수준 이상의 품질을  기대할 수 있지만, 개발할 수 있는 범위가 제한적이다.-  유지보수가 쉬운 장점이 있지만, 너무 의존한 프로그래밍을 하면 개발자의 능력을 향상시키기 어렵다.- 대부분의 프레임워크가 습득에 걸리는 시간이 오래걸린다. 라이브러리란? 라이브러리란 개발자가 만든 클래스의 나열로 프로그램에서 사용할 수 있도록 제공하는 방식이다.  프레임워크 VS 라이브러리둘의 가장 큰 차이는 제어의 흐름에 따른 주도성이 ..