Ella 프론트엔드일지

1. 문제 상황 - assets -> fonts 폴더에 다운받은 폴더를 저장했다. - 글로벌 스타일에 아래와 같이 폰트를 설정했다. import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; const GlobalStyled = createGlobalStyle` @font-face { font-family: 'Spoqa Han Sans Neo'; src: url('../../assets/font/SpoqaHanSansNeo-Light.woff2') format('woff2'), url('../../assets/font/SpoqaHanSansNeo-Light.woff') format('woff'); font..

0. 에러의 원인 - 팀원들과 협업하기 위해 prettier 와 eslint를 설정하고 있었다. - .eslintrc.js 아래와 같이 설정하였지만 빨간줄이 그어지면서 에러가났다. - 문법적인 문제일까? 하고 봤는데... 에러메세지 : ';'이(가) 필요합니다. json 데이터 형식을 무슨... : 가 아니라 ; 로 바꾸라는 것이다. 나한테 왜그러니 대체.... 1. 해결방법 - .eslintrc.js 파일은 config를 export 해줘야 한다. 이건 자바스크립트 파일이기 떄문이다. json 파일일경우에는 export를 안해줘도 된다. 객체 앞에 module.exports = 를 붙이면 해결이된다!!! 출처 : https://github.com/AtomLinter/linter-eslint/issues..

0. 인프런 사이트로 보는 라우터 - 인프런이 리액트 기술을 사용하는지는 모르겠지만, 라우터 개념을 설명하기 위해 참조했다. - 메인페이지를 들어가니 url : https://www.inflearn.com/ 이 이렇게 나왔다. - 강의 페이지로 들어가니 url : https://www.inflearn.com/courses 이 이 이렇게 나왔다. 1. 리액트 라우터 - 위 예시와 같이 /를 통해서 페이지를 나누고 싶을때 라우터를 사용한다. (url 경로마다 다른 페이지를 보여주고 싶을 때 사용한다) - 리액트의 외부 라이브러리인 react-router-dom 을 설치하자 2. 리액트 라우터 셋팅 과정 1) 터미널 창에 npm install react-router-dom@6 입력 2) index.js 파일로..

0. 리액트 useState 할때도 쓰이는 구조분해할당 - 이제는 좀 그만 찾아보자!! 1. 배열 구조분해할당 - array 의 하나하나의 요소가 너무 중요한 자료여서 하나의 자료를 하나의 변수에 할당하고 싶을때는? - 아래처럼 일일히 하나하나씩 할당할것이다. let array = ['돼지','토끼','양'] let 변수1 = array[0] let 변수2 = array[1] let 변수3 = array[2] - 하지만 배열 안에 요소가 100개라면...? 하나씩 let을 선언하면서 변수를 만들어주는 건 귀찮다. 아래처럼 하면 쉽게 담을 수 있다. let [변수1,변수2,변수3] = ['돼지','토끼','양'] console.log(변수1) // '돼지' console.log(변수2) // '토끼' co..

1. Form은 무엇인가? - form 은 로그인 기능을 구현할 때 가장 많이 사용된다. - 데이터 베이스에 내 계정 정보가 저장이 되어있다. 내 아이디, 비밀번호를 입력 즉, 화면에 입력한 값과 서버의 데이터 값이 일치하면 로그인을 할수있다. - 웹페이지에 사용자의 입력을 받아서 서버로 내 계정정보에 보내야하는데, 이때 사용되는 HTML의 태그가 FORM태그이다 🔸긴말말고 예시코드 살펴보기 - 아래와 같이 로그인 화면을 간단하게 구현해보았다. - form 태그 안에는 label, input, button 외에도 textarea, select&option 등이 쓰이지만, 이번 주제는 form 이아니고 form validation 이기 때문에 자세한 설명은 아래 출처목록 살펴보길 바란다. 아이디 : 비밀번..

0. async / await - ES8 에서는 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await 이 도입되었다. - async/await는 프로미스를 기반으로 동작하기 때문에 프로미스의 then/catch/finally 등의 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다. 🔸Promise 기존 코드 function 함수(){ return new Promise((resolve,reject)=>{ resolve('안녕') }) } 함수() .then(n=>console.log(n)) // 안녕 async 변환 코드 - async로 변환한 코드는 굳이 new Promise()로 붙여서 쓸 필요가없다..