전체 글 썸네일형 리스트형 Types of Errors (에러의 종류와 해결법) 자바스크립트 (Nodejs, Reactjs) 등 언어를 떠나 코딩을 하다 보면 한번에 완벽한 문법과 완벽한 구현으로 에러 없이 작성 할 수는 없다. (물론 완전 고수분들은 가능할수도 ㄷㄷ.. 난 아직 멀었당) 대표적으로 자주 뜨는 에러들을 3가지로 정리 할 수 있겠는데 *Syntax Error *Runtime Error ******Logical Error 등이 있겠다. **Syntax Error Syntax Error는 자주 봤을 것이다. 자주 봤다는 것은 그만큼 찾아서 고치기도 쉽다!! 간단한 예로 const 의 t 가 빠졌다.. 즉 애초에 콘솔에 어디 부분인지 어느 부분의 철자가 틀렸는지도 자세히 알려주기 때문에 가장 해결하기 쉬운 에러 중 하나가 되겠다. (ex {} 를 []로, [] 를 {}로, .. 더보기 깔끔한 view단 코드 만들기 그냥 문득 작업하다가 생각이 났는데 리액트 컴포넌트에서 view에 리턴해주는 부분이 너무 난잡해보여서 정리해보다가 글을 쓰게 되었다. 애초에 jsx 문법이 가능해서 html 코드와 같이 javascript 문법으로 조건을 걸어서 렌더링이 가능해져서 유용하게 잘 사용하고 있었지만 한번 삼항연산자 안에 삼항연산자를 렌더링 해주어서 보다 깔끔하게 정리해보았다. return( {title} {description} Author {flag ? (authors.length === 0 ? ( fewauthors.map((few) => {few} ) ) : ( authors.map((few) => {few} ) )) :( 기재된 작가명이 없습니다 ) } ) 잘 작동한다. 어찌보면 그렇게 복잡하지도 않다. 근데 가독성에.. 더보기 배열 중복제거 및 빈 요소 제거 간단히 내가 쓸 메모장용으로 정리해보겠다. 배열 중복제거 const newArray = [...new Set(array)]; // 중복제거 배열 빈 요소 제거 filter를 이용 array.filter(n=> n) // 빈 요소 제거 더보기 이미지 파일 안뜰때 대처법, 이미지 에러 해결법 (onError) 웬만한 프로젝트나 사이트에 이미지는 화면의 구성감을 위해서나 어떻게 보면 빠질 수 없는 요소인데 이미지 주소가 변경 되었거나 확장자가 문제가 있거나 빈 이미지가 나올 경우가 있다. (물론 잘 정리된 api, db, 올바른 주소일 땐 그럴 경우가 없겠다링~) img 태그의 onError 속성을 이용하면 간단히 해결 할 수 있다. 이런 식으로 사진들이 저장된 주소로 사진들을 가져와서 뿌려주는데 확장자 문제인지 이미지 아이디 값이 바뀐건지 나오지 않는 경우가 있다. 요로코롬 img 태그에 onError 이벤트에 함수를 만들어줘서 디폴트 이미지로 대체가 가능하다. 방법은 이것만 있는게 아니라 찾아보니 display:none 등 안보이게, 이것처럼 디폴트 등 다른 방법이 있지만 결론은 onError를 이용해서 동.. 더보기 웹팩으로 바벨 통합하기(babel-loader) 바벨을 따로 돌리지 않고 웹팩에서 로더로서 불러와서 같이 실행 시킬 수 있다. npm install babel-loader 웹팩 config 파일에서 module 객체의 rules 배열에 하나의 로더를 더 추가해주자. 요런식으루 config 파일에 넣어서 같이 사용해주면 되겠다. 더보기 바벨로 브라우저에 맞는 코드로 변환하기(targets) 전에 바벨플러그인으로 일일이 하나하나의 기능에 맞게 설정을 해주고 그것들을 묶음으로 관리하는 프리셋에 관해 알아보았다. 하지만 실제 개발에서는 일일이 하나하나의 플러그인을 사용하지 않고 preset/env 를 이용해 한번에 코드를 변환 시켜 줄 수 있다. 그리고 targets 객체를 통해 각각 브라우저에 맞는 버전의 자바스크립트 코드로 변환이 가능하다. caniuse 사이트에 브라우저 버전에 따라 호환되는 문법을 알 수 있기 때문에 이런식으로 chrome 에선 지원하지만 ie에서 지원하지 않는다면 모든 브라우저에 맞게 변환되어야 하기 때문에 코드가 바뀌는 것을 확인 할 수 있다. 더보기 바벨 플러그인 사용하기 이전 글에서 직접 커스터마이징해서 간단히 바벨의 동작원리를 알아보는 시간이 있었다면 이제 바벨에서 제공해주는 플러그인으로 간단히 변환시켜 보자. 우선 플러그인을 설치해준 뒤에 npm install @babel/plugin-transform-block-scoping const 는 성공적으로 바뀌엇으니 이제 애로우 함수를 바꾸어 보자. npm install @babel/plugin-transform-arrow-functions 성공쓰 파일 상단에 엄격한 자바스크립트 모드를 나타내는 'use strict' 문구를 적어주는 플러그인도 설치해보자 npm install @babel/plugin-transform-strict-mode 이렇게 매번 바벨을 실행시킬 때 마다 문구가 길어지게 되는데 config 파일을 통.. 더보기 Babel 이란? 기본 동작 원리 바벨은 컴파일러다. 웹팩과 비슷하다고 느끼고 어느 것을 써야 할지 모르겠다면 그것은 살짝 잘못된 개념이라 볼 수 있겠다. 웹팩은 수많은 라이브러리를 이용한 자바스크립트 파일들을 하나로 짠 묶어서 만들어주는 것이고 바벨은 코드 자체를 자바스크립트로 변환 시켜주는 것이다. 그렇다 바벨도 es6이상을 지원하지 않는 등 최신 브라우저에서 뿐이 아닌 다른 브라우저에서도 지원해주는 언어로 변환 시켜 주는 것이다. 바벨을 설치하고 기본동작에 관해 알아보자 npm install @babel/core // 바벨~ npm install @babel/cli // webpack-cli 처럼 터미널에서 바벨을 쓸 수 있게 하기 위해 한 번 IE 에서는 지원하지 않는 es6 문법으로 된 스크립트 파일을 하나 만들어보자 화살표 함.. 더보기 이전 1 ··· 10 11 12 13 14 15 16 ··· 24 다음
