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

◎ 혼자 개발을 할 때 git 사용법은 단순하다. 하지만 협업을 할 때, git의 사용법에 따라 코드가 사라질 수 도 있으며, 충돌을 일으켜 문제가 생길 수 있다. 협업할 때 git을 어떻게 사용하는지 알아보자. 1차 프로젝트 때, 처음 git 사용한 코드를 보자. 1. 순서 1. 코드를 작성할 때는 무조건 branch를 생성하고 각 branch에서 작업해야 한다. (master에 작업하면 큰일 난다...) 2. git branch feature/기능 형태로 브랜치 생성!!! 3. git checkout feature/기능 형태로 자신이 만든 브랜치로 이동해서 작업 시작!! 이제부터 작업이 완료 후 commit 과정을 보겠다. 4. git add . (add 하고 띄어쓰기한 후 . 붙여야 함!!) 5. ..

1. fetch란 ◎ fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기 쉽게 기술할 수 있다. 2. 특징 fetch( )로 부터 반환되는 HTTP Status Code가 404나 500을 반환하더라도 Promise 객체는 HTTP error 상태를 reject하지 않는다. 대신 ok 상태가 fasle인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다. 보통 fetch는 쿠키를 보내거나 받지 않는다. 사이트에서 사용자 세션을 유지 관리해야 하는 경우 인증되지 않는 요청이 발생한다. 쿠키를 전송하기 위해서는..

1. 문제 2. 결과 function romanToNum(s) { const numObj = { "I" : 1, "V" : 5, "X" : 10, "L" : 50, "C" : 100, "D" : 500, "M" : 1000 } let result = 0; console.log(numObj["X"]); for(let i = 0; i < s.length; i++) { console.log('i+1: ', numObj[s[i+1]]); if(numObj[s[i]] < numObj[s[i+1]]) { result = result - numObj[s[i]]; } else { result = result + numObj[s[i]]; } } return result; // 12 } romanToNum('XII');

1. 문제 2. 결과 const sameReverse = num => { let strings = num.toString().split("").reverse().join(''); strings = Number(strings); let result; if(num === strings) { result = true; }else { result = false; } return result; } sameReverse(2);

1. 문제 2. 결과 const getLengthOfStr = str => { if(!str){return 0} let arr = []; let sliced = ""; for (let i in str) { if (sliced.includes(str[i])) { //for문을 돌면서 만약 같은 알파벳이 있다면 sliced = sliced.slice(sliced.indexOf(str[i]) + 1); }//빈문자열인 sliced for문을 돌면서 하나씩 잘라준다. sliced += str[i]; arr.push(sliced.length); } return Math.max(...arr); // 14 } getLengthOfStr("abcdefghcijklmnop");

◎ Javascript에서 내장 함수를 배울 때 이미 다뤘던 함수들이다. 하지만 리액트에서 이 두 개의 함수를 상황에 맞게 잘 사용하 여야 성능이 좋아진다. 간략하게 차이를 알아보자. 1. push ◎ push는 기존 배열에 값을 추가하여 원본을 바꾼다. 1-2. 예시 const array = [1, 2]; array.push(3); console.log(array); // [1, 2, 3] 위의 코드를 확인해보면 array배열에 array.push(3)를 하고 array를 결과를 확인해보면 array 배열 자체가 변경된 걸 확인할 수 있다. 2. concat ◎ concat은 기존 배열을 토대로 변경한 새로운 배열이 리턴된다. 기존의 배열은 바뀌지 않는다. 2-1. 예시 const array =[1, ..

◎ 저번에 구현했던 위스타그램을 react 코드로 옮겨놓았다. 이제 로그인 기능을 구현할 시간인데, 로그인을 하려면 input에 id랑 passwrod를 input에 입력을 하고 그 값을 가지고 로그인 조건에 만족해야 로그인이 되도록 구현을 해야 한다. 그러면 위스타그램 코드로 input을 어떻게 관리해야 하는지 알아보자. 1. input 다루기 ◎ 우선 위스타그램 코드를 보면서 이해해보자. onChange 이벤트는 input의 텍스트 값이 바뀔 때마다 발생하는 이벤트이다. 여기에 handleInput 함수를 설정을 하였다. haandleInput의 코드는 다음과 같다. onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어 올 수 있다..

1. HTTP 란 ◎ HyperText Transfer Protocol의 약자로 HTML 문서를 교환하기 위해 만들어진 protocol(통신규약)이다. 웹상에서 네트워크로 서버끼리 통신을 할 때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 통신규약이다. 프론트엔드 서버와 클라이언트간의 통신에 사용된다. 백엔드와 프론트엔드 서버간에의 통신에도 사용된다. HTTP는 TCP/IP 기반으로 되어있다. 2. HTTP 핵심요소 2-1. HTTP 통신방식 ● HTTP는 기본적으로 요청/응답 (request/response) 구조로 되어있다. 클라이언트가 HTTP request를 서버에 보내면 서버는 HTTP response를 보내는 구조이다. 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어진다. ● HTT..