국비지원교육 (12) 썸네일형 리스트형 패스트캠퍼스 프론트엔드 개발 8기 부트캠프_과정종료회고 끝..?시간 진짜 왜 이렇게 빨리 가는지 모르겠다. 벌써 9월이고, 수료를 앞두고 있다니. 2월의 나랑 비교해 보면, 9월의 나는 확실히 이거 저거 할 수 있는 게 많아진 것 같다. 참 신기한 일이다. 어영부영 정신없이 국비 과정을 지나오긴 했지만, 그래도 이제는 뭔가 할 수 있는 프론트엔드 개발자가 된 것 같은 느낌이다. 물론 아직 갈 길이 멀긴 하지만. 그 사이에 벌써 취직한 사람도 있고, 파이널 프로젝트에 열심히 매달리고 있는 사람들도 많다. 다들 각자의 방식으로 개발자라는 꿈을 위해 한 발자국씩 나아가고 있는 모습이 보기 좋다. 지금 열심히 이력서 쓰는 중이다. 패스트캠퍼스에서 이력서랑 포트폴리오를 보완해 주시는데,진짜 간단 명료하게 알려주셔서 도움이 많이 된다.그런데도 요즘 취업 시장은 진짜 .. [JS] JavaScript 과제 블로깅 https://trainer-reg-sys.netlify.app/ 트레이너 등록 시스템 트레이너 관리 시스템 trainer-reg-sys.netlify.app 시작하며 이번에 는 자바스크립트로 여러가지 기능을 만드는 과제였는데, 사실 만들고싶었던 컨셉은 따로있었습니다. ㅠㅅㅠ "포켓몬 고" 라는 게임에서 레이드를 할려면 사람을 모아야하는데, 당근 의 동네생활처럼 내주변에 포켓몬고 유저를 검색하고 같이 게임 할수 있게끔 하고 싶었으나 잘 안됐습니다 ㅠ0ㅠ 나중에 개인 프로젝트나 토이로 조금 해보는것도 좋을거 같습니다! 그건 그거고, 일단은 과제에 나오는 기능을 다 구현하고 싶어, 기능구현에 최선을 다했습니다. 학습한 것 indexed DB 사용 최초에 로컬 스토리지를 사용하라는 예시가 있었는데, 로컬스토리.. [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)를 제거하고 제거한 요소를 반환한다. 첫번째 .. HTML / CSS 리팩토링 하기 HTML/ CSS 과제 리팩토링 총평 https://github.com/KDT1-FE/KDT8-M1/pull/27 멘토님: 짧은 시간동안 고생 많으셨습니다! BEM을 사용하고, Block 단위를 명확하게 나눠 재사용성을 높이는 방법을 연습해보시고, 멘토님께 질문 드릴때도 Block 단위 를 명확하게 하면, 요소의 구성은 같지만제가 아직 BEM 사용법이 미숙하여 이것저것 섞어 사용했는데, 한가지 클래스 스타일로 통일하여 짓는것이 읽는 사람도 관리하는 사람도 편하다는것을 느꼈습니다. 크기가 다른 것들은 CSS를 다시 작성할 필요없이 클래스 하나로 제어하기 쉽다고 하셨습니다. 일관된 스타일로 코드를 작성하시는 걸 습관화하시면 좋을듯 합니다! 코드리뷰 내용 진짜 엄청 세세하게 알려주셔서 배운내용이 많은데요! 그.. 카카오 프렌즈 샵 클론코딩하기 👀 자신이 원하는 사이트 레이아웃 클론 🐧 KaKao Shop Clone Coding 🐧 깃 허브 주소 : https://github.com/PenguinKKIM/kakao-shop-clone 필수 요구사항 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! 카카오 프렌즈 샵을 클론코딩 했습니다. https://store.kakao.com/kakaofriends 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. https://magical-arithmetic-952b0e.netlify.app/ 카카오톡 스토어 카카오프렌즈.. 이전 1 2 다음
