디자이너는 어떻게 코딩을 배워야 할까요? Git, HTML/CSS, 엔지니어링 원칙(2부)

말 그대로 버전 관리에 관한 책이 작성되었습니다. 그럼에도 불구하고 더 많은 연구에 대한 욕구를 자극하기 위해 간단한 설명과 기타 소개 콘텐츠를 공유하는 것으로 시작하겠습니다.

버전 관리 ( 버전 기록 과 혼동하지 말 것)는 기본적으로 사람들이 단일 주요 소스(종종 "마스터" 분기라고 함)를 사용하여 단일 프로젝트에 대한 자신의 환경에서 협업하는 방법입니다.

오늘 살펴볼 내용은 프로젝트를 다운로드하고 변경한 다음 마스터에게 보내기 위해 알아야 할 최소한의 것입니다.

소스 코드를 관리하고 호스팅하기 위한 많은 유형의 버전 제어 소프트웨어와 많은 도구가 있습니다(GitLab 또는 Bitbucket에 대해 들어본 적이 있을 수 있음). Git과 GitHub는 가장 일반적인 쌍 중 하나입니다. 제 예제에서는 GitHub를 참조하지만 원칙은 대부분의 다른 소스 코드 관리자에 적용됩니다.

제쳐두고 :

• 보다 포괄적이고 기술적인 소개는 Tobias Gunther의 기사를 참조하십시오.
• 보다 실용적인 접근 방식을 선호하는 경우 GitHub에 훌륭한 단계별 가이드가 있습니다.

귀하의 첫 번째 기여

이 단계를 수행하기 전에 몇 가지 설정이 필요합니다.

1. GitHub 계정,
2. 컴퓨터에 설치된 노드 및 NPM,
3. 고통에 대한 내성이 높거나 다른 사람에게 도움을 요청하는 문턱이 낮습니다.

1단계: 포크(GitHub 계정에서 코드 사본 받기)

GitHub에서 문제의 저장소(repo)를 분기합니다(fork = 계정에 코드 사본 생성, 다음 그림에서 파란색, 주황색, 빨간색 및 녹색 선은 분기를 나타냄) .

GitHub의 repo로 이동하고 현재 repo의 오른쪽 상단에 있는 "Fork" 버튼을 클릭하면 됩니다. 이것은 GitHub 계정의 포크인 "원점"이 됩니다.

예를 들어 https://github.com/yourGitHubUsername/liferay.design으로 이동하면 Liferay.Design 저장소의 포크가 표시되어야 합니다.

2단계: 복제(컴퓨터에 코드 다운로드)

터미널에서 코드를 저장할 위치로 이동합니다. 개인적으로 /user 폴더에 /github 폴더가 있습니다. 이 폴더를 사용하면 쉽게 정리할 수 있습니다. 그렇게 하려면 다음 단계를 따르세요. 터미널 창에 이 명령을 입력한 후 ↵ 키를 눌러 실행합니다.

 cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github cd github ## this command navigates you inside the github folder

이제 /github 폴더에 있으므로 저장소를 복제(컴퓨터에 코드 사본 다운로드)합니다.

 clone https://github.com/yourGitHubUsername/liferay.design

이 명령을 입력하면 터미널에서 다음과 같은 다양한 활동을 볼 수 있습니다.

 Cloning into 'liferay.design'... remote: Enumerating objects: 380, done. remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380 Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done. Resolving deltas: 100% (189/189), done.

3단계: 설치(컴퓨터에서 실행)

/project 폴더로 이동합니다. 이 경우 cd liferay.design 을 입력합니다. 대부분의 프로젝트에는 /root 폴더에 README.md 파일이 포함됩니다. 일반적으로 이 폴더는 프로젝트를 설치하고 실행하기 위한 시작 위치입니다. 우리의 목적을 위해 설치하려면 npm install 을 입력하십시오. 설치가 완료되면 npm run dev 를 입력합니다.

축하합니다! 이제 로컬 컴퓨터에서 사이트를 사용할 수 있습니다. 일반적으로 프로젝트는 사이트가 실행되는 위치를 알려줍니다. 이 경우 브라우저를 열고 localhost:7777 로 이동합니다.

4단계: 커밋(일부 변경 및 저장)

