본문 바로가기

개념

 (70)
hoxy...Proxy가 왜 필요한지 아시나요? 정확히요... 🙏🏻 thanks to 생활코딩 Create React App - Proxy 코스 교육과정 중 proxy관련 부분이 이해가 잘 안되서 다른 교육 자료를 찾아봤는데 생활 코딩님의 유튜브 영상을 보고 너무 잘 이해가 갔다..감덩... 샤라웃투 생활코딩, 구독 좋아요 박았숩니다!👍🏻 무튼 이번 블로깅은 그 영상으로 부터 배운 것들을 판서하는 식으로 작성했다. 영상을 다 보기 어려울 때 아래 내용을 보고 참고하고, 영상을 볼 수 있는 경우 영상으로 볼 것을 추천한다. 🤔 어떤 경우 , 왜 Proxy가 필요할까? CRA(Create React App)로 개발을 할 경우 개발환경을 편하게 만들어 주기위한 proxy라는 기능이 있다. 이 기능이 왜 필요한가에 대해 먼저 알아보고자 한다. 일단 CRA로 웹 개발을 하다..
배포, CI/CD란 + github actions 사용해서 s3에 자동배포하기 🚀 클라이언트 배포 배포란 작성한 코드를 빌드(실제 실행할 수 있는 상태로 최적화)하고, 빌드가 완성된 파일을 사용자가 접근할 수 있는 환경에 배치하는 일을 말한다. 열심히 만든 코드를 비밀로 할건 비밀로 하고, 줄일건 줄이고, 환경에 맞출건 맞춰서 유저가 접근할 수 있도록 배치하는 일을 말한다. 🛠 CI/CD CI란 지속적인 통합(Continuous Integration)를 의미하며, "CD"는 지속적인 서비스 제공(Continuous Delivery) 및/또는 지속적인 배포(Continuous Deployment)를 의미한다. CI(지속적 통합)는 조금씩 늘어나는 코드 변경 사항을 개발 팀이 정기적으로 구현하고 테스트한 후, 공유 버전 관리 리포지토리에 병합하는 방식을 설명합니다. 그러면 자동화된 빌..
Lighthouse로 웹사이트 최적화하기 💡 Lighthouse, 성능최적화로 인도하는 등대 Lighthouse란 영어로 등대를 의미한다. 이 말처럼 Lighthouse는 우리가 공들여 만든 사이트가 제대로 굴러갈 수 있는건지, 혹은 부족한 면은 없는지 검사해주고 그에 대한 해결책을 제시해준다. 말그대로 등대같이 우리를 성능최적화의 바른 길로 이끌어주는 프로그램이다. 🔥 Lighthouse의 Performance항목 Performance 항목에서는 웹성능을 측정한다. 화면에 콘텐츠가 표시되기까지의 시간이나, 화면이 나오고 나서 클릭등의 상호작용이 먹힐때까지의 시간, 혹은 화면에 불안정한 요소가 있는지 여부를 체크한다. ⚡️ Performance를 개선하기 위한 Opportunities항목 조금 아래로가면 '추천' 영역이 보인다. 이 부분이 우리..
NODE_ENV와 REACT_APP_ 환경변수란? + 깃허브 토큰 예제 🤔 환경변수란? 환경변수는 프로젝트 전체에서 참조할 수 있는 변수 만들 수 있어 편리하게 이용된다. 환경변수로 변수를 선언하시면 JS파일 내에서 지역변수로 선언한 것 과같이 변수를 참조해 올 수 있다. 기본적으로 NODE_ENV라는 환경변수가 있고, 필요에따라 REACT_APP_으로 시작하는 다른 환경 변수들도 설정할 수 있다. 이 둘에 대한 이야기는 아래에서 각각 더 자세히 다룬다. 💡 NODE_ENV는 현재의 모드를 가르킨다 Node.js의 express 서버를 실행할 때 필요한 변수이다. NODE.ENV는 지금 돌아가고 있는 어플리케이션의 모드를 특성화 시키는 환경변수이다. 보통은 'development'와 'production' 이 두가지 문자열로 등장한다. 아래의 코드를 보면 어떤 식으로 쓰이는..
비전공자도 공부하는 컴퓨터 공학 기초 📌 컴퓨터 = 하드웨어 + 소프트웨어 컴퓨터는 하드웨어와 소프트 웨어가 합쳐진 것이다. 하드웨어란 전자 회로 및 기계 장치로 되어 있어 입출력 장치, 중앙처리 장치(CPU), 기억장치 등으로 구성된다. 소프트웨어는 하드웨워 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램이다. 📌 기본구성 요소 출력장치(I/O) 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치 예시) 모니터, 프린터, 스피커 중앙처리장치(CPU) CPU = 산술/논리 연산 장치(ALU) + 제어 장치 + 레지스터 제어장치: 각종 장치의 컨트롤 센터. 프로그램에 따라 명령과 제어 신호를 생성하여 장치들의 동작을 제어한다. 레지스터: CPU의 메모리, CPU에서 사용하는 데이터를 일시적으로 저장하는 장소 저장장치 저장..
웹팩 기본 구조 📌 시작하며 웹팩과 번들의 필요성과 개념에 대한 설명은 링크를 참조 🤔 웹팩의 핵심 개념들 웹팩을 다룬다는 것은 webpack.config.js 파일을 이해하고 작성하는게 사실상 전부다. webpack.config.js 파일만 잘 작성해 놓으면 번들링이 성공적으로 되고 빌드가 완료되는데 이 webpack.config.js파일에 옵션이 너무 많고 복잡해서 생소한 부분이 많다. 일단 웹팩 공식문서에서 제시하는 핵심개념들은 아래와 같다. (각 링크를 클릭하면 공식문서로 넘어간다) Entry(엔트리) Output(출력) Loaders(로더) Plugins(플러그인) Mode(모드) Browser Compatibility(브라우저 호환성) 💡 웹팩의 모양 웹팩 설정 파일의 아주 간단한 모습은 아래와 같다. 아래는..
번들링과 웹팩, 무엇이고 왜 필요할까? 🎀 번들링(bundling)이란 '묶는다'는 뜻을 가지고 있으며, 사용자에게 웹 애플리케이션을 제공하기 위해 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다. 🤔 번들링은 왜 필요할까 구체적인 사례로 들자면 아래의 것들을 들 수 있다. 여러개의 js파일을 사용할때 변수간 충돌을 막을 수 있다. 파일을 불러오는 횟수를 줄일 수 있어서 인터넷 속도가 느릴 때에도 좋다. 유지보수를 위해 공백이나 주석을 지우지 않아도 배포용 코드에서만 뺄 수 있다. 배포 코드를 암호화하여 안전하게 만들 수 있다. 요약해서 말하자면, 번들링은 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 필요하다. 여러개의 파일들이 있다면 그만큼 서버에 요청하고 응답받는 횟수가 많아진다. 그러면 당연히 페이지가 로딩되는 시..
패킷교환방식, TCP/IP, OSI 7계층, TCP/IP 4계층 + UDP 📌 패킷교환방식이란 패킷 교환(Packet switching)은 컴퓨터 네트워크와 통신의 방식 중 하나로 현재 가장 많은 사람들이 사용하는 통신 방식이다. 작은 블록의 패킷으로 데이터를 전송하며 데이터를 전송하는 동안만 네트워크 자원을 사용하도록 하는 방법을 말한다. 큰 소포 한덩어리 였던 데이터를 패킷이라는 작고 가벼운 단위로 쪼개서 전송할 수 있게 해주는데, 기존의 회선교환 방식에서의 단점이었던 즉시성을 개선할 수 있다. (한 서버와 통신중에도 다른 서버와 통신할 수 있음) 이렇게 나누어진 패킷들은 여러 통신 지점(Node)를 지나 목적지에 도착한다. 또한 각각의 패킷들은 빠르게 전달 할 수 있도록 다른 경로로 전달된다. 📪 IP 패킷으로 데이터 보내기 IP 패킷이란 IP 주소를 활용해서 패킷 통신단..
웹표준, Semantic HTML, 웹접근성 🤔웹표준이란 웹 표준이란 다양한 웹브라우저에서 동등하게 작동하게 하기 위한 권고사항이다. 이 '표준'이란 것은 w3(https://www.w3.org/)이란 기관에서 권고사항을 모아서 소개한다. 웹표준을 지키면 다양한 브라우저(사파리, 크롬, 파이어폭스, 엣지, 오페라)에서 동등하게 잘 작동하는 웹페이지를 만들 수 있다. 여기서 '동일'대신, '동등'을 사용한 이유는, 브라우저가 다르면, 완벽하게 동일하게 작동할 수는 없기 때문이다. 그래도 웹표준을 사용하면 동등한 수준의 필요 기능을 제공할 수 있어진다. 더불어, 이런 호환성 외에도 다양한 장점들이 있어 웹표준은 꼭 지키는 것이 좋다. 💡웹표준을 사용하면 유지 보수가 편해진다. (+코드 경량화, 트래픽 비용 감소) 웹 호환성을 확보할 수 있다. 검색 효..
meta 태그 캐시 초기화 - 카카오 공유 디버거 😫 meta태그 바꿨는데 왜 안바뀌는 건데 대체..! 예전에 카카오 공유화면 보면서 meta 태그를 설정하는데 캐시초기화가 안되는 바람에 여기저기 공유하고 용을 쓰면서 확인했던 기억이 있는데, 좋은 걸 알게되었다. "카카오 공유 디버거" 두둥! 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 🔥 걍 주소 넣고 버튼 누르면 끝 사용법이랄것도 없다..ㅎㅎ 이런식으로 공유할 url을 입력하고 캐시 초기화 버튼을 누르고, 다시 카톡으로 가서 링크를 공유하면, 바뀐 메타태그가 적용된 화면이 보인다. 디버그 를 눌러보면 meta 태그로 설정한 사항들을 표로 확인해 볼 수 있다. 완전 유용하다.

티스토리툴바