반응형
인기글
- [Figma] Figma 주요 기능별 사용법 - 네비게이션 설계 이제 5단계인 네비게이션 설계를 진행하겠습니다. 이 단계에서는 링크를 설정하고 컴포넌트를 사용하는 방법을 배우게 됩니다.5. 네비게이션 설계5.1 링크 설정주요 기능:링크는 페이지 간 네비게이션을 가능하게 합니다.사용법:프로토타입 모드로 전환: 상단 메뉴에서 Prototype 탭을 클릭하여 프로토타입 모드로 전환합니다.링크 설정: 요소를 선택하고 링크 아이콘을 클릭하여 연결할 페이지나 프레임을 선택합니다.예시:네비게이션 바의 메뉴 항목에 링크를 설정합니다.실습:Prototype 탭에서 네비게이션 바의 메뉴 항목을 선택합니다.링크 아이콘을 클릭하여 다른 프레임이나 페이지로 연결합니다.실습 단계별 스크린샷:프로토타입 모드로 전환:피그마 상단 메뉴에서 Prototype 탭을 클릭합니다.링크 설정:네비게이션 바..
- [Figma] Figma 주요 기능별 사용법 - 아이콘 및 이미지 추가 이제 4단계인 아이콘 및 이미지 추가를 진행하겠습니다. 이 단계에서는 아이콘을 사용하고 이미지를 추가하는 방법을 배워보겠습니다.4. 아이콘 및 이미지4.1 아이콘 사용주요 기능:아이콘은 시각적 요소를 추가하여 디자인을 보완합니다.사용법:아이콘 라이브러리 검색: 피그마 커뮤니티에서 Components 탭을 클릭하고 Icons를 검색하여 무료 아이콘 라이브러리를 찾습니다.아이콘 추가: 원하는 아이콘을 선택하고 프로젝트에 추가합니다.예시:네비게이션 바에 사용할 아이콘을 추가합니다.실습:피그마 커뮤니티에서 Icons를 검색하여 무료 아이콘 세트를 찾습니다.원하는 아이콘을 선택하고 Homepage 프레임에 추가합니다.실습 단계별 스크린샷:아이콘 라이브러리 검색:피그마 상단 메뉴에서 Assets 탭을 클릭합니다.C..
- [환경설정] Mac에 GitHub 연동 Mac에 GitHub 연동하기 1. 계정 선택후 우측 탭의 Settings 선택 2. 좌측의 Developer settings 탭 선택 3. 좌측 탭의 Personal access token > Token(classic) 선택 후 Generate new token 선택 4. Note에 이름 입력후 Expiration(만료 기간) 선택 후 Select scopes에서 원하는 권한 선택 후 create token으로 토큰 생성 5. 생성된 token 복사 6. GitHub 계정 초기 설정 git config --global user.name "이름" git config --global user.email "깃허브 이메일" 7. GitHub 로그인 Users: Password: Mac에 SSH로 GitHub ..
- [웹 디자인] 24일차: 네비게이션 바 디자인 네비게이션 바란?네비게이션 바(Navigation Bar)는 웹사이트에서 사용자가 주요 페이지나 섹션으로 쉽게 이동할 수 있도록 도와주는 메뉴입니다. 잘 설계된 네비게이션 바는 웹사이트의 가독성과 사용자 경험을 향상시킵니다.네비게이션 바의 기본 요소로고: 웹사이트의 로고를 표시합니다.메뉴 항목: 주요 페이지나 섹션으로 이동할 수 있는 링크입니다.검색 창: 검색 기능을 제공합니다.버튼: 로그인, 회원가입 등의 버튼입니다.네비게이션 바 디자인 예제HTML 구조 Logo Home About Services Contact Login Sign Up Home ..
- [개발 규칙] 협업 규칙 협업을 위해 JavaScript 코딩 컨벤션을 명확히 정의하고, 이를 팀 내에서 일관되게 사용하기 위해 다양한 도구와 방법을 활용할 수 있습니다. 아래는 협업을 위한 구체적인 방안입니다.1. 코드 스타일 가이드 설정팀 내에서 사용할 코드 스타일 가이드를 선택하거나 정의합니다. Airbnb, Google, Standard 등 유명한 스타일 가이드를 참고할 수 있습니다. 스타일 가이드 문서를 작성하고 공유합니다.2. 린터(Linter)와 포매터(Formatter) 설정코드 스타일을 자동으로 검사하고 포맷팅하는 도구를 설정합니다.ESLint 설정ESLint는 코드 스타일을 강제하기 위한 린터입니다. 프로젝트 루트에 .eslintrc.js 파일을 생성하고 다음과 같이 설정합니다:module.exports = {..
최신글
- [코딩 테스트] 30일차: 실전 모의고사 - 최종 준비 최종 준비와 종합 정리이번 글에서는 코딩 테스트 준비를 마무리하는 단계로, 그동안 배운 내용을 종합 정리하고 최종 준비를 진행하겠습니다. 코딩 테스트 당일의 긴장을 풀고 최상의 상태로 시험에 임할 수 있도록 몇 가지 팁을 제공하겠습니다.1. 학습 내용 종합 정리지금까지 배운 자료구조와 알고리즘을 한 번 더 정리합니다.자료구조: 배열, 리스트, 스택, 큐, 트리, 그래프, 해시맵 등알고리즘: 정렬, 탐색, 그리디 알고리즘, 동적 프로그래밍, 분할 정복, 백트래킹 등2. 최종 준비 팁시간 관리: 문제를 풀 때 시간을 효율적으로 관리하는 연습을 합니다.문제 이해: 문제를 꼼꼼히 읽고, 요구사항을 정확히 이해합니다.단계별 접근: 문제를 더 작은 부분 문제로 나누어 단계별로 해결합니다.테스트 케이스 작성: 다양한..
- [코딩 테스트] 29일차: 실전 모의고사 - 모의 면접과 코드 리뷰 2 모의 면접과 코드 리뷰 2이번 글에서는 모의 면접과 코드 리뷰를 통해 코딩 테스트 준비를 마무리하겠습니다. 실제 면접 상황을 연습하고, 코드 리뷰를 통해 피드백을 받는 과정을 통해 문제 해결 능력을 더욱 향상시킬 수 있습니다.1. 모의 면접 준비모의 면접을 통해 실제 면접 상황에서의 긴장감을 줄이고, 자신감을 향상시킬 수 있습니다.면접 환경 조성: 실제 면접과 유사한 환경을 조성합니다.질문 리스트 준비: 자주 묻는 코딩 문제와 기술 질문 리스트를 준비합니다.면접관 역할: 친구나 동료에게 면접관 역할을 맡겨 실제 면접 상황을 연출합니다.2. 코드 리뷰와 피드백코드 리뷰는 작성한 코드를 다른 사람에게 검토받아, 개선할 점을 찾고 더 나은 코드를 작성하는 데 도움을 줍니다.코드 공유: 작성한 코드를 공유하고,..
- [코딩 테스트] 28일차: 실전 모의고사 - 제한 시간 내 문제 풀기 2 제한 시간 내 문제 풀기 2이번 글에서는 제한 시간 내에 문제를 해결하는 연습을 계속합니다. 다양한 유형의 문제를 통해 실전 감각을 익혀보세요. 아래 예제 문제들을 제한 시간 내에 풀어보세요.문제 1: 세 수의 합 (Three Sum)주어진 배열에서 세 수의 합이 0이 되는 모든 고유한 조합을 찾으세요.예제입력: [-1, 0, 1, 2, -1, -4]출력: [[-1, 0, 1], [-1, -1, 2]]JavaScriptfunction threeSum(nums) { nums.sort((a, b) => a - b); const result = []; for (let i = 0; i 0 && nums[i] === nums[i - 1]) continue; let left = 0, right = nu..
- [코딩 테스트] 27일차: 실전 모의고사 - 종합 리뷰와 최종 준비 팁 종합 리뷰와 최종 준비 팁이번 글에서는 실전 모의고사에 대한 종합 리뷰와 최종 준비 팁을 다루겠습니다. 이제까지 배운 내용을 종합하여 최종 준비를 하는 방법을 알아보겠습니다.1. 종합 리뷰지금까지의 학습 내용을 리뷰하면서, 부족한 부분을 보완합니다.자료구조: 배열, 리스트, 스택, 큐, 트리, 그래프, 해시맵 등 주요 자료구조의 특성과 사용법을 복습합니다.알고리즘: 정렬, 탐색, 그리디 알고리즘, 동적 프로그래밍, 분할 정복, 백트래킹 등 다양한 알고리즘의 구현과 활용 방법을 복습합니다.문제 풀이: 다양한 문제를 풀어보며, 문제를 이해하고 해결하는 능력을 향상시킵니다.2. 최종 준비 팁코딩 테스트에서 좋은 결과를 얻기 위해 다음과 같은 준비 팁을 활용합니다.시간 관리: 제한 시간 내에 문제를 해결하기 위..
- [코딩 테스트] 26일차: 실전 모의고사 후 피드백 받기 실전 모의고사 후 피드백 받기코딩 테스트를 준비하는 과정에서 중요한 부분은 테스트 후 피드백을 통해 개선점을 찾고 보완하는 것입니다. 이번 글에서는 실전 모의고사 후 피드백을 받는 방법과 피드백을 반영하는 과정을 다루겠습니다.1. 테스트 후 피드백 받기테스트가 끝난 후에는 자신의 풀이를 돌아보고, 피드백을 받는 것이 중요합니다.자신의 풀이 분석: 제출한 코드를 다시 검토하고, 어떤 부분에서 실수했는지, 더 효율적인 방법은 없는지 분석합니다.코드 리뷰 요청: 친구나 동료, 또는 온라인 커뮤니티에서 코드 리뷰를 요청하여 피드백을 받습니다.피드백 수용: 받은 피드백을 바탕으로, 자신의 코드에서 개선할 점을 찾고 반영합니다.2. 개선점 찾기피드백을 통해 찾은 개선점을 반영하여 더 나은 코드를 작성합니다.효율성 ..
반응형