본문 바로가기

FrontEnd

 (16)
중간보고 ! 파이어베이스 연결필드는 조금 더 추가될 예정 입니다!https://github.com/PenguinKKIM/poke-trainer/commit/25b6bf8fdad372a74939744ebcc03aaff0a2278e폼도 필드가 추가됨에따라 더 추가될 예정이구요.그냥 소소하게 이름 나타나게했습니다.네비게이션도 조금 귀엽게 구성해봤습니다!
[css]text - shadow generator 스트로크를 구현 해 보셨나요..?포토샵이나 피그마에서 작업할때는 진짜 세상 쉬운 아무것도 아닌! 작업 이긴 하다만...이거를 CSS로 구현할려면 진짜 대환장할 일 이다.아마 CSS로는 이미지 편집툴 들 처럼 세세하게 설정할수가 없어서 그런거같은데...   간단히 3픽셀 정도의 테두리를 만들고 싶다면, 이미지 편집툴에선 색상을 정하고 딸깍 한번이면 되지만!CSS 에서는 코드가 이마마마마큼 길어진다 text-shadow: rgb(233, 233, 233) 3px 0px 0px, rgb(233, 233, 233) 2.83487px 0.981584px 0px, rgb(233, 233, 233) 2.35766px 1.85511px 0px, rgb(233, 233, 233) 1.62091px 2.52441..
타입스크립트 복습하기 //리턴 타입을 지정해주지 않아도 타입스크립트가 추론해준다function add (a:number, b:number){ return console.log(a+b);}//같은 로직의 arrow const addArrow = (a:number, b:number) =>{ return console.log(a+b);}addArrow(1,3);//numberType 이라는 타입을 만들어 지정//이렇게 쓰면 다른데에서도 쉽게쓸수있지않을까 ?type numberType = (a:number, b:number) => number;//인자 이름은 어차피 그냥 이름이라 바뀌어도 상관없다.const useAdd : numberType = ( a, b ) =>{return (a+b) };const useMinus : nu..
[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. 전역에서 불러온 ..

티스토리툴바