커밋은 변경 사항의 모음입니다. 게임 진행 상황을 저장하는 것으로 설명되어 있다고 들었습니다. 커밋을 구조화하는 방법에 대한 여러 의견이 있습니다. 제 의견은 한 가지를 달성했을 때 커밋을 생성해야 하며 커밋을 제거하더라도 프로젝트가 완전히 중단되지는 않는다는 것입니다(이유 내에서).

변경을 염두에 두고 리포지토리에 오지 않는 경우 '이슈' 탭으로 이동하는 것이 좋습니다. 여기에서 프로젝트에서 수행해야 하는 작업을 볼 수 있습니다.

약간의 변경에 대한 아이디어가 있으면 계속 진행하십시오. 파일을 저장한 후 커밋을 만드는 데 필요한 단계는 다음과 같습니다.

 git status ## this will print out a list of files that you've made changes in git add path/to/folder/or/file.ext ## this will add the file or folder to the commit git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

팁 : 내가 본 커밋 메시지에 대한 최고의 권장 사항은 Chris Breams의 "Git 커밋 메시지 작성 방법"입니다. 적절하게 구성된 Git 커밋 제목 줄은 항상 다음 문장을 완성할 수 있어야 합니다. "적용되면 이 커밋은 [여기에 제목 줄]이 됩니다." 커밋에 대한 자세한 내용은 Clarice Bouwer의 "I Create Atomic Commits In Git"을 참조하십시오.

5단계: 푸시(변경 사항을 오리진으로 보내기)

컴퓨터에서 몇 가지 변경 사항을 적용하고 나면 마스터 브랜치(프로젝트에 추가됨)에 병합되기 전에 로컬에서 원격 저장소로 이동해야 합니다. 이렇게 하려면 명령줄에 git push origin 을 입력합니다.

6단계: 풀 리퀘스트(변경 사항을 업스트림에 병합하도록 요청)

변경 사항이 손가락에서 컴퓨터, 원격 저장소로 이동했으므로 이제 PR(풀 요청)을 통해 프로젝트에 병합하도록 요청할 때입니다.

이를 수행하는 가장 쉬운 방법은 GitHub의 리포지토리 페이지로 이동하는 것입니다. 파일 창 바로 위에 "This branch is X commits before repo-name:branch"라는 작은 메시지가 표시되고 "Pull request" 또는 "Compare" 옵션이 표시됩니다.

여기에서 "풀 리퀘스트" 옵션을 클릭하면 변경 사항을 비교할 수 있는 페이지로 이동하고 "풀 리퀘스트 생성" 버튼을 클릭하면 제목을 추가할 "풀 리퀘스트 열기" 페이지로 이동합니다. 그리고 코멘트를 포함합니다. 간략하지만 설명에 충분히 자세히 설명하면 프로젝트 유지 관리자가 제안된 변경 사항을 이해하는 데 도움이 됩니다.

터미널에서 pull 요청을 시작하고 관리할 수 있는 Node GH(GitHub도 최근 CLI 도구의 베타 버전을 출시함)와 같은 CLI 도구가 있습니다. 이 시점에서 웹 인터페이스를 사용하는 것이 더 좋을 수 있습니다. 나도 그래.

보너스 단계: 원격(모든 저장소 연결)

이 시점에서 세 개의 저장소 참조가 있습니다.

1. upstream : 당신이 추적하고 있는 메인 repo, 종종 당신이 fork한 repo입니다.
2. origin : 복제하는 리모트의 기본 이름.
3. local : 현재 컴퓨터에 있는 코드입니다.

지금까지 #2와 #3이 있습니다. 하지만 #1은 기본 소스이기 때문에 중요합니다. 이 세 가지를 서로 인라인으로 유지하면 커밋 기록을 깨끗하게 유지하는 데 도움이 됩니다. 이는 pull 요청(PR)을 보낼 때 병합 충돌을 제거(또는 최소한 최소화)하므로 프로젝트 유지 관리자에게 도움이 되며 최신 코드를 가져오고 로컬 및 원본 리포지토리를 최신 상태로 유지하는 데 도움이 됩니다.

업스트림 리모컨 설정

업스트림 리모컨을 추적하려면 터미널에 다음을 입력하십시오.

 git remote add upstream https://github.com/liferay-design/liferay.design

