프로그래밍 잡동사니

CSS Modules Next.js에는 css를 적용하는 다양한 방식이 있는데, 먼저 module.css 파일을 통해 css 모듈을 사용하는 방식을 알아보자 [components/NavBar.module.css] .link { text-decoration: none; } .active { color: blue; } .inactive { color: grey; } module.css 파일을 생성해 클래스 선택자 형태로 넣어준다 * 파일은 원하는 곳에 원하는 이름으로 생성해도 된다 * 서로 다른 모듈 파일에서 같은 선택자 이름을 사용해도 문제가 없다! [components/NavBar.js] import styles from "./NavBar.module.css"; ... ... 원하는 className에 ..

Pages Next.js의 Route는 별도의 설정 없이 pages 폴더 내부의 js 파일에서 생성된다 [pages/about.js] export default function About() { return ( About ); } 이 경우 http://localhost:3000/about 에서 해당 컴포넌트를 확인할 수 있다 이 때, 컴포넌트 이름은 뭐든 상관 없지만 반드시 export default를 붙여줘야 한다 [pages/index.js] export default function Home() { return ( Hello ); } 예외적으로 index.js는 그냥 http://localhost:3000/ 에서 확인된다 Routing Next.js에서는 다음과 같이 링크를 이동한다 [compone..

웹에서 Progress Bar를 구현하는 방식은 아주 다양하다 순수 HTML / HTML5의 progress 태그 / SVG / 외부 라이브러리 등.. 이 중에 커스텀 제약이 없고 React에서 값 조절이 용이한 HTML5의 progress 태그를 사용해보자! 다양한 Progress Bar 예제🔽 progressbar by html, html5, svg ... codepen.io 위 예제에서 볼 수 있듯 태그에 JavaScript 함수로 애니메이션을 구현할 수 있다 [Compose.js] const [progress, setProgress] = useState(0); const Progress = () => { return ( ); }; 레이아웃을 만들고 진행률을 나타낼 progress를 선언해준다 [C..

“우리가 정말 매일매일 함께 자랄 수 있을까?” 이 책은 불확실한 상황에서 일해야 하는 사람이라면 누구에게나 도움이 될 것입니다. 전문성에 대한 미신을 깨고, 전문성을 키울 수 있는 제대로 된 방법을 알려줍니다. 애자일의 지엽적인 실천법과 도구에 집중하는 게 아니라 일하는 방법의 핵심과 통찰을 다루고 있습니다. - 中 1. 자라기 자라기 = 학습 # 야생 학습 학교 학습과 반대되는 현실적 개념인 야생 학습 협력적 / 비순차적 / 자료에 한정 없음 / 평가 없음 / 정답 없음 / 목표가 불분명하며 가변적 : 학교 학습이 아닌 불확실성에 맞는 새로운 학습 방법을 학습해야 함 # 당신은 몇 년 차? 10년차 개발자가 반드시 2년차 개발자보다 생산성이 뛰어나지는 않다 다만 언어를 접한 경험이 6개월 미만인 경우..

Why Next.js? React.js는 원할 때 가져다 쓸 수 있는 라이브러리이며, Next.js는 정해진 틀 안에서 커스터마이징하는 React 기반 프레임워크이다 Create React App으로 생성되는 CSR(Client Side Rendering) 프로젝트는 UI를 가져올 때 React 및 JavaScript 코드를 실행하며 약간의 딜레이가 생긴다 반면 Next.js로 생성되는 SSR(Server Side Rendering) 프로젝트는 유저가 매우 느린 연결을 사용해도 미리 생성된 HTML 코드를 바로 보여준다 (= Static Pre Rendering) 이후 React가 실행되며 HTML이 React 컴포넌트가 된다 (= hydration) 이 경우 검색엔진에서 파악하기 용이해 SEO(Sear..

특정 조건에서 잠깐 나타났다가 사라지는 토스트 메시지를 React로 구현해보자 [ToastMessage.js] import './ToastMessage.css'; export const ToastMessage = (props) => { return ( {props.text} ); }; [ToastMessage.css] .toast_container { position: fixed; z-index: 99; top: 75%; left: 50%; transform: translate(-50%, -50%); width: 24rem; height: 2.625rem; border-radius: 10px; box-shadow: 0 0 15px 0 var(--black-40); background-color: #323..

Kakao Developers에서 '내 어플리케이션 > 추가 > 플랫폼' + 요약 정보에서 JavaScript 키를 확인해주자 [index.html] index.html의 head에서 Kakao SDK를 불러온다 [API/Share/initialize.js] const { Kakao } = window; export default function initialize() { Kakao.init('JavaScript 키'); } 초기화는 이렇게 하나의 모듈로 빼서 관리하면 좋다 * JavaScript 키는 보안을 위해 비공개 파일에서 import하도록 변경할 필요가 있다 [App.js] import initialize from './API/Share/initialize'; export default func..

TypeScript는 JavaScript(Dynamic typing)의 상위호환 프로그래밍 언어로 정적 타입을 명시할 수 있다 확장자로 .ts를 사용하며 컴파일을 통해 최종적으로는 .js 파일로 구동된다 타입 선언 기능으로 인해 다음과 같은 장점이 있다 JavaScript의 타입 관련 에러들을 미리 방지한다 에러메시지가 구체적이며 풍부한 피드백을 제공한다 개발자가 의도한 변수나 함수의 목적을 명확하게 전달할 수 있다 Setting 1. 터미널에서 typescript 설치 (에러가 발생한다면 node를 최신 버전으로 설치해주자) npm install -g typescript 2. 최상단에 tsconfig.json 파일을 생성해 다음과 같이 넣어주자 { "compilerOptions": { "target":..

보호되어 있는 글입니다.

왁타버스 캐릭터 테스트는 왁타버스 세계관 바탕의 성격 테스트로, 우왁굳이 개최한 2021 연말공모전의 출품작이다 세렝게티 동물 테스트 만들기 강의를 참고해 jQuery를 바탕으로 제작했고 Netlify를 통해 배포했다 현재까지 약 30000명 이상의 방문자가 테스트했고 꾸준히 증가하고 있다 GitHub🔽 GitHub - joseph-106/WAKTAVERSE_Test: 나와 어울리는 왁타버스 캐릭터를 찾아보자! 나와 어울리는 왁타버스 캐릭터를 찾아보자! Contribute to joseph-106/WAKTAVERSE_Test development by creating an account on GitHub. github.com 2021년 2학기, 당시에 나는 무언가 재미있는 것을 개발할 수 없을까 고민하고..