FrontEnd/Vanilla JS (7) 썸네일형 리스트형 [JS] JavaScript 과제 블로깅 https://trainer-reg-sys.netlify.app/ 트레이너 등록 시스템 트레이너 관리 시스템 trainer-reg-sys.netlify.app 시작하며 이번에 는 자바스크립트로 여러가지 기능을 만드는 과제였는데, 사실 만들고싶었던 컨셉은 따로있었습니다. ㅠㅅㅠ "포켓몬 고" 라는 게임에서 레이드를 할려면 사람을 모아야하는데, 당근 의 동네생활처럼 내주변에 포켓몬고 유저를 검색하고 같이 게임 할수 있게끔 하고 싶었으나 잘 안됐습니다 ㅠ0ㅠ 나중에 개인 프로젝트나 토이로 조금 해보는것도 좋을거 같습니다! 그건 그거고, 일단은 과제에 나오는 기능을 다 구현하고 싶어, 기능구현에 최선을 다했습니다. 학습한 것 indexed DB 사용 최초에 로컬 스토리지를 사용하라는 예시가 있었는데, 로컬스토리.. [JS] 포켓몬 API활용하기 https://pokeapi.co/api/v2/pokemon-species/ 기존에 알아본 API 로 가져오면 영어이름만 손쉽게 나온다 pokemon-species/${name}(또는 번호로도된다) 로 들어가 한글 이름을 찾아와야한다 포켓몬의 설명/ 타입도 가져올수있어서 여기서 쓰면될거같다 https://pokeapi.co/api/v2/pokemon-form/ 이미지를 가져오면 이곳에서 해야한다 ... 움직이는 이미지도 있는거같던데 어디있는걸까..? pokemon-form/${name} 로 찾아 들어가면된다. 의외로 한글 설명도 있고 게임 버전별로 주르륵 있어가지고 진짜 마니 놀랬다 더 파보면 재밌는게 나올지도... [JS] 과제 준비하기 프로필 페이지를 개발하세요. 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요. 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요. 사진을 등록, 수정, 삭제가 가능해야 합니다. 유저 플로우를 제작하여 리드미에 추가하세요. 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어 보세요. 직원 검색 기능을 추가해 보세요. infinity scroll 기능을 추가해 보세요. LocalStorage를 사용하세요 과제를 받고 제일 고민했던게 로컬 스토리지를 써야하는데 한무..아니 무한 스크롤은 어케 구현해야 하는거지?? 했다가 무한 스크롤을 구현하는 페이지는 따로 빼고, 로컬 스토리지는 멘토님이 추천해주셨던 API를 활용해 보기로 했다. 간단 결론 API를 활용해보자 로컬스토리지API(?)는 안되믄 그냥.. [JS]객체지향 프로그래밍 과 생성자 객체지향 프로그래밍 ? 프로그래밍의 방법론 중 하나. 구체적인 사물을 추상화하여 표현 => 최소한의 정보로 대상을 표현 객체를 만들어 서로 소통 할수있게 코드를 작성. 객체지향의 장점 모듈성: 각 객체마다 독립적인 기능과 데이터를 가짐 => 재사용률이 높아진다. 재사용성: 다른 프로그램에서 재사용과 확장기능을 넣어 사용 할 수 있음. 확장성: 기존 객체를 수정하지 않고 기능 확장 유지보수성: 각객체가 독립적으로 작동, 코드의 중복이 적기 때문에 유지 보수하기가 편하다. 직관성: 사물을 객체로 모델링하여 데이터와 메서드를 가지고 있음 > 구조 이해가 직관적이다. 캡슐화: 데이터와 메서드를 하나의 단위로 묶어 객체의 세부 구현내용을 숨긴다. 1. 추상화 해보기 const bank = [ { name:'펭귄은.. [JS] this https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this this - JavaScript | MDN JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. developer.mozilla.org this 란 ? 객체 자체를 가르키는 '참조변수( reference variable )' 혹은 '객체 참조( object reference )' 라고한다. 선언되거 호출된 위치에 객체를 참조하여, 늘 값이 바뀐다. 어느 객체가 호출 하고있냐에 따라 값이 달라진다. 함수가 만들어 질때가 아닌 '실행'될때 그 값이 정해진다. 1. 전역에서 불러온 .. [JS] 클로저 - closures https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 클로저 - JavaScript | MDN 클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생 developer.mozilla.org 클로저란 ? 함수의 조합/ 모임 이라고 할수있겠다. 폐쇠된 공간을 만드는 테크닉이다. 함수 안의 함수 > 내부 함수를 제외하고는 접근할수가 없다. function makeAdder(x) { let y = 1; return function(z) { y = 100; return x + y + z; }; } let add5.. [JS] 배열에 쓸수있는 여러 함수들 .revers() 대상 배열의 순서가 변경된다. const arr =['a', 'b', 'c']; const reversedArr = arr.reverse(); console.log(reversedArr); //['c', 'b', 'a'] 순서 뒤집기: 사용자 인터페이스에서 리스트나 데이터를 역순으로 표시할 때 사용. EX) 데이터의 정렬을 오래된순 > 최신순 으로 정렬할때 유용. 스택 구현: 자바스크립트 배열을 이용해 스택을 구현할 때, .reverse 메서드를 사용하여 스택의 순서를 뒤집을 수 있음. 이는 후입선출(LIFO: Last In First Out) 원칙에 따른 데이터 처리나 표시에 적합. .shift() 대상 배열에서 첫번째 요소(Element)를 제거하고 제거한 요소를 반환한다. 첫번째 .. 이전 1 다음