🌊 CORS 에러 해결하는 방법 CORS 에러란? 교차 출처 리소스 공유 (Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체제. 🌱 [Web Server] CORS, SOP 🌊 CORS, SOP SOP (Same-Origin Policy) : Same-Origin Policy의 줄임말로, 동일 출처 정책을 의미한다. 한 마디로 '같은 출처의 리소스만 공유가 가능하다'라는 정책이다. 출처 : 아래 세 구성요소가 하나라도 dreamogu59.tistory.com CORS 에러를 해결하기 위해선 백엔드에 프론트엔드 개발 서버 도메인을 허용..

🌊 TIL : 2023년 6월 6일 오늘 한 것 비동기 복습 다크모드 react로 구현 후 타입스크립트 적용시켜보기 // ThemeContext.tsx import React, { ReactNode, createContext, useEffect, useState } from 'react'; const ThemeContext = createContext({ isTheme: false, toggleTheme: () => {} }); interface ThemeProviderProps { children: ReactNode; } const ThemeProvider = ({ children }: ThemeProviderProps) => { const [isTheme, setTheme] = useState( ()..

🌊 TIL : 2023년 6월 5일 오늘 한 것 context api 공부 react에 ts 적용한 프로젝트 셋팅 github actions 오늘은 잘한점 스킵.. 배운 점 배움 어제부터 yarn을 이용해 react에서 typescript 프로젝트 셋팅을 하면 자꾸 vscode에 빨간 줄이 뜨는 오류가 발생했다. 해당 오류를 나는 이 블로그에서 언급한 것과 같이 영역 버전이 틀려 발생하는 일이라고 생각했다. 하지만 나는 작업 영역 버전 사용이라는 메뉴가 출력되지 않아 블로그에서 적힌 방법으로는 수정이 불가능했다. 나는 yarn의 처리속도가 빠른 것 때문에 늘 yarn을 사용해왔기 때문에 고쳐보기 위해 여러 곳에 검색해봤으나 결국은 찾지 못 하였다. 참고한 블로그 [VSCODE] typescript 파일에..

🌊 CI/CD,Github Action, YAML CI/CD 지속적 통합 (Continuous Integration, CI) 개발자를 위한 자동화 프로세스. Code : 개발자가 코드를 원격 저장소에 push 하는 단계 Build : 원격 코드 저장소로부터 코드를 가져와 유닛 테스트 후 빌드하는 단계 Test : 코드 빌드의 결과물이 다른 컴포넌트와 잘 통합되는 지 확인 하는 과정 CI의 장점 CI 과정에서 개발자는 코드를 잦게 원격 코드 저장소에 push 하여 테스트 및 빌드를 하며 빌드 성공/.실패 여부를 확인할 수 있다. 통합 테스트 결과를 통해 개선 방안을 찾을 수 있다. 지속적인 통합 과정을 통해 개발자는 버그를 일찍 발견할 수 있다. 테스트가 완료된 코드를 빠르게 전달이 가능하며, 지속적인 배..

🌊 멘토님의 조언 우리 44기부터 생긴 건데, 우리 부트캠프에 Q&A 세션이라는 것이 생겨 현업 개발자분께 질문을 할 수 있는 시간이 생겼는데, 개인적인 질문은 메일로 받아주신다는 글을 보고 부랴부랴 내가 겪고 있는 학습에 대한 어려움에 대해 말씀드리며 조언을 구하였는데 너무너무 훌륭한 대답들을 해주셨다. 수진 멘토님 처럼 현업에서 훌륭하게 개발자 일을 하고 계신 분이 직접 조언해주셔서 너무 귀한 시간이었다. 정말 감사합니다 ㅠㅠ 😭 나의 고민 솔루션 강의를 보고 클론코딩을 한 후 다시 처음부터 스스로 공부하는 것이 실력 향상에 도움이 될까요? 코드 작성을 할 때 구글링이나 GPT에 검색을 많이 하게 됩니다. 제 실력이 아니라는 생각 때문에 죄책감이 많이 듭니다. 어떤 식으로 접근하여 코드 작성하는 것이..

🌊 TIL : 2023년 6월 3일 오늘 한 것 Youtube Clone 완성 Clone 하며 부족했다고 생각한 점들이나, React Hook 복습 멘토분께 조언 구하기 잘한 점 상황 youtube clone을 끝내고 내가 부족했던 점을 정리하기 액션 class 문법 미숙 axios 라이브러리, fetch api 사용 미숙 어려웠던 부분을 다시 공부하기. 칭찬 난 늘 발전하구 있다! 배운 점 배움 멘토님께 조언 요청하고, 학습 관련 고민 털어놓아 많은 이야기를 해주셨다. 오늘 배움의 의미 조금 더 공부의 방향성을 잡고 달릴 준비!! 개선점 문제 사실 클론코딩을 하며 느꼈던 점인데, 솔루션 강의가 있다보니 쉽게 포기하게 되는 것 같았다. 그런데 이제 별거 아니더라도 간단히 내가 코드를 쳐보는 방향으로 공부..

🌊 Youtube clone 기간 5/11~6/2 (프로젝트 셋업 5월 11일, 부트캠프 프로젝트로 인해 실제 시작은 22일) 구현 요소 완료 헤더 검색하기 로딩바 index, 핫 트렌드 페이지 핫 트렌드 리스트 출력 디테일페이지 동영상 출력 동영상 상세설명 연관된 동영상 기술 스택 JavaScript React.js Tailwind.css Yarn Tanstack Query ESLint Prettier React-Router-Dom React-Icons Tools Visual Studio Code 개선할 점 데이터 요청 부분은 거의 솔루션 강의를 보며 진행하였다 'ㅇ` 한 차례 더 시도할건데 기간도 줄이고 스스로 만들고 싶다. 곧 부트캠프 프로젝트 시작이라 JS Class와 리액트 기초문법부터 다시 ..

🌊 TIL : 2023년 6월 2일 뜬금없지만 블로그 하단에 copyright 색상 연한거 보고 부랴부랴 가독성 떨어지는 색상을 진하게 바꿨는데 보일 때 마다 바꾸다보니 컬러의 통일성을 못 지키고 있는 것 같아서 찜찜하다. 맥북 케이블 선을 실수로 끊어먹어서 부랴부랴 구매하고 급한대로 핸드폰 충전기로 충전 중인데 와트가 달라서 충전이 엄.....청 느리다. 내일 공부를 위해 빨리 케이블이 배송 왔음 좋겠다. 오늘 한 것 유튜브 클론코딩 디테일 페이지 연결 및 제작 솔루션 강의 보기 AWS 공부 잘한 점 상황 어제 react-query를 사용하는데도 왜 axios를 사용하는 건 지 의문이 있었다. 액션 의문을 해결했는데 이 의문을 해결하자마자 콜라 1.5리터를 꿀꺽꿀꺽 한 느낌이었다 ㅎ react-quer..