네트웍크 웍웍 거릴정도로 접근은 힘들지만, 배워보면 재밋는것
꽤나 접근이 힘들었던 네트워크, 개념을 볼때마다 10줄도 못읽고 이거 읽을 시간에 api문서나 더 들여다봐야겠군. 이라고 생각이들었던, 재훈이가 아무리 설명해줘도 읭거렸던. 네트워크와 서버 막상 실제로 접하면서 사용해보니 재밋다??
이전 회고는 쓸데없는 자기소개랑 반성과 성찰의 시간이었다면 이번엔 짧고 굵게가자.
목표
돈많은 백수
질문
- 돈이 많은가?
- -> 아니다.
- 백수인가?
- -> 맞다.
KEEEEEEEEEEEEEEP
- 시간과의 약속?
- -> 지킴
- 알고리즘?
- -> 떠먹여주는 밥은 다먹었지만 바빌로니아 점화식보다 조선시대 제곱근 구하는 공식으로 국뽕이 차오르고 싶어서 다 못풀었다. 그거말곤 올패스(이자구하는 공식은 이해못함 ㄷㄷ)
PROBLEM
- 재보다 잿밥에 관심이 많다.
- -> 무슨소린고하니 서버와 클라이언트를 매핑하라고 던져줬더니 서버를 구축하는 방법에대한 고민을 하다 실패에 실패를 거듭해 이도저도 못했다(시간안에 할수 있을거라 과신했다. 응가멍멍이다.)
- 1차 회고때 반성한거는 지켰는데 Side Effect가 발생했다.
- -> 사람을 만나 풀지못하는 스트레스를 장비질하고 세팅질하는(아직도 다 못했어요), 다른 문제가 발생하였다. 하지만 정말로 사람들을 만나는것에대한 약속은 정한시간대로 지켰다. 나를 믿는 사람들을 실망시키는게 제일 힘들었다.
- 데드라인을 지키지 못하였다.
- -> 열정과 정열은 어디갔는지? 개인의 행복추구와 이것만이 내세상이라는 자기합리와헤 데드라인을 지키지 못하여 같이활동했던 페어나, 소그룹원들에게 피해를 주었다.(심각)
작은 시작
- 안쓰는 폰으로 구동하는 서버에대한 포스팅은 따로 할 생각이다.
- -> 어떻게 하느냐보다는 이런 실수들과 각종 도움되는 링크들을 올려 누군가가 비슷하게 시도했을 때 시행착오를 겪지 않았으면 하기 때문이다. 돈이 되지 않는 것에는 시간도 투자하면 안되지만
아마 하겠지?
- -> 어떻게 하느냐보다는 이런 실수들과 각종 도움되는 링크들을 올려 누군가가 비슷하게 시도했을 때 시행착오를 겪지 않았으면 하기 때문이다. 돈이 되지 않는 것에는 시간도 투자하면 안되지만
- 장비질은 멈추었다.
- -> 잔고에 비상이 울렸기 떄문이다. 가장 중요한 목표인, 돈많은 백수가 되기위한 돈이 되는것에만 투자해야되는 제 1원칙을 어긴 결과다.
꼬시다.
- -> 잔고에 비상이 울렸기 떄문이다. 가장 중요한 목표인, 돈많은 백수가 되기위한 돈이 되는것에만 투자해야되는 제 1원칙을 어긴 결과다.
- 당일 마감원칙에서 시간 내 마감원칙으로 변경한다.
- -> 1회기때도 나왔던 데드라인 문제는 2회기때도 언급된다. 나혼자 하고 끝나면 문제가 안되겠지만(내 무지는 내 책임이니까), 다른분들에게는 피해가간다.
반성해라
- -> 1회기때도 나왔던 데드라인 문제는 2회기때도 언급된다. 나혼자 하고 끝나면 문제가 안되겠지만(내 무지는 내 책임이니까), 다른분들에게는 피해가간다.
전 회기 진척도
- JS 정확한 명칭과 구체적 사용법
- -> 솔직히 네트워크도 따라가지 못해 지키지못함.
- CSS
- -> 손도 못대서 마지막 과제에서 멘탈 바사삭
HTML 실제 서비스 -> 와아아아 이건 거의다 구현해감- 구색만 갖춘 블로깅
- -> 깨달았다. 그게 구색이 아니라 그렇게 해야 이해가 된다는걸. 대신 다시는 안보고 다시 문서찾더라 -> Jekyll를 통해 블로그에 추가 addon을 덧붙여야됨
- 검색 -> 접근성 향상
- 태그 -> 접근성 향상2
- 카테고리별 분류 -> 접근성 향상2
내블로그를 내가 찾기 힘듬..
- -> 깨달았다. 그게 구색이 아니라 그렇게 해야 이해가 된다는걸. 대신 다시는 안보고 다시 문서찾더라 -> Jekyll를 통해 블로그에 추가 addon을 덧붙여야됨
- 야근이 지속되면 마시고있더라 술.
- -> 알콜자조모임 전화번호 get했음. 진지하게 고려중
할일
- 중고장터 사고팔고 멈추기
- -> 중요: 공부엔 돈이 필요해요
- 실서버 구현
- -> 미정: 실패하면 가데이터로 보이게 구현(어차피 자기만족이란걸 알아서 더슬퍼요)
- 당일에 끝내기(블로깅도 지금보다 더 함축적으로)
- -> 미정: 미래는 예측불가한 순수하지않은 함수같은것.
- JS공부
- -> 중요: 기본 언어도 못쓰는자 쓸모없다.
- CSS공부
- -> 중간: 포트폴리오 꾸밀정도까지만 너무 딥하게 들어가면 또 아무것도 못함.
- React공부
- -> 중요
- NodeJS, Http Server, Express 등
- -> 중간: 포트폴리오용까지만 일단 공부
- 블로그 재정비
- -> 낮음: 재밋겠다 재밋겠다 하다보면 또 할거안하고 딴짓할거 뻔함
- 술 AA(자조모임 껴줄지는 모름)
- -> 중요: 술을 안마시는 사람 중 행복한 사람의 비율 99%, 술을 마시는 사람 중 불행한사람의 비율 99%
우선순위 정하자
| 중요 | 중간 | 낮음 | 등급외 |
| 중고질멈춤 | CSS | 블로그 정비 | 실서버구현 |
| JS | server단 | 당일법칙 | |
| React | |||
| AA |
결론
마무리는 오늘 기술면접 예상질문에 지금내머리속에 있는 이야기를 그대로 적고 끝내자.
JavaScript
Promise의 기능과 필요한 이유에 대해서 설명해주세요.
Promise는 고차함수의 모양을 가진 함수가 함수를 반환하는 형태로, 주로 fetch같은 비동기적인 실행이 필요할때 사용된다.
실행시기는 우리는 알 수 없으므로, 그 동작이 일어났을 때 동작해 주세요와 같은 명령을 컴퓨터에 내려서 웹 기준으로는 브라우저(클라이언트)가 비동기적으로 실행이 일어 났을 때 Control을 할 수 있도록한다.
비동기적 실행의 경우 상기와 같이 순서를 우리가 알 수 없으니, 순차적으로 실행할 수 있도록 Promise의 then()함수로 팩토리얼 형태(지가 지를 리턴)의 .기법으로 사용하고, 동기의 지옥을 벗어나려고한 Promise또한 반복되고 길어지면 코드의 복잡도와 유지보수성이 늘어나니, await와 ??????을 사용하여 축약할 수 있다.
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
순수함수란 말그대로 순수하게 입력에 대한 출력이 변하지 않는 것을 말한다. 멱등성과도 문맥상으로는 정해진 결과를 반납하므로, Math.random()과 같이 결과를 알 수 없는 경우에는 순수함수라고 볼 수 없다.
React
React의 state와 props에 대해서 설명해주세요.
state는 상태로, React에서는 상태를 useState를 이용하여, 상태를 갱신시킬 수 있다. 이때 JSX내의 태그와 변화될 값을 매핑하여, 관련 변화에대해 뷰가 동적으로 반응하게 구현할 수 있다.
props는 React의 컴포넌트들끼리 통신하는 방식으로, React의 중요 원칙인, Top-down방식을 따르며, 구현 시 상위 뷰가 하위 뷰에게 필요한 값을 전달할 때 JSX의 tag의 attribute와 같이 쓴다. 상위 뷰에서는 해당 구현 시 꼭 props로 넘겨줘야하는 것은 아니며, 받는 하위뷰에서 props.이나 해당값을 구조분해할당을 통하여 바로 받아 쓴다던지의 사용이 가능하다.
React 컴포넌트의 key 속성에 대해서 설명해주세요.
key는 고유한 속성이 되어야하며, 없을 시 React는 우리가 구현할거라고 생각한 리스트를 정상적으로 렌더링하지 못한다. 사용하는 데이터에 key로 쓸만한 고유한 값이 없다면, 배열의 인덱스를 사용할 수도 있으나, 동일한 key가 사용될 경우 버그를 일으킨다. key를 사용하지 않으면 컴파일러에서 오류를 던지고, 하위뷰인 li가 아닌, 리스트에서 생성하는 React component, 즉 ul내 있는 react component에서 key값을 매핑하여야한다.
이게 왜이런거냐면. 리액트가 그렇게 만들어져서 그렇게 써라고 강제하는거니, 구현이 궁금하면 api를 뜯어봐야한다.(시간나면^^ 안나겠지만)
useEffect의 dependency array에 대해서 설명해주세요.
useEffect는 React에서 컴포넌트 내에서 외부값을 변경할 시 발생하는 side effect를 방지하기 위해 사용하는 것으로 예를 들면, 하위컴포넌트에서 상위 컴포넌트를 제어하고 싶을 때 사용할 수 있다.
side effect는 react가 렌더링 되는 시점을 우리는 알 수 없기에(비동기인가) side effect가 발생할 경우 우리는 뭐가 버그인지 디버깅에 굉장히 큰어려움을 겪게된다.(life cycle이해하는것도 굉장히 힘들어엉)
이에 useEffect를 사용하여, 첫번째 인자는 이벤트 핸들러와같이 동작을 구현할 함수가 위치하게되고, 두번째 인자는 배열이 위치하는데, 배열안에 들어있는 useState의 값이 변경되었을 때 자동으로 제어할 수 있게해준다. 빈배열을 넣을때는 처음 화면을 띄웠을 떄 init할 수 있는 한번만 실행되는 모양을 가질 수 있고, 배열내, 제어값을 여러개를 두고, 한개의 useEffect를 사용하여 안에 코드를 복잡하게 작성하기 보다는 각 값들이 변경되었을 때 긴코드를 불러오지 않도록, 여러개의 useEffect를 작성하는게 더 좋다.
HTTP/네트워크
CSR과 SSR의 차이점에 대해서 설명해주세요.
과거에는 서버에서 HTML문서 전체를 날려줬다. 이방식이 서버입장에서는 가장 간편하고, 그렇게까지 HTML안에 들어가는 내용이 많지 않았기에, 클라이언트측 렌더링방식으로 개발되다
점점 클라이언트에 보내줘야할 양이 늘어난 근 10년전부터는 클라이언트와 서버의 부담을 나누어, HTML파일 전체를 응답에 담는방식이 아닌, 필요한 데이터만 DB서버에 접근하여 응답하는 서버측 렌더링방식으로 개발된다.
클라이언트 렌더링방식은 간단한 문서나 토이웹사이트정도의 작은 단위에는 유리하나, 지금의 여러 서비스들 처럼 보내야되는 리소스가 많게 되면, 서버측에서는 처음에 미리 클라이언트에게 뷰나 보여줄 부분들의 껍데기를 보내놓고, 동적인 내용(content)의 경우에는 DB서버나, 서버 내 저장소를 통하여 응답한다. 그럴 시 서버측 렌더링은 데이터를 다 받아왔을 떄 렌더링 되어, 방대한 양의 데이터를 필요한 만큼만 받아쓸 수 있어 효율적이다.
GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
Get method는 HTTP의 조회 CRUD의 R에 해당하고, POST는 CURD의 Create 추가, 다르게말해 변경을 의미한다. Get method는 request 시 쿼리 파라메터를 이용하여 검색과 같은 정보를 응답으로 받아오는게 좋고, POST의 경우는 body를 추가하여, 변경, 즉 추가할 내용은 패스 파라메터를 이용하여 전송한다.
(이건 검색) Get은 연산을 여러번 적용하더라도 변하지않는 멱등성을 지녔으나, Post는 요청으로 변경, 추가가 일어나니, 멱등하지 않다.
웹서버 기초
HTTP 메세지 구조에 대해 설명해주세요.
(읭 메모리랑 비슷하다밖에 머리속에 안남았어요 ㄷㄷ 내 뇌도 rom이면 좋겠다) 헤더와 바디내에 어떻게 보낼지에대한 메세지를 담아놓았다.
Same-Origin Policy와 CORS에 대해서 설명해주세요.
SOP는 동일출처정책으로 동일하지 않은 출처에 대해서는 접근을 막는 정책으로 일반적으로 이 문제때문에 내가 늘 고민하는 포트포워딩이 필요하다. 이에 대응하여 CORS를 사용하여 특정 출처에게 접근권한을 준다던가, 사용자인증값을 줘서 접근을 허용한다던가, 전체를 허용한다던가 같이 누구나 이용할 수 있는 웹사이트나, 한정된사람만 이용가능한 ftp서버, 원격허용을 이용할 수 있다.