이제 사용 가능한 리모컨이 무엇인지 확인하십시오. 터미널에 git remote -v 를 입력하면 다음과 같은 내용이 표시되어야 합니다.

 origin https://github.com/yourGitHubUsername/liferay.design (fetch) origin https://github.com/yourGitHubUsername/liferay.design (push) upstream https://github.com/liferay-design/liferay.design (fetch) upstream https://github.com/liferay-design/liferay.design (push)

이렇게 하면 업스트림에 있는 최신 버전을 빠르게 가져올 수 있습니다. 오랫동안 리포지토리에서 작업하지 않았고 유지하려는 로컬 변경 사항이 없는 경우 이 명령은 제가 사용하는 편리한 명령입니다. :

 git pull upstream master && git reset --hard upstream/master

GitHub 도움말은 이것과 당신이 가질 수 있는 다른 많은 질문에 대한 훌륭한 리소스입니다.

HTML과 CSS: 의미론으로 시작하기

웹에는 HTML과 CSS를 배우기 위한 리소스가 끝없이 제공됩니다. 이 기사의 목적을 위해 내가 추천하는 것을 공유하고 있습니다. 내가 저지른 실수 HTML과 CSS를 작성하는 방법을 처음 배웠습니다.

HTML과 CSS란 무엇입니까?

더 진행하기 전에 HTML과 CSS를 정의합시다.

HTML은 HyperText Markup Language의 약자입니다.

하이퍼텍스트:

"하이퍼텍스트 는 독자가 즉시 액세스할 수 있는 다른 텍스트에 대한 참조(하이퍼링크)와 함께 컴퓨터 디스플레이 또는 기타 전자 장치에 표시되는 텍스트입니다."

— Wikipedia의 "하이퍼텍스트"

마크 업 언어:

"...문법적으로 텍스트와 구별되는 방식으로 문서에 주석을 달기 위한 시스템."

— Wikipedia의 "마크업 언어"

많은 단어가 의미하는 바를 모르는 경우를 대비하여 간단히 말해서 HTML은 웹에 있는 문서 간의 참조(링크)와 해당 문서에 구조를 부여하는 데 사용하는 태그 의 조합입니다.

HTML 및 CSS에 대한 철저한 소개를 위해 Mozilla 개발자 네트워크(MDN) 웹 문서에서 HTML 및 CSS 첫 번째 단계 소개를 적극 권장합니다. CSS Tricks, 24 Ways 및 기타 수많은 웹 사이트에서 제공하는 훌륭한 기사와 함께 기본적으로 HTML/CSS와 관련하여 참조해야 하는 모든 것이 포함되어 있습니다.

HTML 문서에는 <head> 와 <body> 의 두 가지 주요 부분이 있습니다. - <head> 에는 브라우저에 표시되지 않는 항목(메타데이터 및 가져온 스타일시트 및 스크립트에 대한 링크)이 포함되어 있습니다. - <body> 는 브라우저에 의해 렌더링될 실제 콘텐츠를 포함합니다. 콘텐츠를 렌더링하기 위해 브라우저는 HTML을 읽고 사용된 태그 유형에 따라 기본 스타일 레이어를 제공하고 웹사이트 자체에서 제공하는 스타일의 추가 레이어를 추가합니다(스타일은 <head> 에 포함/참조됨). 인라인), 그리고 그것이 결국 우리가 보는 것입니다. (참고: JavaScript의 추가 계층도 종종 있지만 이 기사의 범위를 벗어납니다.)

CSS 는 Cascading Style Sheets의 약자로, 문서에 사용자 정의 모양과 느낌을 더 쉽게 부여하여 HTML을 확장하는 데 사용됩니다. 스타일 시트는 태그, 클래스, ID 및 기타 선택자를 기반으로 규칙을 설정하여 HTML에 요소의 모양(및 위치 지정 방법)을 알려주는 문서입니다. 캐스케이딩 은 불가피한 규칙 충돌 상황에서 시트의 어떤 규칙이 우선 순위를 가질지 결정하는 방법을 나타냅니다.

"'Cascading'은 스타일이 한 스타일 시트에서 다른 스타일 시트로 떨어질 수 있음(또는 계단식 배열)을 의미하여 하나의 HTML 문서에서 여러 스타일 시트를 사용할 수 있습니다."

— 캐스케이드 — 최대 디자인

