Front-End (38) 썸네일형 리스트형 [Node] npm 명령어들 링크 모음 https://www.zerocho.com/category/NodeJS/post/58285e4840a6d700184ebd87 (NodeJS) npm 명령어 안녕하세요. 이번 시간에는 npm 명령어에 대해 알아보겠습니다. npm 명령어는 명령 프롬프트에 입력하는 명령어입니다. 지금까지 봤던 명령어는 npm init, npm start나 npm run, npm install 정도가 있겠네요 www.zerocho.com https://velog.io/@fgprjs/npm-run-dev npm run dev는 어떻게 동작하는가? npm run dev를 수행하면, npm은 run명령에 맞게 packages.json에 존재하는 scripts중 dev키를 찾아서 그것을 promiseSpawn(새로운 프로세스를 수행,.. [Front-End] Carousel https://programming119.tistory.com/211 [React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel) 슬라이드? 캐로셀(Carousel) ! 우리나라 사람들은 보통 이렇게 버튼을 통해 자연스럽게 넘어가는 것을 슬라이드라고 부르죠! (영알못인 저만 그러는 걸수도..😂) 사실 이런 슬라이드는 정식용어는 programming119.tistory.com https://coding-with-jina.tistory.com/222 [React] 리액트 이미지 슬라이드(Carousel) 만들기 - React Material UI Carousel ● React Material UI Carousel 설치하기 1. 이 라이브러리/구성 요소를 사용하려면 Material UI를 설치해야함 np.. [axios] 서버로 데이터 전송 사용자가 화면에서 정보를 등록하면 그 정보를 recoilstate을 통해 저장 -> 마지막 단계에서 recoil에 저장된 정보를 axios를 통해 서버로 보냄 정보를 서버로 넘겨줄 때 헤더에 access token도 함께 넣어서 보내줘야 했다. import { styled } from "styled-components"; import { useRouter } from "next/router"; import { useState, useEffect } from "react"; import axios from "axios"; import { useRecoilValue } from "recoil"; import { registerHomeUpLoadFileState, registerHomeWholeInfoStat.. [Javascript] async, await async, await 만 보면 회피하는 습관이 있었는데 이 기회에 두려움을 없애보고자 한다. 캡틴 판교님을 예전에 프론트엔드 컨퍼런스에서 뵌 적이 있는데 완전 유명하신 분이라고 들었다. 근데 왜 유명하신지 알 것 같다. 글이 완전 이해가 쏙쏙~~ https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/ 자바스크립트 비동기 처리와 콜백 함수 (중급) 중급 자바스크립트 개발자가 되기 위한 자바스크립트 비동기 처리와 콜백 함수 이해하기. 콜백 지옥과 해결 방법 등 joshua1988.github.io https://joshua1988.github.io/web-development/javascript/pr.. [Javascript] Testing code Describe, it, expect 구문을 알기 위해서 찾아봤다. https://velog.io/@velopert/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8C%85%EC%9D%98-%EA%B8%B0%EC%B4%88 자바스크립트 테스팅의 기초 자바스크립트로 작성된 프로젝트에 테스트 자동화를 사용 할 때 사용 할 수 있는 도구는 다양합니다. 리스팅을 해보자면 다음과 같습니다. - Karma - Jasmine - Jest - Chai - Mocha 종류가 정말 다양하지 velog.io 위에 나온 개념들 https://medium.com/@chullino/require-exports-module-exports-%.. [개발 환경 설정] Next.js + Typescript + Styled-components https://mniyunsu.github.io/nextjs-styled-component-setting/ Next.js + Typescript + Styled-components 개발 환경 설정 | YUNSU BAE Next.js + Typescript + Styled-components 개발 환경 설정를 기록해두자. mniyunsu.github.io https://nextjs.org/docs/getting-started/project-structure Getting Started: Project Structure | Next.js Using App Router Features available in /app nextjs.org next는 auto-routing을 해주기 때문에 그 폴더 구조와 컨벤션들.. [Next.js] 230703 학습일기 https://nextjs.org/learn/basics/create-nextjs-app/ Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 1. You should keep the development server running, but if you want to restart it, hit Ctrl + c to stop the server. Navigate between Pages 2. Pages in Next.js.. [CSS] position: fixed일 때 상하스크롤이 안되는 문제 해결 const Supply = () => { return ( ... ); }; const Container = styled.div` position: fixed; top: 72%; left: 50%; transform: translate(-50%, -50%); height: 100%; `; port default Supply; Next.js로 만든 Supply 페이지 코드의 일부이다. 여기서 페이지가 상하스크롤이 안되는 문제가 있었다. 상하스크롤이 작동하지 않는 이유: Supply 컴포넌트의 Container가 position: fixed 로 설정되어 있기 때문. position: fixed는 화면에 고정된 위치에 요소를 배치하는 것을 의미함. 요소의 위치는 뷰 포트에 상대적임. 따라서 컨테이너의 높이가 1.. [Typescript] styled-component에 props 전달 과정에서 오류 해결 interface TooltipProps { message: React.JSX.Element; percentage: number; } function Tooltip({message, percentage}:TooltipProps){ return ( {message} ) } const Rectangle = styled.div` width: 150px; height: 48px; position: absolute; left: ${props => `calc(${props.percentage}% - 75px)`}; //여기서 설정 //width/2 bottom: 175%; background-color: white; color: black; font-weight: 600; text-align: center; pad.. [React] Describing the UI 한달 전에 작성했는데 안 올렸었다니..!! 공식문서를 보는 것으로 공부방향을 바꿨다. https://react.dev/learn Your First Component – React The library for web and native user interfaces react.dev Q. 프로그래밍에서 동사 nest의 의미? A. 프로그래밍에서 "nest"란, 하나의 코드 블록이 다른 코드 블록 안에 중첩되는 것을 의미합니다. 중첩된 블록은 다른 블록 내부에 들어가기 때문에 외부 블록의 범위를 포함하게 되며, 이러한 구조를 "nested" 구조 또는 "nesting"이라고 합니다. 대표적인 예시로는 if문이나 for문 같은 제어 구조가 있습니다. 이들 구조는 중첩될 수 있으며, 이를 통해 복잡한 조건과 반.. 이전 1 2 3 4 다음
