자바스크립트 썸네일형 리스트형 [웹 프로젝트] 낚시 관련 사이트 제작 - 개발환경 세팅(1) 개발자로 근무하면서 게임보단 점점 코딩에 몰두하게 되어 활동성 있는 취미를 찾던 중에, 낚시를 접하게 됐는데, 몇명이서 하든 혼자만의 시간이 많아져 많은 것들을 집중적으로 생각하는데 도움이 되었다. (사실 다 필요없고 그냥 혼자 다 만들어보고 싶어서 만드는) 그래서 내가 가진 능력으로 낚시 관련 사이트를 만들어보는 게 어떨까 해서 시작하게 된 것이 '월척이오'이다. 월척이오의 사이트 목적은 젊은이들의 낚시법을 위한 커뮤니티 사이트이다. 기초적인 낚시 종류 강좌부터, 낚시 포인트, 관련 장비 등등 낚시에 관한 건 모조리 다 때려 넣을 생각이다. 사실 내가 가진 능력으로 뭘 할 수 있다라는 그런 자부심과 마음 깊은 고양감이 이렇게 생각할 수 있는 원동력이 된 듯하다. 이러한 방향을 제시해 주고, 충고를 해서.. 더보기 [Javascript] React 디자인 패턴 design pattern presentational & container 로직을 수행하는 컴포넌트, UI를 보여주는 컴포넌트를 분리 앱의 기능과 UI구분이 쉬워짐 같은 state를 다른 container에게 props를 내림으로써 공유 로직수행, markup이 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어남. markup 변경에 매우 유연함 동일한 마크업, 컨테이너 레이아웃(header, footer 등)은 반복해서 작성하지 않고 구현 가능 presentational 사용자가 직접 보고 조작하는 컴포넌트 state를 직접 조작하지 않고, container component가 내려준 props함수에 의해 state를 변경 그에 따라 useState, useCallback 등 state관련 훅이 없어야함 상태를 거의 가지지 않으며, 상태를 가진다면 데이터에 관한.. 더보기 [Javascript] React 디자인 패턴 design pattern - atomic 분자단위로 UI 컴포넌트를 쪼개어 페이지를 구성하는 패턴 atoms - molecules - oraganisms - templates - pages 단계로 컴포넌트들을 결합 UI의 시맨틱적으로 가장 작은 단위의 요소들부터 쪼개서 조합하고, 기능적인 부분까지 결합하는 패턴 단계를 역으로 하여 분리시켜도 무방 간단명료하고 UI 복잡도를 억제, 중복컴포넌트를 방지하고 개발소요시간을 단축한다. 컴포넌트 개념에 대한 높은 이해도를 필요로 하기 때문에 러닝커브가 매우 높음 사소한 UI를 변경해야하는 컴포넌트 체계에 유연하지 않음 리액트 컴포넌트를 전반적으로 잘 이해해야하기 때문에 협업 시 쉽지않음 // Button.js import React from 'react'; const Button = (pr.. 더보기 [Javascript] React - Recoil 상태관리 라이브러리 Atom 상태의 단위를 나타냄 Atom이 업데이트 되면 해당 Atom을 구독하고 있던 모든 컴포넌트들이 새로운 값으로 Re-render됨 또한 여러 컴포넌트에서 같은 Atom을 구독하고 있으면 그 컴포넌트들이 상태를 동일하게 공유 고유한 key와 기본값(default)을 정의해야 함 const productState = atom({ key: 'productState', // 이 값은 어떤 Atom이든지 Unique해야함 default: '', }); 동적 key를 가진 다른 상태를 생성하는 것도 가능 여러개의 비슷한 데이터를 다룰 때 리스트에 보관하는 대신 각자의 상태가 독립되어 변경한 아이템 하나만이 업데이트 하게 됨 (0.0.8버전 이후로 atomFamily라는 이름으로 .. 더보기 [Javascript] React Hook Guide useState 가장 기본적인 함수형 컴포넌트의 Hook API 데이터를 담거나 setter를 이용하여 업데이트 정의 시, 값을 가져올 변수와 설정할 변수(setter)를 deps에 적재 주의할 점은 값을 가져올 변수와 설정할 변수의 명명규칙 설정할 변수를 set+가져올 변수에 카멜케이스로 명명 useState()내에는 String이면 '', Integer이면 0, Object면 {} 등. 사용할 타입에 따라 default값을 입력 함수 내에서 값을 업데이트 시 setName를 사용 // index.js import React, { useState } from 'react'; const Index = () => { const [name, setName] = useState(&.. 더보기 ESLint? Javascript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 코딩 스타일 문제와 코드 품질 모두 제어해주고 규칙을 정의할 수 있다. 주로 하드코딩에서 문법적으로 문제가 있는 코드를 Lint 해주기 위해서만 사용하는 분석도구이므로 설치 시, 의존성 라이브러리에 위치한다. Installation $> yarn add --dev eslint eslint-config-airbnb-base eslint-import-resolver-webpack eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint ESLint 그 주체이다. Coding Convention Guide를 사용.. 더보기 [Javascript] Koa.js 기본 사용법 src/app.js import Koa from 'koa'; const app = new Koa(); const port = parseInt(`${process.env.PORT || '3000'}`, 10); app.use((ctx) => { ctx.body = 'Hello world!'; }); app.listen((port, () => { console.log(`PORT: ${port}`); }); export default app; Koa 어플리케이션은 미들웨어의 배열로 구성되어 있다. 6번째 라인은 하나의 미들웨어인 것이다. 미들웨어를 계속 실행시키기 위해서는 next()를 호출해야한다. async/await Koa에선 별도의 작업없이 async/awai.. 더보기 [Javascript] Koa.js 프로젝트 생성 및 ESLint설정 Koa 설치 $ mkdir koa-server $ cd koa-server $ yarn init $ yarn add koa ESLint 설정 ESLint는 자바스크립트 문법을 검토해주는 도구다. 때문에 전역으로 설치해주는 것이 프로젝트 초기설정에도 좋다. $ yarn global add eslint $ esint --init 실행하면 루트 디렉토리에 .eslintrc 파일이 생기는데, 기본적으로 세미콜론을 허용하지 않고, 그 외에도 엄격하게 코드 규칙을 잡는다. 때문에 자기 자신만의 코드 스타일을 선정하고 적용한다. $ yarn add --dev eslint eslint-config-airbnb-base eslint-plugin-import 프론트엔드와 백엔드를 개발 시에, ESLint는 조금 다르게 설.. 더보기 [Javascript] 자바스크립트 타입 감지 때때로 변수들의 타입을 감지할 필요가 있다. 간혹 변수 타입을 이용한 조건문으로 돔의 조작이 필요하다거나 하는 등. 그럴 때는 아래의 연산자를 쓰면 된다. typeof typeof는 변수의 타입을 대체적으로 감지해주는 연산자이다. 이 연산자를 쓰면 변수의 타입을 감지하여 해당 변수의 자료형을 문자열로 반환해주는 역할을 한다. 아래의 예시를 보자. var a = ''; // 문자열 var b = []; // 배열 var c = {}; // 객체 var d = 0; // 숫자 typeof a // result -> 'string' typeof b // result -> 'object' typeof c // result -> 'object' typeof.. 더보기 [Javascript - Nuxt.js] Nuxt.js 상태관리 사이클 요약설명 1. state - 모델 생성 및 모델 값 초기화 - vue components로 rendering 2. vue components - 특정 이벤트를 실행하여 actions로 dispatch 3. actions - dispatch된 actions은 backend의 api를 axios로 응답 - 응답은 post, get, put, delete - axios로 받아온 결과값은 view업데이트를 위한 mutations로 commit 4. mutations - commit된 mutations는 state를 변경하여 view를 업데이트 세부설명 vuex는 이용한 vue.js의 상태관리 라이브러리로 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며, 의도적인 방법으로 상태를 변경 및 관리할 수 있다. .. 더보기 이전 1 2 다음
