AI Platform / Web

개발 언어를 공부하다 보면, 람다 함수를 만나게 된다. 자바스크립트에서의 람다는 무엇인지 알아보자. 그리고 일반 함수와 익명 함수의 차이를 이해하고 익명 함수를 포함하는 람다 함수를 비교해 보자. 람다 함수 람다 함수(=람다 식)은 프로그래밍 언어에서 사용되는 개념이다. 프로그래밍 언어학 적으로 공부를 하면, 한 달 내내 공부해도 습득하기 어렵다. 여기서는 Javascript에서의 람다 함수에 대해 핵심만 파악해 보도록 하자. 자바스크립트에서 람다 함수를 알기위해서는 우선 일반 함수와 익명함수를 알아야 한다. 일반 함수 기본형 아래의 코드를 보면 함수명이 포함되어 있는 것을 알 수 있다. function 함수명(){ 함수 로직 } 익명 함수 기본형 function() { 함수로직 } 위의 일반함수와 익명..

WSL은 Windows Subsystem for Lunux의 줄인말이다. 쉽게 말하면, Window에서 Linux처럼 사용하겠다는 이야기이다. 보통은 Virtual Machine으로 셋팅을 해야 Linux를 사용할 수 있었다. 그러나 우리는 WSL을 통해 리눅스 환경을 사용할 수있다. WSL를 사용하기 위한 기초 개념을 정리하고 설치를 해 보자. WSL 1 2016에 초기 출시된 WSL은 기본적으로 리눅스 명령 줄 도구, 유틸리티, 그리고 리눅스에서 사용하던 ELF64 바이너리를 그대로 윈도우에서 실행할 수 있도록 하는 새로운 윈도우 운영체제 호환성 계층이다. 즉, 윈도우 환경에서 리눅스를 사용하기 위해 가상환경을 만들 필요가 없다는 것이 가장 큰 장점이다. WSL 2 WSL 1에서 파일시스템 성능을 향..

가장 빠르고 쉽게 Web을 만들 수 있는 MERN Stack에 대해 알아보자. 초보자 기준으로 BACKEND의 spring, django, nodejs에 대한 차이를 인지하기는 쉽지 않다. 하지만 개발자가 보기엔 spring은 java라는 무시무시한 언어를 배워야 하고, django를 배우기 위해서는 python이라는 언어를 공부해야 한다. 그에 비해 MERN Stack은 Frontend에서 사용하는 javascript를 배우기만 하면 된다. frontend/backend의 기초인 nodejs에 대한 개념은 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 구글링을 하다보면, MERN Stack, MEAN Stack, MEVN Stack 등을 볼 수 있다. MERN Stac..

아래의 내용을 통해 React에서 다루는 핵심 개념을 이해하고 구현하는 방법을 알아보자. 개발자라면, 한 번정도는 읽어야할 공식문서 실습 부분을 한국어로 정리했다. 추가로 frontend를 구성하고 있는 nodejs에 대한 정보는 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 React란 react는 사용자 인터페이스, 즉 fontend를 구축하기 위한 직관적이고 효율적이자 유연한 JavaScript 라이브러리이다. 그리고 Component라고 불리는 코드의 조각들을 이용하여 복잡한 UI를 구성한다. 컴포넌트를 구성하는 방식은 여러가지가 있다. 먼저 React.Component의 하위 클래스를 사용하여 아래와 같이 컴포넌트를 만드는 것이 가능하다. class Shoppi..

export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' 위의 애러가 난다면, router에서 history를 사용하기위해 설정 도중에 에러가 떴을 것이다. 만약 아래와 같이 실행을 했는데 안된다면, 나와 같은 이유에서 안되는 것이기 때문에 해결책을 참고하자. 1. history를 쓰려면 아래와 같이 import를 한다. import { withRouter } from "react-router-dom"; 2. 아래와 같이 export를 한다. export default withRouter(App); 3. 사용하고자 하는 컴포넌트에서 history를 props로 받아서 사용한다. import React from "r..

특정 버튼을 눌렀을 때, 페이지를 최상단으로 이동시키고 싶다. 그러나 react에서는 컴포넌트들로 UI가 나누어져있기 때문에 바로 구현하는 것이 어렵게 느껴진다. 하지만, 아래의 내용을 참고한다면 쉽게 구현할 수 있을 것이다. 추가적인 다른 react/nodejs 정보는 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 ScrollToTop 아래와같이 기본적으로 페이지 이동 시 우리는 리액트 라우터 라이브러리를 사용한다. 기본 개념을 애래에서 참고하자. [React] React Router 페이지 이동 리액트 라우터 를 활용해서 아래와 같이 페이지 이동을 하면, 스크롤이 최상위로 가지 않고 이동된 위치에 고정되는 현상이 발생한다. html 코드 import { Link } ..

리액트(react)에서 html과 css를 활용하여 image를 배경화면으로 두고 앞쪽 가운데 글을 넣는 방법에 대해 적어보겠다. 다른 react/nodejs에 대한 기초 지식은 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 기본적으로 css는 module을 사용했다. module을 사용하면, 중복 현상이 일어나지 않아서 좋다. 사용법은 이름을 만들 때 .module.css를 붙여서 만들어주면된다. 그리고 아래와 같이 jsx에서 import styles from '모듈 위치' 로 불러와서 className 부분에 추가를 해서 사용하면 된다. import styles from './intro.module.css' const INTRO_IMAGE = '/images/miss..

React Router React를 페이지를 분할하고 이동하기 위해 React Router를 사용법에 대해 알아보자. 버전5는 다른 블로그에 많이 있기 때문에 아래에서는 최신 버전인 React Router 버전 6을 사용하는 방법에 대해 알아보자. // 프로젝트 적용버전 "react-router-dom": "^6.2.1", // 라우터 적용가능 버전 React >= 16.8. 만약 버전 6을 설치했지만, 버전 5로 변경하고 싶은 경우에는 아래의 url을 보고 따라하면 버전5로 다운그래이드가 가능하다. https://han-py.tistory.com/433 [react] router 버전 해결 (react-router-dom) 먼저 버전 문제를 살펴 보자. 그 후에 사용법을 적어본다. 0. 버전 문제 해결..