개요 문제를 풀면풀수록 느끼는 것인데 너무 박힌 틀안에서 고치다시피 하다보니 변경할때 건드려야 할 것이 너무 많아지는 것이다 그래서 아예 구조를 새로 설계하고 문제를 그 위에서 풀면 더 좋을거같다는 생각이 들어서 해보기로했다 폴더 구조 현재 src 와 src/utils에 대부분의 파일이 몰려있는데, 이를 분리할 필요가 있다 일단 components 폴더는 필수인것같다.. src ㄴutils (api, store, ...) ㄴcomponents ㄴModal ㄴHeader ㄴMain 이렇게하고 components내부에도 좀 분리해두면 좋을거같다 Modal, Header, Main으로 나눌까 싶다 파일 구조 Modal 모달이 띄어지면 배경화면이 살짝 검게되고 중앙에 모달을 넣는 방식은 공용일것같다 class명..
개요 오늘 원래 에서 나머지 하나도 같이 풀어보려고했는데 이 생각보다 오래걸려서 나눠서 작성해볼게요! Q.lazy load 개념을 이용하여, 이미지가 화면에 보여야 할 시점에 load 되도록 처리해야 합니다. 점점 난이도가 높아지네요! 우선 이미지의 지연 로딩(lazy loading)은 이미지가 화면에 보여야 할 시점에 동적으로 로드되도록 처리하는 기술입니다 그런데 이게 결국 스크롤 페이징 기법이랑 이어진다고 생각이 드는데요.. 그니까 지금은 fetchCats를 이용하면 32개의 이미지를 다 받아오고 띄어놓는 상태인데 lazy load 기법을 사용하면 사용자가 보고있는 view포트에 따라서 지금 화면 크기상 5개만 보이면 5개만 이미지를 받아오고, 나머지는 사용자가 view를 이동할때 보이게 한다는 것입..
해당 포스팅은 해당 문제를 푸는것과 별개로 추가적인 개념을 더 작성해둔 글입니다 fetch 해당 과제에서 api를 사용할때 fetch를 사용한다 이때 과제에서는 GET 메소드만 사용하는것으로보인다 다른 종류의 메소드를 이용하거나 데이터를 같이 보낼땐 어떻게 하는걸까? 모질라에 있는 문서를 참고해보겠다 모질라 fetch 문서 사용 예시 위주 POST 메소드를 사용한것이 예제로 바로나와있다 const response = await fetch(url, { method: "POST", // *GET, POST, PUT, DELETE, etc. mode: "cors", // no-cors, *cors, same-origin cache: "no-cache", // *default, no-cache, reload, ..
개요 이제 얼마 안남은거같긴해요~ 이번 포스팅하고, , 이렇게 두번 더 포스팅하면 끝날것같네요! 이번 포스팅은 이것만 풀고 다음 포스팅에서 나머지 다루어볼게요~ Q.현재 HTML 코드가 전체적으로 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다. 첫번째 문제를 드디어 풀게됐네요~ 처음 접했을때 좀더 코드를 파악하고 해야겠다 싶어서 다른 섹션문제를 먼저 푼것이었거든요 그럼 이제는 한번 풀어볼까요 ㅎ 시맨틱 마크업 관련 포스팅을 찾아보았어요 일단 이 사진대로 하면되지않을까 싶긴한데요 사실 저희 형태에서 쓸만한건 header랑 main, article 정도라고 생각되긴해요;; searchLine은 header로 searchResult는 main으로 이미지들을 감싼것을 article이라고..
개요 지난번에 이어서 문제를 더 풀어볼게요~ 을 풀려고합니다 원래는 을 먼저 풀려고했는데 여러가지 문제가.. 접는 글로 주저리 썼던걸 넣어둘게요 ㅎㅎ 더보기 Q.검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 만들어야 합니다. 그 다음페이지라고하면 흠.. 뭘까요? 일단 코드를 봐야알거같네요 fetchCats api를 사용한다고했을때 f를 검색하면 32개가 나오거든요 또한 a를 검색해도 동일하게 32개가 나옵니다 그렇다면 이건 32개씩 쪼개서 보내주는걸까요? 그렇다면 다음 페이지만큼의 32개를 가져오려면 어떻게 해야하는걸까요? 문제에 나와있는 api설명은 충분하지않은것같은데요..흠.. 도대체 뭘 어떻게 하라는 건지요... 어떻게 하라는 겁니까 도대체? ..
개요 저번것에 이어서 문제를 풀어보겠다 이번엔 란의 문제를 풀어보도록 할게요 Q.디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다. 모달은 평소에 작게뜨는데, 화면이 많이 작을 경우 모달을 아예 전체 가로에 맞게 띄우라는듯 기존의 크기이다 가로길이 조절하는건 미디어쿼리 이용하면 되겠죠? /*style.css*/ /* 가로길이가 768px 이하일때*/ @media screen and (max-width: 768px){ .ImageInfo .content-wrapper { left: 0%; top: 0%; transform: translate(0%, 50%); } } 이렇게 추가해줘서 기존에 50퍼센트로 모달을 줄이는 요소를 없애줬습니다 대신에 가로길이만..
개요 관련 직무 프론트엔드 기술 태그 HTML5, JavaScript 기간 약 4시간 고양이를 좋아하는 당신은 고양이 사진 전용 검색 웹사이트를 운영하고 있습니다. 고양이 사진을 원하는 사람들이 많아지면서 해결해야 할 문제들이 하나씩 드러나기 시작했습니다. 몇 개의 문제는 금세 고칠 수 있지만 기존 코드를 자세히 봐야만 고칠 수 있는 문제들도 있어서 조금 골치 아픈 상황입니다! 심지어 최대 4시간 이내에 수정한 뒤 배포해야만 합니다. 당신이라면 기존 서비스의 버그를 제한 시간 내에 고치고, 유저를 위한 추가 기능까지 구현해 볼 수 있을까요?('2020 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 기출 문제입니다.) 과제테스트는 여러번 연습을 하려고해봤는데 너무 낯설어서 끝까지 못풀었던것같다 ..
