진주의 개발괴발

💅 Styled-Components 이번에 styled-components를 처음 써보았는데 확실히 직접 사용해보니 배우는 게 많았다. 아직 미숙한 점이 많지만 css보다 깔끔한 것 같기도 하고... 근데 내가 아직 잘 못써서 그런지 styled가 앞부분에 너무 많이 생겨버린다... ㅎㅎ 다른 분은 아예 파일을 파서 import * as W from "./styled.js"; function Login() { return ( ) }; 이렇게 가져와서 사용하셨다. 훨씬 깔끔해지는 듯! 1. attrs() 공식문서🔗 export const Input = styled.input.attrs({ autoComplete: "off" })` border: none; overflow: hidden; `; 추가적인 at..

코드스테이츠 프리 프로젝트를 마쳤다! 백엔드와 함께한 첫 협업이었는데 나름 성공적이었다 ㅎㅎ 역시 나는 프로젝트 체질...? 이라는 생각이 들 정도로 즐거웠다. 다양한 에러를 마주할 때마다 너무 힘들고 혹시 다 못 끝낼까봐 불안하기도 했지만😣 오늘은 나처럼 프로젝트 초보자들을 위한 글을 써보려고 한다! 백엔드와 (혹은 프론트엔드와) 첫 협업인데 어떻게 시작해야 할까요? 우선 가장 중요한 건 계획이다 사공이 많으면 뭐다? 팀 프로젝트는 사람이 많기 때문에 더욱 계획을 잘 짜둬야 한다. 이렇게 계획을 같이 짜도 "어...? 그게 그런 뜻이었어요?" 하는 일이 무조건 생기기 때문에 서로 소통이 중요하다 STEP1. 사용자 요구사항 정의서 : 시스템이 요구하는 사항을 나열 후 업무 단위로서 기술한 것 ◾ 기능 ..

📌 CORS 정책 교차 출처 리소스 공유(Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 콘텐츠의 출처(Origin) : URL의 스킴(프로토콜), 호스트(도메인), 포트 동일 출처란 스킴, 호스트, 포트가 모두 일치하는 출처를 말한다. 백엔드에 프론트엔드 도메인 허용 요청을 해두고 응답 헤더에 필요한 값을 전달받아야 한다. 📌 Proxy : CORS 정책 위반 에러를 회피하는 방법 중 하나이다. 프록시는 요청이 동일한 출처에서 온 것처럼 속여준다. 따라서 CORS 에러가 나지 않는다. Proxy 사용 방법 React 라이브러리, Webpack Dev Server에 Proxy 기..

📌 CI/CD 간단 정의 CI : 지속적인 통합 (Continuous Integration) 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합된다. 즉, 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 충돌하는 문제를 해결할 수 있다. CD : 지속적인 서비스 제공 (Continuous Delivery), 지속적인 배포 (Continous Deployment) CD는 지속적인 서비스 제공과 지속적인 배포 두 가지를 의미하며 두 용어는 상호 교환적으로 사용된다. 두 가지 의미 모두 파이프라인의 추가 단계에 대한 자동화를 뜻하지만 때로는 얼마나 많은 자동화가 이루어지고 있는지를 설명하기 위해 별도로 사용되기도 한다. 📌 지속적 통합 ..

⭐ Lighthouse 시작하기 1. chrome 개발자 도구에서 실행 2. Node CLI에서 실행 npm install -g lighthouse -g 옵션을 사용하여 전역 모듈로 설치하는 것을 권장한다. lighthouse // 검사 실행 명령어 💬 Lighthouse 분석 결과 항목 1. Performance 웹 성능 측정 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다. 2. Accessibility 웹 접근성 확인 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다. 3. Best Practices 웹 표준 모범 사례에..

📌 번들 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 📌 번들링의 필요성 1. 변수 간 충돌에 대처할 수 있다. 2. 코드를 최적화 할 수 있다. 3. 배포 코드를 읽기 어렵게 하여 개발을 할 줄 아는 사용자가 애플리케이션을 임의로 조작하지 못하게 한다. 📌 webpack : 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용되는 모듈 번들러 공식문서 모듈 번들러 : HTML, CSS, Javascript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구 모듈 번들러가 생긴 이유 모던 웹으로 발전하며 Javascript 코드의 양이 증가했고, 대규모 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일도 증가했다. 그러면서 ..

💥Section3 이번 섹션은 정말 역대급으로 해이해진... 섹션이었다. 스스로를 어르고 달래느라 정말 힘들었다. 코딩 공부가 너무 재미있던 초반과 달리 점점 공부를 하며 알아갈수록 더 공부할 게 많구나... 싶어서 마음이 갑갑하다. 그러면서 코딩이 조금 지겨워졌던 것 같다. 회피하려고 자꾸 물건을 사들였다... 괜히 물건을 사면서 스트레스 풀고 공부하는 거 회피하고ㅠㅠ 다 본 유튜브를 괜히 켠다던지... 처음 부캠 시작했을 때랑 완전 반대다ㅋㅋㅋㅋㅋ 자꾸 왜 회피하려는 마음이 들었을까? 잘하려고 했는데 뭔가 실패할 것 같으니까 무서워졌나보다. 완벽하려고 하지 말고 그냥 마음을 비워야겠다. 하면 하는 거지 뭐! 다음 섹션의 목표는 '매일 한 걸음씩 발전하기!'로 정했다. 부캠을 시작한 지 벌써 3개월이 ..

IP(인터넷 프로토콜) IP는 지정한 IP주소 (IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달을 합니다. IP 패킷 Packet(패킷) : Pack + bucket 소포에 비유할 수 있다. IP패킷은 출발지 IP,목적지 IP와 같은 정보가 포함되어 있습니다. 패킷 단위로 전송을 하면 노드들은 목적지 IP에 도달하기 위해 서로 데이터를 전달합니다. 서버에서 무사히 데이터를 전송받는다면 서버도 이에 대한 응답을 돌려줘야 합니다. 서버 역시 IP패킷을 이용해 클라이언트에 응답을 전달합니다. IP 한계점 비연결성 1. 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 : 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송하게 된다. 비신뢰성 1. 중간에 ..

1. 네트워크의 시작 지금 우리가 사용하는 인터넷 프로토콜, 즉 IP 기반의 네트워크는 미 국방성에서 1969년 진행했던 아르파넷(ARPANET) 프로젝트에서 시작되었습니다. 이 프로젝트는 당시 냉전시대에서 핵전쟁을 대비하기 위한 통신망 구축을 위해 추진되었습니다. 이떼 기존에 사용되었던 회선교환 방식이 아닌 패킷교환 방식으로 네트워크를 구축하게 되는데 이를 토대로 현재의 인터넷 통신 방식의 기반이 세워졌습니다. 회선교환 방식 회선교환 방식은 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결합니다. 그래서 내가 연결하고 싶은 상대가 다른 상대와 연결 중이라면, 상대방은 이미 다른 상대와의 전용선과 연결되어 있기 때문에 그 연결이 끊어지고 나서야 상대방과 연결할 수 있습니다. 또한 ..

📌 웹 표준 웹 : 문서, 이미지, 영상 등 정도를 타인과 공유할 수 있는 공간 웹 표준 짧은 설명 : 브라우저 간 호환을 위해 웹 개발의 형식을 통일 시킨 것 정의 : W3C(World Wide Web Consrtium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙' 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있다. 웹 개발에서 사용되는 언어인 HTML, CSS JavaScript 등의 기술을 다룬다. 웹 표준의 장점 1. 유지 보수의 용이성 HTML, CSS, JavaScript의 영역이 분리되며 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과가 생겼다. 2. 웹 호환성..