풀스택 개발/프런트앤드20 자바스크립트, 유사 배열(Array-Like Object)의 특징 배열과 유사한 객체를 유사 배열(Array-Like Object)라고 부르고, 다음과 같은 특징이 있습니다. 1. 숫자 형태의 indexing이 가능하다. 2. length 프로퍼티가 있다.3. 배열의 기본 메소드를 사용할 수 없다.4, Array.isArray 값은 false다. 회원 명단 강가딘 박민철 김효성 최치원 손흥만 이길준 김대위 getElementsByClassName 메소드로 태그를 선택하면 해당되는 클래스를 가진 각 요소가 HTMLCollelction이라는 배열과 비슷한 유사 배열에 담기게 되는데요.const members = document.getElementsByClassName('member');for (let i = 1; i .. 2024. 11. 7. 프로그래밍과 데이터 in JavaScript 1. 객체객체와 프로퍼티객체에서 데이터 접근하기객체 다루기객체와 메소드for...in 반복문Date 객체 2. 배열배열 다루기배열 메소드for...of 반복문다차원 배열 3. 자료형 심화다양한 숫자 표기법숫자형 메소드Math객체문자열과 배열 사이기본형과 참조형참조형 복사하기const, 변수와 상수 사이 4. 과제로 복습하기팩토리얼거스름돈 구하기팰린드롬 2024. 11. 4. 프로그래밍 핵심 개념 in JavaScript 1. 자료형숫자형문자열 기본문자열 활용불 대수불린형typeof 연산자연산자 우선순위형 변환템플릿 문자열null과 undefined자료형 응용하기 2. 추상화할당 연산자복합 할당 연산자함수의 실행 순서return문 제대로 이해하기return과 console.log의 차이옵셔널 파라미터변수의 scope상수 3. 제어문if문else if문switch문switch문 vs if문for 반복문while 반복문break와 continue구구단 만들기피보나치 수열 2024. 11. 4. 리액트에 타입스크립트 적용하기 리액트에 어떻게 타입스크립트를 적용하는지 궁금한데,타입스크립트 기본 문법에 이어 관련 내용이 나오는군요. 먼저 '프로젝트 생성하기'부터 시작해서 차근차근 따라가려 합니다.// TypeScript로 프로젝트 생성하기npx create-react-app . --template typescript// src 폴더에서 아래 파일들을 제외하고 모두 삭제src/react-app-env.d.tssrc/reportWebVitals.tssrc/setupTests.ts 커밍 순... 2024. 10. 31. TypeScript 시작! 10월 18일에 리액트를 시작하고, 오늘부터 타입스크립트를 시작합니다. 누가 백앤드 쪽이 쉽다고 했나요?리액트를 공부하니까 결코 백앤드가 쉽지 않다는 생각이 드는군요. 인프런과 코드잇에서 인강을 시청하면서 프로젝트도 만들어봤는데, 꼭 다시 한번 복습해야겠다는 필요성을 느끼고 있습니다. '타입스크립트도 리액트의 연장선에 있겠지'라고 생각했는데, 타입스크립트는 자바스크립트 연장선에 있군요. 타입스크립트 기본 문법을 학습하고 보니, '리액트에 타입스크립트 적용하기' 토픽이 있군요. 이 역시 리액트와 연결해 공부해야 할 것 같습니다.백앤드 쪽은 타입스크립트와 피그마까지만 공부하고 일단 잠시 멈추려고 합니다. 이후로는 프런트앤드와 백앤드를 연결해서 정말 하나의 프로젝트를 완성할 계획입니다. 블록체인 과정에서는.. 2024. 10. 30. 리액트에서 사용하는 주요 npm 명령어 리액트에서 사용하는 주요 npm 명령어를 정리합니다. // npm 프로젝트 적용: 프로젝트 폴더에서 다음 명령 실행 npm init react-app .// npm 시작npm start// React-Router-Dom 설치npm install react-router-dom@6// classnames 설치npm install classnames// styled-components 설치npm install styled-components// react-query 설치npm install @tanstack/react-query 저는 classnames 명령어를 입력하지 않아 컴파일할 때 오류가 계속 발생하더라고요. 원인은 classnames를 npm으로 설치하지 않아서였는데, 뤼튼의 도움으로 원일을 알게 되.. 2024. 10. 30. Moviepedia & Foodit 프로젝트, 리액트 코드잇 'React로 데이터 다루기' 토픽을 따라 하며 완성한 프로젝트 2가지로하나는 Moviepedia이고, 다른 하나는 Foodit입니다. 따라하기는 했지만, 여전히 리액트는 어렵게 느껴지는군요. 두 프로젝트는 한번 더 복습하면서 코딩을 직접 해봐야겠습니다.^^ Moviepedia : https://github.com/ldh52/React/tree/main/moviepediaFoodit : https://github.com/ldh52/React/tree/main/foodit 2024. 10. 29. 가위바위보 & 주사위 게임, 리액트 코드잇 'React 웹 개발 시작하기' 토픽을 공부하며 만든 프로젝트입니다.토픽 마지막에는 자신이 css와 jsx를 이용해 화면을 구성하도록 되어있는데,아직 혼자 화면을 구성하기에는 부족한 점이 있어,마지막 화면은 좀 더 실력이 붙은 다음에 하는 걸로... 가위바위보 게임은... 컴퓨터와 가위바위로를 하면 이긴 횟수와 승패 여부를 기록주사위 게임은... 승패 여부, 나온 주사위 숫자 기록, 한 번 게임할 때 마다 배점을 주어 누적 점수 계산 등의 기능이 담겨 있습니다. 두 프로젝트 모두 동적으로 웹 개발이 가능한 프로젝트인데요, 따라하기만 해도 재밌고 신기하네요. 가위바위보 게임 : https://github.com/ldh52/React/tree/main/rock-scissor-paper주사위 게임 :.. 2024. 10. 25. 유기동물 입양 페이지, 부트스트랩 부트스트랩을 이용해 '유기동물 입양' 페이지를 만들었습니다. 이 페이지에 DB는 연동되어 있지 않습니다. 부트스트랩이 적용되어, 카드와 모달창이 동적으로 작동합니다. 카드에서 담아 온 정보는 모달창에 전달되고, 모달창에서 입양자 이름을 입력하면... DB나 블록체인으로 넘어가도록 되어있는 페이지입니다. 참, 이 페이지는 블록체인 과정 수업을 하면서 배운 내용입니다. 수업이 진행되면 이렇게 프런트앤드 부분과 블록체인을 연결해 사이트를 구축할 수 있다고 합니다. 부트스트랩을 이용해 동적인 페이지를 만드는 것... 재밌고 신기한데요! 깃허브 : https://github.com/ldh52/javascript/tree/main/petAdoption 2024. 10. 23. 미니 블로그, 리액트 인프런 '처음 만난 리액트(React)' 강의를 듣고 만든 포트폴리오입니다.프런트앤드 미니 블로그인데요, DB와 연계한 listCRUD 기능은 구현되어 있지 않습니다. 블로그 글 목록 보여주기, 블로그 글 작성하기, 댓글 작성하기 등의 기능을 구현하였습니다. 자바로 listCRUD 기능을 구현한 적이 있는데, 리액트를 이용해 이렇게 프런트앤드로 구현할 수도 있군요. 다음에는 자바로 만든 게시판을 포스팅해야겠습니다. 짧은 시간이었지만, 인프런을 통해 리액트를 공부할 수 있어 큰 도움이 되었습니다. 코드잇에서도 강의를 듣고 있는데, 코드잇에는 '주사위 게임' 프로젝트가 있어 곧 만들어 볼 예정입니다. 인프런, 좋은 강의 감사합니다. 깃허브 : https://github.com/ldh52/React/t.. 2024. 10. 23. 이전 1 2 다음
