개발일지

HTTP란? Hyper Text Transfer Protocol의 약자로 웹 상에서 정보를 주고받는 약속! 웹 주소/링크 URL을 통해 데이터를 주고 받는다. 80 포트 사용 암호화가 되지 않은 데이터를 전송하는 프로토콜 / 보안에 취약 HTTPS란? 보안 강화를 위해 사용 (TLS 또는 SSL encrypt) 기존 HTTP에 특정 key를 통한 데이터 암호화가 추가된 약속! 443 포트 사용

쿠키와 세션은 비슷한 역할을 하며, 동작원리도 비슷합니다. 그 이유는 세션도 결국 쿠키를 사용하기 때문입니다. 가장 큰 차이점은 사용자의 정보가 저장되는 위치입니다. 때문에 쿠키는 서버의 자원을 전혀 사용하지 않으며, 세션은 서버의 자원을 사용합니다. 세션은 서버의 자원을 사용하기 때문에 무분별하게 만들다보면 서버의 메모리가 감당할 수 없어질 수가 있고 속도가 느려질 수 있기 때문에 쿠키가 유리한 경우가 있습니다. 보안 면에서 세션이 더 우수하며, 요청 속도는 쿠키가 세션보다 더 빠릅니다. 그 이유는 세션은 서버의 처리가 필요하기 때문입니다. 보안, 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스니핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 sessionid ..

리덕스는 전역 상태 관리 도구들(State Management Tools)중 하나이다. 리덕스는 따로 전역 상태 관리 저장소를 제공을 함으로써, 상위컴포넌트의 값을 바꾸지 않고도 바로 정보가 필요한 컴포넌트에 바로 쏴주기 떄문이다. 이런 전역 상태관리 도구들을 사용하지 않으면 props drilling 이라는 문제가 발생한다. 이것은 상위컴포넌트에서 줄줄이 하위 컴포넌트로 릴레이하듯이 정보를 내려주는것을 뜻한다. 시간 비효율적이고 좋지 않으니까 전역 상태관리 도구를 사용하자!

먼저 state 는 컴포넌트 안에서 이루어지는 상태값이다. 그래서 이 값은 컴포넌트 안에서만 관리가 가능하다. 👉 Component 간의 정보 공유 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다. 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다. 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈 이 문제를 해결 할려면 상태 관리 도구 (state management tool) 을 사용하면 된다. 다양한 도구들이 있다. 하지만 제일 인기가 있는건 React Context 와 Redux 이다. 이 상태 관리 도구를 사용하면 Props drilling..

Context API 란? 📎 리액트 Context API 공식문서 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 리액트에서 제공하는 built-in API로 State 관리를 외부 라이브러리 없이 할 수 있다. 또한 리액트에서 Context API를 위해 훅스도 제공한다. State Management 라이브러리는 리덕스, Mobx, recoil.js 등이 있다. 개인적인 의견이지만 Context API는 리덕스와 비슷하지만 좀 더 이해하기 쉽고 알아야 하는 것도 상대적으로 적기 때문에 이것만으로도 꽤나 장점이 있다. 그렇지만 리덕스에서의 강력한 미들웨어 기능은 없다. 각각의 장단점이 있기에 상황에 맞게 잘 써야할 것 같다. H..

1. String Literal ES6의 String Literal을 활용하면 문자열을 좀 더 직관적으로 결합할 수 있습니다. es5 const val1 = 'my string'; const val2 = 'my string2'; const conVal = val1 + ', '+ val2; console.log(conVal); // my string, my string2 es6 const val1 = 'my string'; const val2 = 'my string2'; const litVal = `${val1}, ${val2}` // 여기서 사용된 ` 은 Tab키 위에 있는 backtick 입니다. 작은 따옴표 아님 console.log(litVal); // my string, my string2 2. ..

브라우저 별로 구동원리 또는 JS엔진 등의 차이가 있기 때문에 브라우저 호환성 이슈가 발생하는데, 이러한 차이를 최소화해 런타임 환경에 맞게 최적화 하는 작업을 크로스 브라우징이라고 하는데, Javascript의 호환성에 따른 충돌이나 부작용을 줄이기 위한 방법으로는 Babel이라는 도구를 사용하면 됩니다. 바벨은 주로 ES5 이상 버전의 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 사용되는 도구로, IE나 다른 브라우저에서 동일한 기능을 제공하고 side-effect를 최소한으로 줄일수 있습니다. 그렇다면 바벨에서 코드를 변환하기 위한 규칙은 어떻게 설정하나 바벨을 사용한다고 코드를 변환할 수 있다고 할수는 없으며 변환하기 위한 규칙이나 브라우저 버전을 설정해야 하는데 ..

트랜스파일러는 컴파일러의 한 종류이다. 컴파일러 (compiler) 트랜스파일러 (transpiler) 컴파일의 경우는, 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것을 의미 합니다. 트랜스파일 의 경우는 한언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말합니다. 컴파일러 vs. 트랜스파일러 (1) CPU-level (actual logic gates on the CPU) (2) machine code (3) assembly code (4) [C/C++, JVM/bytecode] (5) [JavaScript, Python] 여기서, 컴파일러는 한단계 아래로 코드를 변환 한다 예) 5번을 4번의 코드로 Java >> bytecode C >> assembly co..