Front-End Developer
[삽질기록]오픈API 사용해서 레시피 사이트 만들기
배포 URL: https://koreanhamster.github.io/delicious/ 깃헙 링크: https://github.com/Koreanhamster/delicious 프로젝트 기록(노션): https://grape-curiosity-e94.notion.site/35b86a30c543458c9af716c50a331b77 프로젝트 목적과 의의 (본인이) 영어와 요리를 둘 다 좋아하기에, 영어사용자들에게 아시안 레시피를 소개하는 서비스 구상 오픈API 사용하여 데이터를 가져오고 필요한 데이터를 적절히 사용하는 것에 의의 사용 스킬 React Styled-components 기능구현(데모) 홈화면 검색창에 원하는 레시피 검색가능 이탈리안, 베트남, 타이, 한식 카테고리 클릭시 해당 페이지로 넘어감..
styled-components 사용시 Invalid hook call 오류 해결하기
문제상황 styled-component를 처음으로 설치하고 노란 버튼을 하나 만들어서 실행을 했는데 콘솔창이 시뻘개졌다. import React from 'react'; import styled from 'styled-components' let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` function Detail(props) { return ( 버튼 ); } export default Detail; invalid hook call이라는데. 확인해보라는대로 react 공식문서로 가서 오류를 해결해보자. 1. React와 React DOM 버전 확인해보기 react-dom이 16.8.0 버전 이하이거나 ..
깃헙 협업프로젝트시 Issue / PR 템플릿 생성하기 (+ 유투브)
https://youtu.be/aI6O7Q2GU18 Issue 템플릿 생성하기 레포지토리 탭의 셋팅(오른쪽 끝) -> 처음 뜨는 화면에서 스크롤 내려서 Issues의 Set up templates 버튼 클릭 여기서부터는 원하는대로 템플릿을 생성할 수 있다. **구현할 기능** --- **구현방법 | 예상 동작** --- **특이사항** --- + 버그 템플릿 복붙해 쓰세요 :) (일부러 두 줄 씩 띄워놓았는데요, 글이 붙어있으면 **강조**표시를 같이 적용받기 때문에 항상 아래에 위치한 강조표시와는 한 줄 떼고 작성하셔야 합니다.) **버그 설명,스크린샷(optional)** --- **수정계획** --- **수정완료 후 예상동작** --- **특이사항** --- PR템플릿 생성하기 .github/pul..
SEO(검색엔진 최적화) : 구글검색엔진에게 간택받기 위한 프로미스 101
결론: 사용자가 좋아해야 검색엔진도 좋아한다. Search Engine Optimization 다양한 검색엔진에 우리가 제작한 사이트가 얼마나 빠르게 얼마나 상위에 노출되는가가 중요한 화두로 떠올랐고, 그를 위한 방법을 모아 웹사이트에 적용하는것을 검색엔진 최적화라고 한다. 마치 인스타그램에 #부트캠프 #3개월취업 #취업보장 붙여서 광고를 하듯... 사용자의 알고리즘에 최대한 걸려들기(?) 위해 검색엔진 최적화를 해줄 수 있다. google, naver, daum 등 다양한 검색 SEO 적용 기법을 각각의 개발자 지원 사이트에서 설명하고 있고, 정책도 다 다르다. 예를 들어 google 같은 경우는 홈페이지 내 youtube 영상을 포함하면 좀 더 상위로 올가고, 이러한 정책의 기조도 매번 달라진다. (..
Promise/fetch 텍스트파일에 있는 텍스트는 어떻게 가져올건데?
난 항상 무지성으로 json()을 썼다. 왜냐면 다들 그렇게 쓰니까. 사건의 발단 Promise를 연습하면서 Promise 안에 fetch를 사용하여 fetch가 성공적으로 되었을 때에는 콘솔에 불러온 데이터를 콘솔에 출력하려고 했다. 그리고 그 데이터는 뭐였냐? 텍스트파일의 텍스트였다. let promise = new Promise((성공, 실패) => { fetch('https://codingapple1.github.io/hello.txt') .then((res) => res.json()) //일단 연습이니까 데이터를 불러오는게 성공이라고까지만 하자구요~ .then((data) => 성공(data)); }); promise.then((data) => { //fetch가 성공하면 data를 출력해주세요..
깃 커밋 템플릿 만들어서 간편하게 커밋해보자!
커밋을 제대로 하는건 참 좋은 습관이다. 연습이 많이 필요한 '기능 단위로 나눠서 커밋하기'는 경험을 통해 차차 나아갈 수 있지만, 커밋 메세지는 오늘 당장 획기적으로 발전할 수 있다! 바로 커밋메세지를 잘 작성할 수 있는 템플릿을 미리 만들어놓고 글로벌로 설정해주는거다. 지금부터 바로 알아보자! gitmessage 설정하기 터미널에 진입하여 아래 커맨드를 입력한다. 이는 gitmessage 템플릿을 위한 txt파일을 만드는 과정이다. $ touch ~/.gitmessage.txt 텍스트 에디터 진입하기 $ vim ~/.gitmessage.txt 커밋 메세지 템플릿 작성 후 저장하기 이건 자기가 쓰는 규칙이나 팀에서 정한 규칙대로 넣어주면 된다. #로 시작하는 문장들은 다 주석처리된다. ### 제목 # ..