levi

리바이's Tech Blog

Tech BlogPortfolioBoard
AllActivitiesJavascriptTypeScriptNetworkNext.jsReactWoowacourseAlgorithm
COPYRIGHT ⓒ eunwoo-levi
eunwoo1341@gmail.com

📚 목차

    어떻게 하면 새로운 지식을 효율적으로 학습할 수 있을까?

    ByEunwoo
    2025년 6월 1일
    activities

    1. 자신의 과거 학습(v1) 돌아보기

    주로 새로운 지식을 학습하면 개인 기술 블로그에 새롭게 배웠던 지식에 대해서 정리하고 이에 관련된 다양한 글들을 읽으면서 deepdive를 하려고 노력했다.

    아무래도 개인 기술 블로그인 만큼 미래의 ‘나’가 같은 내용에 대해서 관련 지식들이 필요할 때 다시 내가 썼던 블로그를 찾아보고 효율적으로 복습하기 위해서 내용들을 가독성이 좋고 도움이 되는 필요한 지식들을 잘 정리하려고 했다.

    이렇게 노력을 들이면서 글을 쓰면 머릿속에서 해당 새로운 지식들이 잘 흡수되어서 새로운 지식을 익히는데 크게 도움이 되는 것 같다.


    2. 학습 방법 개선해보기 (v2)

    개인 기술 블로그에 새로운 지식들을 정리하고 기술할 때 AI 혹은 작성하는 새로운 지식에 대한 많은 글들을 참고하였다.

    하지만 주로 적힌 내용들을 정리하고 추가하는 방식으로 주로 하였기 때문에 ‘나만의 색깔’이 나의 기술 블로그에 드러나지 않았다.

    따라서 배우고자 하는 지식에 대해서 글을 정리하고 추가하되, 나의 생각과 의견들도 글에 잘 녹여내서 나만의 의미있는 글로 만드는 것이 중요한 것 같다.

    추가적으로, 새로운 기술에 대해서 글을 작성할 때 글을 그냥 읽고 이해하는 것과, 이 기술을 직접 익히고 action으로 해보는 것은 큰 차이가 있다고 생각한다.

    예를 들어 브라우저에서 혹은 test를 하기 위해 server 환경에서 API를 mocking하기 위해서 새롭게 msw 에 대한 개념들를 배웠다고 해보면, msw 를 직접 세팅을 구축해고 이를 활용하기 위해 직접 해봐야 한다.

    그래야 새롭게 배운 지식들이 나에게 맞게 잘 흡수되고 미래에 기억이 잘 남는다고 생각한다.

    3. 학습을 돌아보고 v3 도출해보기


    1. 개인 기술 블로그 글에 ‘나만의 색깔’ 잘 녹이기
    2. 새롭게 배운 기술들을 직접 action해보고 부딪혀보기

    4. AI 와 대화하며, 자신에게 잘 맞는, 효율적으로 보이는 새로운 지식 학습 방법을 조사

    Chat GPT 링크: https://chatgpt.com/c/683d3472-44a0-8008-ad26-16d1ebe0db1d

    🔍 세부 피드백

    1. ✅ v1 회고에 대한 긍정적 강화

    • 단순 요약이 아닌, 블로그를 미래의 나를 위한 복습 도구로 썼다는 점이 매우 효과적인 전략입니다.
    • 이 방식은 “인지 부하를 낮춘 복습형 학습 전략”에 해당하며, 많은 학습과학 전문가들도 권장합니다 (ex: Barbara Oakley, Ali Spittel).

    💡 제안: 블로그 정리를 카테고리화 + 인덱싱 해두면 향후 검색 효율도 높아질 수 있습니다.

    예: /hooks/useEffect-vs-useLayoutEffect, /testing/msw-mock-setup


    2. ⚠️ v2의 문제 인식 → 구체화 필요

    • "나만의 색깔이 부족했다"는 자각은 중요하지만, 이를 어떻게 드러낼지에 대한 전략이 부족합니다.

    💡 제안 1: 글을 쓸 때 "배운 내용 요약" + "내가 해본 것" + "느낀 점" 구조를 활용해보세요.

    예시:

    ## 1. 개념 요약
     
    MSW는 실제 API를 흉내내는 브라우저/Node 환경의 mocking 도구이다.
     
    ## 2. 직접 해본 것
     
    - React Testing Library와 연동하여 제품 목록 API를 모킹
    - 개발 환경에선 `setupWorker`, 테스트 환경에선 `setupServer` 사용
     
    ## 3. 느낀 점
     
    실제 요청 없이도 테스트가 가능하다는 점에서, 서버 상태를 자유롭게 조작할 수 있어 매우 유용했다.

    💡 제안 2: “의견”을 담는 방식으로 TIL이 아닌 TIL+POV(Point of View) 형식을 써보세요.

    글 말미에 "이 기술을 실제 프로젝트에 어떻게 쓸 수 있을까?"라는 관점 제시


    3. ✅ v3에서 제시한 2가지 개선안: 명확하고 타당함

    • *"나만의 색깔 넣기"**와 **"직접 부딪혀보기"**는 장기적으로 깊이 있는 학습을 가능케 하는 핵심 전략입니다.
    • 특히 후자는 Josh Kaufman이나 Barbara Oakley가 강조하는 실천적 학습 원칙에 정확히 부합합니다.

    🧭 다음 단계 제안 (v4 초안)

    위 피드백을 바탕으로 다음과 같은 v4 학습 전략을 구성해 보실 수 있습니다:


    📘 학습 방법 v4: ‘기록 + 실행 + 사고 + 공유’ 루프 만들기

    1. 정리: 새로운 기술을 학습하면 블로그에 요약 + 코드 예시 + 생각 정리 구조로 기록
    2. 실행: 실제로 관련 코드를 작성해보며 작은 프로젝트 혹은 실험 실행
    3. 사고: "이 기술은 언제, 왜 필요한가?" / "비슷한 기술과 비교하면?" 등을 스스로 묻기
    4. 공유: 블로그 글을 공개하고, GitHub/Gist/Dev.to 등에 정리해 외부 피드백 받기

    ✅ 마무리 요약

    • 회고(v1~v3)는 훌륭한 자기성찰 흐름을 갖추고 있음
    • 개선 방향은 타당하나, "어떻게" 개선할지 전략이 구체화될 필요 있음
    • 다음 단계로 정리 → 실행 → 사고 → 공유의 루프를 구성해 실천 전략을 명문화할 것

    5. 우아한테크코스 시지프 코치의 학습 방법

    - Contextual Learning (목표지향, 문제 해결 중심 학습)이 기술이 문제해결을 위해 꼭 필요한 것이어야 한다. (why)
    - i+1 가설자신의 지식(i) 보다 딱 1단계 어려운 것을 학습하고 시도해야 한다.단번에 프로젝트에 적용하는 것이 아니라, 쉽게 구현할 수 있는 Counter/Timer/TodoList 에 적용해야 한다.
    - Learning By Doing (피드백 루프)단순한 예시에 적용해보고 실행해보며 학습한다.AI 에게 빠르게 피드백 받으며 학습한다.
    - 비교와 맥락 중심 연결 학습- React 와 JS 렌더링은 무엇이 다르지?- RTL 과 cypress 는 뭐가 다르지?- useReducer 랑 useState 는 뭐가 다르지?

    6. reference 를 기반으로 새로운 지식 학습 방법 v2

    1. 🎯 Step 1: Contextual Learning – "이 기술이 왜 필요한가?"

    새로운 기술을 배우기 전에 반드시 스스로에게 다음을 물어보세요:

    “이 기술이 어떤 문제를 해결하기 위해 존재하는가?”

    실천 방법

    • 학습 전에 꼭 "Why 이 기술인가?" 정리해보기
    • 실제 겪었던 이슈와 연결해보기 (예: 리렌더링 이슈 → React.memo)
    • 기술 소개 블로그를 읽되, "실전에서 어떤 문제를 해결했는지” 중심으로 요약

    예시

    기술학습 전 Why 질문
    React.memo리스트 리렌더링이 너무 잦은데, 어떻게 최적화할 수 있을까?
    MSW테스트에서 실제 API 없이도 제대로 동작 확인하고 싶다
    useReducer상태가 많아지고 복잡해졌을 때 useState로 감당이 안 된다

    2. 🔼 Step 2: i+1 가설 적용 – "너무 어렵지 않되, 도전적일 것"

    지금의 나(i)보다 딱 1단계 어려운 것만 시도하세요.

    갑자기 '실무형 CRUD 앱'부터 하려 들지 말고, 작은 예제부터 시작하세요.

    실천 방법

    • 처음 접한 기술은 TodoList, Timer, Counter 수준으로 응용
    • 기술 문서를 처음부터 끝까지 읽지 말고 “필요한 조각만” 적용
    • AI에게 "이 기능을 간단한 TodoList에 넣어줄 수 있나요?" 식으로 질문

    예시

    기술i+1 적용 예시
    react-queryTodoList에 서버 데이터 캐싱 + 로딩 UI 적용
    useCallback버튼 클릭할 때마다 console 찍히는 것 방지
    custom hook폼 상태 관리하는 useForm 만들기

    3. 🛠 Step 3: Learning By Doing + 피드백 루프

    코드로 부딪히며 배우고, 즉시 피드백 받기 → 수정 → 반복

    머릿속 이해보다 오류, 시행착오, 실행결과가 훨씬 강력한 학습 도구입니다.

    실천 방법

    • 기술 블로그를 읽으면, 즉시 코드로 재현하고 실험
    • 잘 안 되면 AI에게 바로 "왜 안 되는지", "내 코드가 맞는지" 물어보기
    • 테스트 코드로 직접 확인하거나, 의도된 동작을 문서화

    예시 루프

    markdown
    복사편집
    1. useRef로 focus 주는 코드 작성
    2. 콘솔 찍으며 DOM과의 상호작용 확인
    3. 제대로 안 되면 ChatGPT에 코드 공유 → 디버깅 도움 요청
    4. 정상 동작하면 → 내 블로그에 정리 (왜 이렇게 되는지까지)
    

    4. 🔄 Step 4: 비교와 연결로 학습 고도화

    유사 기술, 대안 기술과 비교하며 학습하면 기술의 맥락과 쓰임새가 명확해집니다.

    실천 방법

    • 새로 배운 기술은 항상 기존 것과 비교해서 정리
    • "비슷해 보이는 것들"을 표 형식으로 정리해두기
    • 나만의 기술 지도 또는 마인드맵 만들어두기

    예시

    항목useStateuseReducer
    사용 시점단순 상태복잡하거나 다단계 상태
    상태 구조단일 값 또는 간단한 객체다중 상태, 로직이 많은 경우
    코드 분리어려움액션/리듀서로 구조화 가능

    또는

    항목RTL (React Testing Library)Cypress
    위치JS 단위/통합 테스트E2E 브라우저 테스트
    장점빠르고 컴포넌트 중심실제 사용자 경험 검증
    단점전체 흐름 검증 어려움느리고 설정 복잡

    🔁 요약: 반복 가능한 학습 루틴

    단계질문실천
    Contextual왜 이 기술을 배우는가?문제/목표 중심 정의
    i+1지금의 나보다 조금 어려운가?쉬운 예제부터 적용
    Doing + Feedback실행하고 피드백 받았는가?코드로 실험 → AI에게 검토 요청
    비교와 연결이건 기존 것과 어떻게 다른가?표 또는 마인드맵 작성

    ✨ 나에게 꼭 맞는 학습 철학 한 줄 정리

    “내게 필요한 기술만, 내 수준보다 조금 어려운 걸, 직접 해보고, 연결해서 내 것으로 만든다.”

    Posted inactivities
    Written byEunwoo