so woon!

학습일 : 2023. 07. 09 pages 디렉토리에 파일을 생성할 때, 파일의 이름이 그대로 url로 들어가게 되기 때문에 주의해야 한다. 반면, component의 이름은 그닥 중요하지 않다. 중요한 것은 export default를 작성해주어야 하며, 만약, default로 export 하지 않는다면, localhost:3000/about에 들어갔을 때 에러가 발생하는 것을 볼 수 있다. 파일명이 잘못되어 페이지가 열리지 않을 경우 자동적으로 404페이지가 뜨게 되는데, 리액트의 경우 직접 404페이지를 직접 만들어야겠지만 next.js는 그럴 필요가 없는 편리성이 있다.

학습일 : 2023. 07. 14 Dart는 객체지향 언어이며 User Interface를 만드는 데에 아주 최적화 되어있다. 빠르며, 엄청나게 많은 플랫폼에 컴파일이 가능하며 개발자 경험이 아주 좋음. flutter를 배우기 전에 Dart언어를 배우고 넘어가게 된다면 flutter를 더 잘 이해할 수 있을 것임. Dart의 구문은 다른 주류 프로그래밍 언어와 비슷함. 예시 Dart 코드 class Segment { int links = 4; toString() => "I have $links links"; } Kotlin 코드 class Segment { var links: Int = 4 override fun toString()= "I have $links links" } TypeScript 코드 c..

학습일 : 2023. 07. 08 NextJS 프로젝트를 시작하고, 프로젝트의 기본 구조는 이러하다. 이번 글에서는 pages가 어떤역할을 하는지? 알아보고 프레임워크와 라이브러리의 차이점을 알아보자. 우선 pages 폴더 안에 있는 파일 전부를 삭제하도록 한다. 그 다음 pages 폴더 안에 index.js 파일을 만든 다음 index.js export default function Home() { return "hi"; } 확인해보면 hi가 화면에 출력되어 있음을 확인할 수 있다. 내가 pages안의 index파일에 넣은 것이 자동적으로 웹사이트 home에서 보여지고 있다. 이것이 바로 framework와 library의 핵심적인 차이점이다. 라이브러리는 개발자로서 내가 필요할때 사용하는 것이다. 개..

학습일 : 2023. 06. 26 NextJS 프로젝트를 시작하기 위해 터미널에 입력해주도록 한다. 현재 들어와있는 해당 프로젝트에 nextJS 최신버전을 설치하겠단 뜻. npx create-next-app@latest . 그럼 이런 질문들이 뜨는데 √ Would you like to use TypeScript with this project? ... No / Yes => no √ Would you like to use ESLint with this project? ... No / Yes => yes √ Would you like to use Tailwind CSS with this project? ... No / Yes => no √ Would you like to use `src/` directory..

학습일 : 2023. 05. 16 popup창을 만들어 볼텐데 먼저 스타일링부터 하고 import { styled } from "styled-components"; import { motion } from "framer-motion"; import { useState } from "react"; // style const Wrapper = styled(motion.div)` height: 100vh; width: 100vw; align-items: center; display: flex; flex-direction: row; justify-content: center; background: linear-gradient(135deg, rgb(252, 191, 248), rgb(21, 151, 203)); ..

학습일 : 2023. 05. 16 layout 사용하기 element에 layout prop을 주게 되면 element의 layout이 바뀔 때 알아서 animate가 된다. 만약 css 때문에 layout이 바뀐다면 알아서 animation이 만들어질 것이다. 위 코드대로라면 center부터 flex-start까지의 animation 말이다. Circle component에 layout 을 써보도록 하겠다. import { styled } from "styled-components"; import { motion } from "framer-motion"; import { useState } from "react"; // style const Wrapper = styled(motion.div)` heig..

학습일 : 2023. 05. 15 AnimatePresence는 component인데, ReactJS App에서 사라지는 component를 animate한다. 예를 쉽게 들자면 버튼을 클릭했을 때 사라지는 박스가 있는데, 사라질 때 좀 더 느리게 사라지던지, 회전하면서 사라지던지 등등의 애니메이션을 설정하겠다는 뜻이다. AnimatePresence의 규칙 1. visible 상태여야 함. {showing ? : null} 이런식으로 적으면 안된다는 뜻. 2. AnimatePresence 내부에는 조건문이 있어야 함. {showing ? : null} 이런식으로. AnimatePresence는 안쪽에 조건문에서 나온 컴포넌트에서 나타나거나 사라지는 게 있다면 그것을 animate할 수 있도록 해준다. {..

학습일 : 2023. 05. 14 font awesome 등의 사이트에서 원하는 로고 또는 아이콘을 고르고 svg탭에서 코드를 복사 해서 Wrapper 안에 붙여주고 스타일링을 해준다. 모든 svg는 path를 가지고 있고, path는 fill을 가지고 있다. 애니메이션 적용을 위해 path에도 그냥 를 쓰면 안되고 로 바꾸어 주어야 한다. import { styled } from "styled-components"; import { motion } from "framer-motion"; // style const Wrapper = styled(motion.div)` height: 100vh; width: 100vw; display: flex; justify-content: center; align-it..