본문 바로가기

전체 글171

백준 자바스크립트 컴파일 에러 계속 컴파일 에러가 나서 왜 그런가 했더니 return 해서 그런거였다. 답안은 그냥 return 없이 console.log(답안) 하면 되는 거였다. 아 그리고 그 외에도, input값을 가져올 때 import fs = require('fs') var input = fs.readFileSync('/dev/stdin').toString().split(' '); 이렇게 해서 input 을 가져와야 하더라. 참고 https://velog.io/@imysh578/%EB%B0%B1%EC%A4%80-NodeJsJavascript-%EC%9E%85%EB%A0%A5%EA%B0%92-%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95 2024. 1. 13.
[ JavaScript ] 타이핑 효과 이번에 개인 사이트를 만드는 중인데, 페이지 첫 화면이 너무 심심한 느낌이 있어서, 고민을 하다가 타이핑 효과로 간단한 메세지를 처음에 띄우면 좋겠다는 생각이 들었습니다. Next.js를 사용하고 있어서 React를 사용해서도 만들어볼테지만, 기본적인 자바스크립트로 먼저 구현을 해보고자 합니다. 1) 먼저 텍스트를 넣을 태그와 원하는 출력 텍스트를 지정하고, // index.html // index.js const paragraphTag = document.querySelector('.title') const content = '안녕하세요. 프론트엔드\n개발자\n김영은입니다.' 2) 맞는 로직을 짭니다. //index.js const paragraphTag = document.querySelector(".. 2024. 1. 13.
[ Next.js ] Error: next-image-unconfigured-host const nextConfig = { images : { remotePatterns : [ { protocol : 'https', hostname : 'prod-files-secure.s3.us-west-2.amazonaws.com', } ] } } https://nextjs.org/docs/messages/next-image-unconfigured-host 2024. 1. 8.
[ TailwindCSS ] tailwind.config.js 커스텀 스타일 만들기 테일윈드에는 기본적으로 theme이 정의가 되어 있는데, 디폴트 값을 변경하거나, 새로운 스타일을 추가하고 싶을 때 tailwind.config.js에서 정의내려주면 된다. 디폴트 값⬇️ https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js 디폴트 값을 변경하고 싶으면, 즉 덮어 쓰고 싶으면, theme 안에 바로 추가해주면 된다. //tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', }, colo.. 2024. 1. 4.
[ style X ] Error:stylex.create should never be called. It should be compiled away. //next.config.js import StylexPlugin from '@stylexjs/nextjs-plugin'; import path from "path"; const nextConfig = { experimental: { forceSwcTransforms: true, }, async rewrites (){ return [ { source:'/home', destination:'/' } ] } } const __dirname = path.resolve(); export default StylexPlugin({ filename: 'stylex-bundle.css', rootDir: __dirname, useCSSLayers: true, })(nextConfig); //package.json { .. 2024. 1. 4.
CSR vs SSG vs ISR vs SSR CSR (Client Side Rendering) SSG (Static Site Generation) ISR (Incremental Server Regeneration) SSR (Server Side Rendering) 렌더링 주체 클라이언트 = 브라우저 서버 서버 서버 렌더링 시점(시기) 브라우저에서 요청할 때 마다 빌드 시 빌드 시 브라우저에서 요청이 올 때 마다 특징(단점, 장점) TTV (Time To View) FCP (First Contentful Paint) 처음에 로딩되는데 시간이 걸린다. TTV(Time To View)가 길다. FCP(First Contentful Paint)까지 오래 걸린다. 빠르다 빠르다 빠르다 (비교적으로 SSG, ISR보다는 느리다) html 비어있다 비어있지 않.. 2023. 12. 30.