분류 전체보기

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해온 다음 변수처럼 사용할 수 있다. 넣어줄 때는 옆에 애들이랑 + 로..

SEO(검색엔진 최적화) : 구글검색엔진에게 간택받기 위한 프로미스 101

결론: 사용자가 좋아해야 검색엔진도 좋아한다. Search Engine Optimization 다양한 검색엔진에 우리가 제작한 사이트가 얼마나 빠르게 얼마나 상위에 노출되는가가 중요한 화두로 떠올랐고, 그를 위한 방법을 모아 웹사이트에 적용하는것을 검색엔진 최적화라고 한다. 마치 인스타그램에 #부트캠프 #3개월취업 #취업보장 붙여서 광고를 하듯... 사용자의 알고리즘에 최대한 걸려들기(?) 위해 검색엔진 최적화를 해줄 수 있다. google, naver, daum 등 다양한 검색 SEO 적용 기법을 각각의 개발자 지원 사이트에서 설명하고 있고, 정책도 다 다르다. 예를 들어 google 같은 경우는 홈페이지 내 youtube 영상을 포함하면 좀 더 상위로 올가고, 이러한 정책의 기조도 매번 달라진다. (..

19주차 회고 - 멋사에선 코딩만 배우는게 아냐.. 인성도 챙겨

잡힐 듯 잡히지 않는 Promise 자바스크립트에서 비동기는 중요한 컨셉이라는데. 그리고 그 중심에 Promise 있다는데. 근데 Promise 자체는 비동기 함수가 아니라는데. 비동기 코드를 이쁘게 정리해주는 애라는데. 근데 그게 모자라서 다시 동기적으로 쓰고싶어서 async await 쓴다는데. 도데체 나한테 왜그러는데. 사실 막상 써보면 별거 아닌거 같다가도 자꾸 어렴풋하게 희미하고 기분나쁜 느낌이 드는건 역시 내가 완전히 이해하고 있지 않다는 거겠지. 근데 강사님이 그랬다. 100번 쓰면 이해된다고 그리고 막상 하다보면 100번 쓰기 전에 이해 된다고. 내 이건 꼭 영상을 찍으리 깃&깃헙 브랜치 전략을 세우다 첫 프로젝트에서는 꼭 깃&깃헙과 친해지고 싶었고, 잘하고 싶었기에 냉큼 내가 책임지고 공..

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를 출력해주세요..