Front-End Developer/Project
회원가입페이지 코드리뷰 받은내용 고쳐보기
어떤 파일만 받을 것인가 - 아니 이렇게 쉬운 방법이? if (Blob.type.substr(0, 5) !== 'image') { alert('image만 업로드가 가능합니다'); return; } else if (Blob.type.substr(0, 5) === 'image') { const reader = new FileReader(); reader.readAsDataURL(Blob); 나는 이런식으로 file type의 substring의 0번째 index부터 5개 length가 (그냥 '첫 다섯글자가' 라는 말을 이렇게 어렵게 한다..) 'image'일 때와 아닐때를 나누어 예외처리를 해주었는데, 그냥 input 의 accept속성을 넣어주면 간편하게 해결할 수 있다. 사실 명세서에 // 이미지 파..
[삽질기록]오픈API 사용해서 레시피 사이트 만들기
배포 URL: https://koreanhamster.github.io/delicious/ 깃헙 링크: https://github.com/Koreanhamster/delicious 프로젝트 기록(노션): https://grape-curiosity-e94.notion.site/35b86a30c543458c9af716c50a331b77 프로젝트 목적과 의의 (본인이) 영어와 요리를 둘 다 좋아하기에, 영어사용자들에게 아시안 레시피를 소개하는 서비스 구상 오픈API 사용하여 데이터를 가져오고 필요한 데이터를 적절히 사용하는 것에 의의 사용 스킬 React Styled-components 기능구현(데모) 홈화면 검색창에 원하는 레시피 검색가능 이탈리안, 베트남, 타이, 한식 카테고리 클릭시 해당 페이지로 넘어감..
깃헙 협업프로젝트시 Issue / PR 템플릿 생성하기 (+ 유투브)
https://youtu.be/aI6O7Q2GU18 Issue 템플릿 생성하기 레포지토리 탭의 셋팅(오른쪽 끝) -> 처음 뜨는 화면에서 스크롤 내려서 Issues의 Set up templates 버튼 클릭 여기서부터는 원하는대로 템플릿을 생성할 수 있다. **구현할 기능** --- **구현방법 | 예상 동작** --- **특이사항** --- + 버그 템플릿 복붙해 쓰세요 :) (일부러 두 줄 씩 띄워놓았는데요, 글이 붙어있으면 **강조**표시를 같이 적용받기 때문에 항상 아래에 위치한 강조표시와는 한 줄 떼고 작성하셔야 합니다.) **버그 설명,스크린샷(optional)** --- **수정계획** --- **수정완료 후 예상동작** --- **특이사항** --- PR템플릿 생성하기 .github/pul..
flex & grid 책을 출간하기까지(총괄은 쉽지 않다! 하지만 많이 배웠다.)
소스코드:https://github.com/flexandgrid/flexandgrid URL:https://flexngrid.com/ 리디북스 바로가기: https://ridibooks.com/books/2773000058 알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나 ※ 해당 책은 22년 진행한 flex & grid 오픈소스 프로젝트 그룹의 결과물입니다. 사용자에게 컨텐츠를 잘 전달하는 일은 좋은 컨텐츠를 만드는 것만큼이나 중요한 일입니다. 이를 위해 CSS 레이아웃 ridibooks.com 드디어, 책 출간! 드디어 책이 출간되었다. 마지막 퇴고를 제외하고는 처음부터 끝까지 동료들과 힘을 합쳐 직접 만들었다. 항상 책을 쓰고싶다곤 생각했는데 난 그게 에..
Sass를 사용한 영화목록 페이지 클론코딩
URL: https://koreanhamster.github.io/weniv_movie_page/ 소스코드: https://github.com/Koreanhamster/weniv_movie_page 미리보기 기술스택 HTML, Sass(Scss) 적용기술 그리드 적용 아이템 모듈화하여 중복적용 footer 포지셔닝은 body에 min-height를 100vh를 준 뒤 footer박스에 margin-top을 0으로 주어 처리 아쉬운점, 배운점 예매하기와 예고편 버튼을 스타일링하고 포지션하는데 어려움이 있었는데, 일단 반응형이 전혀 고려되지 않고 네거티브 마진을 주는 식으로 버튼이 부모요소에 꽉 차있는것 '처럼' 스타일링을 했기 때문이다. 박스 스타일링은 overflow:hidden을 주어 부모의 borde..
Pure CSS로 포토샵의 역사 페이지 구현하기
URL: https://koreanhamster.github.io/photoshop_web-page/ 소스코드: https://github.com/Koreanhamster/photoshop_web-page 기술 스택 HTML CSS 신경쓴 점 네거티브 마진을 적극적으로 사용하여 자유롭게 박스포지셔닝을 할 수 있도록 했다. 아래 코드와 같이 nth-child속성을 사용하여 두 박스가 항상 중간 여백을 유지할 수 있도록 했다. .main { display: flex; flex-direction: column; align-items: center; padding: 7rem 0; } .card:nth-child(odd) { margin-left: -60%; } .card:nth-child(even) { marg..