최근 웹개발의 트렌드는 빠르게 변화하고 있습니다. 그만큼 여러 개발 도구들이 등장하고 발전하고 있는데요, React도 이러한 개발 도구들 중 하나입니다. 어떤 개발 도구나 프레임워크라도 "왜 쓰는지" 혹은 "그 툴의 장점이 무엇인지?"를 알고 쓰는 것이 중요합니다. 이번에는 React를 공부하기에 앞서 왜 React를 써야 하는지 React가 가지는 특징을 중심으로 알아보려고 합니다. 1. React란? 페이스북(현재 메타)에서 개발한 Javascript UI 라이브러리를 말합니다. 2. React의 등장 배경 2000년대 초 Web 2.0과 SPA(Single Page Application)의 등장으로 사용자가 웹페이지에서 정보를 주고받으며 상호작용할 수 있게 되었습니다. 이에따라 많은 웹서비스들이 등..

티스토리 블로그에 처음 입문했을 때는 기능들도 복잡하고 설정을 익히느라 정신이 없기 마련입니다. 하지만 초보를 벗어나는 단계가 오면 이제 블로그의 여러 기능들을 능숙하게 다룰 수 있게 됩니다. 이 때부터는 나만의 개성있는 블로그를 만들고 싶어지는데요 대표적으로 다음과 같은 것들을 할 수 있습니다. 나에게 맞는 플러그인 적용하기도메인을 구매하여 나만의 도메인 사용하기나만의 커스텀 스킨 적용하기이번 포스팅에서는 세 번째 나만의 커스텀 스킨 적용하기에 대해 다루어 보려고 합니다. 티스토리 스킨은 기본 제공 스킨과 커스텀 스킨 이렇게 두 가지가 있습니다. 기본 제공 스킨[블로그 관리 페이지]에서 [꾸미기] 목록의 [스킨 변경]에 들어가면 여러 기본 스킨들을 볼 수 있습니다. 이 중에서 원하는 스킨 미리보기하거나..

React 톺아보기 시리즈에서는 React 공식 문서를 바탕으로 기초부터 심화까지의 내용을 정리하도록 하겠습니다. 프로그래밍 공부는 프로젝트에 실전적으로 적용하면서 배우는 Project Based Learning이 정말 중요합니다. 따라서 공식 문서의 틱 택 토, To Do List를 만들어 보면서 React의 주요 내용들을 적용해 보도록 하겠습니다. 참고 자료들 React 공식 문서 리액트의 공식 사이트에 있는 문서입니다. React의 기본부터 심화까지 다룹니다. CRA CRA는 페이스북에서 만든 공식 React 개발용 Boilerplate입니다. 간단히 말해서 React 개발 환경 구축 툴입니다. React를 공부하면서 CRA를 굉장히 많이 사용할 텐데, 이 문서는 CRA에 대한 설명 뿐만 아니라 C..

1. 한국어 2. Pretter - Code formatter 3. Live Server 4. HTML Snippets 5. vscode icons 6. image preview

제각각 여러 기능을 추가하다 보니 코드가 너무 제각각이었다. 처음엔 클린코드였을지라도 기능을 하나하나 추가하는 과정에서 금방 난잡해졌다. 따라서 회의를 통해 현재 코드의 구조를 하나하나 뜯어보고 코드 리팩토링을 적용하려고 한다. 1. 파일 분리하기 https://ko.legacy.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 공식 문서를 참고하였다. 공식문서에서 5분 이상 고민하지말고 편한대로 나누라고 써있다. 2. 함수의 기능, 추상화 단계 명확히 하기 토스의 SLASH 21의 프론트엔드 진유림님의 React 클린 코드 강의를 참고하..

https://velog.io/@gmlstjq123/Readme.md-%ED%8C%8C%EC%9D%BC-%EC%9E%91%EC%84%B1%EB%B2%95 Readme.md 파일 작성법 이번 포스팅에서는 여러분들의 Github Repository를 한층 업그레이드 시킬 수 있는 Readme.md 파일에 대해서 다뤄보겠습니다. 1. README 1) 개념 README 파일은 주로 Github 프로필 혹은 Repository에 대한 설명을 velog.io https://easyhomputer.tistory.com/22 [GitHub] 깃허브 프로필 꾸미기, README.md 코드 🌈 https://github.com/jiholee0 ** 레포지토리 fork 해가실 때 블로그 글에 공감!이나 댓글! 남겨주시면 ..

1. 클린코드의 의의 다른 사람의코드를 수정해야 할 때 작성자만 이해할 수 있고 다른 사람은 무슨 기능을 하는 코드인지 파악하기 어렵다. 흐름파악이 어렵고 도메인 맥락 표현 x 작성자만 알 수 있는 코드 개발할 때 병목, 유지보수시간 오래, 기능추가 불가능한 상태, 성능도 떨어짐 클린코드의 의미 === 유지 보수 시간의 단축 시간은 자원이고 돈이다. 고치는데 더 빠른 시간이 걸릴수록 돈을 아끼는 것이다. 모두 처음엔 클린했다. 하지만 기능을 추가하는 상황이라면 순식간에 들쑥날쑥해질 수 있다. 사실 당연하다. 남이 짠 코드에 내 기능을 추가하는 것이니.... 이미 작성된 코드에 새 기능을 추가한다고 해보자........ .... 코드 ... 하지만 나쁜코드가됨 하나의 목적인 코드가 흩뿌려져 있다. 하나의 ..