현고미 노트(H-gomi's Note)

와이어프레임은 각 페이지의 레이아웃과 정보 배치를 시각적으로 표현하는 작업이야.아래에 네 포트폴리오 웹사이트의 주요 페이지들에 대한 와이어프레임 구조를 텍스트로 먼저 설명할게. 각 페이지마다 핵심 콘텐츠가 어떻게 배치될지, 그리고 사용자 흐름에 맞춰 정보를 제공하는 구조를 단계적으로 나눠보자. 1. Home (홈 페이지) 구성 요소:  • 헤더: 상단에 네 이름과 로고, 네비게이션 메뉴 (About, Projects, Blog, Contact). • 영웅 섹션 (Hero Section): 큰 배경 이미지 또는 네 대표 프로젝트의 이미지, 짧은 한 줄 소개(예: “Frontend Developer with 3 Years of Experience”). • 대표 프로젝트 하이라이트: 프로젝트 썸네일 2~3개,..

코딩 공부노트/다시 새출발~! 2024. 10. 12. 13:00

사이트 맵 및 정보 구조 (IA) 설계를 시작하는 것은 웹사이트의 핵심 콘텐츠와 사용자 흐름을 정의하는 중요한 단계야. 이를 통해 페이지 간의 연결성, 정보의 우선순위, 그리고 **사용자 경험(UX)**을 시각적으로 정리할 수 있어. 효율적인 정보 구조 설계로 사용자가 필요한 정보를 쉽게 찾을 수 있게 해야 해. 여기 단계별로 시작할 수 있는 방법을 설명할게. 1. 사이트의 목적과 핵심 콘텐츠 정의 먼저, 포트폴리오 웹사이트의 목적과 담아야 할 핵심 콘텐츠를 명확히 해야 해. 포트폴리오는 네 경력과 역량을 보여주는 중요한 도구이기 때문에, 다음과 같은 콘텐츠를 고려해야 해.  • 홈페이지: 개인 소개, 대표 프로젝트 및 블로그 글 하이라이트. • 자기소개 / 이력서: 경력, 기술 스택, 교육 배경 등을 ..

코딩 공부노트/다시 새출발~! 2024. 10. 11. 13:00

네이버 블로그 RSS 2.0 활용해서 그누보드에 최신글 5개 출력하기방법은 간단하다1. 최신글을 불러올 블로그의 RSS 2.0을 찾아서 클릭한다.2. 이동한 RSS 2.0 페이지의 URL을 복사한다. 3. 그누보드에서 블로그 글을 출력하는 영역에 아래 코드를 입력한다. 이 때 RSS 2.0 URL을 입력하여 적용하면 완성!(최신글 출력 방식은 기호에 맞춰서 활용하길 바란다.) '; $count = 0; foreach ($rss->channel->item as $item) { if ($count >= 5) break; // 5개만 출력 echo ''; echo 'link . ..

코딩 공부노트/Gnuboard5 2024. 10. 11. 11:20

프로젝트의 실행 계획을 체계적으로 수립하고 개발에 착수하기 전에 명확한 틀을 설정하는 것이 중요해. 다음 단계를 순차적으로 진행하면 좋겠어. 다음 단계 1. 사이트 맵 및 정보 구조 (IA) 설계  • 사이트 맵 작성: 웹사이트의 각 페이지와 섹션을 정리해 계층 구조를 시각화해야 해. 여기서 중요한 것은 사용자 경험을 고려해 필요한 정보가 빠르게 찾아질 수 있도록 배치하는 거야. • 예시: • 홈 • 자기소개 / 이력서 • 프로젝트 • 블로그 • 연락처 • 내비게이션 설계: 메뉴 항목들이 직관적이어야 하며, 각 섹션 간의 흐름이 자연스럽게 이어져야 해. 상단 메뉴, 푸터 등 기본적인 내비게이션 요소를 고려해. 2. 와이어프레임 및 기본 레이아웃 설계  • 와이어프레임: 사이트의 기본 레이아웃을 와이어프레..

코딩 공부노트/다시 새출발~! 2024. 10. 10. 15:37

Q1: 페르소나 중에서 네가 가장 공략하고 싶은 대상은 누구이며, 이를 위한 전략은 무엇이니? 가장 공략하고 싶은 대상은 페르소나 1, 김현우 – IT 기업 채용 담당자와 페르소나 4, 장유진 – 프론트엔드 개발팀 리더일 거야. 이유는 이들이 React와 같은 최신 프론트엔드 기술을 활용할 수 있는 사람을 찾고 있고, 실무에서 빠르게 적응할 수 있는 개발자를 원하기 때문이야. 이를 위한 전략은:  • React 기반 프로젝트를 포트폴리오의 핵심으로 두고, 상태 관리 (예: Redux), 컴포넌트 재사용, 성능 최적화 등 최신 프론트엔드 기술을 효과적으로 활용한 사례를 보여주는 것. • 지속적인 학습을 강조해, 블로그 섹션에서 React 학습 과정과 해결한 문제, 새로운 기술 트렌드를 다루며 채용 담당자에..

코딩 공부노트/다시 새출발~! 2024. 10. 9. 13:59

포트폴리오를 기획할 때, 페르소나는 목표로 하는 사용자(채용 담당자 및 잠재적 팀원)를 구체적으로 정의하는 데 중요한 역할을 해.이를 통해 어떤 요소를 중점적으로 보여줘야 할지를 명확히 할 수 있어. 아래 5명의 페르소나를 예로 들어볼게. 페르소나 1: 김현우 – IT 기업 채용 담당자  • 나이: 35세 • 직무: IT 기업의 인사팀 리더 • 관심사: 지원자의 성장 가능성, 새로운 기술 트렌드에 대한 이해, 실제 실무 적용 능력 • 목표: 실무에서 곧바로 기여할 수 있는 프론트엔드 개발자 채용 • 포인트: 김현우는 지원자의 기술 역량뿐만 아니라 지속적인 학습과 자기 발전을 중요시한다. 블로그에서 기술 관련 학습 기록과 포트폴리오에서 React 같은 최신 기술을 활용한 프로젝트를 보여줌으로써, 네가 새로..

코딩 공부노트/다시 새출발~! 2024. 10. 6. 23:51

Mac에서 Git 설치 및 기본 설정 가이드 Git은 버전 관리 도구로, 소스 코드를 효율적으로 관리하고 협업할 수 있도록 돕는 필수 도구입니다. 이 글에서는 Mac에서 Git을 설치하고 기본적인 설정을 완료하는 방법을 단계별로 안내하겠습니다. 1. Git 설치 Mac에 Git을 설치하는 방법은 여러 가지가 있지만, Homebrew를 사용하면 쉽게 설치할 수 있습니다. Homebrew는 macOS에서 패키지를 관리할 수 있는 도구로, Git 설치에도 유용합니다. 1-1. Homebrew 설치 여부 확인 터미널을 열고 다음 명령어를 입력하여 Homebrew가 설치되어 있는지 확인합니다.brew --version 만약 설치되지 않았다면, 아래 명령어로 설치할 수 있습니다./bin/bash -c "$(curl..

코딩 공부노트/Git 2024. 10. 3. 17:50

React Hook이란? - 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. https://ko.legacy.reactjs.org/docs/hooks-intro.html useEffect 란? - Class Comonent의 Life Cycle을 사용하게 해줌 * Life Cycle은 크게 3단계로 구성 (Mounting -> Upda..

코딩 공부노트/React 2023. 11. 28. 17:30