본문 바로가기

JS

프론트 js 처음부터 뿌시기 5월 - 2 <React 및 Redux : 최적화> 안녕하세요! 오늘은 React와 Redux에 관한 학습 내용을 정리해 보려고 합니다. 컴포넌트 스타일링부터 상태 관리, 그리고 최적화까지 중요한 개념들을 다뤄볼게요.1. CSS in JS: 스타일드 컴포넌트React에서 스타일을 적용하는 방법은 여러 가지가 있지만, 요즘 가장 인기 있는 방식 중 하나는 CSS-in-JS입니다. 그 중에서도 styled-components는 npm 트렌드에서 Tailwind 다음으로 많이 사용되는 라이브러리입니다.기본 사용법yarn add styled-componentsVSCode를 사용한다면 vscode-styled-components 확장 프로그램을 설치하면 편리합니다.const StBox = styled.div` /* 여기에 스타일 작성 */ width: 100p.. 더보기
프론트 js 처음부터 뿌시기 5월 - 1 <React 기초 정리> 1. JS 기본 문법변수 선언let, const → 블록 단위 스코프var → 블록을 벗어나도 접근 가능 (함수 스코프) → 사용을 지양하는 추세Rest 연산자 (...)함수 매개변수, 객체 또는 배열에서 남은 요소들을 하나의 변수로 그룹화// 함수 매개변수로 사용function sum(...numbers) { return numbers.reduce((acc, current) => acc + current, 0);}// 객체에서 특정 속성을 제외한 나머지 속성들 추출const { password, ...sampleObj } = person;Null 병합 연산자 (??)좌변이 null이나 undefined일 경우에만 우변 값 사용|| 연산자와의 차이: ||는 모든 falsy 값을 평가하지만, ??는 nu.. 더보기
프론트 js 처음부터 뿌시기 4월 - 2 <JavaScript 기본 문법과 함수 정리> 1. 오늘 배운 내용자바스크립트 기본 문법함수함수 스코프 (스코프란 영향을 미칠 수 있는 범위)2. Code Snippets화살표 함수// 일반 함수function name() { ... }// 화살표 함수let arrowfun = (x, y, ...) => { ... }// 한 줄로 표현 가능let arrowfun = (x, y) => x + y // 매개변수가 하나면 괄호 생략 가능let arrowfun = x => x문자열 길이 구하기let a = "Hello"console.log(a.length) // 5객체// 객체 리터럴let person = { name: "name", age: 30, gender: "Male",};// 생성자 함수function Person(name, age, gend.. 더보기
프론트 js 처음부터 뿌시기 4월 - 1 1. What I learned today브라우저 역할도메인 주소에 대응되는 브라우저에 가서 뭔갈 가져와서 보여준다.주는 쪽 : 서버요청하는 쪽 : 클라이언트 (내컴퓨터)이미 페이지를 불러온다.html : 뼈대head : 화면에 보이지 않는거class : 명찰 (짱구라는 이름을 붙인다)구역을 나눌땐 p태그 쓰기body : 화면에 보이는거css : 꾸미기js : 움직임변수, 자료형, 함수, 조건문, 반복문줄맞추기option shift Fmargin auto: 끝까지민다JQuery토글 => .toggle()$(‘’).~GET읽기전용fetch데이터를 url을 통해 불러온다. ⇒ ??? 왜 모듈을 써야하는지import { initializeApp } from "firebase/app";이런 식으로 import .. 더보기