개발공부방법

공부방법이 사람마다 달라서 정답이 있는게 아닌데요. 단지 제가 공부하고 있는 방법을 공유드린다는 점 말씀드립니다. 저도 계속 지속적으로 배워나가고 있고 수정을 거듭하고 있어요.

일단 개발 공부 방법 말씀드리기에 앞서 가장 중요한 것은 절대적인 시간 투자입니다.
세부적인 로드맵은 여기 링크 잘 정리되어 있습니다. 로드맵

자 그럼 시작하겠습니다.

1. 검색

아래와 같은 검색 스킬은 실무에서 생산성과 문제 해결력을 크게 향상시켜 줍니다. 익숙해질수록 더 빠르게 원하는 정보를 찾을 수 있어요! 저같은 경우는 구글링을 통한 공식문서 검색 -> github issues -> Chat gpt -> reddit -> stackoverflow 순서로 검색을 이어나가요 다 찾아봤는데도 원하는 검색이 안나오면 일단 체크하고 넘어갑니다.

• 개발자라면 꼭 알아야 할 구글 검색 활용법을 정리했습니다. 자료 조사 시 생산성을 높일 수 있는 핵심 팁들을 모았습니다.

1. 구글링 스킬

• 핵심 키워드 중심 검색
  예: react useEffect cleanup, nodejs bcrypt error arm64, git revert vs reset
• 에러 메시지 그대로 검색
  예: TypeError: Cannot read properties of undefined (reading 'endsWith')
• 공식 문서 사이트를 지정한 검색
  예: axios cancel request site:axios-http.com

2. 공식 문서 활용

• 프레임워크나 라이브러리의 공식 사이트에서 정확한 정보 확인:
• 설치법, 사용법, 예제, API 설명 등을 확인할 수 있음

3. Stack Overflow

• 개발자 커뮤니티 기반 Q&A 플랫폼
• 실무에서 발생하는 다양한 문제에 대한 해결책이 공유됨
• 예: stackoverflow react useeffect setinterval

4. GitHub / Issues / Discussions

• 오픈소스 프로젝트의 최신 정보와 이슈 해결 방법 확인
• README.md, Issues, Discussions, Wiki 등 활용

5. YouTube / Velog / Tistory / Dev.to

• 특정 주제에 대한 예제, 설명, 강의 영상 확인 가능
• 시각적으로 학습하거나 흐름을 파악하는 데 유리함
• 예: react 상태관리 redux toolkit velog

6. AI 도구 활용 (예: ChatGPT)

7. 공식 커뮤니티 및 포럼

• Reddit, Dev.to, Discord 개발자 그룹, Slack 기술 채널 등
• 실무자의 노하우와 경험을 들을 수 있는 곳

2. 공식문서, 영어 공부 방법

1. 목적 파악 먼저

• 문서를 보기 전에 내가 무엇을 알고 싶은지 명확히 하기
  • 예: "React에서 useEffect 어떻게 쓰는 거지?", "이 API의 응답 형식은 뭐지?"
• 공식문서는 모든 정보를 다루기 때문에, 목적 없이 보면 길을 잃기 쉬움.

2. 목차 / 사이드 메뉴 먼저 보기

• 대부분 문서는 목차가 설치법, 사용법, 예제, API 설명 순서로 잘 정리되어 있음.
• 원하는 정보가 어디에 있을지 대략 구조를 파악하고, 거기서 필요한 부분만 골라서 읽기.

3. 예제 코드 먼저 보기

• 코드 예제를 먼저 보면, 문장보다 빠르게 개념을 이해할 수 있음.
• 예제만으로 감이 안 오면, 예제를 복붙해서 직접 실행해보기 (Playground, JSFiddle, StackBlitz, REPL 등 활용)

4. 모르는 단어 정리하기

• 기술 용어, 축약어, 파라미터 이름 등 처음 보는 단어는 검색해서 정리.
  • 예: "idempotent", "throttle", "hydration", "polyfill"
• 구글, MDN, StackOverflow, 영어사전 활용

5. 전체를 읽으려고 하지 말기

