해당 글은 스코프와 스코프의 종류에 대해서 이해를 돕기 위해 작성한 글입니다. 1) 스코프(Scope) 💡 스코프(Scope)란? - 선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수가 해당 스코프에 존재하지 않다면 사용할 수 없다. 그리고 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. [참고] 하위 스코프 → 상위 스코프 접근하는 경우와 상위 스코프 → 하위 스코프 접근하는 경우 /** * 하위 스코프 => 상위 스코프를 접근하는 경우 */ const ScopeComponent = () => { // 상위 스코프 const userId = "adjh54"; const fn_controlScope = ..
해당 글은 렌더링에 대해 이해하고, 클라이언트, 서버 사이드 렌더링에 대해서 이해를 돕기 위한 글입니다. 1) 렌더링이란? 💡 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 2) 클라이언트 사이드 렌더링(CRS: Client Side Rendering) 💡 서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미합니다. 💡 CSR의 동작 과정 - 초기 화면 수행 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다. 서버는 빈 페이지(HTML, CSS)를 클라이언트에게 전달합니다. (해당 페이지에는 JS 링크가 포함되어 있습니다.) 전달받은 클라이언..
해당 글에서는 React를 사용한다면 요즘 필수적으로 사용이 되는 React 웹 프레임워크인 next.js에 대해서 이해하고 왜 사용해야 하는지에 대해 공유합니다. 1) 웹 프레임워크의 동향 💡 웹 프론트엔드 개발에서 높은 점유율을 가지고 있는 ‘React’는 CSR(Client Side Rendering) 방식으로 동작을 합니다. 이에 동작 방법에 대해서 여러 가지 단점을 많이 가지고 있습니다. 그렇기에 CRS 방식과 SSR 방식의 각각의 장점을 유지하는 Next.js에 대해서 이해를 돕기 위한 글입니다. (* SSR , CSR 방식에 대한 설명은 하단에 준비되었습니다) 💡 2021년 / 2022년 Stack Overflow에서 조사한 웹 프레임워크 선호도 조사입니다. - 2021년에 React.js는..
해당 글에서는 이전 용어들에 대해서 이해하는 것에 이어진 환경 설정 후 적용하는 예시에 대해서 이해하기 위한 글을 다루고 있습니다. 💡 이전에 작성한 Github Actions 정의 및 주요 용어를 설명하는 글을 읽고 오시면 도움이 됩니다. [Github] Github Actions 이해하기 -1(정의, 주요 용어) 해당 글에서는 CI/CD 중 하나인 Github Actions에 대해서 이해하고 각각의 용어에 대해 이해하는 글을 다루고 있습니다. 1) Github Actions란? 💡 특정한 이벤트가 발생 시 '원하는 일'을 자동으로 수행할 adjh54.tistory.com 1) Github Actions 초기 환경 구성 1.. 적용할Github Repository에 들어가서 'Actions' 탭을 누릅..
해당 글에서는 CI/CD 중 하나인 Github Actions에 대해서 이해하고 각각의 용어에 대해 이해하는 글을 다루고 있습니다. 1) Github Actions란? 💡 GitHub의 기능 중 하나로 특정 '이벤트에 따라 자동으로 작동하는 작업을 구성할 수 있도록 도와줍니다. 이를 통해 CI/CD를 구성하여 배포 자동화를 구성하여 버그를 빠르게 해결하여 배포시간을 단축 시킬 수 있습니다. 💡 예를 들어, 코드가 커밋되면 코드 빌드 및 테스트를 자동으로 실행하거나 새 코드가 병합되면 새로운 버전을 릴리스하도록 자동으로 설정할 수 있습니다. [참고] Github Actions 공식 사이트 Features • GitHub Actions Easily build, package, release, update, ..
해당 글에서는 '데이터 바인딩'에 대해서 이해를 하고, 더 나아가서 '단방향/양방향 데이터 바인딩'에 대해 이해하기 위한 글입니다. 1) 데이터 바인딩(Data Binding)이란? 💡 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미합니다. 💡 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 합니다. [ 간단한 예제 - 1 ] 값을 데이터 바인딩한다. 💡 아래의 예제는 함수형 컴포넌트 안에서 ‘initData’로 초기화 한 값..
해당 글에서는 react-router / react-router-dom 버전 v5에서 버전 v6으로 변경함에 따라서 추가/변경/삭제된 내용에 대해서 이해 및 적용하는 글입니다. 1) 취지 💡 기존 React 16.13.1 버전에서 React 17.0.2 버전으로 업데이트를 하는 경우가 생겨서 해당 버전을 버전업을 하고 나니 함께 추가적으로 React-router / React-router-dom 버전을 v5에서 v6로 올리는 작업을 진행하였습니다. [참고] React 16.8 버전 이상 일 경우 React Router v6 사용이 가능합니다. 이는 16.8 버전 이상부터 React hook을 사용할 수 있고, 해당 v6는 React Hook을 많이 사용함으로 필수적으로 버전을 확인해야 합니다. React..
해당 글에서는 자바스크립트의 패키지 매니져를 이해하고 이와 관련된 용어들을 이해하는 글 입니다. 1) 자바스크립트 패키지 매니저(Javascript Package Manager)란? 💡 자바스크립트의 패키지 매니저는 Node.js의 실행환경(runtime)에서 수행하며 프로젝트가 의존(dependency)하고 있는 패키지를 효과적으로 설치, 갱신, 삭제를 할 수 있도록 도와주는 도구를 의미합니다. 대표적으로는 npm, yarn이 있습니다 패키지 매니저 관련 파일 이해하기 pacakage.json: 프로젝트에서 사용되고 있는 패키지를 관리하는 JSON 형태의 파일입니다. pacakage-lock.json / yarn.lock: 프로젝트 내에서 팀원들 간에 서로 다른 버전을 설치하지 않고, 동일한 버전을 설..
