날아라김지원
노션 포트폴리오
웹개발정보 2022. 7. 25. 15:01

https://valiant-eustoma-bc0.notion.site/ba90f933755f4aa8b7ff7bd7bab71884

article thumbnail
파비콘 만들어주는 사이트 (favicon)
웹개발정보 2022. 4. 2. 11:28

https://www.favicon.cc/ favicon.ico Generator Preview Favicon in original size: www.favicon.cc 브라우저 상단의 이러한 이모티콘? 느낌의 그림들을 파비콘이라고 한다. 해당 파일을 만들어주는 사이트다. 직접 도트를 찍어서 만들 수 도 있고 그림파일을 업로드해 변환시켜서 만들어 주기도 한다. 유용하게 사용하고있다. 사용방법도 매우쉽고 당연히 무료! 유용하게 쓰고있다.

article thumbnail
폴더 내 파일명 리스트 추출해서 변수로 쓰기(수백개)
웹개발정보 2022. 4. 2. 11:20

후.... 정말 미친일이 벌어졌다. 이렇게 폴더안에 있는 파일이름들을 전부 배열, 혹은 json변수로만들어 사용해야 할 일이 생겼다. 이와같이 이미지 파일이 존재하면 해당 이미지파일을 보여주고 없으면 기본 이미지를 보여주는 과정인데 .... const handleImage = (e)=>{ e.target.src=default_img console.log(e.target.src) } return .... 이와같이 출력했는데 이와같이 해주면 정상적으로 작동은하지만 Next.js나 React의 public폴더안에 없는파일을 한번 연결해주는 과정이라 500에러가나게 된다. (500 Internal Server Error) 휴... 그래서 결국 방법을 강구해 보았다. 500개의 데이터목록이 있는데 350개의 이미..

article thumbnail
프론트엔드 개발자에게 Swagger란, axios로 API사용하는법
웹개발정보 2022. 3. 25. 23:24

백엔드 팀원들과 협업하다보면 만들어준 API를 사용해야할 필요가있다. 1)회원가입,로그인,게시글작성,삭제,수정 그리고 현재 나같은경우 2)db에 있는걸 분류해서 카테고리 묶음으로 원하는 데이터를 뽑아올때 3)혹은 그외 프론트에서 특정요청을 보내면 원하는 데이터를 받아오는 경우 예시를 살펴보자 우리팀 천재 백엔드 개발자 솬군이 만들어준 api다, 3개의 속성이 있고 각 속성은 0~3까지 가지고있다. 그리고 중간에 Request URL까지 떡하니 나와있으니 편하게 API사용하듯이, React의 경우는 Axios를 사용해주면 된다. 내가 0,0,0을 전송하거나 혹은 2,1,3등을 전송하면 원하는 목록이 쭉 날아오는 식이다. 내가 1,0,3을 날려봤다. 이와같이 해당하는 결과가 쭈르르르륵 날아온다. axios(..

article thumbnail
axios CORS 오류
웹개발정보 2022. 3. 25. 22:57

휴우... 팀원이 만들어준 스웨거에서 POST요청을 하는데 자꾸 CORS오류가 났다. 분명 다른 사이트에있는 자료들을 axios로 가져오는데는 문제가 없는데 여기서만 CORS라...? 뭔가 문제가 있다고 생각했다. 분명 스웨거에서는 잘 작동했다. 근데 찾아보니 보통 이런경우는 백엔드 단에서 해결해줘야하는게 맞는거 같더라 물어보니 우리팀 천재 백엔드 개발자가 CORS 설정을 해줘서 잘 해결되었다. 이와같이 200OK..매우편안 여튼 일단 어딘가에서 제공되는 API가아니라 누군가 새로 만들어주는 거라면 물어봐보고 해결할 생각을해보자, proxySetup까지 찾아볼정도로 알아봤는데 다행이도 간단하게 해결 되었다. 참고한링크 https://qnrjs42.blog/react/react-cors [React] 다른..

article thumbnail
fontawesome(폰트어썸) React와 Next.js에서 사용하기
웹개발정보 2022. 3. 18. 13:53

npm i --save @fortawesome/fontawesome-svg-core # Free icons styles npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/react-fontawesome@latest 이와같이 npm을 설치해준다 물론 yarn도 있다. https://fontawesome.com/docs/web/use-with/react/ Set Up with React Font Awesome 6 brings loads of new icons and features to the most popular icon set in th..

article thumbnail
Mui Appbar Link설정하기
웹개발정보 2022. 3. 17. 21:32

Appbar링크관련해서 어디 나와있지않은데 일단 구현자체는 성공 이미만들어저 있는소스에다가 const pages = ['index', 'index2', 'page','page2']; const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; const links = ['/','/index2','/page','/page2'] 이와같이 선언되어있는 Appbar에다가 links라는 배열을 하나 만들어주고 라우터 주소를 넣어줬다. {pages.map((page,i) => ( {page} ))} 그리고 이와같이 Appbar안에있는 Button을 Link로 감싸주고 map함수안에 인덱스를 넣어줘 Links[i]의 형태로 주소를 사용할 수 있게만들어서 구현했다...

깃랩에서 깃허브로 이사하기
웹개발정보 2022. 3. 2. 22:15

깃랩에 완성된 프로젝트를 올려놓은게 많아서 전부 깃허브로 옮겨야할 필요를 느낌, 심지어 잔디까지 싹 옮겨 준다고한다. 1.새로운폴더에서 git bash로 열어주고 (터미널) 2.이전 장소의 bare clone을 만들어준다 git clone --bare 클론할 레포지토리주소 3.이사갈곳의 github주소를 넣어서 push해준다 git push --mirror 깃허브 새 레포주소 그리고 같은 이메일을 사용하거나, 등록하면 기타 오류는 거의 해결된다고한다. -참고한 사이트 두곳 1.https://blog.naver.com/mcoding777/222583635995 2.https://velog.io/@kyunglim_khang/gitlab%EC%97%90%EC%84%9C-github%EB%A1%9C-%EC%98..