React

프로젝트를 하며, fileUpload 에 대하여 사용해야 하는 상황이 생겼다. 이미지 업로드랑 파일 업로드, 파일 다운로드, 파일 미리보기까지 구현해야하는 상황에서, 간단하게 HTML의 요소 중 input file을 사용해서 진행해보려고 하였다. (기본이 가장 중요하다.) 문서 일단 react 에서 이런식으로 input type을 file로 지정해주었다. 그리고 우리가 이렇게 input type을 file로 지정해주었을 때, 보기싫은 파일 찾기 이런걸 꼭 눌러야하고 아무튼 디자인적으로 매우 예쁘지 않은 파일첨부 input이 뜬다. 약간 이런 느낌으로 뜨기 때문에 매우 마음에 안든다. 그래서 label 을 설정하여 label for 를 이용해 input file의 id 값을 for에 작성하면 서로 연결되어..

프로젝트를 맡아 진행하게 되었는데, 프로젝트 요구사항에서 모바일과 PC 둘 다 화면이 잘 나오도록 보여질 수 있게 반응형 웹사이트로 만들어야 하는 요청을 받았다. 그래서 그런 것에 최적화 된 css 프레임워크, 라이브러리를 연구해보다가. 예전 프로젝트에서 tailwind를 사용했을 때, sm: lg: xl: 이런 형식으로 tailwind 자체에서 모바일 / 웹 사이즈를 지정해서 반응형으로 예쁘게 처리해주었던 것이 기억이 났다. (물론 사이즈는 개발자가 지정할 수도 있다. 나 역시 모든 모바일의 사이즈를 맞추어야 하기 때문에 tailwind에서 제공하는 sm은 사용하지 않고, 직접 사이즈를 지정해서 작은 화면의 모바일 웹을 처리해주었다.) 아무튼, 그러한 이유로 요즘 css 프레임워크에서 가장 핫하게 뜨고..

브라우저 상에서는 fetch 라는 것을 사용하면 api를 잘 불러올 수 있다. 하지만, 우리가 직접 했듯, 긴 url을 query params로 받아야하고, 받은 response를 json으로 변환하는 것까지 손수 했어야 했다. 그래서 반복되는 것이 있기 때문에, 많은 개발자들이 공통적으로 사용하는 라이브러리가 있다. 하지만, 유명하다고 유행한다고 해서 무작정 쓰는 것은 좋지 않다. 이 라이브러리는 왜 써야하는건지 질문이 들어오면, 이것을 쓰는 이유에 대해서 정당하게 이야기를 해야한다. 그리고 라이브러리를 사용하는 것은, 내가 의존하는 라이브러리가 하나 더 생기는 것이기 때문에 신중하게 선택해야 한다. 기존에 언어나 프레임워크에서 제공하는 것의 장단점이 무엇이길래 이것을 사용하는가? 이것을 사용했을 때의..

검색을 하고나서, 또 다시 새로운 것을 검색할 때, 기존에 있는 목록으로 돌아가고 싶다. 지금은 렌더 부분에서 selectedVideo가 상태를 기준으로 보이고 안보이고 조건을 지정해주었기 때문에, 우리는 search 부분에서 상태만 변경해주면 된다. const search = query => { youtube.search(query) .then(videos => setVideos(videos); setSelectedVideo(null); }); }; 이렇게 search 부분에서 setVideos(videos) 를 넣어준 뒤, setSelectedVideo는 null로 변경해주면 된다. const search = query => { setSelectedVideo(null); //로딩스패너를 넣어도 됨 y..

우리가 비디오를 선택 하게 되면, 선택되는 비디오를 기억했다가 선택되는 비디오가 있으면 비디오에 관련된 정보를 보여줘야 한다. 지금은 선택된 비디오가 없는 null인 상태이고 선택이 되었다면, 비디오를 선택해서 그 정보를 전달해주면 된다. 그럼 일단 비디오 컨테이너를 만들어야 한다. app.jsx에 일단 state를 하나 더 생성해서 선택한 비디오의 state를 만든다. const [selectedVideo, setSelectedVideo] = useState(null); 이렇게 만들어준다. 또 우리가 선택, 상세화면을 만들기 위해서 파일을 추가해 줄 것이다. VideoDetail에는 video를 props로 받아올 것이다. 그리고 간단하게 h1 태그를 이용해서 video.title을 받아온다. app...

이번에는 search 헤더를 만들 것이다. * favicon.ico는 ico 라는 것은 폴더를 열어서 보면, 다양한 사이즈가 묶여져 있는 파일이다 브라우저나 모바일, 데스크탑 상관 없이 원하는 아이콘을 골라서 사용할 수 있다. https://convertio.co/kr/png-ico/ PNG ICO 변환 (온라인 무료) — Convertio png 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요. convertio.co 이렇게 png - ico 로 변환하는 사이트도 있다. png를 골라서 ico로 바꾸면 된다. search header는 video 위에 보여져야 한다. (맨 상단에) 일단 기본적인 search header.j..