본문 바로가기

전체 글40

3월 웹 풀 사이클 데브코스 회고록 잘한 점 새로운 팀원들과 적응을 잘하고 있다는 점 아침에 일어나서 뉴스레터를 자동읽기 해놓고 조금이라도 들은 것 팀원들과 따로 스터디 모임을 만들어서 강의와 별개의 공부를 시작한 것 용기내서 팀원들에게 모르는 것을 물어보고 다니기 시작한 것 아쉬운 점 이번에 처음으로 도서 신청을 해서 책을 받았다. 모던 리액트 Deep Dive 책으로 신청을 했는데 이번 스프린트 3과 4를 하느라 정신이 없어서 몇장밖에 못읽었다..ㅜ 빨리 읽고 공부해야하는데 스프린트 3을 하면서 Mysql workbench와 Docker mariadb와 연동에 문제가 생겨서 시간을 잡아먹혔다. 게다가 스프린트 4가....너무 어려워서...하루종일 스프린트 4에 시간을 써도 부족했다. 그러다 보니 도서 신청한 책은...3월 극초반에만 잠.. 2024. 3. 31.
리버스 프록시, 단위 테스트 오늘 강의 들으면서 용어 정리! 📕 리버스 프록시 리버스 프록시에 대해 공부하기 전에 먼저 프록시 서버가 무엇인지 알고 가야할 것 같다. https://www.cloudflare.com/ko-kr/learning/cdn/glossary/reverse-proxy/ 위의 사이트 내용을 보고 정리했다. 👉 프록시 서버란? Forward 프록시 클라이언트 시스템 그룹 앞에 위치하는 서버이다. 이러한 컴퓨터가 인터넷의 사이트 및 서비스에 요청하면 프록시 서버가 이러한 요청을 가로채고 중개자처럼 해당 클라이언트를 대신하여 웹 서버와 통신한다. 표준 인터넷 통신(일반적): 컴퓨터 A가 컴퓨터 C, 클라이언트는 원본 서버에 요청을 보내며 원본 서버가 클라이언트에 응답하는 방식 포워드 프록시: 클라이언트가 서버로 요청할.. 2024. 3. 22.
비관적 업데이트(pessimistic)? 낙관적(optimistic) 업데이트? 비관적 업데이트 서버의 응답을 받고 확인한 후에 UI를 업데이트하는 접근 방식 작동 방식 : 사용자 액션(상호작용) ➔ 서버 응답을 기다리는 동안 로딩 인디케이터를 표시하여 사용자에게 현재 상태를 알림 ➔ 오류 발생 : 사용자에게 즉시 알림 / 성공적인 응답 : UI를 업데이트 특징: 응답 대기 : 사용자가 데이터를 변경하는 작업(예: 데이터베이스에 정보 추가, 수정, 삭제 등)을 요청하면, 서버에서의 처리 결과를 기다림 ➔ 이 처리가 성공적으로 완료됨을 확인한 후 ➔ UI가 업데이트 안정성 : 사용자에게 최종 상태를 보여주기 전에 서버에서의 처리 결과를 확인함. 실패할 경우 오류 메시지를 사용자에게 제공하고, 데이터의 일관성을 유지할 수 있기 때문에 더 안정적 사용자 경험(UX) 지연 적용 분야 : 주.. 2024. 3. 14.
쿼리스트링(=검색 파라미터) 다루는 방법 useLocation, useSearchParams, URLSearchParams useLocation() React Router에서 제공하는 훅이며, 현재 브라우저의 위치(location) 객체를 반환 const location = useLocation(); Properties pathname : 현재 주소의 경로 (쿼리 스트링 제외) search : ?(물음표) 문자를 포함한 쿼리 스트링 hash : 주소의 # 문자 뒤의 값 (해시 라우터에서 사용) state : 페이지로 이동할 때 임의로 넣을 수 있는 상태 값 key : location 객체의 고유 값. 초기에는 default이고 페이지가 변경될 때마다 고유 값이 생성됨 location.search를 통해 ? 문자를 포함한 쿼리 스트링을 추출할 수.. 2024. 3. 7.
2월 웹 풀 사이클 데브코스 회고록 2월에는 2가지 이벤트가 있었다. 첫번째, 프론트엔드 강의가 본격적으로 시작되었다는 것 두번째, 11월부터 같이 했던 첫번째 팀과 헤어지고 새로운 두번째 팀이 꾸려졌다는 것 프론트엔드 강의 1월 말부터 2월 초중반까지는 타입스크립트 이론을 가볍게 배웠고 그 후부터는 타입스크립트 기반으로 리액트 프로젝트를 만들기 시작했다. 나는 프론트엔드 직무를 생각하기때문에 타입스크립트 부분을 기대를 하고있었는데 내가 생각한 것보다 훨씬 가볍게 짚고만 넘어가서 당황스러웠다. 매우 초조해지기 시작했다. 타입스크립트 기반 웹 풀사이클 데브코스 과정을 들은만큼 타입스크립트를 활용한 프로젝트 결과물이 있어야할텐데 타입스크립트는 아예 공부한 적이 없었기때문에 큰일났다고 생각했다. 그런데 타입스크립트를 시작하기 전에 자바스크립트 .. 2024. 3. 3.
AxiosError: Network Error / CORS 에러 헤더에 쓸 카테고리 데이터들을 받아오기 위해 서버에 카테고리 api를 요청했다. 그런데 axios 에러 중 네트워크 에러가 발생했다. 콘솔 창을 확인해보니 Access to XMLHttpRequest at 'http://localhost:1225/category' from origin 'http://localhost:3003' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. CORS 정책에 의해 브라우저(클라이언트) origin에서 보낸 요청이 막혔다. 'Access-Control-Allow-Origin' 헤더가 요청된 리소스(서버)에 없다. 라고 말해주고.. 2024. 2. 29.
TIL 13주 day2 - React에서 경로 이동, HTTP 통신 시 fetch, axios 📍경로로 이동하는 방법(Link, useNavigate) Link Link 는 특정 주소로 이동해주는 태그 Link 컴포넌트는 React에서 사용하는 태그라고 생각하면된다. 태그의 경우, href로 지정한 주소로 이동하기때문에 새로고침이 일어난다. 그래서 애플리케이션이 들고 있던 상태들을 모두 날려 버리게 되며 다시 처음부터 렌더링을 한다 의 경우, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경해 준다. 태그는 href를 통해 , 는 to를 통해 이동한다. import { Link } from 'react-router-dom'; function MyComponent() { return ( About ); } useNavi.. 2024. 2. 15.
react에서 map()사용 시 배열 항목의 key 강의를 듣다가 강사님께서 post 배열에 id가 있는데 key값을 index로 하셨길래.. 생각이 나서 정리 {post.map((postInfo: Post, idx) => { return ( {postInfo.title} ❤️ {like} {postInfo.date} ); })} JSX {} 안에서는 for를 이용해서 반복문을 사용할 수 없다. 대신 map 함수로 반복을 할 수 있다. 리액트에서 배열을 렌더링 할 때에는 key 라는 속성을 설정해야한다. key 는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key를 설정하지 않으면 브라우저의 콘솔창에 아래와 같은 에러가 나타난다. key의 존재가 필요한 이유? key를 index로 설정하는 것을 권장하지 않는 이유? 애플리.. 2024. 2. 9.
1월 웹 풀 사이클 데브코스 회고록 1월동안의 나를 돌아보면 너무 부끄럽지만 부끄러운 나를 만든 것도 나고 하지 않은 것도 나다! 프로그래머스 국비지원교육에 참여한지 어느덧....벌써....ㅜㅜ 3개월...아니 4개월차에 접어들었다 흡 시간이 넘 빠르다 살려조~~~~ 시간아 나 두고 가지마!!! 스프린트 2 프로젝트 1월의 프로그래머스 데브코스의 프로젝트는 Node.js로 도서 판매 사이트 백엔드 기능 구현이었다. 회원가입,로그인, 비밀번호 초기화, 도서 조회, 좋아요, 장바구니, 주문하기 기능을 만들어봤다. 강의에서 강사님께서 기능 구현을 같이 하긴 하지만 정말 기본적인 것만 알려주시기때문에 개인적으로 코드 개선을 해야했다. 그래서 프로젝트를 시작하면서 팀활동도 추가되었다. 바로 페어 코딩과 프로젝트 주간 회고이다.(팀 활동에서 한 내용.. 2024. 2. 2.
11주차 day3 (break문, continue문, 함수, 변수의 범위, 배열, 문자열 변수, 포인터) 반복문 break문과 continue문 break 반복문 (여기선 while문) 내부에서 특정 조건이 되면 break를 만나게 되는데, break문은 반복문을 빠져나가게 된다. #include int main() { int a = 0; while(1){ if(a > 100){ break; } printf("a의 값은 %d입니다.\\n", a); a++; } printf("a는 100보다 크다\\n"); return 0; } continue 반복문 while문 내부에서 특정 조건이 되면 continue문을 만나게 되는데, 이 때 continue문 이하의 수행은 무시하고, 다시 반복의 시작점(조건식)으로 간다. for문에서는 증감식으로 이동 #include int main() { int a = 0; whil.. 2024. 2. 1.