728x90 728x90 Front-end/React7 Scope,호이스팅,this 이해하기 [Javascript] Scope "스코프(scope)"는 프로그래밍에서 변수 및 함수의 유효 범위를 나타내는 용어이다. 스코프는 코드 내에서 식별자(변수 또는 함수의 이름)에 대한 유효성을 제공하며, 변수 또는 함수가 어디서 접근 가능한지를 결정한다. 하위 스코프와 상위 스코프 접근 가능 여부 하위 스코프는 상위 스코프에 접근할 수 있지만 상위 스코프는 하위 스코프에 접근할 수 없다. 아래 두 코드로 비교해볼 수 있다. // 상위 스코프 var outerVar = "I'm in the outer scope"; function outerFunction() { // 하위 스코프 var innerVar = "I'm in the inner scope"; function innerFunction() { // 더 하위 스코프 var d.. 2023. 12. 15. Styled Component의 성능향상 체험하기 1탄 [React][NFasT와 RealCart 프로젝트 회고] 싸피에서 프론트엔드 역할로 프로젝트를 진행하며 처음 react를 접했을 때는 inline 방식으로 style를 적용했다. Real Cart 프로젝트 : inline style 방식 NFasT 프로젝트 : styled-component 방식 그 때에는 style 적용방식에 대해 크게 신경을 쓰지 않았기에 html 코드 내에서 일일이 적어줘야했는데 나중으로 갈 수록 반복되는 컴포넌트의 style을 수정할 때 한번이 아닌 제각각 모두 일일이 수정을 해야하는 불편함을 겪었다. 이 때 style 적용방식에 대해 찾아보았고 style의 재사용성과 유지보수성을 높이는 styled-component에 대해 알 수 있었고 바로 다음 프로젝트 NFasT에서 적용해보았다. 찾아보니 inline style을 사용할 때에는 리.. 2023. 12. 14. async와 await에 대해 이해하기 [Javascript][NFasT 프로젝트 회고] NFasT 프로젝트의 코드를 다시보는 중에 axios 통신을 하는 과정에서 쓰이는 async와 await를 어떻게 이해해야하는지 명확한 논리 구조가 이해하기 어려웠다. await라 하면 이 함수를 실행한 후 다음 순서의 함수를 실행하라는 것인데 비동기 함수를 왜 만들어야하며 그 속의 순서를 보장하는 await는 어떻게 사용해야하며 async 함수 외부의 함수들은 어떻게 이 순서에 기다려야하는 것인지 궁금했다. 그래서 async와 await에 대해 좀 더 명확히 이해하고자 사례를 공부해보기로 했다! async와 await async는 비동기를 의미한다. async는 function앞에 붙이고 그 함수는 promise 함수를 반환한다. await는 async가 붙여진 함수 안에서만 사용 가능하다. await.. 2023. 12. 13. [React][NFasT 프로젝트] mainpage 처음부터 다시 만들어보기 1 계기 NFasT 프로젝트를 다시 복습하며 처음부터 새로 만들어보기로 했다. 다시 만들어보는 이유는 첫째, 컴포넌트의 사용과 상태관리를 다시 복습하고 싶었고 둘째 코드 리팩토링을 하기 위해서다. 그리고 마지막에 시간이 없어서 반응형으로 만들어보지 못했는데 반응형으로 구현하는 것도 추가해보려한다. 그리고 redux 폴더 구조를 더 편리하게 짤수는 없을까 검색해본 결과 Ducks Pattern을 발견했는데 기존 ActionCreator,reducer,type이 계속 한벌씩 생성되는걸 한 묶음으로 모듈화 하여 관리하는 패턴이다. 깔끔하다고 해서 이번 기회에 적용해보기로 했다!! NFasT 프로젝트를 진행하는 동안 느꼈던건 상태관리가 중요하고 어렵다는 것이다. 컴포넌트에 속한 state가 변화할 때마다 props.. 2023. 12. 11. 리액트 폴더 구조 이해하고 정리하기 [React][NFast 프로젝트] 싸피에서 진행했던 프로젝트들 중 React 언어를 사용했던 NFast와 RealCart를 회상하며 리액트에서의 폴더 구조를 정리해보고자한다. 같이 협업하는 프론트엔드끼리 폴더 컨벤션을 정해놓는게 의사소통에 매우 유리해지니 폴더 구조를 필히 알아놔야한다고 생각한다. React 폴더 구조 NFasT 프로젝트에서의 React 폴더 구조 아래는 NFasT에서의 React 폴더 구조이다. 일단 큰 구조를 보자 node_modules 현재 프로젝트에 포함된 라이브러리들이 설치되어있다. 보통 깃 저장소에 올릴때는 함께 올리지 않는다. public 컴파일이 필요없는 파일들이 위치한다. 절대경로로 불러올 수 있다.index.html과 같은 정적인 파일들이 포함되는 곳. src 앱이 컴파일 될 때 사용하는 모든 것. 개발.. 2023. 12. 5. [React] React에 대해 알아보자! (SPA,Virtual DOM,CSR) React의 개념 : UI를 구축하기 위한 자바스크립트 프론트엔드 라이브러리 1. 주로 single page application을 만들 때 사용 된다. 여기서 SPA란? - 말 그대로 하나의 페이지를 사용하는 어플리케이션 - 점점 웹사이트가 발전하고 고도화됨에 따라 한페이지에 들어가는 데이터량이 커졌고 매번 서버로부터 새로운 페이지를 가져오는게 버거워 졌다. - 서버로부터 새로운 페이지를 가져오는것이 아닌 하나의 페이지에서 내용을 동적으로 변경하는 사용자 웹앱을 의미한다 SPA의 구현 방식 - 대표적인게 Ajax를 통한 콘텐츠 로드이다. 페이지 새로고침 없이 데이터가 교환되고 업데이트되는 것이다. - form 작성시 Ajax를 이용해서 form 데이터 일부를 전송하는데 그럼 서버는 JSON방식으로 응답.. 2023. 8. 23. [React]missing in props validation 문제 발생 Card를 컴포넌트를 만들어서 요기조기 쓰려고 코드를 짰다! import React from "react"; import Card from "../assets/NfastCard.png"; function NfastCard({ name, date, price }) { return ( {name} {date} {price} 확인 ); } export default NfastCard; 하.지.만 컴포넌트에 props를 넣는과정에서 " missing in props validation " 에러가 뜬다. 해결하기 (대소문자 구분이 까다로우니 유의하자 ㅠㅠ) 설치하기 props-types을 지정해줘야한다. 지정해주기위해선 설치가 필요하다. npm i prop-types PropTypes 는 받은.. 2023. 8. 22. 이전 1 다음 728x90 728x90
