본문 바로가기

프론트엔드

[웹 프로젝트] 낚시 관련 사이트 제작 - 개발환경 세팅(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관련 훅이 없어야함 상태를 거의 가지지 않으며, 상태를 가진다면 데이터에 관한.. 더보기
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 - 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의 상태관리 라이브러리로 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며, 의도적인 방법으로 상태를 변경 및 관리할 수 있다. .. 더보기
[HTML] Semantic HTML 이란? Semantic HTML 이란? Semantic HTML이란 직역하면 의미론적 HTML이다. 좀 더 풀어서 얘기를 해보자면, Element마다 의미가 있는 것을 뜻한다. 즉, Semantic elements가 된다. 이것은 브라우저와 개발자 모두에게 알려주는 것인데, Element 이름 자체에 의미가 있는 것이기 때문에, 웹 상에 좀 더 노출이 잘되는 것을 의미한다. 시맨틱 HTML으로 구성하기 전에는, ❮div❯와 ❮span❯으로 HTML을 구성했다. 단, 이 것은 어떠한 의미도 없는 태그다. Semantic HTML으로 구성해야하는 이유? 웹 사이트 개발이 완료되면 그 사이트는 웹 상에 노출되는데, 검색을 했을 때 바로 노출이 되지 않는다. 노출을 하기 위해서는 웹 사이트의 정보가 수집되어야 한다. .. 더보기
[Javascript] Javascript 기초 Javascript가 뭔가요? Javascript란, 웹 페이지상에서 정적인 부분을 동적으로 변화시켜주는 스크립트 또는 프로그래밍 언어다. HTML이 웹 페이지의 내용 그러니까, 이미지, 제목, 표, 사진과 영상 등을 보여주고, CSS가 구조화된 HTML의 디자인 등의 레이아웃을 지정하면, Javascript는 그들을 동적으로 바꿔주는 역할을 한다. 정적인 웹 페이지는 HTML, CSS만으로도 충분하지만, 좀 더 웹 페이지의 목적과 구조에 맞게 구성하기 위해선 Javascript는 필수이다. 예제를 하나 들어보자면, 누르면 나와 눌러봐! 결과 누르면 나와 눌러봐! 여기에 CSS를 입힌다. CSS 기초에서 했었던 class를 쓰겠다. .click-button { color: #3DAEF8; backgrou.. 더보기
[CSS] 마크업 언어 CSS 기초 2020년 말, 대규모 프로젝트를 진행 중에 블로그를 시작해서 그런가 포스팅을 하지도 못하고, 나도 내 자신이 블로그를 시작했단 걸 깜빡했었다. 거두절미하고, 오늘은 Mark up Language의 CSS를 포스팅하려고 한다. CSS란? CSS란, Cascading Style Sheet의 약자로, 작년 8월에 포스팅했던 HTML(ㅋㅋㅋ)에 디자인적 구조를 입혀주는 마크업 언어다. 쉽게 말해, 집의 뼈대가 HTML이라면 집을 예쁘게 꾸미는 것이 CSS다. 웹 개발자는 크게 두 분류로 나뉜다. 프론트엔드(Front-End)와 백엔드(Back-End) 프론트엔드에서도 여러 분류로 또 나뉘는데, 마크업 언어는 보통 퍼블리셔(Publisher)에 해당한다. 하지만, 프론트엔드도 마크업 언어는 알아야하기 때문에 기.. 더보기
728x90

티스토리툴바