narlo의 Devlog

프로그래머스 - 프론트엔드 미니 데브코스 무한 스크롤 UI 구현하기 - 컨텐츠를 페이징하는 기법 중 하나 - 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식 1. window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 체크해서 처리하는 방식 scroll 할 때마다 이벤트가 발생하기 때문에 성능 문제가 발생할 수 있음 2. intersection observer 방식 window.addEventListener('scroll', () => { const isScrollEnded = (window.innerHeight + window.scrollY) + 100 >= documen..

양희철교수님 - 데이터분석 Regression Linear Regression - 독립변수와 종속변수 사이 선형식을 구하고 그 식을 이용하여 변수값이 주어졌을 때 종속변수의 변수 값을 예측하는 분석방법 - 독립변수의 개수에 따라 단순 선형과 다중 선형으로 구분 더 높은 차수 : 정확하게 표현할 수 있지만 그만큼 연산복잡도가 기하급수적으로 증가 새로운 데이터가 들어왔을 때 얼마나 잘 표현할수 있는가가 목적 차수가 높은 것이 항상 좋은 성능을 보이지는 않는다. Machine learning based regression 적절한 트레이닝 셋을 통해 learning algorithm을 만들어내고 이렇게 만들어진 h와 입력 x를 이용해 예측 y을 만들어내는 것 손실함수(loss function) 선형회귀식과 실제..

양희철교수님 - 데이터분석 데이터 전처리 - 데이터 그룹핑 : groupby() - 데이터 필터링 - 데이터 결손값(NaN) 처리 - isna() : 결손값이 있는지 확인 - dropna(axis, how, inplace) - axis : 축이 0이면 결손 데이터를 포함한 행 삭제, 1이면 열을 삭제 - how : 값이 any이면 결손 데이터가 하나라도 포함되면 제거, all이면 axis에 따라 전체가 결손 데이터여야 제거 - inplace : True이면 원본에서 결손데이터를 삭제, False는 원본은 그대로 두고 고쳐진 데이터프레임 반환 - fillna() : 결손값을 채움 - 데이터 구조 변경 - pivot() - concat() : 데이터 합치기 - 데이터 정렬 - sort_values() 데이터..

양희철교수님 - 데이터분석 데이터 분류 - structured or unstructured - i.i.d. data or non-i.i.d. data (i.i.d. : independent and identically distributed) (확률분포가 동일한) - vectorial or non-vectorial data (벡터 형태) - labeled or unlabeled data (데이터에 대해 값이 주어져 있는지) - Images, text, languages, time series, graphs and so on 회귀(Regression) - 비슷한 상관분석(Correlation analysis) 두 변수 사이에 상관관계가 존재하는지 파악하고 그 정도를 확인하는 것 관련성을 파악하는 지표로 상관..

프로그래머스 - 프론트엔드 미니 데브코스 Fetch API 백엔드에서 REST API의 형태로 주면, 클라이언트에서 해당 API를 쓸 때 화면에 대응되도록 가공하여 써야하는 경우가 존재 => JSON 데이터를 내 마음대로 다룰 수 있는 역량이 필요하다. Promise.all() => 동시에 실행 브라우저마다 동시에 요청할 수 있는 네트워크의 개수가 제한되어 있음 너무 많은 요청을 한꺼번에 해야 하는 경우 => 백엔드에 다 불러올 수 있는 API를 요청 Promise.all을 두번 돌려서 다음 promise chain에서 productoptions, productoptions의 stock 데이터를 모두 불러올 수 있게 된다. reduce() : 파라미터 2개(함수, 초기값)를 받아온다. basePrice ..

김기일교수님 - 네트워크 IP주소 8바이트짜리 필드 4개 => 32비트의 논리주소 서브네팅 IP 프로토콜 검사합(Checksum) 송신자가 전송하는 패킷에 검사합을 함께 보내면 수신자는 패킷과 함께 검사합을 계산해 조건을 만족하면 패킷을 받아들이고 그렇지 않으면 패킷을 폐기한다. ICMP IPv6 UDP TCP와 스트림 전송 정확하게 데이터가 도착했는지 여부를 확인하기 위해 사용되는 절차 segment : 두 호스트 간의 TCP 프로토콜 사이에서의 전송단위 신뢰성 전송을 위해 사용자 데이터 세그먼트와 함께 이에 대한 확인 응답인 ACK 세그먼트를 사용 TCP 연결 과정 1. SYN 2. 반대편의 SYN, ACK 3. 다음의 SYNC, ACK TCP 혼잡제어 수신자가 받을 수 있는 양을 고려하는 것도 중요..

문현수박사님 - HTTP server using Socket HTTP(HyperText Transfer Protocol IP와 Port로 Process를 구분(TCP/IP) 왼쪽이 요청, 오른쪽이 응답 GET은 서버에서 데이터를 요청하는 것 POST/PUT은 클라이언트가 서버로 데이터를 업로드 하는 것 200 OK : 요청한 자원을 내가 가지고 있다. 403 Forbidden 404 Not Found TCP 통신 순서 1. bind 2. listen 3. accept 4. recv-send 5. close 프로그래머스 - 프론트엔드 미니 데브코스 prommise, async await 복습 fetch API 써보기1 컴포넌트 구조 innerHTML을 너무 자주 사용하면 성능에 문제가 생길 수도 있긴 하지..

프로그래머스 - 프론트엔드 미니 데브코스 async, await promise는 코드의 흐름과 실행 순서가 일치하지 않는다는 게 가독성을 어렵게 만듦 async, await를 이용하여 비동기 코드도 동기 코드처럼 보이게 짤 수 있다. (실행은 비동기로) async function async 키워드가 붙은 함수는 실행 결과를 Promise로 감싼다. fetch - 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API - XMLHTTPRequest를 대체한다. - Promise 기반으로 동작한다. response body를 json으로 바꿔주어야 함 혹은 text()로 불러와서 조회 시 JSON.parse() blob은 이미지 처리하는 데 쓸 수 있다. fetch api는 HTTP error가 발생하더라..

프로그래머스 - 프론트엔드 미니 데브코스 api는 호출 시 api.js를 따로 만들어서 한 곳에 모아놓자 먼저 dummy data를 만들어 넣어보고, 렌더링이 잘 되면 이후에 API를 연결해보자 항상 방어코드 작성 고려하기 this.state.map(({id, text}) => ` { //promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출 //promise 내부에서 오류 상황일 때, reject 함수 호출 }) then을 이용해 비동기 작업 이후 실행할 작업을 지정한다. 작업이 실패했을 경우, .catch로 잡을 수 있다. 성공과 실패여부와 상관없이 호출해야 하는 코드는 finally에서 처 Promise의 내장 함수들 Promise.all(iterable) : 여러 promise..

하석재 강사님 객체지향의 포인트 - 캡슐화(디버깅의 해결책) / 상속(코드재활용) 컴포넌트 - 코드 없이 재활용 - MS COM / Sun(오라클) JavaBeans JavaBeans를 잘 알아야해요 컴파일이 되면 재활용이 가능한 구조가 된다. 컴포넌트의 제약 깔아야한다. 안깔고 원격에서 호출 안되나? => 분산 컴포넌트 등장 분산컴포넌트기술 - 원격호출 / 오브젝트(컴포넌트) 다운로드 - Directory Service - MS DCOM(Distributed COM) / Java EJB(Enterprise JavaBeans) -> Spring Bean DI(Dependency Injection) - 객체지향 개념이 발달해서 DI가 나옴 - Angular(Front-end) / Spring(Back-en..