반응형 전체 글 개발 2024. 2. 2. 나는 '간호사' 출신 병원정보시스템 '개발자'다. 23년 5월 30일, 개발공부를 시작해서 24년 1월 5일, 신입사원 공채합격까지. 딱 6개월이 걸렸다. 반 년만에 전혀 다른 직무로 전환한다는 것은 정말, 정말 힘든 일이었다. 하지만 취준의 힘듦과 비례하는 쾌락이 있었다. 아예 생소한 분야에 도전한다는 것은 무척이나 설레는 일이다. 개발 공부기간인 4개월 반 동안은 그냥 미쳐있었다. 9to6 개발자 부트캠프를 병행하면서 '성실성'을 보이기 위해 난 그 누구보다 노력했다. 1월 간호사국가고시 7월 정보처리기사 필기 8월 데이터분석준전문가(ADsP) 9월 SQL개발자(SQLD자격) 12월 컴퓨터활용능력2급 필기 이렇게 자격증을 취득하면서 개발자 부트캠프를 수료했고 매일 블로그를 작성했고 매일 깃허브에 잔디를 심었다. 첫 면접때는 그 회사의 솔루션에 대해 .. JavaScript 2023. 11. 3. ❶ 변수, 호이스팅, TDZ(Temporal Dead Zone) | 자바스크립트 중급 문법 var & let var는 한번 선언된 변수를 다시 선언할 수 있다. let name = 'hanseul'; console.log(name); let name = 'duseul' console.log(name); //에러 var는 선언하기 전에 사용할 수 있다. console.log(name); // undefined var name = 'hanseul'; 왜 에러가 일어나지 않는가 ? var name; //선언부 console.log(name); // undefined name = 'hanseul'; //할당부 왜냐하면 var는 이렇게 동작하기 때문이다. 이를 호이스팅이라고 한다. (호이스팅 : 스코프내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동) 그렇다면 왜 undefined를 반환할까? 선.. Project/portfolio 2023. 11. 1. 포트폴리오 Vercel 배포하기 | No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies" HTML 삽입 미리보기할 수 없는 소스 No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies" 이 오류는 처음 배포 설정 시 root directory를 최상단 폴더명으로 설정해야 오류가 해결된다 ! 예를 들어 Portfolio가 폴더명이라면 ./Portfolio 이렇게 그러면 Vercel로 배포가 완료된다 ~! Project/portfolio 2023. 10. 31. 포트폴리오 Footer 만들기 HTML 삽입 미리보기할 수 없는 소스 Footer 컴포넌트 import React from "react"; export default function Footer() { return ( © 2023 Choi Hanseul. All rights reserved. About this website: built with React & Next.js (App Router & Server Actions), TypeScript, Tailwind CSS, Framer Motion, React Email & Resend, Vercel hosting. ); } 푸터의 상단에는 작성자와 저작권 정보를 표시한다. 푸터의 하단에는 웹사이트에 대한 간략한 설명을 포함한다. 사용된 기술 스택 및 도구들을 나열했다. Project/portfolio 2023. 10. 30. 포트폴리오 Contact 만들기 | Resend, toast HTML 삽입 미리보기할 수 없는 소스 Contact 컴포넌트 Contact me 직접 메일을 보내고 싶으시다면 {""} @naver.com {" "} 혹은 아래의 폼을 이용해주세요! { const { data, error } = await sendEmail(formData); if (error) { toast.error(error); return; } toast.success("Email sent successfully!"); }} > 섹션 안에 직접 메일보내는 링크와 안내문구를 추가한다. ); input과 textarea를 포함한 폼을 구성한다. 메일 전송 버튼(SubmitBtn)을 추가하여 사용자가 메일을 보낼 수 있도록 구현한다. sendEmail 함수를 사용하여 폼 데이터를 서버로 전송하고, 그.. Project/portfolio 2023. 10. 28. 포트폴리오 Experience 만들기 | react-vertical-timeline-component HTML 삽입 미리보기할 수 없는 소스 Experience 컴포넌트 export default function Experience() { const { ref } = useSectionInView("Experience"); const { theme } = useTheme(); Experience 컴포넌트는 useSectionInView 훅을 사용하여 해당 섹션이 화면에 나타날 때의 상태를 추적한다. useTheme 훅을 사용하여 테마 정보를 가져와서 어떤 테마인지에 따라 스타일을 조정한다. return ( My experience 섹션을 나타내는 section 태그로 감싸고, 반응형 css를 설정한다. {experiencesData.map((item, index) => ( {item.title} {ite.. Project/portfolio 2023. 10. 27. 포트폴리오 Skills 만들기 | Framer Motion 애니메이션 HTML 삽입 미리보기할 수 없는 소스 Framer Motion 애니메이션 설정 const fadeInAnimationVariants = { initial: { opacity: 0, y: 100, }, animate: (index: number) => ({ opacity: 1, y: 0, transition: { delay: 0.05 * index, }, }), }; initial 애니메이션이 시작할 때의 상태. opacity는 0으로 설정되어 투명한 상태로 시작하고, y는 100으로 설정되어 아래로 이동한 상태로 시작. animate 애니메이션 동작 중의 상태. 여기에서는 opacity를 1로 설정하여 페이드 인되고, y를 0으로 설정하여 이동하지 않은 상태로 표현. transition 애니메이션의 부.. Project/portfolio 2023. 10. 26. 포트폴리오 header 완성하기 | clsx, useActiveSectionContext HTML 삽입 미리보기할 수 없는 소스 export default function Header() { const { activeSection, setActiveSection, setTimeOfLastClick } = useActiveSectionContext(); useActiveSectionContext 훅을 사용해서 변수들을 가져온다. {links.map((link) => ( map함수로 links 배열을 순회하면서 네비게이션바 페이지 링크를 생성한다. { setActiveSection(link.name); setTimeOfLastClick(Date.now()); }} > {link.name} {link.name === activeSection && ( )} ))} ); } Link 컴포넌트로 감싸져.. Project/portfolio 2023. 10. 25. 포트폴리오 Projects 만들기 | framer-motion(motion, useScroll, useTransform) HTML 삽입 미리보기할 수 없는 소스 export default function Project({ title, description, moreDescription, tags, imageUrl, GithubUrl, }: ProjectProps) { 이렇게 다양한 프로퍼티들을 데려와서~~ (정보들은 data.ts에 저장되어 있음) const ref = useRef(null); useRef 훅을 사용해서 HTML 요소에 접근한다. 초기값은 null const { scrollYProgress } = useScroll({ target: ref, offset: ["0 1", "1.33 1"], }); useScroll 훅을 사용해서 스크롤을 추척한다. 처음부터 끝까지 const scaleProgess = useT.. Project/portfolio 2023. 10. 24. 포트폴리오 About Me 만들기 | FontAwesomeIcon 활용 HTML 삽입미리보기할 수 없는 소스 About me 컴포넌트를 사용할 때, 태그 사이에 위치한 내용이 children 속성으로 전달된다. import React from "react"; type SectionHeadingProps = { children: React.ReactNode; }; export default function SectionHeading({ children }: SectionHeadingProps) { return ( {children} ); } 이렇게 제목을 일관된 스타일을 적용할 수 있다. 이름 최한슬 연락처 이메일 부트캠프 멀티캠퍼스 프론트엔드 과정 ); } 폰트어썸 아이콘을 활요해서 보다 직관적으로 보이게했다. 그리고 백그라운드 컬러를 넣어서 정돈된 느낌을 주려고 했다. h.. Project/portfolio 2023. 10. 23. 포트폴리오 intro 만들기 | 이력서 pdf 다운로드 버튼, 깃허브/티스토리 이동 버튼 추가 HTML 삽입미리보기할 수 없는 소스 motion.h1 안녕하세요, 최한슬입니다. 간호사에서 프론트엔드 개발자 로의 여정을 시작합니다. motion.div Contact me here Download CV className="flex flex-col sm:flex-row items-center justify-center gap-2.5 px-4 text-lg font-medium" flex flex-col sm:flex-row: 요소는 세로(모바일 화면에서) 및 가로(더 큰 화면에서) 방향으로 레이아웃을 변경. items-center: 수직 중앙 정렬. justify-center: 수평 중앙 정렬. gap-2.5: 요소 내부의 요소 사이의 간격을 2.5단위. px-4: 요소의 좌우 여백을 4단위. text.. Project/portfolio 2023. 10. 21. 포트폴리오 header 만들기 | motion 리액트 라이브러리 hash 속성 HTML 삽입 미리보기할 수 없는 소스 initial: 초기 상태를 정의. { y: -100, x:"-50%", opacity : 0 }y 값으로 -100, x 값으로 -50%, 그리고 투명도(opacity) 값으로 0으로 설정. 이렇게 설정하면 요소가 화면 위로 위치하고 왼쪽에서 시작하여 완전히 투명한 상태로 시작. animate: 애니메이션 실행 시 최종 상태를 정의. { y: 0, x:"-50%", opacity : 1 } 애니메이션이 실행되면 요소는 아래로 이동하며(y 값으로 0) 가운데 정렬된 위치에 유지(x 값으로 -50%)). 동시에 투명도(opacity)가 변화하여 완전히 불투명한 상태(opacity 값으로 1)로 나타남. {links.map((link) => ( {link.name} )).. 이전 1 2 3 4 ··· 19 다음 반응형