CSS는 종종 나쁜 평판을 얻습니다. 스타일 시트가 많은 사이트에서 특히 문서화되고 일관된 방법이 사용되지 않는 경우(나중에 자세히 설명) 다루기 어려워질 수 있습니다. 그러나 조직적인 방식으로 사용하고 모든 모범 사례, CSS는 가장 친한 친구가 될 수 있습니다. 특히 현재 대부분의 최신 브라우저에서 사용할 수 있는 레이아웃 기능을 통해 CSS는 예전처럼 해킹과 싸움에 거의 필요하지 않습니다.

Rachel Andrew는 How To Learn CSS라는 훌륭한 가이드를 작성했습니다. 시작하기 전에 알아야 할 가장 좋은 점 중 하나는 다음과 같습니다.

"모든 CSS 속성과 값을 암기할 필요가 없습니다."

— 레이첼 앤드류

대신 선택기, 상속, 상자 모델, 그리고 가장 중요한 CSS 코드를 디버그하는 방법(힌트: 브라우저 개발자 도구가 필요함)과 같은 기본 사항 을 배우는 것이 훨씬 더 중요합니다.

background 속성에 대한 구문을 기억하는 것에 대해 걱정하지 마십시오. Flexbox에서 항목을 정확히 정렬하는 방법을 잊어도 걱정하지 마십시오(Flexbox에 대한 CSS Tricks Guide는 아마도 내가 가장 많이 방문한 페이지 중 상위 10개 중 하나일 것입니다! ); Google과 Stack Overflow는 CSS 속성 및 값과 관련하여 친구입니다.

일부 코드 편집기에는 자동 완성 기능이 내장되어 있으므로 예를 들어 테두리의 가능한 모든 속성을 파악하기 위해 웹에서 검색할 필요조차 없습니다.

Firefox 70에서 제가 가장 좋아하는 새로운 기능 중 하나는 비활성 CSS 규칙 표시기입니다. 스타일이 적용되지 않는 이유를 파악하는 데 드는 시간을 절약할 수 있습니다.

의미론

시맨틱 코드 부터 시작하겠습니다. 의미론은 단어의 의미를 나타내고, 의미론적 코드는 주어진 언어의 마크업에 의미가 있다는 아이디어를 나타냅니다.

의미론이 중요한 이유는 여러 가지가 있습니다. 요약하자면, 시맨틱 코드를 ​​배우고 사용하면 많은 것을 무료로 얻을 수 있기 때문에 삶이 훨씬 쉬워질 것입니다. 누가 무료를 좋아하지 않습니까?

시맨틱 코드에 대한 보다 완전한 소개는 해당 주제에 대한 Paul Boag의 간략한 블로그 게시물을 참조하십시오.

의미론은 다음과 같은 많은 이점을 제공합니다.

1. 기본 스타일
   예를 들어, 문서 제목에 헤드라인 태그 <h1> 를 사용하면 헤드라인과 마찬가지로 문서의 나머지 내용과 구별됩니다.
2. 접근 가능한 콘텐츠
   기본적으로 코드에 액세스할 수 있습니다. 즉, 화면 판독기와 함께 작동하고 키보드로 더 쉽게 탐색할 수 있습니다.
3. SEO 혜택
   시맨틱 마크업은 기계가 더 쉽게 읽을 수 있으므로 검색 엔진에 더 쉽게 액세스할 수 있습니다.
4. 성능상의 이점
   깨끗한 HTML은 고성능 사이트의 기반입니다. 또한 깨끗한 HTML은 더 깨끗한 CSS로 이어질 가능성이 높으므로 전체 코드가 줄어들어 사이트나 앱이 더 빨라집니다.

참고: 의미론과 HTML에 대한 보다 심층적인 조사를 위해 Heydon Pickering은 "구조적 의미론: HTML5 섹션 요소의 중요성"을 썼습니다.

엔지니어링 원칙 및 패러다임: 기본 사항

추출

추상화 개념에 대해 탐색할 수 있는 응용 프로그램, 접선 및 수준이 너무 많습니다. 이 기사에서는 개념에 대한 간략한 소개를 제공하여 계속 학습하면서 이러한 개념을 알 수 있도록 하기 위해 너무 많습니다.

추상화는 다양한 응용 프로그램이 있는 기본 엔지니어링 패러다임입니다. 이 기사의 목적에서 추상화는 기능에서 형태를 분리하는 것입니다. 토큰, 구성 요소 및 자신을 반복하지 마십시오 원칙의 세 가지 영역에서 이를 적용합니다.

