정현's 블로그

1. 항해99 - 스파르타 코딩 클럽에서 기획한 부트캠프. - 5기(2022.01 ~ 2022.04)에 참여. - 요즘 지하철역마다 거하게 광고하는 그 부트캠프 맞음.("우우우우우우우우우우웅") 2. 장점 1) 강의 퀄리티 Good! 1-1. 대표님 강의, 임민영 튜터님의 리액트 강의 좋아요! 1-2. 강의 시간 짧고 알차게 구성되어 있습니다. 1-3. 기초주차 강의부터 개인 프로젝트를 하나하나 쌓아가는 경험을 할 수 있어요. 2) 협업 프로젝트 경험 가능 2-1. 프론트엔드 개발자, 백엔드 개발자, 디자이너들이 모여 프로젝트를 진행합니다. 2-2. UserTest 기간에는 마케팅도 할 수 있습니다.(with 소정의 지원금) 2-3. 소켓통신, 와이어프레임에 맞춰 개발할 때 적극적인 소통이 필요합니다. ..

VSCode에서 redux 모듈 다운로드 받다가 에러남. yarn으로 redux-actions 지우고 재설치. 저장 후 VSCode 재실행.

1. React 1) 이번주 한 일 유저 피드백 취합 노랑: 단 기간 내 해결 가능. 빨강: 구현하는 데 시간이 걸리는 기능. 개선이 필요한 사항 작품 북마크 후 마이페이지에서 확인하면 해당 작품이 2개가 북마크됨.(북마크 중복) 유저 스스로가 어떤 목적을 갖고 글을 쓸 지 지표가 되는 부분이 있었으면 좋겠다. 가입 시 페이지가 넘어가지 않을 때가 있음. 문장 작성 페이지에서 작성 시작하기 버튼 눌렀는데 인풋 박스가 보이질 않았다. 아이폰의 경우 참여자가 여러 명일 때 하단에 ‘.’ 이 생기는데, 프로필 사진과 겹친다. 웹으로 접속했을 때, 메인페이지에서 가장 아래의 이미지가 짤린다. 글 작성이 연속으로 2번 이루어질 때가 있다. 공지글과 메인섹션의 UI가 좀 더 구분되었으면 좋겠다. 로그아웃, 프로필 ..

1. React 1) 이번주 배운 내용 1-1) 리덕스 리덕스 구조를 실전으로 익히게 되었다. 여전히 좀 헷갈리는게 적지 않으나 이번 기회에 제대로 공부 좀 하고 넘어가야겠다. 1-2) 협업 업무 진행 속도가 느려지는 걸 느낄 수 있었다.... userTest주차가 차주이고... 난이도 높은 기능들 추가하는 등 쫓기는 와중이라 다들 예민해진 상황. 항해99의 멘토로부터 MainPage 등 화면에서, 무엇을 위한 서비스인지 명확히 느끼질 못하겠다는 Feedback을 받았다. 21시에 모여 문제점 확인 & 업무 분담하게 됨. 우리팀 문제 디자이너 문제 1. 처음에 디자이너와 업무분담 명확히 안함. 1. 회의 일정 fix이후에도 회의 일정이 수시로 조절됨. 2. 웹소캣 통신 확인, 뷰 작성이 늦게 완료됨. 2..

1. React 1) 이번주 배운 내용 1-1. 뷰를 똑같이 구현하는 게 쉽지 않았음. 1-2. 다른 사람들의 코드 적극 참조 필요. 1-3. 웹소켓 통신 시, 콘솔창으로 데이터가 오고 가는 것을 확인할 수 있음. 서버와 통신하면서 데이터를 주고 받는 게 신기하고 재밌었음. 프론트 쪽은 거의 할 부분이 없었고, 백쪽에서는 특히 할일이 많았음. 처음이고 해서 시간이 생각보다 많이 걸렸음. 다음에는 버벅이지 않고 잘할 수 있을 듯! 2) Trouble Shooting css가 생각이상으로 까다로움. 단순히 뷰만 구현하는 것 이상의 무언가를 요구하는 작업임.

1. React 1) 뷰 재구성 중 1차적으로 뷰는 마무리. 디자이너로부터 받은 와이어프레임을 토대로 MUI 및 CSS 입혀가며 재구성 중. 2) Error #1 팀원 분 중 다음과 같은 에러가 발생함. ERROR in Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\asus\desktop\google-clone\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\asus\Desktop\google-clone\node_modules\eslint-config-react-app\base.js". #4186 Gitbash를..

1. React 1) 마이페이지 작성 - 마이페이지를 최대한 구현해내는 게 목표. * 이미지 업로드 시 프리뷰에 이미지가 나오지 않는 문제 발생. * 코드 리뷰를 통해 데이터 가져오는 경로가 잘못되었고 post -> mypage로 변경해줌으로써 해결됨. 2) 공부 필요 해도해도 부족한게 코딩인 것 같음.

1. React - 클론코딩 주차(Colley 클론 중) 1) 협업 시 느낀점 다른 사람들이 열심히 하는 모습을 보고 분발하게 됨. 다른 사람의 코드를 볼 수 있는 게 장점. 나와의 차이점을 알 수 있고 배울 점들이 많다는 것을 알게 됨. 리덕스 스토어를 Mypage와 연결하는 부분을 맡았고 심지어 구현까지 해볼 수 있게 됨. 이게 뭐라고 뿌듯했음. 후딱 끝내버리고 팀원분들 도와드리러 가야겠다. 2) 아쉬운 점 백에서 어떤 코드와 구조로 진행되는 지 알아보고 싶은데.. 막상 봐보니 뭔소린지도 모르겠고 그냥 '리액트에 집중해야지' 생각하게 됨.

1. React 1) Axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. 2) HTTP Methods 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단 3) GET axios.get(url,[,config]) GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도임. 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다. 4) POST axios.post("url주소",{ data객체 },[,config]) post 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 ..

1. React 숙련 주 1) 배운 것 Document Object Model의 줄임말. 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성함. 웹브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있음. 가상돔에서 작성 후 마지막에 비교하여 바뀐부분만 진짜 DOM에 반영한다. 동적 라우팅: 1. -> :(콜론)처리 후 cat_name하면 nabi, 치즈 등 random 한 값이 들어올 수 있도록 해줄 수 있음. 2. -> 아예 컴포넌트 값 명시. React-router-dom 버전에 따라 컴파일 시 오류날 수 있음. 버전에 따라 코딩법도 좀 다름. /cat?name=nabi -> ?ke..