토피넛라떼조아

일반적으로 많이 사용하는 react hook에 대해 알아보겠습니다. Hook Hook은 React v.16.8부터 새로 추가되었습니다. 함수형 컴포넌트에서도 life cycle을 효과적으로 관리하며 기존의 방식보다 직관적인 API를 제공합니다. 또한, 상태 관리 로직을 추상화 할 수 있는 장점도 있습니다. render porps이나 HOC와 같은 패턴으로 재사용 로직을 구현했을 당시에는 컴포넌트의 재구성을 강제하고 코드의 추적이 어려웠습니다. (wrapper hell) Hook을 사용한다면 컴포넌트마다 로직을 추상화하여 독립적인 테스트와 재사용이 가능합니다. 또한 계층의 변화없이 로직을 재사용할 수 있습니다. 그렇기 때문에 로직 기반으로 컴포넌트를 나눌 수 있어 함수 단위로 관리 할 수 있는 이점이 있습..

리액트 생명주기를 LifeCycle Method와 함께 알아보겠습니다. 생명 주기(Life Cycle) 클래스형 컴포넌트에서는 컴포넌트(클래스) 위주의 라이프 사이클을 갖게 되며, 컴포넌트가 생성, 업데이트, 제거될 때마다 특정 이벤트들이 발생하게 됩니다. Mount 컴포넌트의 인스턴스가 생성되고 DOM에 삽입될 때 다음과 같은 메서드가 순서대로 호출됩니다. constructor() 컴포넌트의 생성자 메서드로 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드입니다. constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick...

그 동안 npm만 활용하여 패키지 관리를 하였는데, 최근 yarn을 활용해보면서 둘의 차이점이 궁금하여 찾아본 내용을 정리해봅니다. npm과 yarn 모두 자바스크립트 런타임 환경인 노드(node.js)의 패키지 관리자 입니다. npm 온라인 데이터베이스에 개발자들이 자바스크립트로 만든 여러 패키지를 올리면 이런 패키지 관리자를 통해 패키지를 설치하거나 삭제, 버전 관리와 의존성 관리 등을 편리하게 할 수 있습니다. npm npm(Node Package Manager)은 노드를 설치할 때 제공되는 기본 패키지 관리자입니다. 전 세계적으로 가장 많이 사용하는 패키지 관리 도구로써 공개된 모듈을 손쉽게 설치하고 활용할 수 있게 도와줍니다. npm은 commend-line client와 online datab..

리액트를 활용하여 프로젝트 빌드를 하고나면 웹팩과 바벨이 자동으로 설정됩니다. 이전 포스팅을 통해 웹팩에 대해 살펴보았으므로 이번에는 바벨에 대해 알아보겠습니다. 대충 자바스크립트 컴파일러로 이해하고 넘어갔었는데 왜 필요한 지, 어떻게 사용하는지 등에 대해 작성하겠습니다. 바벨 바벨은 자바스크립트 컴파일러입니다. ES6+ 문법이 등장한 시점에 브라우저는 이 문법을 이해하지 못했습니다. 따라서 이런 크로스 브라우징 문제를 해결하기 위해 생겨난 도구로써 ES6+버전의 자바스크립트, 타입스크립트, JSX 등 다양한 언어를 모든 브라우저에서 호환될 수 있도록 도와줍니다. 바벨의 동작 원리 파싱(Parsing) 바벨은 소스 코드를 분석하여 추상구문트리/AST(Abstract Syntax Tree)로 변환합니다. ..

세 번의 프로젝트동안 프론트엔드 개발자로서 개발을 진행했음에도 웹팩에 대해 이해하고 넘어가지 않아서 정리해보는 시간을 가지려고 합니다. React 같은 경우 CRA(create-react-app)으로 프로젝트 빌드 시에 개발 환경을 자동으로 설정해주기 때문에 큰 관심을 가지지 않은 점이 깊은 이해에 방해되었다고 생각합니다. 그래서 나름의 정리를 통해 webpack을 이해하고자 합니다. webpack 공식문서에서 설명하는 webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러(module-bundler) 입니다. 자바스크립트는 변수 유효 범위를 전역으로 가지게 됩니다. 이는 접근성은 좋지만, 웹 어플리케이션을 개발하다보면 각 스크립트에서 활용하는 변수명이 중복되는 등의 문제가 발생할..

