복습내용

JavaScript : 웹페이지에 동작을 넣기 위한 프로그래밍 언어모든 프로그래밍 언어는 5가지로 구성된다.1) 변수 : 값을 담음. 알아보기 쉽게 직관적으로 이름 설정.2) 자료형 : 리스트(순서 0부터 시작) / 딕셔너리3) 함수 : function 함수이름() {

div : division 구역p : paragraph 문단h : heading 제목, 1~6, 숫자가 작을수록 글씨가 크고 중요도가 높음a : 하이퍼링크 연결을 위한 태그, 'href'라는 속성과 항상 같이 씀img : image 이미지, 'src' source라는

글자 색width는 가로길이, height는 세로길이주로 아래 단위를 많이 사용함.auto(기본값) / px(픽셀) / %(부모 요소에 상대적인 너비) margin은 바깥쪽여백, padding은 안쪽여백두 속성은 방향(top, right, bottom, left(시계방

강의 들은 내용을 바탕으로 복습용으로 정리한 것입니다. 필수 리눅스 명령어 6가지 pwd (print working directory) : 현재 작업 중인 폴더나 현위치 ls (list) : 내 폴더 안에 있는 폴더, 파일목록 ls -a (list all) : 전체

24.07.25(목) - 조건문과 반복문에 대해 배우고, 풀어본 예제문제를 복습하기 위해 정리한 글입니다.예시출력을 만족하는 함수 내 if문을 작성하세요.num이 0보다 큰지, 작은지, 그 외(=0)인지를 판단하기 위한 조건문을 작성함.예시출력을 만족하는 함수 내 if

우선 display: flex; 를 먼저 써줘야 한다.row : 가로 정렬(왼쪽에서 오른쪽으로)row-reverse : 가로 정렬(오른쪽에서 왼쪽으로)column  : 세로 정렬(위에서 아래로)column-reverse : 세로 정렬(아래에서 위로)nowrap : 요소

배열메서드에 들어가기 전, function vs method : 호출의 주체가 있느냐 없느냐!(명확하면 function / 명확하지 않으면 method): 배열의 맨 마지막 요소 뒤에 요소 추가push 메서드는 배열의 길이를 반환하기 때문에 console.log(new

매개변수로 콜백함수가 들어가는 메서드 1) forEach >for문과 동일 (복습) for문을 이용해서 fruits의 모든 값을 console.log하는 방법 forEach는 배열의 메서드다. 이 배열 메서드는 input(매개변수)를 갖는다. 그 매개변수는 함수다(매

<요약>\->다른 팀원이 dev변경하면 3~5번 진행, 내가 수정하고 올리면 6~9번 진행(브랜치명 맨 앞에 \*표시 뜨는 브랜치가 현재위치를 나타냄)협업하기 위해!! 최종 브랜치를 main으로 하기 위해!\-> git merge 잘 안씀...\-> 터미널이 아닌

이전 글(forEach, map, filter)에 이어 find, sort 정리find(찾다), filter(거르다) : 의미 비슷. 95% 일치.find는 조건에 만족하는 제일 첫 번째 값만 반환filter는 조건에 만족하는 배열을 반환(예제1) 회원명부에서 find

이전에 올린 글들을 한 번 더 복습하자면, > 배열 API = 배열이 가지고 있는 메서드 함수: 호출의 주체가 없는 것( method1() ) **메서드: 호출의 주체가 있는 것( obj.method1() ) ex) forEach, map, filter, find,

yarn add styled-components몰랐는데, 매 프로젝트를 만들 때마다 yarn을 설치하는 것처럼 yarn으로 styled-components를 설치해줘야 함을 알게되었다.다양한 브라우저에서 스타일이 일관돼야 하므로, reset이 필요하다.index.css

1. useState state: 컴포넌트 내부에서 바뀔 수 있는 값 state의 변경을 위해 useState()를 쓴다. 일반 업데이트 방식 vs 함수형 업데이트 방식 일반 업데이트 방식: setState가 각각 실행되는 것이 아니라, 리액트는 명령을 하나로 모아

yarn add react-router-domsrc 폴더 안에 pages 폴더를 만들고, 그 안에 필요한 여러 페이지를 jsx파일로 만든다.src 폴더 안에 shared 라는 폴더를 생성해주고, 그 안에 Router.jxs 파일을 생성Router.jsx를 다른 곳도

useNavigate() use..

이번 팀 프로젝트에서 모달 만들기를 맡았는데, 자바스크립트로도 모달 만드는 걸 해보지 않았던 터라 꼭 해보고 싶었다.modalOpen은 모달창을 open/close 여부를 결정짓는 true/false 값을 담은 useState'자세히보기' 버튼에 onClick으로 se

보다 크거나 작음 a>b, a<b보다 크거나,작거나 같음 a>=b, a<=b값이 같음(동등) a==b (a=b; 등호 하나는 할당을 의미함)값이 같지않음(부등) a!=b (할당연산자 = 앞에 !를 붙임)값과 데이터타입이 같음 a===b값과 데이터타입이 다름

json-server : DB와 API 서버를 생성해주는 패키지axios : HTTP 요청(GET, POST 등)을 처리하기 위한 Javascript 라이브러리TanStack Query : 서버상태 관리 라이브러리아주 간단한 DB와 API 서버를 생성해주는 패키지Ba

: 간단하게 로그인 과정!, 등록된 회원인지 확인하는 과정: 로그인 후, 인증 받은 유저가 특정 서비스에 접근할 수 있는 권한이 있는지 확인하는 과정무상태성(stateless) : 각 요청이 독립적, 이전 요청의 상태나 정보를 기억하지 않음비연결성(connectionl

공통 기능의 모듈화가 이루어진 프로그램의 집합(모듈화: 기능단위로 분해하고 추상화 되어 재사용 가능한 수준으로 만들어진 단위)ex) React.js / react-router-dom / redux개발자가 기능구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지

HTML의 a태그 개념을 확장한 것뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는 프리페칭 기능 지원(사용자가 링크를 클릭하기 전에 데이터를 미리 로드함)클라이언트 측에서 페이지를 바꾸어 주기 때문에 페이지 전환 시 매우 빠른 사용자 경험(U

: 컴포넌트의 실행환경이 서버인지, 클라이언트인지에 따라 결정됨.alert, confirm처럼 유저와의 상호작용이 필요한 메서드, 기능은 사용할 수 없음useEffect, useState처럼 client-side rendering(CSR)을 위해 사용된 기술들도 사용할

MPA Lifecycle여러개의 페이지로 구성된 애플리케이션전통적인 프론트엔드 배포 방법 방법단점: 페이지 이동 및 렌더링 시 깜빡거리는 현상이 있고, 컨텐츠의 양에 따라서 페이지별 편차가 심해지게 됨. 결국 UX 저하SPA Lifecycle한 개의 페이지로 구성된 애

구현방법"use client;" 최상단에 사용하여 해당 컴포넌트를 서버 컴포넌트에 삽입브라우저에서 JavaScript를 이용해 동적으로 페이지를 렌더링하는 방식렌더링의 주체 : 클라이언트장점 \- 최초 로드가 끝나면, 사용자와의 상호작용이 빠르고 부드럽다 \- UX

투두리스트를 만들면서, Form태그와 onSubmit 이벤트 핸들러를 처리하는 코드가 필요하다.이떄, 인풋창에 공백을 입력했을 때 입력이 비어있음을 알려주는 유효성 검사가 필요하다.그 때, 아래의 코드를 입력하면 공백을 입력했을 시 입력하지 않았다는 알림을 줄 수 있다

1. fragment 태그 이름 없는 태그 사용하는 이유 : 리액트 내부적으로는 render라는 함수를 실행시켜 주는데, 매개변수로 인자를 하나씩만 넣어줄 수 있기 때문에 하나의 인자를 만들어주려면 하나의 부모로 감싸줘야 한다. 태그 대신 이름 없는 태그로 쓸 수

: 폼을 효율적으로 관리하고 검증하기 위한 비제어 컴포넌트 기반의 라이브러리비제어 컴포넌트즉각적인 피드백이 불필요하고 제출시에만 값이 필요하거나, 불필요한 렌더링과 값 동기화가 싫을 때 사용상태를 직접 관리하지 않기 때문에 리렌더링을 줄이고 성능을 향상시킴강의 자료에서