신입 개발자에서 시니어 개발자가 되기까지

mini node server 만들기를 했는데, 여기서 사용하는 메서드들에 대해 따로 알려주지를 않아서 찾아봤다. 1. SOP - Same-Origin Policy, 동일 출처 정책 - 같은 출처의 리소스만 공유가 가능하다 a. 출처 - 출처는 프로토콜(https), 호스트(www.codestates.com), 포트(443)의 조합을 뜻하며 이중 하나라도 다르다면 리소스 공유가 불가하다. b. 리소스 - 대표적으로 로그인 정보. 출처가 다른데 네이버 로그인 정보가 공유가 된다면 로그인 정보를 노리는 코드가 있는 사이트에 방문 했을 때, 아이디가 해킹될 것이다. c. CORS - 위 문제 상황에서 필요한 것이 CORS다. Cross-Origin Resource Sharing, 교차 출처 리소스 공유는 다른..

연휴동안 네트워크 강의를 들었는데 어떤 네트워크 지식이 프론트엔드 개발자에게 필요한지를 모르겠다. 그저 나중에 도움이 되겠지 하고서 다 들었는데, 그래서 포스팅 하기가 더 어려운 것 같다. 너무 과한 것 같아서 포스팅을 하지 않은 부분이 더 많은 것 같다. OSI 7계층 OSI 7계층 식별자 데이터 단위 프로토콜 애플리케이션 계층(Application) stream HTTP 프레젠테이션 계층(Presentation) - 세션 계층(Session) SSL(socket) 전송 계층(Transport) Port 번호 Segment TCP,UDP 네트워크 계층(Network) IP 주소 packet IP 데이터 링크(DataLink) Mac 주소 Frame Ethernet 물리 계층(Physical) Frame..

1. REST API a. API란? - 내가 이해했던 API는 기능 구현을 위한 복잡한 코드를 이면에 숨겨두고 외부적으로는 간단한 코드 하나로 원하는 기능을 구현하게끔 해주는 것이다. - 다음은 AWS 문서에 정의된 API다. "API는 소프트웨어 간에 커뮤니케이션이 가능하도록 만드는 매커니즘이다"(정의와 프로토콜의 집합을 사용해서) 휴대폰의 날씨 앱은 API를 통해 기상청의 시스템과 통신하여 기상청 소프트웨어에 존재하는 일일 날씨 데이터를 보여줄 수 있다. "Application은 고유한 기능을 가진 모든 소프트웨어이며 interface 는 두 어플리케이션 간의 서비스 계약이다" 이 계약은 요청과 응답을 사용하여 두 어플리케이션이 서로 통신하는 방법을 정의한다. - REST API는 이 API를 작동..

1. State a. 컴포넌트 내부에서 변할 수 있는 값. cf) props는 외부로부터 전달받은 값 b. 예를들어 토글 버튼 컴포넌트는 isOn이라는 Boolean값을 가지는 state가 있고, 카운트(Count) 컴포넌트는 현재 숫자 값 의미하는 count라는 state를 가진다. 2. Props a. property를 의미한다. b. props는 부모 컴포넌트(상위 컴포넌트)에서 전달 받는다. c. 읽기 전용 객체다. 만약 읽기 전용 객체가 아니라면, 하위 컴포넌트에서 props를 수정할 수 있고, 상위 컴포넌트에 영향을 미칠 수 있다. side effect가 발생할 수 있고, 단방향 또는 하향식 데이터 흐름 원칙에 위배된다. 3. Props 사용 방법 a. 전달하고 자하는 값을 { } 안에 넣고,..

1. 전통적인 웹페이지 a. 페이지 전환을 할 때마다 매번 페이지 전체를 다시 불러온다. b. 단점 : 트래픽증가, 느려짐, 사용자경험 저하 2. SPA a. menu와 footer같은 페이지 전환 후에 중복되는 부분들은 불러오지 않는다. b. 업데이트에 필요한 데이터만 서버에서 받는다. 그리고 이 데이터를 javascript가 동적으로 HTML요소를 생성한다. 그 다음 화면에 출력한다. ex ) 페이스북에서 "좋아요" 눌렀을 때, 전통적인 웹페이지라면 페이지 전체를 렌더링 하겠지만, SPA는 필요한 부분만 렌더링하고 끝낸다. c. 장점 i. 사용자와의 상호작용에 빠르게 반응한다. ii. 서버 과부하 문제가 줄어든다 iii. 더 나은 유저경험을 제공한다. d. 단점 i. javascript 파일의 크기가..

1. React Javascript a. 개념(리액트 자바스크립트란 무엇인가?) - 사용자 인터페이스를 만들기 위한 javascript 라이브러리 b. 특징 - 선언형 1) how보다는 what에 집중하는 방식. - 컴포넌트 기반 - 범용성 2. JSX a. Javascript XML을 의미한다. b. 브라우저가 jsx를 이해할 수 있는 것은 아니기 때문에, Babel이 필요하다. c. Babel : JSX를 브라우저가 이해할 수 있는 javascript로 컴파일 함3. 주요문법 a. 태그들을 감싸주는 최상위 태그가 하나 있어야 한다. b. css class 속성을 주려면, className으로 표기한다. class는 자바스크립트의 class 선언으로 인식한다. c. jsx에서 javascript를 사용..

1. 개념 a. 현재 실행되고 있는 함수가 종료되지 않았더라도, 다음 함수를 실행시키는 것. 2. 사례 DOM Element 이벤트 핸들러 i. click, keydown ii. 페이지 로딩(DOMContentLoaded 등) 타이머 i. 타이머 API(setTimeout) ii. 애니메이션 API(requestAnimationFrame) 서버 자원 요청 및 응답 i. fetch API ii. AJAX (XHR) 3. Promise a. 쓰는 이유 i. 비동기를 동기적으로 처리하기 위해서(그냥 생각없이 이게 끝나면 프로미스 객체를 받아와서 그 객체 데이터를 이용하는 식으로 사용만 해왔는데, 드디어 개념이 좀 구체화 된 것 같다) ii. callback 지옥에서 빠져나오기 위해서(가독성). callback..

객체지향 프로그래밍이란? a. 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그램의 절차지향적 관점에서 벗어나 여러 개의 독립적인 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 b. 객체지향 주요 개념 i. 캡슐화 1) 내부 데이터를 외부로 노출되지 않도록 만드는 것. ii. 상속 1) 부모 클래스의 속성과 메서드를 자식 인스턴스가 물려받는 것. iii. 추상화 1) 개념 a) 원하는 핵심적인 속성을 위주로 추출 하는 것 b) 아주 복잡한 내부 구현을 외부적으로는 단순하게 노출시키는 것. ex) 전화기는 아주 복잡한 과정을 거치지만, 외부적으로는 전화번호를 누르고, 수화기로 통화하는 간단한 방식이다. 2) 사람은 이름, 주소, 성별, 나이, 신장, 체중, 학력, 성..