지금까지의 프로젝트는 로그인을 해야만 서비스를 이용할 수 있어 항상 로그인 성공 시 메인페이지로 이동시켰습니다. 하지만 이번 프로젝트에서는 일부 기능만 회원 전용이기 때문에 비회원도 자유롭게 사이트를 구경할 수 있습니다. 만약 비회원이 회원만 이용가능한 서비스를 원한다면 로그인을 할 수 있도록 로그인 페이지로 이동시키고, 그 상태로 로그인 이후에 본래 서비스를 이용할 수 있게 해주어야 하므로 메인페이지가 아닌 이전 페이지로 이동시켜주어야 합니다. 기존 코드는 이렇게 구현되어 있었습니다. // 로그인이 필요한 특정 행동을 했을 경우 if (!sessionStorage.getItem("token")) { MySwal.fire({ title: "로그인 후 이용해주세요.", icon: "warning", con..

이번 프로젝트에서 이미지 파일을 업로드하여 그것과 비슷한 그림체의 웹툰을 추천해주는 부가기능이 있었습니다. 이 페이지의 기능 구현을 담당하여 필요한 기술들을 학습하면서 배운 내용을 기록해두려합니다. 다음과 같은 화면에서 그림을 업로드 할 수 있게 버튼을 만들어주었는데, 파일을 업로드하는 버튼이 너무 밋밋하여 이를 커스텀하고자 input과 버튼을 연결해서 css를 입혔습니다. // upload.jsx ... // 버튼의 for와 input의 id를 일치시켜 연결시켜준다. {fileImage ? "다시 업로드 하기" : "그림 업로드 하기"} ... const InputBtn = styled.label` box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5); border: 0.3vw ..

Redux 1. 시작 설치 npm install redux react-redux store 생성 import {createStore} from 'redux' function reducer(state, action) { // ... return newState } const store = createStore(reducer); export default store 2. Provider import {Provider} from 'react-redux' import store from './store' function App() { return ( Root ); } export default App; 3. Hooks useSelector(Left3.jsx) import { useSelector } from "..

Node.js 라이브러리 socket.io 채팅 Goal node.js 이해하고 개발환경 세팅 express를 이해하고 활용 socket.io 라이브러리 활용 채팅서버 구현 활용도구 자세한 내용은 추후 포스팅을 통해 다루겠습니다. 아래에서는 채팅 구현과 관련된 내용에 대한 간단한 소개만 합니다. Node.js chrome V8 JavaScripty 엔진으로 빌드 된 JavaScript 런타임 다양한 JavaScript app을 실행할 수 있도록 도와주는 프로그램 서버에서도 JavaScript 언어를 사용할 수 있도록 도와줍니다. Express Node.js를 사용한 서버를 개발하기 위한 웹 프레임워크입니다. http 요청에 대한 핸들러를 만들어줍니다. Socket.io 서버와 클라이언트 사이의 양방향 채..

Django 장고는 파이썬으로 만들어진 웹 애플리케이션 프레임워크입니다. 웹 페이지 개발 과정 중 겪는 어려움을 줄여주어 쉽게 웹을 개발할 수 있도록 해줍니다. 데이터 베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드 재사용 등의 이점이 있습니다. 가상환경 설정 django를 설치하기 전 가상환경을 만들어줍니다. django를 이용한 웹 개발은 이곳에서 이루어져야 합니다. [가상환경 설정하는 법] 2022.03.03 - [개발일기] - [Python] 가상환경(virtual environment) 사용하기 [Python] 가상환경(virtual environment) 사용하기 가상환경 독립된 환경에서 패키지를 다루기 위해 사용합니다. 여러 프로젝트를 진행할 때 패키지 별로 호환성이 다르기 때문에 필요..