일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 클래스
- 불변성
- 프론트엔드
- 추상화
- Fetch
- 캡슐화
- JavaScript
- Hooks
- frontend
- 상속
- typeScript
- Zustand
- 자바스트립트
- 패스트캠퍼스
- REACT
- 객체지향프로그래밍
- webdevelopment
- CSS
- github
- 부트캠프
- 투두앱만들기
- 타입스크립트
- 자바스크립트
- Props
- 노마드코더
- 리액트
- OOP
- 웹개발
- js
- 논리연산자
- Today
- Total
목록분류 전체보기 (78)
connecting dots

리액트(React)란 ?사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용Angular, Vue와의 차이점 --> 둘은 프레임워크, 리액트는 라이브러리 cf. 프레임워크(framework) vs 라이브러리(library)프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있음)라이브러리: 어떠한 특정한 기능을 모듈화해놓은 것=> 프레임워크는 라이브러리를 포함하고 소스코드를 호출함=> 소스코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출함 리액트가 라이브러리인 이유 ?리액트는 전적으로 UI를 렌더링하는 데 관여하기 때문 ! 화면을 바꾸는 라우팅은 react-router-dom ..

https://github.com/Dev-FE-1/Toy_Project_Team_1 GitHub - Dev-FE-1/Toy_Project_Team_1: 토이 프로젝트 1_사내 인트라넷 시스템 개발을 위한 1팀의 레포지토토이 프로젝트 1_사내 인트라넷 시스템 개발을 위한 1팀의 레포지토리입니다. Contribute to Dev-FE-1/Toy_Project_Team_1 development by creating an account on GitHub.github.com 막 가나다라를 배웠는데 글을 쓰라는 과제를 받은 기분으로 시작했다초반 기획 회의에서 '코드 컨벤션도 비슷하게 갈까요 ?' 하는데컨벤션이 뭔지 몰라서 크롬에 바쁘게 검색하면서도표정은 평화로움을 유지하는, 물 안에서는 바쁘고 바빴다토스트 팝업이..
https://heropy.blog/2018/10/28/regexp/ 정규표현식, 이렇게 시작하자!매일 쓰는 것도, 가독성이 좋은 것도 아니지만, 모르면 안되는 정규표현식. 저는 이렇게 공부하기 시작했습니다! (자바스크립트를 기준으로 설명합니다)heropy.blog정규식. regular expression## 역할- 문자 검색- 문자 대체- 문자 추출## 테스트 사이트http://regexp.com/## 블로그 사이트https://heropy.blog/2018/10/28/regexp/## 정규식 생성// 생성자new RegExp("표현", "옵션");new RegExp("[a-z]", "gi"); // a-z 영어 소문자 검색, g(일치하는 모든 내용 검색) i(대문자 소문자 구분 안하겠다)// 리터럴/..
SPA 방식Single Page Application(SPA)는 단일 HTML 페이지로 구성된 웹 애플리케이션 방식입니다. SPA에서는 페이지 전환이나 데이터 로드 시 전체 페이지를 새로 고치지 않고, 필요한 부분만 동적으로 업데이트합니다. JavaScript를 사용하여 클라이언트 측에서 이러한 작업을 처리합니다. 왜 SPA를 사용할까? • 빠른 사용자 경험: 페이지 전환 시 전체 페이지를 다시 로드하지 않아서 더 빠르고 부드러운 사용자 경험을 제공합니다. • 부드러운 내비게이션: 전체 페이지를 새로 고치지 않으므로 사용자 인터페이스가 더 부드럽고 자연스럽습니다. • 효율적인 서버 통신: 필요한 데이터만 서버에서 가져오므로 네트워크 사용량이 적습니다. SPA의 작동 원리 1. 초기 로드: 애플리케이션..

BBlock; 그 자체로 의미가 있는 독립적인 부분header, container, menu, checkbox, input EElement; 독립적인 의미가 없고 해당 블럭과 연결된, 블록의 일부block에 의존적인 형태로 block 안에서만 의미를 가짐block 뒤에 '__'를 붙여 사용header__title, menu__title, checkbox__caption MModifier; 속성해당 부분이 다르게 동작하거나 색상 등의 스타일이 다른 경우 사용block이나 element 뒤에 '--'를 붙여 사용 - 불리언(boolean) 타입active 상태로 속성을 주는 것--> active 상태가 true라고 가정하고 사용 메뉴 1 메뉴 2 https://www.youtube.c..

컨택스트(context)_this상황에 따라 this가 가리키는 것이 무엇인지 맥락 파악해야 함 1. this는 객체이다2. this가 전역 공간에 있을 때는 전역 공간(window 객체)를 가리킴--> this === window3. 실행 맥락(excute context)으로 this를 연결한다.4. 실행 시 소유자 확인이 안되면 this는 전역 객체에 연결된다. const obj = { id: 1, getId: function () { return this.id; } // this는 obj를 가리키고 있음.};console.log(this.id) // window에 id가 없는 것과 같음console.log(obj.id)console.log(obj.getId())// method를 호출하는..
1. 짝수의 합# 문제 설명정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요. # solution.jsfunction solution(n) { let sum = 0; for (let i = 0; i let sum = 0 sum이라는 변수 만들어서 더한 값 저장할 수 있게 함for 문0부터 시작, 인수 n보다 작거나 같아야 하는 것이 조건이고0부터 2씩 더한다는 뜻. sum += i그 i의 값을 sum에 더해서return sumsolution 함수가 실행되면 sum 값을 반환함 2. 배열의 평균값# 문제 설명정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. #..
import / export여러 개의 자바스크립트 파일의 특정한 변수/함수를 가져다 쓰기 위함 script.jsimport sum from './cal.js'// import * as cal from './cal.js' : default없을 때, 다 가져올래, 이름을 줄수 있음// 내가 만든 건 ./로 경로 지정을 해줘야 하지만 node_modules에 있는 것은 경로지정 안해줘도 됨const result = sum(100, 200);// const result = cal.sum(100, 200);console.log(result) cal.jsexport function sum(a, b) { return add(a, b);}export default function div(a, b) { return ..