728x90 반응형 source-code/FrontEnd48 공유, 공유, 공유 스타트업에서 팀으로 일한다는 건, 끊임없이 소통해야 한다는 뜻이다. 아이디어를 떠올리고, 디벨롭하고, 디자인과 개발을 해나가는 일련의 과정 속에서, 멈춤 없이 서로의 생각과 진행 상황을 공유해야한다는 뜻이다. 반대로 말하자면, 서로의 생각과 진행 상황이 공유되지 않으면... 굉장히 답답하다. 나의 일을 하는데 지장이 생긴다. 프론트 개발자로서 특히 필요한 소통은 → 다른 프론트엔드 개발자 / 디자이너 가 있겠다. 1. 다른 프론트엔드 개발자 git hub를 적극 활용하는 수밖에 없다. 현재 팀에서는 issue와 pull request를 통해 잔여 task를 파악하고, 작성한 코드를 서로 리뷰하는 형태로 개발을 진행하고 있다. 여기서 직접적으로 각자의 결과물 공유는 pull request를 통해 이뤄지는데.. 2023. 8. 17. socket io Client API https://www.youtube.com/watch?v=djMy4QsPWiI 기본 사용 methods io url, options를 입력받아, Socket class를 반환. import io from 'socket.id-client' const socket = io.connect('http://localhost:3001) emit() 메시지를 내보냄(서버로 전달) → 특정 이벤트를 실행시킴. // client const sendMessage = () => { socket.emit('send_message', () => {message:'hello'}) } // server io.on('connection', (socket) => { socket.on('send_message', (data) => { .. 2023. 8. 17. 프론트엔드 디자인 패턴, 함수형 프로그래밍 https://velog.io/@eunbinn/modularizing-react-apps [번역] 잘 알려진 UI 패턴을 사용하여 리액트 애플리케이션 모듈화하기 기존에 잘 알려진 UI 패턴을 프런트엔드 개발에 적용하는 과정을 적은 글입니다. 리팩토링하는 과정을 단계별로 쫓아가며 UI 패턴을 실제 리액트 사례에 적용하는 방법을 살펴보고 그 이점을 확 velog.io https://velog.io/@teo/functional-programming 다시 쓰는 함수형 프로그래밍 > 참 좋은데 어떻게 표현할 방법이 없네... 오랜 기간 개발을 공부하게 되면서 여러가지 패러다임의 변화를 겪었는데 그 중에서 인상깊었던 것중에 하나는 객체지향 패러다임에서 함수형 패러다 velog.io 그 주 업무를 하며 고민했던 내용.. 2023. 8. 17. DOMContentLoaded event / load event window 객체에는 문서의 load와 관련된 두 가지 (유사해 보이는) 이벤트가 존재한다. DOMContentLoaded DOMContentLoaded 이벤트는 HTML 문서가 완전히 구문 분석되고, 모든 지연된 스크립트( // loading 종료 여부 판단 예시 function doSomething() { console.info("DOM loaded"); } if (document.readyState === "loading") { // Loading hasn't finished yet document.addEventListener("DOMContentLoaded", doSomething); } else { // `DOMContentLoaded` has already fired doSomething().. 2023. 8. 17. Web Socket 웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다. interface WebSocket 웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스. WebSocket 객체는 웹 소켓 서버 연결의 생성과 관리 및 연결을 통한 데이터 송수신 API를 제공합니다. WebSocket() 생성자를 통해 WebSocket 객체를 생성할 수 있습니다. 생성자 새로운 WebSocket 객체를 생성해 반환합니다. WebSocket() properties WebSocket.binaryType 연결에 사용되는 이진 .. 2023. 8. 17. 브라우저에 데이터 저장하기 - localStorage와 sessionStorage localStorage와 sessionStorage 웹 브라우저 객체(web storage object) 브라우저 내에 키-값 쌍을 저장할 수 있게 해 줌. 페이지를 새로고침하거나(sessionStorage), 브라우저를 다시 실행해도(localStorage) 데이터 유지 가능. 동일한 메서드와 프로퍼티 제공 setItem(key, value) – 키-값 쌍을 보관. getItem(key) – 키에 해당하는 값을 받아옴. removeItem(key) – 키와 해당 값을 삭제. clear() – 모든 것을 삭제. key(index) – 인덱스(index)에 해당하는 키를 받아옴. length – 저장된 항목의 개수를 얻음. Map과 유사(setItem/getItem/removeItem을 지원) / 인덱스를.. 2023. 8. 17. webpack - settings module 웹 개발 시, 분리된 각 JS 파일을 module이라 할 수 있다 모듈로 분리하면? → 모든 JS 파일에서 재사용이 가능(export/import) → 개발 생산성 증대! But 분리된 module이 늘어날수록, 브라우저의 자원 요청은 증가 → 로딩 지연! 그렇다면... module 분리를 통한 개발상의 편의점과, 로딩 시간 단축을 둘 다 가져가기 위해서는? → module을 분리해 개발하고, 배포 직전에 각 module을 하나의 파일로 묶어서 배포하면 될 테다! 이렇게 여러 module들을 하나로 묶는 작업은 bundling이라 하고, webpack은 bundling을 수행하는 module bundler라 할 수 있겠다! webpack JavaScript application을 위한 정적 .. 2023. 8. 17. TDD기반 TODO 애플리케이션 1. 웹 프론트엔드 개발과 TDD 테스트 주도 개발. 약 1년 전 누군가 나에게 TDD에 대해 얘기했다면... 한 귀로 듣고 한 귀로 흘렸을 게 뻔하다. 왜? 첫째, 공감가지 않았다. 하면 좋다. 여기에는 당연히 공감했다. 하지만 지금, 이 순간에 도입해야 하는가? 하는 질문에는 항상 회의적이었다. 시장에서 살아남을지도 불확실한 제품을 테스트까지 해가면서! 개발해야 한다는 점이 못마땅했다. 그 시간에 더 많은 아이디어들을 구현하고, 가설을 검증하는 것이 나아 보였다. (TDD = 귀찮고, 많은 시간을 잡아먹는 괴물 처럼 느껴졌다) 둘째, 프론트엔드의 테스트코드라는 게 이해되지 않았다. 사용자가 이러이러한 액션을 취했을 때 → 이러이러한 결과가 나타나야 한다 를 테스트하는 거라면... 그냥 개발하면서 해당.. 2023. 8. 17. 브라우저에 데이터 저장하기 - 쿠키와 document.cookie 쿠키와 document.cookie 쿠키 브라우저에 저장되는 작은 크기의 문자열 →RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부. 주로 웹 서버에 의해 만들어짐. - 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달. - 브라우저는 이 내용을 자체적으로 브라우저에 저장 = 이것이 쿠키! 브라우저는 사용자가 쿠키를 생성한 동일 서버(사이트)에 접속할 때마다, 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달. 클라이언트 식별과 같은 인증에서 주로 사용됨. 사용자가 로그인하면, 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정. 사용자가 동일 도메인에 접속하려고 하면, 브라우저는 HTTP .. 2023. 8. 17. 이전 1 2 3 4 5 6 다음 728x90 반응형
