천천히 느리게 천천히 느리게

◎ 지금까지는 객체지향 프로그래밍이었다면 이제 함수를 기반하는 함수형 프로그래밍으로 많이 작성한다. 함수형 프로그래밍에 대해서 간략하게 알아보자! 1. 함수형 프로그래밍이란? ◎ 함수형 프로그래밍은 순수한 함수를 작성하고, 공유된 상태와 변경 가능한 데이터 및 부작용을 피하여 소프트웨어를 작성하는 프로세스이다. 함수형 프로그래밍은 선언형이며, 애플리케이션의 상태는 순수한 함수를 통해 전달된다. 애플리케이션의 상태가 공유되고, 객체의 메서드와 사용되는 객체 지향 프로그래밍과는 대조된다. 2. 순수 함수 (pure function) ◎ 순수 함수란 하나 이상의 인자를 받고, 받은 인자를 처리하여 반드시 결과물을 돌려주어야 한다는 것이다. 인자를 제외한 다른 변수는 사용하면 안 되고 받은 인자만으로 결과물을 ..

◎ 코딩을 하다 보면 반복문을 많이 사용하게 된다. 반복문을 실행하다가 중간에 종료하게 되는 상황이 있는데 그 방법에는 break, continue, return 등이 있다. 각 각의 방법의 차이점을 알아보자 1. break ◎ 반복문을 실행하다가 break문을 만나면 반복문은 그 즉시 실행을 멈추고 반복문은 종료된다. const forBreak = () => { let sum = 0; for (let i = 0; i 100) { break; } sum += i; } console.log(sum); // 105 }; forBreak(); 위 코드는 0부터 100까지의 수를 모두 더하는 함수이다. 0부터 100까지 더하면 5050이 출력되어야 하지만, sum이 100보다 커질 때 break문을 만나 반복문..

1. 비동기 방식 ◎ 비동기 방식이란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말한다. 기다리는 과정에서 다른 함수를 호출할 수 있다. ※ 동기적 방식 : 작업이 끝날 때까지 다른 작업을 할 수 없다. 동기적과 비동기적 방식을 밑의 그림처럼 표현할 수 있다. 동기적은 1번이 끝날 때까지 2번을 시작하지 못한다. 1번이 끝나야 비로소 2번이 실행되고, 2번이 끝나야 3번을 시작할 수 있다. 하지만 비동기는 1번이 끝나기 전에 2번의 코드를 실행할 수 있고, 2번이 끝나기 전에 3번을 시작할 수 있다. setTimeout() 함수가 대표적인 비동기 함수이다. setTimeout()은 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행하는 것..

1. Arrow function이란 ◎ 화살표 함수(Arrow functioin)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있는 ES6문법 중 하나이다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 2. 문법 ◎ 이름이 없는 함수의 기본적인 문법을 봐보자. ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았다. 그리고 =>(arrow)가 추가되었다. // ES5 function(){} // ES6 () => {} ◎ 이름이 있는 함수를 만들 때는 다음과 같다. // ES5 function getName() {} // ES6 const getName = () => {} 호출할 때는 둘 다 같다. getName(); ◎ 화살..

1. 시작 ◎ 위스타그램 login page를 마무리하고 main page 작업을 시작하였다. repl.it 에 있는 위스타그램 메인 페이지를 구현을 하였다. 2. 가이드 ◎ html, css header는 scroll 되어도 최상단에 fiexd 되어야 한다. hedaer와 main은 화면의 중앙에 위치하여야 한다. main을 두 개로 나누어 좌측에는 피드, 우측에는 스토리 및 팔로우 추천이 있다. 우측 정보들은 scroll 되어도 fiexd 되어야 한다. 피드는 하나만 만들어도 된다. ◎ javascript 댓글 input 창에 엔터 치거나 "게시"를 누르면 댓글이 추가되어야 한다. createElement로 요소를 생성해서, input에 입력한 값이 추가되어야 한다. 3. 레이아웃 ◎ 위스타그램 메인..

1. 함수 ◎ 함수는 특정 코드를 하나의 명령으로 실행 하 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같은 코드를 작성한다. 위의 작업을 함수로 만들어 보자. 함수를 만들 때는 function 키워들 사용하며, 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부른다. 함수 내부에서 return 키워드를 사용하여 함수의 결과물을 지정할 수 있다. 2. 문법 ◎ 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 한번 함수를 정의하는 문법을 봐보자. function 함수이름() { 실실행할 코드 작성 return; } function 키워드로 시작한다. 함수 이름을 지어준다. 함수를 알리는 ( )를 열고 닫는다. 함수의 시작..

1. 시작 ◎ 위코드에서 프론트엔드 개발자를 희망하는 사람들은 HTML, CSS, Javascript repl.it 과제가 끝나면 인스타그램 클론 코딩 과제가 있다. 바로 "위스타 그램"이다. repl.it 에 있는 위스타그램 로그인 페이지를 먼저 구현을 하였다. 2. 가이드 ◎ html, css 로그인 전체를 감싸고 border가 적용된 div 태그가 필요하다. input tag 사용 (type은 text 또는 password, placeholder는 속성을 사용하여 "전화번호, 사용자 이름 또는 이메일" 등의 값을 넣어주면 된다.) button 태그를 사용 ◎ javascript id, pw에 각각 한 글자 이상 써야 버튼이 활성화되도록 해야 한다.(연한 파란색 -> 활성화되면 파란색으로!) 3. 레..

1. Javascript의 객체 ◎ 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해 준다. 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다. 2. 선언방식 ◎ 객체를 선언할 때에는 { } 문자 안에 원하는 값들을 넣어주면 됩니다. const 객체이름 = { property이름1(key) : property값(value), property이름2(key) : property값(value) }; 객체는 { } (중괄호)로 감싸져 있다. 키 : 원하는 값 형태로 key 이름은 중복될 수 없다. key와 value값 사이에 :으로 구분한다. key를 추가할 때는 , 를 붙여준다. key 값에는 어느 type이나 가능하다.(string, number..