토큰

오랜 기간 동안 현대적인 디자인 도구를 사용해 왔다면 아마도 토큰 이라는 아이디어를 접했을 것입니다. Photoshop과 Illustrator에서도 이제 중앙 라이브러리에서 공유 스타일에 대한 아이디어가 있습니다. 값을 디자인에 하드 코딩하는 대신 토큰을 사용합니다. CSS 또는 SASS 변수의 개념에 익숙하다면 이미 토큰에 익숙할 것입니다.

토큰을 사용하는 추상화의 한 계층은 색상에 이름을 지정하는 것입니다. 예를 들어 $blue-00 은 16진수 값(또는 HSL 값 또는 원하는 무엇이든)에 매핑될 수 있습니다. 예를 들어 #0B5FFF 라고 가정해 보겠습니다. 이제 스타일시트에서 16진수 값을 사용하는 대신 토큰 값을 사용합니다. 이렇게 하면 blue-00 이 실제로 #0B36CE 경우 한 곳에서만 변경하면 됩니다. 이것은 좋은 개념입니다.

이와 동일한 추상화 패러다임을 취하고 한 층 더 나아가면 토큰 인식 을 할 수 있으며 변수를 기능적 값에 할당할 수 있습니다. 이것은 강력한 시스템이 있고 시스템 내에서 다른 테마를 갖고자 할 때 특히 유용합니다. 이에 대한 기능적 예는 $primary-color 와 같은 변수를 할당하고 이를 $blue-00 에 매핑하는 것입니다. 이제 마크업을 생성할 수 있고 파란색을 참조하는 대신 기능 변수를 참조하게 됩니다. 동일한 마크업을 사용하지만 다른 스타일(테마)을 사용하려는 경우 $primary-color 를 새 색상에 매핑하기만 하면 되며 마크업을 전혀 변경할 필요가 없습니다! 마법!

구성품

지난 3~4년 동안 구성 요소 및 구성 요소화에 대한 아이디어는 디자이너에게 보다 관련성이 높고 접근하기 쉬워졌습니다. 기호 개념(Macromedia/Adobe Fireworks에서 개척, 나중에 Sketch에서 확장, Figma 및 Framer에서 다음 단계로 이동)은 이제 대부분의 디자인 도구(Adobe XD, InVision Studio, Webflow 및 많은 기타). 토큰 이상의 구성 요소화는 기능과 형태를 분리할 수 있습니다. 이는 형태와 기능을 모두 개선하는 데 도움이 됩니다.

가장 주목할만한 초기 사례 중 하나는 Nicole Sullivan의 미디어 개체 구성 요소입니다. 언뜻 보면 전체 페이지가 본질적으로 서로 다른 방식으로 렌더링된 단일 구성 요소로 구성되어 있다는 사실을 인식하지 못할 수도 있습니다. 이러한 방식으로 동일한 마크업(양식)을 재사용하고 옵션이나 매개변수 및 스타일을 전달하여 약간 수정하고 다양한 값(함수)을 제공할 수 있습니다.

자신을 반복하지 마십시오

