지현의 개발자 성장과정

[삽질기록]오픈API 사용해서 레시피 사이트 만들기

배포 URL: https://koreanhamster.github.io/delicious/ 깃헙 링크: https://github.com/Koreanhamster/delicious 프로젝트 기록(노션): https://grape-curiosity-e94.notion.site/35b86a30c543458c9af716c50a331b77 프로젝트 목적과 의의 (본인이) 영어와 요리를 둘 다 좋아하기에, 영어사용자들에게 아시안 레시피를 소개하는 서비스 구상 오픈API 사용하여 데이터를 가져오고 필요한 데이터를 적절히 사용하는 것에 의의 사용 스킬 React Styled-components 기능구현(데모) 홈화면 검색창에 원하는 레시피 검색가능 이탈리안, 베트남, 타이, 한식 카테고리 클릭시 해당 페이지로 넘어감..

20주차 회고 - 벌써 한달밖에 안남았다고?

7월이다...! 지난 3개월이 정말이지 어떻게 지나간건지.. 모르겠다. 프로젝트를 시작하려 하니 역시 자바스크립트의 기초가 정말 많이 부족하다 느낀다. 하긴 코딩이 아니라 컴퓨터에 대해 아무것도 모르던 나였는데 멈추지 않고 꾸준히 공부한 스스로에게 칭찬을 해주는게 더 낫겠다. 걱정한다고 나아지는건 없으니까~~ 아마 과정이 끝나면 조금 더 차분하게 자스 기초를 다져볼 수 있을 듯 하다. 아마 동기들도 그렇고 지금이 가장 지치고 하기싫고 걱정되는 시기가 아닐까? 그럴땐 그냥 그 불안함과 불확실성에게 '어 왔구나. 그래 잘 머물다 가' 해버리기. 비동기 이해하기 이번주는 이 비동기라는것을 이해하는데 꽤 많은 시간을 투자했다. '콜스택과 이벤트 루프', '비동기' 두 영상을 업로드했다. 처음에 접했을 때는 정말..

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..

아악 헷갈려!! 리액트 이미지 불러오는법 정리

너무 헷갈리고 방법또한 다양해서 일단 싹 정리를 진행했다. 여러가지 방법들을 써보면서 장단점을 찾고 어떨 땐 어떤 방식을 사용하는게 좋은지 알아가야겠다. css파일에서 이미지 불러올 때 이미지가 src폴더 안에 있을 때는 언제나 ./이미지 경로 이렇게 써준다 background-image: url('./img/bg.png'); 특히 리액트 17버전 이상에선 public 폴더안에 있는 이미지를 CSS파일에서는 /image.jpg 이렇게 첨부할 수 없으므로, CSS파일에 작성할 이미지들은 src폴더 쓰고 ./ 이렇게 접근하는 게 좋다. jsx파일 안에 변수로 넣어주고 싶을때 역시나 src폴더 안에 있는 이미지의 경우. 작명해서 import해온 다음 변수처럼 사용할 수 있다. 넣어줄 때는 옆에 애들이랑 + 로..