web
-
리액트로 간단하게 포트폴리오 사이트 만들기web/React&Redux 2020. 4. 10. 22:16
간단하게 포트폴리오 사이트를 만들기 위해 간단한 모양을 디자인했다. 어차피 프로젝트 아직 두개 밖에 없어서.. 왼쪽 사이드 바는 고정해두고 오른쪽만 프로젝트를 클릭하면 상세페이지로 넘어갈 수 있게 라우팅해서 만들 예정이다. 프로젝트는 마우스를 올리면 반응하게 만들었는데,, 브라우저 크기를 고려하지 않고 만들었기 때문에,,, 창 크기가 줄어들면,, 프로젝트카드 하나가 밑으로 내려간다. 그래서 반응형 웹으로 만들어야 하는지.. 그게 고민이다..(안해봤음..) 포트폴리오 제출할건데.. 민망,, 게다가 배경색 채울 때 높이를 vh 단위를 썼더니.. 카드가 밑으로 내려가니까 높이 범위 벗어나면 배경색이 없음,,ㅎ ㅏ (일단 overflow hidden으로 높이 벗어나는 경우는 없게 만들어 놓긴 했다!) 흑,, 간..
-
Q. 리덕스를 사용할 때 모든 state를 store에서 관리하는 것이 맞을까?web/React&Redux 2020. 3. 29. 00:11
상황이번 프로젝트(4주 프로젝트)에서 어쩌다보니 프론트하게 됐고,리덕스도 처음 써보게 되었는데처음 도입했을 때 (리덕스를 빨리 익혀서 써야한다는 부담감 때문에)별 생각 없이 그냥 앱에서 사용될 모든 데이터를 스토어에 때려 박았다.팀원 중 한명이 다 스토어에서 관리할 필요는 없고컴포넌트 내에서 state로 관리할 수 있는 데이터는 store에서 빼는 게 좋을 것 같다?(뭐가 맞는지는 모르지만..)라는 의견을 냈다.그런데 프로젝트 관리/감독 해주시는 분이 리덕스를 사용한다면모두 스토어에서 관리하는 게 맞다! 라는 말씀을 해주셨다.당시에는 글쿤, 그렇구나~ 하면서 모든 데이터를 스토어에서 관리하고 있었는데시간이 흐를수록,, 음,, 이건 모달창 open/close인데 스토어에 보내야 하나..? (결국 안 보냄)..
-
이미지 버튼 만들 때 주의 할 점web/HTML&CSS 2020. 3. 26. 14:44
쿠폰을 발급해주는 이미지 버튼을 만들었는데 왼쪽 옆에 똑같은 동작을 하는 작은 버튼이 생겼다... 이미지 태그를 버튼 태그로 감싸주고 있었는데 왜 이런 일이 일어나나? 검색을 하던 중 태그를 한 칸 아래로 내려서 쓰면 안 된다는 블로그 글을 보았다. (링크) 그래서 전략을 바꿨다. 이미지 태그를 사용하지 않고, 버튼 태그의 background 속성을 사용하는 것이다. 저 작은 버튼은 없어졌지만 이미지를 원하는대로 출력할 수 있게 핸들링하는 건 좀 어렵다. ?? 근데 바꿔서 하는 게 더 나을 것 같다; 이미지 태그를 쓰고 거기에 onClick을 걸어주면 되는데 왜 저렇게 했을까..? 그리고 왜 한 칸 아래로 내려쓰면 이런 일이 일어날까 추측은 button의 value가 생기기 때문일 것 같다,,, 찾아서 ..
-
validateDOMNesting(...): <a> cannot appear as a descendant of <a> 에러 핸들링web/React&Redux 2020. 3. 21. 18:11
상황 원래 작성했던 UserMenu 컴포넌트에 새로운 링크를 추가할 일이 있어서 추가했더니 갑자기 콘솔에 계속 경고가 생김 UserMenu 컴포넌트는 저런식으로 홈페이지 위에 링크를 연결한 컴포넌트인데 이렇게 하나 더 추가하려니까 콘솔에 에러가 찍혔다. 근데 블로그 글 작성하려고 코드를 다시 꼼꼼하게 보니까.. 원래라면 이렇게 작성되어야 했던 코드가 QnA Counpon Signin ^-^,, QnA Counpon Signin 이렇게 작성되어 있었다.. 위치를 수정해주니 에러는 사라졌다. 결론 저 에러는 아마 Link 태그 안에 Link 태그를 넣어서 생긴 문제일 것이다. 태그를 똑바로 열고 닫고, 알맞게 사용하자!
-
리덕스 개발자 도구와 리덕스 사가 동시에 사용하기 (타입스크립트)web/React&Redux 2020. 3. 20. 16:41
1. 사가 사용 전 createStore함수 import modules, { StoreState } from './modules'; import { createStore, Store, applyMiddleware } from 'redux'; export default function configureStore(): Store { const store = createStore( modules, (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__(), ); sagaMiddleware.run(rootSaga); return store; } 여기서 createStore 함수에 2번째 인자로 들어간 ..
-
console.log(FormData)는 왜 빈(empty) 객체인가?web/React&Redux 2020. 3. 17. 01:00
상황 어드민 페이지에서 이벤트를 등록하는 기능을 구현하는 중이었다. 사용하는 데이터는 문자열과, 파일(이미지) 였다. 파일을 서버로 보내기 위해서 FormData 형식을 사용해야 했다. 서버로 보내기 전에 데이터가 FormData에 잘 담기고 있는지 확인하기 위해 console.log()를 찍어보니까 안 나와!!!!!!!!!!!!!!!!!!!!!!!!!!!! 그럼 프론트에서만 안 찍히고 서버에는 제대로 가고 있을까? 하고 서버에서도 req.body를 찍어보니까 또 안 나와!!!!!!!!!!!!!!!!!!!!!!!!!!!! 1. 프론트에서 안 찍히는 이유 FormData는 한 번에 찍어볼 수 없습니다. why formdata.append not working? 이거 오지게 검색해 봄ㅎㅎ 타입스크립트에서는 ..
-
[AWS] EC2 쓸 때 사용할 포트(PORT) 여는 것을 잊지 말자..web/front-end 2020. 2. 18. 11:52
EC2보안그룹 인바운드 규칙에서 연습용 서버 열려고 포트 5000을 추가해두고서버를 5000포트를 사용하도록 열어놨을 때는 문제없이서버가 돌아갔는데 다른 서버를 만들어서 3001 포트에서 열려니까 응답이 안오는 문제가 있었다ㅎ..내 EC2인스턴스가 3001포트에 대해 어떤 지정도 되어있지 않아서 그런 거 였는데한참 해결을 못해서 고생했다ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그 와중에 5000번으로 바꿔 볼 생각을 왜 못 했을까?포트만 다르고 다 똑같은데 왜 안되지..? 이러고 있었음보안규칙가서 열어주니까 바로 해결되었다!
-
ubuntu(linux)에서 포스트맨(POSTMAN) 간단 사용법web/front-end 2020. 2. 17. 10:41
[Postman 공식 문서] 사용중인 Os(운영체제) Ubuntu 18.04.3 LTS 원래 크롬 익스텐션이었는데 안 되는 듯 함,, 그래서 그냥 설치하고 사용 중 다들 편하다고 그랬는데 (설치하기 귀찮아서) 매번 클라이언트 만들어서 요청을 보냈다; 이게 더 귀찮은건데ㅋㅋㅋㅋㅋㅋ 서버 만들 때 엄청 유용하고 편하기 때문에 간단한 사용법을 정리하고자 한다. [설치방법 참고 블로그] 터미널에 다음 명령어를 입력하면 설치 완료 wget https://dl.pstmn.io/download/latest/linux64 -O postman.tar.gz sudo tar -xzf postman.tar.gz -C /opt sudo ln -s /opt/Postman/Postman /usr/bin/postman 실행하려면 터..