• 대부분 문서는 백과사전처럼 방대해서 처음부터 끝까지 읽는 건 비효율적임.
• 필요한 키워드, 메서드, 파트만 골라서 집중적으로 읽기

6. 영어 문장 해석 팁

• 공식문서는 대부분 영어로 되어 있으므로 영어 문장 해석력도 중요
  • 함수 시그니처 → Returns a Promise that resolves when... → 리턴값 설명
  • If X is true, then Y will be triggered. → 조건/결과 구조 익히기
• 문장 구조에 익숙해지면 속도와 정확도 모두 향상됨
• 영어로 되어있는 개발 관련 글들을 많이 읽습니다. 개발자 커뮤니티
• 깃허브 영어 공부 방법 저장소 추천 영어 공부 방법 자료들

3. 소스코드 독해 방법

1. 전체 흐름 파악하기

목적부터 이해하자

• 해당 코드가 무엇을 해결하고자 하는지 목적부터 파악하세요.
• README, 주석, 함수 이름, 변수 이름 등을 참고합니다.
• 별도의 API 문서나 Wiki가 있다면 반드시 참고하세요.

구조를 먼저 본다

• 폴더 구조와 파일의 역할을 빠르게 훑어보며 아키텍처를 이해합니다.
• 어떤 파일이 어떤 기능을 담당하는지 파악하는 게 중요합니다.

2. 주요 진입점(Entry Point)부터 따라가기

웹 애플리케이션의 경우

• main.js, index.tsx, App.js 또는 server.js와 같은 파일이 시작점입니다.
• 여기서부터 함수나 컴포넌트 호출을 따라가며 흐름을 추적합니다.

백엔드의 경우

• API 라우터 → 서비스 → 레포지토리 순으로 코드를 추적합니다.

3. 함수 단위로 분석하기

하나의 함수에 집중

• 함수의 이름, 인자, 리턴값을 먼저 확인합니다.
• 외부에서 어떤 데이터를 받고, 어떤 처리를 하며, 무엇을 반환하는지를 파악합니다.

모든 소스코드의 비즈니스 로직을 다 파악하면 시간이 너무 오래 걸려요.
본인 필요한 부분의 함수 인자, 출력값, 이름 정도로 유추하고 넘어가세요. 100% 다 이해하려고 하지 말아요. 컴퓨터도 디버깅 할 때 step over ( 함수는 그냥 지나침 ), step into ( 함수 안으로 들어감) 으로 구분해 놓습니다.

사람이 해석 할 때도 마찬가지에요. 해당 함수가 병목현상의 주요 원인이라던가 핵심이 되는 함수일 때 비즈니스 로직을 순차적으로 해석해 나아갑니다.

반복되는 패턴 찾기

• 동일한 방식으로 작성된 함수나 로직은 하나를 제대로 이해하면 나머지도 쉽게 해석할 수 있습니다.

4. 변수와 타입 추적

• 변수는 정의된 위치와 사용하는 위치를 추적하면서 데이터의 흐름을 이해합니다.

5. 디버깅 도구 활용

• 브라우저 디버깅 도구 (F12, DevTools)
• IDE 디버깅 (breakpoint, step over, step into)
• console.log를 이용한 수동 디버깅도 여전히 유용합니다.

6. 소스코드 리뷰 & 기록 습관

• 해석한 코드는 자신만의 말로 정리해보세요. 블로그, Notion, GitHub Wiki 등을 활용해 문서화하는 습관이 도움이 됩니다.
• 시간 부족하고 시급한 문제라면 해결부터 합니다.
• 오픈소스 프로젝트에서는 Pull Request, Issue 기록도 큰 힌트가 됩니다.

7. 리팩토링 마인드로 보기

• "이 코드가 더 깔끔하려면 어떻게 바꿀 수 있을까?"라는 질문을 하며 읽어보면 더 깊이 있는 이해가 가능합니다.

4. 컴퓨팅 사고

컴퓨팅 사고(Computational Thinking)란?