DRY (Don't Repeat Yourself)는 내가 가장 좋아하는 원칙 중 하나입니다. 계속해서 재사용할 수 있는 것을 만드는 것은 코딩할 때 얻을 수 있는 작은 승리 중 하나입니다.

종종 DRY 원칙을 100% 적용하기 위해 노력할 수는 없지만(그리고 틀림없이 해서는 안 됨) 항상 — 최소한 이 점을 인식하여 작업할 때 작업 중인 모든 것을 재사용 가능하게 만들 수 있습니다.

3의 규칙에 대한 참고 사항: DRY 원칙의 결과는 3의 규칙입니다. 기본적으로, 무언가를 세 번 재사용(복사/붙여넣기)하면 재사용 가능한 구성 요소로 다시 작성해야 합니다. Pirate's Code와 마찬가지로, 이는 엄격하고 빠른 규칙이라기보다 지침에 가깝고 구성 요소 및 프로젝트마다 다를 수 있습니다.

CSS 및 스타일 지정 방법론: Atomic 대 BEM

CSS 코드를 구성하고 작성하는 다양한 방법이 있습니다. Atomic과 BEM은 여러분이 접할 가능성이 높은 두 가지에 불과합니다. 하나를 "선택"할 필요도 없고 정확하게 따를 필요도 없습니다. 내가 함께 일한 대부분의 팀은 일반적으로 프로젝트 또는 기술을 기반으로 고유한 조합을 가지고 있습니다. 시간이 지남에 따라 상황에 따라 어떤 접근 방식을 취해야 하는지 배울 수 있도록 그들에 익숙해지는 것이 도움이 됩니다.

이러한 모든 접근 방식은 "단순한" CSS 및 스타일 지정을 넘어서 사용하는 도구, 파일 구성 방식 및 잠재적으로 마크업에 영향을 줄 수 있습니다.

원자 CSS

Atomic Web Design과 혼동하지 마십시오. 원자("기능적"이라고 하는 것이 더 적절함) CSS는 본질적으로 시각적 기능을 정의하기 위해 작은 단일 목적 클래스를 사용하는 것을 선호하는 방법론입니다. 몇 가지 주목할만한 라이브러리:

1. Steve Carlson의 Atomic CSS;
2. Adam Morse의 Tachyons;
3. Adam Wathan의 Tailwind CSS.

이 방법이 마음에 드는 점은 빠르게 스타일을 지정하고 테마를 지정할 수 있다는 것입니다. 가장 큰 단점 중 하나는 마크업이 꽤 빨리 복잡해 질 수 있다는 것입니다.

Atomic CSS에 대한 전체 소개는 CSS 트릭에 대한 John Polacek의 기사를 확인하세요.

BEM

BEM 철학은 Angular, React 및 Vue와 같은 많은 최신 JavaScript 프레임워크의 훌륭한 선구자입니다.

"BEM(Block, Element, Modifier)은 웹 개발에 대한 구성 요소 기반 접근 방식입니다."

— BEM: 빠른 시작

기본적으로 재사용할 수 있는 모든 것은 블록입니다. 블록은 블록 외부에서 사용할 수 없는 요소와 잠재적으로 다른 블록으로 구성됩니다. 수식어는 어떤 것의 상태나 모양이나 행동 방식을 설명하는 것입니다.

개인적으로 BEM의 이론과 철학을 좋아합니다. 내가 좋아하지 않는 것은 사물의 이름을 짓는 방식입니다. 밑줄, 하이픈이 너무 많으며 불필요하게 반복적으로 느껴질 수 있습니다( .menu , .menu__item 등).

추천 자료 : Inna Belaya가 쓴 BEM For Beginners

감사합니다, Next(.js)

이러한 주제를 충분히 숙달한 후에도 여전히 배울 것이 많이 있으므로 걱정하지 마십시오. 몇 가지 제안:

1. 기능 및 객체 지향 프로그래밍
   우리는 가볍게 다루었지만 CSS 외에도 배울 것이 많습니다.
2. 고급 언어 및 프레임워크
   Typescript, Ruby, React, Vue는 HTML과 CSS에 대해 잘 이해하고 나면 다음으로 다루게 될 것입니다.
3. 언어 쿼리 및 데이터 사용
   GraphQL, MySQL, REST API에 대해 배우면 코딩 능력이 한 차원 높아집니다.

결론: 코딩하는 디자이너 != 소프트웨어 엔지니어

이 기사를 통해 코딩을 배우는 것이 이전에 생각했던 것만큼 어렵지 않다는 것을 알게 되었기를 바랍니다. 시간이 많이 걸릴 수 있지만 인터넷에서 사용할 수 있는 리소스의 양은 놀랍고 줄어들지 않고 있습니다. 정반대입니다!

강조하고 싶은 한 가지 중요한 점은 "코딩"이 "소프트웨어 엔지니어링"과 같지 않다는 것입니다. 스택 오버플로에서 리포지토리를 분기하고 코드에 복사/붙여넣기를 할 수 있으면 많은 도움이 됩니다. 내가 아는 소프트웨어 엔지니어가 모두 그런 것은 아닙니다. 새로 발견한 기술을 지혜와 겸손으로 사용해야 합니다. 이제 약간의 엔지니어링 능력으로 액세스할 수 있는 모든 것에 대해 모르는 것이 훨씬 더 많습니다. 기능이나 스타일이 달성하기 쉽다고 생각할 수도 있지만 — "이봐, devtools에서 작동하게 했어!" 또는 "Codepen에서 작동하도록 만들었습니다." — 아마도 알지 못하는 많은 엔지니어링 프로세스, 종속성 및 방법이 있습니다.

우리가 여전히 디자이너라는 사실을 잊지 마세요. 우리의 주요 기능은 고객 또는 사용자 문제를 이해하고 디자인 패턴, 방법 및 프로세스에 대한 지식을 종합하여 비즈니스 가치를 추가하는 것입니다. 예, "코드를 작성하는 디자이너"가 되는 것은 매우 유용할 수 있고 이 가치를 추가할 수 있는 능력을 확장할 것입니다. 하지만 엔지니어가 엔지니어링 결정을 내릴 수 있도록 해야 합니다.

아무 것도 아미스?

이 게시물의 내용이 모호하거나, 둔감하거나, 쓸모가 없을 가능성이 높으며, 이를 개선할 수 있는 기회가 되었으면 합니다! 개선할 수 있도록 아래에 의견을 남기거나 DM 또는 Twitter에서 @멘션해 주세요.

추가 읽기

1. 코딩 부트캠프 대 컴퓨터 공학 학위: 고용주가 원하는 것과 기타 관점(Kyle Thayer)
2. Sketch 및 Framer X 사용을 시작하는 방법 (작성자 Martina Perez, Smashing Magazine )
3. Linux 명령 소개(Paul Tero, Smashing Magazine 작성 )
4. Oh My ZSH 및 Z를 사용하여 명령줄 고급 사용자 되기(Wes Bos, Smashing Magazine 작성 )
5. PowerShell에서 사용할 수 있는 일반적인 cmd.exe 및 Unix 명령 목록( Microsoft Docs )
6. regular-expressions.info(Jan Goyvaerts 작성)
7. regexone.com(간단한 대화식 연습으로 정규식 배우기)
8. 명령줄과 ImageMagick을 사용한 일괄 크기 조정(Vlad Gerasimov, Smashing Magazine 작성 )
9. Sublime Text로 생산성 향상을 위한 지름길 및 팁 (저자 Jai Pandya, Smashing Magazine )
10. Visual Studio 코드가 그렇게 할 수 있습니까? (by Burke Holland, Smashing Magazine )
11. 버전 기록이 버전 제어가 아닌 이유(Josh Brewer)
12. Git을 사용한 최신 버전 제어(저: Tobias Gunther, Smashing Magazine )
13. "Hello World"(GitHub 단계별 가이드)
14. Mac에 Node.js 및 NPM을 설치하는 방법(Dave McFarland 작성)
15. Windows에 Node.js 및 NPM을 설치하는 방법(Dejan Tucakov 작성)
16. Git에서 원자적 커밋을 생성하는 이유(Clarice Bouwer 작성)
17. Git 커밋 메시지를 작성하는 방법(Chris Breams 작성)
18. 시맨틱 코드: 무엇? 왜요? 어떻게? (폴 보그)
19. 구조적 의미: HTML5 섹션 요소의 중요성 (by Heydon Pickering, Smashing Magazine )
20. 성능을 위한 디자인: 4장. 마크업 및 스타일 최적화(Lara C. Hogan, O'Reilly Media 작성)
21. 미디어 개체는 수백 줄의 코드를 저장합니다(Nicole Sullivan 작성).
22. Atomic CSS가 무엇인지 정확히 정의해 봅시다. (by John Polacek, CSS Tricks )
23. 초보자를 위한 BEM: BEM이 필요한 이유(저: Inna Belaya, Smashing Magazine )
24. 고양이를 위한 자바스크립트: 새로운 프로그래머를 위한 소개
25. Roadmap.sh: 프론트엔드 개발자
26. 함수형 프로그래밍 대 OOPS: 다섯 살처럼 설명하기
27. 시맨틱 HTML 및 ARIA를 사용하는 이유, 방법, 시기(Adam Silver 작성, CSS Tricks )
28. HTML 의미론( Smashing Magazine 의 eBook)
29. 기초 - HTML + CSS( Syntax.fm 에서)
30. 캐스케이드 및 상속( westciv.com )
31. CSS 트릭(Chris Coyier 작성)
32. CSS 레이아웃 시작하기(작성: Rachel Andrew, Smashing Magazine )
33. HTML 소개(MDN 웹 문서)
34. CSS 첫 번째 단계(MDN 웹 문서)
35. JavaScript 첫 단계(MDN 웹 문서)
36. 24가지 방법(Drew McLellan 작성)