아하 로고
검색 이미지
생활꿀팁 이미지
생활꿀팁생활
생활꿀팁 이미지
생활꿀팁생활
붉은고라니294
붉은고라니29420.08.13

프론트엔드 개발자가 되고 싶은데요, 어떤 순서로 공부하면 좋을까요?

아무 베이스가 없습니다. html과 css를 유튜브로 찾아본 정도입니다. 독학으로 시작해 장기적으로 시간과 돈을 투자할 의향이 있습니다. 공부해야할 순서를 짚어주세요. 단순히 홈페이지를 꾸미기 위해 배우는 겁니다만, 제게 필요합니다.

55글자 더 채워주세요.
답변의 개수4개의 답변이 있어요!
  • 안녕하세요.

    프론트엔드 개발자가 되고 싶다고 하셨는데요. 단순 마크업 개발자가 되고 싶으신 거면 HTML, CSS 두 개만 배워도 홈페이지를 꾸미는데는 문제 없습니다.

    좀 더 나아가서 동적인 페이지를 만들고 싶으시면 javascript, jquery 등도 배우시면 좋을 것 같습니다.

    도움이 되셨으면 좋겠습니다.


  • 안녕하세요.

    우선 HTML을 공부하시고, 그 뒤에 HTML을 예쁘게 꾸며주는 CSS를, 그리고 여기에 기능을 추가하는 JAVAScript를 공부하시기를 권장드립니다.

    어느정도 익숙해 지시면 HTML, CSS, Javascript를 홈페이지에 필요한 기능을 구현하시면서 골고루 보시면 됩니다.

    우선 여기에서 HTML을 시작해 보시고, 익숙해 지시면 이 곳에서 확장해 나가시면 됩니다.

    https://www.w3schools.com/html/

    나중이되면 홈페이지를 어디에 만들어야 할지도 고민이 되실텐데요, 우선은 PC상에서 만드시고 크롬등을 이용해서 그 내용을 보시는 것도 방법이고, 혹은 위의 사이트의 예제 입력창에서 만들어 보셔도 됩니다.


  • 프론트엔드 개발자 로드맵을 우선 보시는게 좋을것 같습니다.

    https://velog.io/@exploit017/2020-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A1%9C%EB%93%9C%EB%A7%B5

    그 후에 아래 사이트 들을 이용하여 공부하시면 좋을것 같습니다^^

    https://www.opentutorials.org/course/1

    가장 유명한 초심자 가이드 생활코딩 사이트입니다.

    같은 이름으로 페이스북 페이지에서 많은 개발자들이 신규 개발자를 위하여 조언 및 실질적인 도움을 주니 활용하시면 아주 좋습니다.

    https://www.inflearn.com/

    유,무료 프로그래밍 강의가 정리되어있는 인프런 사이트 입니다.

    이벤트 등으로 유료강의를 저렴하거나 무료로 제공하는 경우도 많고 강의 질이 생각보다 매우 좋습니다.

    https://okky.kr/

    유저들끼리의 각종 Q&A, 테크에 관련한 것들이 잘 올라오는 커뮤니티 오키 입니다.

    관련하여 괜찮은 무료 강의들에 URL이 올라오는 경우도 많습니다.

    https://programmers.co.kr/learn/challenges?language=javascript

    많은 기업들이 실제 채용에도 반영하는 코딩테스트 및 강좌가 개설되어있는 프로그래머스 입니다.

    기본적으로 강좌도 좋지만 실제로 알고리즘을 접목한 문제를 풀어볼수있는 환경을 잘 제공해줍니다.

    https://level.goorm.io/

    구름 IDE 로 유명한 구름에 코딩테스트 도구입니다.

    사용자가 직접 알고리즘 문제를 만들어서 게시한다던가, 구름IDE와 접목하여 실시간으로

    다른 인원들과 채팅하며 코딩을 가능하게 해줍니다.

    영어로 짧고 가볍게 들어보고 싶으시다던가.

    페이스북, 트위터 등을 실제로 똑같이 만드는 "클론코딩" 등이 해보고 싶으시다면

    https://academy.nomadcoders.co/

    노마드코더 에서 강의를 들어보시는걸 추천드립니다.

    위에 말씀드린 사이트들을 활용하시어 공부하시면 많은 도움이 되실것으로 보입니다!^^


  • 우선 순위를 정하고 시작하시면 될 듯해요.

    단순하게 홈페이지를 만드는 것이지만 익혀두면 웹 애플리케이션 및 모바일 애플리케이션도 만들 수 있습니다.

    1. html
    마크업 언어로 익히기는 매우 쉽습니다. 먼저 접하셨다니 다행이고 웹의 기본 언어라고 할 수 있어요. 태그를 이용해서 기본적인 화면을 구성할 수 있죠.

    2. css

    html을 이용해서 화면을 구성하였다면 스타일을 주는 언어입니다. 간격, 너비, 높이, 색상 등 스타일링을 할 수 있죠. html과 연계하여 class, id, selector를 통하여 특정 html 태그에 스타일을 줄 수 있습니다.

    3. javascript

    html과 css를 이용하여 화면을 구성하였다면 javascript는 구성된 화면에 기능을 넣을 수 있습니다. html을 통하여 버튼을 만들었다면 버튼에는 css로 스타일을 주었고 이를 click 했을 때 알림창을 출력하게 하는 등 기능을 부여할 수 있습니다. 웹의 가장 기본적인 스크립트이며 파생된 많은 언어들과 framework가 많습니다. 나아가서는 VR도 구현이 가능합니다.

    위 세가지를 익히셨으면 가장 기본적인 지식들을 습득하신겁니다. 시간은 걸리겠지만 간단한 웹 페이지 정도는 만들 수 있죠. 다만 너무 오리지날 방식이기 때문에 이를 더 편하게 사용하고 더 나은 기능을 위해서 익혀야 할 기술입니다. 아래 기술은 위의 javascript를 기반으로 하기 때문에 javascript를 먼저 익히시는 걸 추천드려요.

    4. framework

    화면을 구성하는데 원시적으로 html과 css, javascript를 사용하여 구현하는 방법보다는 좀 더 쉽게 구현할 수 있습니다. framework에는 vue, react, angular 등 종류가 많습니다. 이중 하나를 채택하여 사용하시기 바랍니다.

    5. git, github

    git , github는 저장소와 같은 역할을 합니다. 내가 구현한 소스를 저장하고 형상을 관리할 수있어요. 구현을 잘 못했거나 과거로 되돌리기 위해서는 특정 저장소에 유지가 되어야합니다.

    front-end 기술은 너무나 다양하고 변화 역시 빠릅니다. 모든 걸 다 말할 수는 없지만 위 항목들만 익히신다면 기본적인 웹 페이지는 만드 실 수 있을꺼예요. 물론 Back-end의 기술은 또 다릅니다. 참고하시길 바랄께요