본문 바로가기
반응형

분류 전체보기

 (121)
React 입문 5 (명령형, 선언형) 명령형 프로그래밍 vs 선언형 프로그래밍 📖선언형 프로그래밍선언형 프로그래밍은 원하는 결과를 묘사하는 방식으로 코드를 작성합니다. 아래 예시는 자바스크립트를 이용해 배열에 짝수만 필터링하는 간단한 예제입니다.이 코드는 evenNumbers라는 새로운 배열을 만들어, filter메서드를 이용해 짝수만 필터링해 저장합니다. const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); 이 예시는 짝수를 어떻게 필터링해야 하는지가 아닌, 짝수를 필터링한 결과를 얻는 것에 초점이 맞춰져 있는데요.  ✨선언형 프로그래밍의 특징✨ 데이터를 어떻..
React 입문 4 (불변성) 리액트에서 불변성을 유지해야 하는 이유 📖불변성이란❓불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 아래 코드는 불변성을 유지할 수 없습니다.let numbers = [1, 2, 3];numbers.push(4); // 배열에 직접 요소를 추가console.log(numbers); // [1, 2, 3, 4] `numbers.push(4)`는 원래 데이터 구조를 직접 변경하기 때문에 불변성을 유지할 수 없습니다. ❓불변성을 깨뜨리는게 왜 문제가 될까예측 불가능한 코드 : 데이터 구조를 직접 변경하면 다른 부분에서 해당 데이터를 참조하고 있을 때 예상치 못한 방식으로 동작할 수 있기 때문입니다.버그 추적의 어려움 : 원본 데이터가 여러 곳에서 변경된다면 어디서 변경했는지 추적하기 어려워집니..
React 입문 3 (Props, State) props란 📖컴포넌트끼리의 정보교환 방식부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터입니다!props는 반드시 위에서 아래 방향으로 흐른다. (부모 -> 자식 단반향)props는 읽기 전용을 취급하며, 변경하지 않는다. Props로 값 전달하기컴포넌트 간의 정보를 교류할 때 `props`를 사용합니다.// src/App.jsximport React from "react";function App() { return ;}function GrandFather() { return ;}function Mother() { const name = '홍부인'; return ; // 💡"props로 name을 전달했다."}function Child(props) { console.log(props); //..
React 입문 2 (컴포넌트, jsx) React Components란?📖리액트에서 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것을 말합니다! 개념적으로 컴포넌트는 javascript 함수와 유사합니다. 함수형 컴포넌트// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)function Welcome(props) { return Hello, {props.name};}// 훨씬 쉬운 표현을 해보면 아래와 같죠.function App () { return hello} 클래스형 컴포넌트class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}  JSX란?📖JSX(j..
React 입문 1 (SPA, CSR, SSR, 라이브러리) React란 📖UI를 만들기 위한 라이브러리입니다. 1. React가 라이브러리인 이유프레임워크라고 불리기에는 제공해야 하는 기능이 부족하고 `상태관리(Redux)`, `라우팅(React-router-dom)` 등 개발자가 직접 제어하기 때문입니다.  프레임워크 vs 라이브러리📖1. 프레임워크개발자가 기능 구현에만 집중할 수 있게 애플리케이션의 구조 또는 틀을 제공하기 때문에 프레임워크가 정한 규칙과 구조 내에서 개발을 진행할 수 있습니다. 2. 라이브러리라이브러리는 특정 기능을 수행하는 코드의 집합으로 필요에 따라 선택적으로 사용할 수 있습니다.ex) `React.js` `react-router-dom` `redux` 3. 제어의 역전 (IoC)개발 시 `제어`를 하는 것은 개발자의 역할인데 프레임..
[팀 프로젝트] 영화 검색 사이트 팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/  요구 사항 📌필수 구현 사항✅ TMDB 오픈 API 이용✅ 영화 정보 상세 페이지 구현✅ 상세 페이지 영화 리뷰 작성 기능 구현     ✅ 비밀번호 암호화✅ github PR 사용한 협업✅ UX를 고려한 validation check 도전 과제✅ CSS flex, grid, 반응형 UI 구성✅ 상세 페이지 리뷰 수정 및 삭제 기능✅ 메인 페이지 정렬 기능 (이름, 별점, 개봉일 등) 추가 기능 ✅ 홈 화면..
[팀 프로젝트] 영화 검색 사이트 회고 Keep (현재 만족하는 부분) 😁적극적인 피드백모르는 부분이나 로직이 생겼을 때 팀원들과 공유해 문제를 해결해 나아가는 모습이 좋았습니다. 역할 분담역할 분담이 잘 된 것 같아 기능 개발을 순탄하게 진행했던 것 같아서 좋았습니다! 네이밍 컨벤션 및 주석네이밍 컨벤션을 정하고 시작해서 변수명이나 함수명에서 충돌이 발생하지 않아서 좋았습니다! 그리고 주석을 적재적소에 잘 사용해 코드를 이해하는데 도움이 많이 됐습니다! 마감 시간 준수제시간에 제출하는 게 다하지 못 하더라고 중요한 것이었는데 프로젝트 구현사항에 버그가 없이 완벽하게 구현사항을 해결하고 제출했다는 점에서 좋았습니다!  Problem (불편하게 느꼈던 부분) 😥초기 세팅각자 다른 prettier를 사용하여 공백이나 여백이 달라 머지 시 문제..
javascript 심화 7 (클로저) 클로저 📖1. 개념`클로저`는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 2. 렉시컬 스코프어디서 `호출했는지`가 아니라 어디에 `선언`했는지에 따라서 상위 스코프가 결정되는 것입니다!const x = 1;function foo() { const x = 10; bar();}function bar() { console.log(x);}foo(); // 1bar(); // 1 bar 함수는 foo 함수 내부에서 `호출`됐지만 전역에서 `선언`되었기 때문에 전역변수 x를 참조하게 돼서 1을 출력하게 됩니다! 3. 함수가 선언된 렉시컬 환경간단하게 설명하면 `클로저`란 외부 함수의 변수에 접근할 수 있는 내부 함수입니다!function outerFunc() { // 외부 함수의 변수 var x..

티스토리툴바