https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/news/599398?gad_source=1&gclid=Cj0KCQiA0fu5BhDQARIsAMXUBOKF6M_TZWDPD5rXqcJ8InuvgLQErrQ5vqo8QivrqvcP0i3zHtYMdyAaAntNEALw_wcB 따라하며 배우는 리액트 A-Z[19버전 반영] 강의 | John Ahn - 인프런John Ahn | 이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.,www.inflearn.com https..

2024년 11월 8일, 산업디자인학과 네트워킹 데이에서 대략 40명을 대상으로 졸업생 특강을 했다. 평소 존경하는 교수님께서 연락 주셔서 감사하게도 특강 발표에 참여하게 되었다. 2023-2024년 1년간 미국 인턴십을 다녀온 경험을 살려, 특강 주제를 잡았다.경험을 꾸준히 대외적으로 기록하기로 마음을 먹은 11월이기에 글을 쓴다. 💃 혹시나 디자인 직군이거나, 해외 인턴십을 꿈꾸고 있다면.. 이 글이 도움이 되길 바랍니다! 저는 UX, 브랜딩, 출판 쪽 경험이 있고 해외 인턴십을 혼자 찾아 다녀온 1인이라 관련하여 궁금한 점이 있다면 댓글 주세요!최선을 다해 도움드릴게요.💃  생각 패턴을 시각화시켜 이를 바탕으로 설명했다. 1. Listen - 나의 꿈과 목표를 듣다스스로에게 질문하고, 진짜 원하..

공부해볼 코드 01 1. 정답 단어 입력기 • 페이지 상단에 “정답 단어 적기”라는 제목과 함께 입력 필드가 표시됩니다. • 사용자가 단어를 입력하면 입력된 값이 WordGame 컴포넌트에 전달됩니다. • WordGame 컴포넌트는 사용자가 입력한 단어를 활용할 수 있도록 설계되었습니다. (이 부분은 추가 구현이 필요할 수 있습니다.) 2. 색상 선택 드롭다운 • “Pick Color”라는 제목 아래에 색상을 선택할 수 있는 드롭다운 메뉴가 표시됩니다. • 현재는 기능이 구현되지 않았지만, 선택한 색상에 따라 페이지의 배경색을 변경하도록 확장할 수 있습니다. 3. 실시간 시계 • Clock 컴포넌트가 현재 시간을 표시합니다. • 이 시계는 매초마다 업데이트되며, 사용자의 로컬 시간(예: HH:MM:SS)..

[javascript] 실습 과제 01! 1. 텍스트 필드에 값을 입력. 2. “제출” 버튼 클릭. 3. 아래에 당신이 입력한 text는 "입력된 값" 입니다. 출력.만들기  사용한 코드는 주석 추가해놓았당 텍스트 입력 실습 제출하기

JavaScript와 React, 기초 개념 정리 1. JavaScript와 React • React는 JavaScript로 만들어진 특화된 도구• React는 웹 앱 개발을 위한 라이브러리로, 상위 개념의 프레임워크가 아님.• React를 사용하려면 JavaScript 이해가 필수.• JavaScript 없이 React는 동작하지 않음.• 바닐라 자바스크립트(Vanilla JavaScript)란?• 프레임워크나 라이브러리를 사용하지 않은 순수 JavaScript.• DOM 조작, 이벤트 처리 등 모든 작업을 JavaScript 코드로 작성. 2. 변수(Variable)란? • 정의: 변수를 사용하면 데이터를 저장하고 재사용할 수 있음.• 예: 이름, 숫자, 계산 결과 등을 저장.• 왜 필요한가?• 동일..

Nodemon은 파일을 수정할 때마다 자동으로 서버를 재시작해주는 도구다. 1. Nodemon 글로벌 설치sudo npm install -g nodemon 2. 글로벌 권한 문제 해결 (필요 시)  1. 새로운 글로벌 경로 생성:mkdir -p ~/.npm-globalnpm config set prefix '~/.npm-global'  2. 경로 환경변수 추가:echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrcsource ~/.zshrc  3. 경로 확인:echo $PATH   4. Nodemon 다시 설치:npm install -g nodemon 3. Nodemon 사용  1. 터미널에서 실행 & 자동반영nodemon 파일이름.js • 파일 수정 시마다 서..

1. 백틱(`) 위치 • Mac 키보드에서 숫자 1 왼쪽에 있는 (백틱) 키를 누릅니다.• 해당 키에는 `와 물결(~) 기호가 함께 표시되어 있습니다. 2. 입력 방법 • 영어 키보드 레이아웃일 경우:1. 그냥 (backtick) 키를 눌러 입력.2. Shift 키 없이 누르면 됩니다.• 한글 입력 상태일 경우:1. 한글 입력기를 **영어(E)**로 전환 (단축키 ⌘ + Space).2. 영어 상태에서 (backtick) 키를 눌러 입력. 3. 예시• 백틱(``)으로 감싸는 템플릿 리터럴:let message = `백틱으로 변수를 삽입해요!`;console.log(message); 참고 • 한글 상태에서는 백틱이 입력되지 않으니, 반드시 입력기를 영어로 전환.• 단축키 설정이 다르다면 시스템 설정 > 키..

접근성을 높이기 위해 중요한 규칙: • 버튼에는 항상 텍스트를 포함: • 텍스트는 스크린 리더 사용자에게 중요한 정보 제공. • 이미지에 대체 텍스트(alt 속성) 추가 * CSS로 접근성을 위한 스타일링CSS로 이미지를 사용해 텍스트를 숨기는 방법: • 스크린 리더에서 텍스트를 읽도록 유지하되 화면에서 숨김 처리. • “blind” 스타일링 예제:.blind { position: absolute; /* 화면에서 제거 */ width: 1px; height: 1px; overflow: hidden; /* 내용 숨김 */ clip: rect(0, 0, 0, 0); /* 브라우저에 잘리지 않도록 */ white-space: nowrap; /* 줄바꿈 방지 */} * VS Code에서 터미널 사용법..

1. 넷플릭스 클론 코딩https://jobs.netflix.com/ Work at NetflixA great workplace combines exceptional colleagues and hard problems.jobs.netflix.com 2. css 애니메이션 공부 ✅3. Figma 클론 디자인 계획 생성4. react 내용 정리5. 수업 내용 정리 (css blind...etc) ✅6. 관련 내용 블로그 정리 (브런치, 티스토리) ✅7. 배움일기 작성 ✅8. 피그마 밑업 참여 ✅9. 피그마 커뮤니티 파일 정리 ✅

1. Animista  • URL: https://animista.net/ Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net  • 설명: Animista는 CSS 애니메이션 효과를 손쉽게 미리 보고 코드로 생성할 수 있는 사이트이다. • 주요 기능: 1. 애니메이션 미리 보기: 다양한 CSS 애니메이션을 선택하고 결과를 실시간으로 확인할 수 있다. 2. 맞춤형 애니메이션: 사용자가 지속 시..