정현's 블로그

1. Vue3 1) 이번주 배운 내용 - 이미지 불러올 때 require 사용. - Swiper 사용 Partners 2) Trouble Shooting - Swiper, Carousel 사용 시 사용법 정확히 인지할 것.(for문 어디에 써야할 지 주의)

1. Vue 1. 이번주 배운 내용 1) api 연동할 때 특정 부분에서는 default값 지정이 필요하다. 2) 체크박스 로직 구현.(수신동의 & 수신거부) 2. Trouble Shooting 1-1) 발단 - Api 연동 시 fetchItem 써서 데이터를 가져왔음. 콘솔 노출도 해보고 절대 undefined 하지 않은데 페이지 로딩 때 자꾸 undefined 하다고 나옴. - mounted 디렉티브로 데이터 가져왔는데 페이지가 그려질 때 데이터가 없다보니 undefined라고 뜨는 거임. - created 디렉티브로 해봤으나 역시 안됨. - 총 2번 읽는데 처음 읽을 때 'undefined error' 발생하고 그 다음 Get error, 404 error 발생. 1-2) 해결 - 라이프사이클 훅 ..

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) Class형 vs 함수형 1-1) 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 1-2) 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; 출처: https://devowen.com/298 1-3) 차이점 정리 함수형: State, LifeCycle 관련 기능 사용 불가능.(Hook..

ECMA Script의 역사. 1 1997년 6월 초판 2 1998년 6월 ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경. 3 1999년 12월 강력한 정규 표현식, 향상된 문자열 처리, 새로운 제어문 , try/catch 예외 처리, 엄격한 오류 정의, 수치형 출력의 포매팅 등. 4 버려짐 4번째 판은 언어에 얽힌 정치적 차이로 인해 버려졌다. 이 판을 작업 가운데 일부는 5번째 판을 이루는 기본이 되고 다른 일부는 ECMA스크립트의 기본을 이루고 있다. 5 2009년 12월 더 철저한 오류 검사를 제공하고 오류 경향이 있는 구조를 피하는 하부집합인 "strict mode"를 추가한다. 3번째 판의 규격에 있던 수많은 애매한 부분을 명확히 한다.[3] 5.1 2011년 ..