Computer/Front-end (13) 썸네일형 리스트형 인증 및 권한 구현하기(권한별 routing) 진행 이유 서버에서 처리해야 할 작업량을 감소하기 위해서.서버에서 인증을 처리하고, 인증된 사용자들에게 모든 권한을 부여하는 방식은 불필요한 데이터 처리가 발생함. 프론트에서 인증 별 권한을 구현하면 필요한 데이터만 서버로 요청하고, 불필요한 데이터 처리를 줄일 수 있음. 작업 시 사용자의 권한에 맞게 서비스를 제공하려고. 서비스에서 서로 다른 dashboard를 제공해야 하는데 이를 미리 경험해보기 위해 시도함. 고려해야 할 사항: redux등 전역 상태관리를 위한 라이브러리를 적용할 것인가? 상태관리 라이브러리 참고: https://dalaranl.github.io/react/redux-mobx-context/ 장점 상태 관리의 편리성: React에서 상태를 관리하면서 상태가 컴포넌트 간에 전달되어야.. 무한 렌더링 현상 막기 - Axios로 받은 데이터 '1회만' state에 set하기 (useEffect 활용) axios로 데이터를 불러와 table.js 에서 사용하려고 했는데 이상하게 무한으로 렌더링 되서 서버에 지속적으로 데이터 요청하는 문제가 발생함 const [msg, setMsg] = useState([]); UserService.getTableData() .then((res) => { setMsg(res.data); }) 문제 발생 이유 useState hook 으로 상태를 관리할 때, 상태가 변경되면 컴포넌트가 다시 렌더링이 되는 특징이 있음. 때문에 위의 코드에서 **setMsg**를 호출하면 상태가 변경되어 다시 렌더링이 일어나고, 다시 **setMsg**가 호출되면 이 과정이 반복되어 무한 렌더링 현상이 발생함. 해결 방안(https://citronbanana.tistory.com/110 참고.. [부스트코스]자바스크립트의 시작-(10) 자바스크립트 활용(라이브러리와 프레임워크) 사실은 이번에 만든 파일이랑 같이 올리려고 했는데 문제가 생겨서(원하는대로 구현이 안됨)... 일단 강의 정리 글 먼저... 다음 번이 강의 정리 마지막일거 같다. 이거 끝나고 나서는 그동안 퀴즈 오답 정리 정도? 자바스크립트 활용(라이브러리와 프레임워크) 라이브러리와 프레임워크 라이브러리: 소프트웨어를 개발할 때 사용하는 특정 기능에 대한 도구 또는 함수들을 모은 집합. 더 쉽게 설명하자면, 재사용이 가능한 코드의 집합으로 볼 수 있다. 클래스, 함수, 값, 자료형, 미리 작성된 코드 등등을 라이브러리에 포함 할 수 있다. 대표적인 라이브러리의 예시로는 JavaScript 의 jQuery 가 있다. 프레임워크: 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태.. [부스트코스] 자바스크립트의 시작-(9) 자바스크립트 활용(파일로 쪼개서 정리 정돈하기) 사실 강의 자체는 다 들었는데 이 부분만 따로하고 나머지 묶어 실습코드랑 올리는 게 좋을 거 같아서 애 먼저 했다. 실습코드는 전에 만들던 거 이어서 하는 중! 다는 못했지만 아마 다음번 내용 정리하면서 같이 올리지 않을까 싶다 자바스크립트 활용(파일로 쪼개서 정리 정돈하기) 파일로 쪼깨서 정리 정돈하기. 파일: 컴퓨터 등의 기기에서 의미 있는 정보를 담는 논리적 단위. 우리는 그냥 html파일에 자바스크립트를 넣어도 된다. 그런데 왜 굳이 파일을 쪼개서 정리 정돈해야 할까? >만약 그렇게 넣어야 할 코드가 수백, 수천 개라면 넣고 수정하는게 쉬울까? html 파일이 100개가 있고, 그 파일마다 같은 [부스트코스] 자바스크립트의 시작-(8) 자바스크립트 객체(순회/프로퍼티와 메소드) 요즘 아이유-내 손을 잡아에 치여서 주구장창 듣고 있다 아이유 왜이렇게 이뻐요? 얼굴 보는 것만으로도 인생이 행복해짐 얼굴이 대유잼이야 근데 노래도 잘해 못하는 거 없는거 맞지? 자바스크립트 객체(순회/프로퍼티와 메소드) 순회 우리가 코드를 짜다보면 객체의 모든 값을 호출해야 할 때가 있다. 이걸 순회라고 부른다. 순회를 해야 하는 경우, 배열에서는 for이나 while반복문을 사용해 배열 안의 요소들을 모두 꺼낸다. 그렇다면 객체는? 객체도 이러한 반복문이 존재한다. for/in문- for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있다 이 반복문은 반복할 때마다 객체의 열거할 수 있는 프로퍼티의 이름을 지정된 변수에 대입한다. 이렇게.. [부스트코스] 자바스크립트의 시작-(7) 자바스크립트 객체(객체&메소드/객체 쓰기와 읽기 방법) 이번주부터는 하고 싶었던 거 기초부터 차근차근 구현하면서 진행해보려 한다. 강좌도 거반 다 끝나가기도 하곸ㅋㅋㅋㅋ 원래 내 목적은 나를 소개하는 사이트 구현하기 였으니까 힘내자아아 자바스크립트 객체(객체& 메소드/객체 쓰기와 읽기 방법) 객체& 메소드 객체: 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입. 서로 연관된 함수와 변수가 아주 많아지면 이를 정리하기 위해서 사용한다 - 기본적으로 var 객체명= {객체 속성}; 의 형식으로 사용된다 +추가 설명: 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. * 프로퍼티:객체 내부의 속성 /*객체 예시*/ v.. [부스트코스] 자바스크립트의 시작-(6) 자바스크립트 함수(함수/매개변수와 인자/리턴) 한 일주일을 집중을 제대로 못했다 벌린 일은 많은데 내 역량이 너무 모자라.... 그래도 이제 멘탈 부여잡았으니 다시 시작해야지 벌린 일은 무조건 잘 마무리하고 끝! 하고 만다 내가 자바스크립트 함수(함수/매개변수와 인자/리턴) 함수 함수: 하나의 특별한 작업을 수행하도록 구성된 독립적인 블록 +자바스크립트에서는 함수 또한 하나의 데이터 타입으로 분류 -function키워드로 시작되며 아래와 같은 구성요소를 지닌다 1. 함수의 이름 2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter) 3. 중괄호({})로 둘러싸인 자바스크립트 실행문 이때, 함수의 이름은 함수를 구분하는 식별자로 매개변수는 함수를 호출할 때 인자(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변.. [부스트코스] 자바스크립트의 시작-(5) 자바스크립트 제어문(배열/배열과 반복문/배열과 반복문의 활용) 드디어 길게만 느껴졌던 자바스크립트 제어문이 끝났다아아아아아 자바스크립트 제어문(배열/배열과 반복문/배열과 반복문의 활용) 평소에는 순서대로 했는데 이번에는 같은 것끼리 묶어 듣는 편이 좋을 것 같아서 저번에는 반복문, 이번에는 배열 관련 부분만 들었다. 정리는 평소대로 중요한 것만! 배열 배열(array): 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 문법 형식은 대괄호 안에 데이터를 콤마(,)로 구분해서 나열한다 밑은 예시. var member = ['데이터1', '데이터2'] 이때 배열 안에 들어가는 각각의 데이터들은 원소라고 부른다. 그럼 이 데이터.. 이전 1 2 다음
