Codestates SEB FE 42기 67

코드스테이츠 메인 프로젝트 회고 | 그때도 봄이었다🌸

💨코드스테이츠 메인 프로젝트 회고 목차💫 1️⃣새로운 팀 2️⃣유저플로우 3️⃣디자인 4️⃣개인 코딩 5️⃣에러, 그리고 또 에러 6️⃣마지막으로... 프리 프로젝트를 마치고 눈코 뜰 새 없이 바로 메인 프로젝트를 하게 되었다. 메인 프로젝트는 더 잘하고 싶은 욕심과 조금 지친 마음을 이끌고 새 팀원들을 만나게 되었다. 🖐새로운 팀 새 팀을 만드는 데 정말 힘들었다ㅋㅋㅋㅋ 그때 우리는 냉장고 재료로 레시피를 알려주는 플젝 아이디어를 염두에 두고 있었다. 처음에 효은언니네 프리 때 백엔드 분들이랑 같이 하는 건 어떠냐고 해서 연락을 드렸었는데, 백엔드 분들은 우리의 확고한 냉장고 아이디어에 조금 생각해 보겠다고 하셨었다. 그리고 대망의 팀 결성 날이 찾아왔고, 우리는 열심히 좋은 백엔드 분들을 영입하고자 ..

코드스테이츠 Pre-Project 회고 (2) | 첫 Styled-Components 잘 사용하기

💅 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..

코드스테이츠 Pre-Project 회고 (1) | 첫 협업! 프로젝트 계획은 어떻게 하나요?

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

S4 unit10 | react에서 Proxy로 CORS 에러 피하기

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

S4 unit10 | CI/CD란? Github Action으로 자동 파이프라인 구축

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

S4 unit8 | Lighthouse로 최적화 하기

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

S4 unit3 | 번들링과 웹팩

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

[SEB FE] Section3 회고 | hey~...!⭐

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

S3 unit6 | [네트워크] IP/IP Packet

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

S3 unit6 | [네트워크] 회선교환 방식, 패킷교환 방식

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