비전공자 프론트엔드 공부하는 방법에 대해 질문있습니다.

Question

안녕하세요. 저는 비전공자로 프론트엔드 개발자를 목표로 공부하고 있습니다.

예전에 국비학원을 수료한 후 온라인 강의를 들으며 HTML, CSS, JavaScript, React를 순서대로 공부했습니다. CSS에서는 display, margin 등의 속성을 인강을 보고 따라 해보고 넘어갔고, JavaScript와 React도 기본 문법을 배운 뒤 강의를 따라 프로젝트를 만드는 방식으로 공부했습니다.

하지만 시간이 지나면 배운 내용을 자주 잊어버렸고, 강의를 따라 만드는 것은 가능했지만 혼자 프로젝트를 만들려고 하면 어디서부터 시작해야 할지 막막했습니다. 결국 다시 처음부터 강의를 듣는 일이 반복되면서 공부 효율도 떨어졌습니다. 최근에는 개인적인 사정으로 약 두 달간 공부를 쉬었다가 다시 시작하려고 합니다.

그래서 이번에는 공부 방법을 바꿔보려고 합니다. 예를 들어 CSS에서 display를 배웠다면 바로 혼자 예제를 만들어 적용해 보고, 다음 속성도 같은 방식으로 연습하는 것이 더 효과적인지 궁금합니다. 또한 JavaScript도 똑같이 속성을 공부하고 혼자 속성을 공부하고 다음 속성으로 진도를 나가고 React도 마찬가지로 하면 되는지 궁금하고 공부한 후에는 JavaScript만으로 간단한 프로젝트를 만들고, React를 공부한 후에는 React 프로젝트를 만들어 보려고 합니다.

다만 어떤 프로젝트를 만들어야 할지 아이디어가 잘 떠오르지 않습니다. 요즘에는 실제 서비스 수준의 프로젝트가 중요하다고 하는데, 어떤 주제를 선택해야 할지도 고민입니다. 그래서 다음과 같은 부분에 대해 조언을 부탁드립니다.

1. 효율적인 공부방법과 학습 순서.

2. 문법을 배운 후 어떤 방식으로 복습하고 연습하면 좋은지.

3. 자바스크립트와 리액트로 만들면 좋은 개인 프로젝트 (그리고 이런 프로젝트 아이디어는 어떻게 떠오르고 만드는지)

4. 포트폴리오에 도움이 되는 프로젝트를 기획하는 방법.

가능하다면 추상적인 조언보다는 초보자도 그대로 따라하면서 실력을 키울 수 있을 정도로 구체적인 공부 방법과 프로젝트 진행 순서를 알려주시면 감사하겠습니다.

Answer 1

가장 좋은 방법은 배운 즉시 아주 작은 기능이라도 직접 만들어보는 것이죠

예를 들어 자바스크립트로 시계나 메모장 같은 진짜 간단한 것부터

내손으로 끝까지 만들어보는 거죠. 처음에 엉성해도 괜찮아요

아이디어가 안 떠를 땐 우리가 매일 쓰는 다이어리, 가계부, 혹은 자주 가는 쇼핑몰 화면을

그대로 따라 만들어 보는 거죠

요즘 유행하는 당큰마켓이나 배달의 민족 같은 서비스를 내 방식대로 쪼개서

한 두 가지 핵심 기능만 돌아가게 만드는 게 취업할 때 포트폴리오로도 좋은 점수를 받더라고요