컴퓨팅 사고는 문제를 컴퓨터처럼 논리적이고 체계적으로 해결하는 사고방식입니다. 단순히 코딩 능력이 아닌, 문제를 어떻게 분해하고, 규칙을 설정하고, 재사용 가능한 방식으로 해결하는지를 포함합니다.

• 컴퓨팅 사고의 4가지 핵심 요소

1. 분해(Decomposition)

• 큰 문제를 작은 문제로 나누는 것
• 예: TODO 앱을 만들 때 → "할 일 목록", "할 일 추가", "완료 상태 토글"로 나누기

2. 패턴 인식(Pattern Recognition)

• 유사한 문제나 패턴을 발견하는 것
• 예: 모든 할 일 항목은 텍스트 + 체크 여부라는 공통 패턴이 있음

3. 추상화(Abstraction)

• 핵심만 남기고 불필요한 정보를 제거하는 것
• 예: 사용자 인터페이스는 단순히 input + list면 충분함 (날짜, 카테고리 등은 나중에 추가 가능)

4. 알고리즘(Algorithm)

• 문제 해결을 위한 단계별 절차 정의
• 변수, 타입, 조건, 반복, 함수로 생각하여 표현
• 예: 할 일 추가 → 입력 → 저장 → 화면에 표시

• 예시: TODO 애플리케이션과 컴퓨팅 사고

요구사항

1. 할일을 추가하고 페크하거나 삭제할 수 있는 기능
2. 이러한 일들은 일정 목록에 저장
3. 사용자가 완료한 일만 볼 수 있는 기능을 추가

아래는 JavaScript로 만든 아주 간단한 TODO 앱 예시입니다. 각 단계는 컴퓨팅 사고 요소와 연결되어 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
  </head>
  <body>
    <h1>My TODO List</h1>
    <input id="todoInput" type="text" placeholder="할 일을 입력하세요" />
    <button onclick="addTodo()">추가</button>
    <ul id="todoList"></ul>

    <script>
      const todoList = [];

      function addTodo() {
        const input = document.getElementById("todoInput");
        const text = input.value.trim();
        if (text === "") return;

        const todo = {
          id: Date.now(),
          text: text,
          done: false
        };

        todoList.push(todo);
        input.value = "";
        renderList();
      }

      function toggleTodo(id) {
        const todo = todoList.find(t => t.id === id);
        if (todo) todo.done = !todo.done;
        renderList();
      }

      function renderList() {
        const listElement = document.getElementById("todoList");
        listElement.innerHTML = "";

        todoList.forEach(todo => {
          const li = document.createElement("li");
          li.textContent = todo.done ? `[완료] ${todo.text}` : todo.text;
          li.onclick = () => toggleTodo(todo.id);
          listElement.appendChild(li);
        });
      }
    </script>
  </body>
</html>

• 이 코드에서 컴퓨팅 사고 적용 예시

5. 응용, 적용하는 방법

본인이 거창하게 무에서 유를 만들려고 하지 말고 일단 잘 돌아가는 남의 코드를 가져오세요. 되도록이면 공식문서나 github star 별 갯수가 높은 것의 모듈을 가져오는게 좋습니다. 그럴려면 평소에 공식문서나 많은 소스코드를 머릿속에 어느정도는 기억하고 있어야 겟지요.

무튼 세탁기 있는데 손빨래 할 필요 없는거에요. 어차피 남이 만들어놓은 코드도 또다른 남으로부터 발췌해온 소스코드에요. 그러한 소스코드에서 본인 환경에서 돌아가게 만드는 것부터 시작합니다.

이후 점진적으로 변수, 함수 네이밍, 숫자, 상수 정의, 구조, 패턴, 커스텀 등등으로 살을 붙여 나가는 것입니다. 이러한 과정에서 100% 이해하려고 하지 말고 일단 돌아가는데 주안점을 가져야 해요.

다시 한번 말씀드리지만 가장 중요한 것은 추상화 입니다. 바퀴를 다시 발명하려고 하지 말고 재사용해서 더 새로운 것을 창조해내는 것이 개발문화의 꽃인 공유 문화입니다. github 도 그러한 문화로 인해 만들어진 제품이고요.