전체 글 (121) 썸네일형 리스트형 22.11.08 : TCP, UDP TCP와 UDP는 데이터 전달을 담당한다. 이 둘은 포트 번호를 이용해 주소를 지정하는 것과 데이터 오류검사를 위한 체크섬이 존재하는 두가지 공통점을 가지고 있지만 정확성(TCP)을 추구할지 신속성(UDP)을 추구할지 구분하여 나뉜다. 데이터를 중요하게 생각해 확실히 주고받고 싶을 때는 'TCP(Transmisson Control Protocol)'을 사용한다. TCP는 통신하는 컴퓨터끼리 '보냈습니다', '도착했습니다' 라고 서로 확인 메시지를 보내면서 데이터를 주고받음으로써 통신의 신뢰성을 높인다. 웹이나 메일, 파일 공유 등과 같이 데이터를 누락시키고 싶지 않은 서비스는 TCP를 사용한다. 그에 반해 데이터의 신뢰성은 제쳐두고 어쨌든 빨리 보내고 싶을 땐 'UDP(User Datagram Proto.. 22.11.07 : JavaScript의 비동기 처리방식과 비동기 함수 JavaScript 비동기 처리방식 자바스크립트는 Event Loop를 이용해서 비동기 방식으로 동시성을 지원한다. 이벤트 루프 이벤트 발생시에 호출되는 콜백 함수들을 태스크 큐에 전달하고 콜스택에 쌓여있는 함수가 없을 때, 태스크 큐에서 대기하고 있던 콜백 함수들을 콜스택에 넘겨준다. JavaScript의 비동기 함수들 자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행한다. 이를 해결하기 위해 비동기가 생겼다. 비동기란 특정 코드들의 처리가 끝나기 전에 다음 코드를 실행할 수 있는것을 뜻한다. 자바스크립트는 즉시 처리하지 못하는 이벤트들을 이벤트 루프에 모아놓고, 먼저 처리해야 하는 이벤트를 실행한다. 가장 대표적인 비동기처리 사례는 setTimeout()으로 일정시간 뒤에 함수를 실행시.. 22.11.07 : DOM (Virtual DOM vs Real DOM) DOM: 문서 객체 모델 Docomunet Object Model XML이나 HTML에 접근하기 위한 일종의 인터페이스이며, 문서 내 모든 요소에 대해 nodes와 objects로 표현하고, 접근하는 방법을 제공한다. 웹 페이지의 객체 지향 표현이며, 자바스크립트 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 이 DOM은 트리구조로 되어있어서 이해하기 쉽단 장점이 있지만, 이런 구조 때문에 부분적 수정이 필요할 때 DOM 전체가 바뀌어야하기 때문에 DOM트리에서는 속도 이슈가 발생하였고, 지속적인 DOM 업데이트는 잦은 오류, 사용자 인터페이스에 악영향을 끼쳤다. 이러한 단점을 해결하기 위해 나온것이 바로 가상돔(Virtual DOM)이다. https://youtu.be/BYbgopx44vo V.. 22.11.05 : Redux란 무엇인가요? 왜 사용하시나요? Redux는 자바스크립트 앱을 위한 전역 상태관리 툴이다. 나는 개발 공부를 시작한 뒤로 상태 개발 툴로는 아직까지 Redux, Redux toolkit 만을 사용해보았기 때문에 다른 상태관리 툴과는 아직 비교를 해 볼순 없지만, 일단 어떤 툴인지 더 자세히 알아보구 속속들이 파해쳐본 뒤, 다른 상태관리 툴도 사용해보고자 한다. 일단 Redux는 복잡해진 상태관리를 더 손쉽게 하기 위해서 존재한다. 상 하위 관계에 있는 컴포넌트들의 상태의존도가 높아지고, 자식 컴포넌트들이 너무 많아졌을때, 나는 Redux toolkit(RTK)을 사용했다. Redux는 전역상태관리툴 중 가장 많이 쓰이고있고, 커뮤니티도 크기 때문에 참고 할수있는 레퍼런스들이 가장 많다. 그중 Redux팀은 RTK를 로직을 작성하기 위한.. 22.11.04 : 상태관리 하는 이유, 평소에 state 관리는 어떻게 하시나요? Q. 상태 관리를 하는 이유는 뭘까? 보통 부모자식관계에 있는 컴포넌트들은 state를 props로 전달하게 된다. 이 데이터는 부모에서 자식으로 가기도, 자식에서 부모로 전달되기도 한다. props drilling이라는 것은 props가 상위 컴포넌트에서 하위 컴포넌트들을 통해서 전달되는 것을 뜻하는데, 이것 자체가 문제가 되는 것은 아니다. 하지만 컴포넌트간 상태 의존도가 높아져 너무 여러 컴포넌트를 거치게되면 이 props가 어디에서 시작된 것인지 추적을 하기가 힘들기 때문에 유지 보수를 하는데 문제가 생긴다. 따라서 상태 관리를 전역에서 할 수 있는 tool이 필요하다. Q. 상태관리, 지금 어떻게 하는지? 현재 개인적으로 지역상태는 props로 관리하며 프로젝트가 커지고 컴포넌트간 상태 의존성이.. 내돈내여 : Front-end code convention code convention 1. NAMING CONVENTIONS (중요: 잘 지켜야 함!!) Compenents 이름: Pascal case (첫 단어를 대문자로 시작) Non-components: Camel case (띄어쓰기 대신 대문자로 단어 구분) 상위 폴더에 속해있는 파일들 이름 직관적으로, 알아보기 쉽게 통일 (ex: mypage folder > Myinfo.jsx , Mylikes.jsx, Myplan.jsx …) 속성명: Camel case로 작성 (className, onSubmit, onChange…) inline 스타일: Camel case로 작성 2. BUG AVOIDANCE null 또는 undefined 일 수 있는 값은 optional chaining 연산자 (?.)사용 3.. 내돈내여 : Github-flow & Git commit message convention Github-flow 전략 FE member's branches(eunji, hyelim, dada): 각자 기능 개발하는 브랜치(feature브랜치 역할) semi: 각 멤버의 branch들을 merge한 배포 전 테스트용 브랜치 (develop 브랜치) 사용전략 각 멤버의 기능 개발 branch에는 기능이 추가 될 때 마다 리뷰와 사인이 끝난 후 수시로 push 한다. 기능 구현이 완료 되면 semi로 pull request 하여 merge. semi에서 기능 개발 branch들을 병합한 후 오류 수정 및 검토 ⇒ master 브랜치에 pull request 하여 merge. master: 실제 배포가 될 브랜치. semi 에서 테스트 후 병합. 빌드 후 배포 Git commit message con.. 실전 프로젝트 - 내돈내여 (React + Spring) 광고 없는 여행 후기 내돈내여로 떠나기 ✈️ Back-End Github 👀 Front-End Github 👀 🧑🏻💻👩🏻💻 팀원 소개 서비스 개요 내 돈내고 내가 여행하는, 진정성있는 국내 단기 여행 정보 공유 플랫폼 서비스 서비스 아키텍쳐 Front-end node.js, 사용자 요청에 따른 각기 다른 웹사이트를 보여줄 수 있도록 동적 웹 호스팅이 가능한 EC2와, 리버스 프록시로서의 역할을 하며 서버가 SSL 요청을 처리하는데 드는 비용이 없는 nginx를 이용해 데이터 보안을 위해 https 환경으로 끊김없는 서비스를 제공 할 수 있고 많은 레퍼런스를 가진 PM2를 통한 무중단 배포를 하였고, 리액트 상태를 전역으로 관리하고 사용이 편리한 Redux-toolkit을 사용하였습니다. 또한 클라이언.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음 목록 더보기
