전체 글177 Codepen 에서 React 코드 작성하기 간단한 기능들을 구현하면서 연습(?)을 하려고 하는데,빠른 환경 설정과 즉각적으로 코드의 변화에 따른 UI 상의 변화를 확인할 수 있다는 장점을 떠올리며,Codepen에 오랜만에 들어왔다. 1. 새로운 프로젝트 생성프로필 이미지를 클릭해 새로운 프로젝트( New Pen )를 만들도록 하자. 2. 리액트 환경 설정하기 그 다음 Settings 에 들어가서, JS 세팅 페이지로 이동한다.여기서 두 작업을 진행한 뒤에, Save & Close 버튼을 누르면 끝난다!첫째로, JavaScript Preprocessor 셀렉트에서 Babel을 선택한다.둘째로, Add Packages 에서 react를 검색해서 react와 react-dom을 추가한다. (JS 코드 칸에 import가 새로 추가된다.) 3. 리액트 .. 2024. 12. 5. [ HTML ] <dialog> (feat. 모달 구현하기) 2024. 3. 30. 단어장 inert not moving or not able to move superfluous more than is needed or wanted quirk an usual habit or part of someone's personality, or something that is strange and unexpected You have to get used to other people's quirks and foibles. There is a quirk in the rules that allows you to invest money without paying tax. By some strange quirk/By an odd quirk of fate (= unexpectedly), we ende.. 2024. 3. 30. npm vs yarn npm 과 yarn 은 자바스크립트 런타임 환경인 노드의 패키지 관리자입니다. 그리고 CLI를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있습니다. 그렇다면 둘의 차이는 뭘까요? 1. npm 노드 패키지 매니저(Node Package Manager)의 줄임말로 노드를 설치할 때 자동으로 설치되는 기본 패키지 관리자입니다. node -v npm -v // 버전 확인 => 설치되었는지 확인 가능 npm의 역할 온라인 플랫폼 : 사람들이 노드 패키지를 만들고, 업로드하고, 공유할 수 있는 공간으로 누구나 온라인 플랫폼(npm 레지스트리)에 게시된 패키지를 사용할 수 있습니다. 명령 줄 인터페이스(Command-line interface, CLI) : 온라인 플랫폼과 .. 2024. 3. 21. [ Vue ] computed vs watch (feat. method ) Nuxt(Vue)로 만들어진 프로젝트를 React로 마이그레이션을 하게 됐습니다. 러닝커브가 React 보다 낮다고 들었던 Vue, 전 헷갈리는 개념들이 너무 많더라구요. 그 중 하나가 바로 이 둘입니다. computed 와 watch, 둘 다 값이 바뀌면 실행되는 함수들인데, 무슨 차이가 있어서 이렇게 구분되어 있는 것일까요. (공식문서에도 둘을 비교하는 페이지가 있습니다. https://v2.vuejs.org/v2/guide/computed#Computed-vs-Watched-Property ) computed 일단, computed 가 무엇일까요? 빠른 이해를 위해 공식문서의 예제를 가져왔습니다. (저는 (vue v2의 공식문서)[https://v2.vuejs.org/]를 보고 있습니다.) {{ m.. 2024. 3. 14. [ Storybook ] 왜 스토리북을 써야 할까? 새로운 프로젝트를 시작하는데, 스토리북 도입에 대해 고민해봤습니다. 당연히 사용하는 게 안 하는 것보다 좋지만, 시간이라는 자원은 한정적이기에 스토리북을 통해 얻을 이점이 시간을 투자할만큼의 가치가 있는지를 따지게 됐습니다. 고뇌를 하던 중, 피그마를 통해 대략적인 디자인을 확인했을 때, 두둥, 탁! 스토리북을 사용해야 한다. 라고 생각했습니다. 혼자하는 작업에 도입을 하는 거면 이렇게 이야기는 끝났겠지만, 당연히 아니겠죠? 개발을 할 때 이미 컴포넌트로 나눠서 관리를 하는데, 굳이 스토리북 까지 사용해야할까? 라고 생각할 수도 있습니다. 왜 스토리북을 쓰는 게 이로울까? . . . 1. 디자이너와 개발자의 소통이 수월해지고, 시간도 절약할 수 있다. 스토리북은 UI 컴포넌트를 독립적인 환경에서 그려볼 .. 2024. 3. 8. 이전 1 2 3 4 5 ··· 30 다음