티스토리

Kkan_-

검색하기

블로그 홈

Kkan_-

kkanz.tistory.com/m

그냥.

구독자: 0

방명록 방문하기

주요 글 목록

[나만의어플] 일본어 공부 앱 요즘 J-pop의 매력에 빠져 살고 있다.밴드 음악이나 인디스러운 음악을 좋아해서 어쩌다 듣게 되었는데,지금까지 푹 빠져있다..ㅎㅎ J-pop을 매일 듣다보니 자연스럽게 일본어에 관심이 갔고,최근에는 지인들과 도쿄에도 다녀왔다.여행을 하면서 간간히 일본어가 들리고, 이해하게 되니까공부에 대한 욕심이 확 생겨버렸다. 함께 간 형들이 일본어 공부 어플같은 거 있으면잘 쓸 것같다고 해서 행동파인 나는 바로 작업에 착수 이런 앱이 탄생하게 되었다. 1. 취지실용적인 공부를 원했다.목표는 진지하게 일본어에 대해 공부를 하고, 원어민 급 혹은 자격증 공부를 하기 위함이 아니다.여행을 가면 무슨 말하는 지 알아는 들을 수 있고, 가벼운 대답 정도는 할 줄 알게 만들자!가 목표였기 때문에 깊게 들어가고 싶지 않았다.때.. 공감수 1 댓글수 0 2025. 2. 28.
[Next.js] 난 분명 key를 설정했는데, 왜 경고가 뜨는 거야? 여전히 사이드 프로젝트를 진행하고 있다. 이게 뭐냐고! 코드를 확인해봤다.난 분명히 잘 설정 했는데?! 1. 문제 해결- Fragment 사용{teamList .sort((a, b) => a.rate - b.rate) .map((item) => { return ( ... ); })} - Fragment 삭제{teamList .sort((a, b) => a.rate - b.rate) .map((item) => { return ( .. 공감수 1 댓글수 0 2025. 1. 18.
[Side-project] 스크롤 이벤트에 따른 하단 GNB 상태 앱을 사용하다보면 스크롤을 아래로 내릴 때, 하단의 Bar가 사라졌다가 올릴때 다시 나타나는 경우를 확인 할 수 있다.나도 개인 프로젝트에 사용할 일이 있어서 정리해서 올려본다. [완성코드 - Next.js]'use client';import DimmedWrapper from '@/components/DimmedWrapper';import Navigation from '@/components/Navigation/Navigation';import React, { useEffect, useState } from 'react';type Props = { children: React.ReactNode;};type ScrollType = 'up' | 'down' | null;const Layout = ({ ch.. 공감수 0 댓글수 0 2025. 1. 17.
[html/css] 쿠폰 눌렀을 때, 내용물의 크기가 달라진다.. 오른쪽 그림을 보면" 스타벅스 아이스 카페 아메리카노 " 이지만,쿠폰을 클릭하면 " 스타벅스 아이스 카페 아메리카 " 가 되어있다. 이 문제는 .selected { border: 3px solid #7661FB; } 해당 코드에서 발생한 문제이다. 쿠폰이 클릭되면 ' selected ' 라는 클래스가 추가되도록 설정했는데, css가 border로 되어 있기 때문에 안쪽 공간을 border가 잡아먹기 때문에 발생한다.그렇다면 어떻게 해야할까? .selected { outline: 3px solid #7661FB; } 이렇게 하면 된다. ^ㅡ^ 대게 디자인 자체를 바꿀때에는 border를 사용하지만,디자인은 그대로인데, 기능적인 강조를 원하면 box를 해치지않는 outline이 더 좋다. 공감수 0 댓글수 0 2024. 12. 18.
[html] 태그 정리 최근 모 회사에서 면접을 봤다.기본기가 부족하다는 것을 알았다.그래서 정리한다. 1. html 기초 : HTML5 문서임을 선언하는 태그.: 모든 HTML 요소들을 감싸는 루트 요소.-- lang: 문서의 언어를 설정하는 속성. lang="ko"는 한국어로 설정. ( 우리는 한국이니 ): 웹 문서의 메타데이터를 담는 요소.: 메타 정보를 제공하는 태그. 대표적인 속성은 charset, name, content 등이 있음.-- charset: 문자 인코딩 설정 (일반적으로 UTF-8 사용).-- viewport: 모바일 웹 페이지를 조정할 때 사용.: 페이지 제목을 설정. 브라우저 탭에 표시됨.: 실제로 화면에 보이는 콘텐츠를 담는 요소.2. 문서 구조 관련 태그2.1. Heading 태그태그 이름: .. 공감수 5 댓글수 1 2024. 10. 22.
[css] unicode-range가 적용되지 않는다! // 영문, 숫자 등,,,@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; src: url("../public/fonts/Montserrat/Montserrat-Light.woff2") format("woff2"); unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;}// 한글만@font-face { font-family: "pretendard"; src: url("../public/fonts/Pretendard/Pretendard-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; .. 공감수 3 댓글수 1 2024. 10. 17.
[Next.js14 + Ts] build시 에러들 최근에친구들과 도란도란 만들고 있는 프로젝트가 있다.백엔드 하는 친구가 배포한다길래깃허브에 올려줬는데,뭔 에러가 난다고 한다.회사에서도 eslint나 prettier 설정을 누군가 해준걸 따라썼는데, 이번 기회에 좀 봐야겠다. 1. Error: Function component is not a function declaration react/function-component-definition 함수형 컴포넌트가 함수 선언문이 아닌 함수 표현식으로 정의되어 있을 때 발생 하는 에러다..eslintrc.json 또는 .eslintrc.js 파일에서 해당 규칙을 수정하면된다.(어이없네~ 난 함수표현식쓰는데 ㅡ,,ㅡ) 1-1. 함수 선언문으로 바꾼다.// ( 함수 표현식 )const Container = () .. 공감수 0 댓글수 0 2024. 10. 1.
[Next.js 14] form 데이터 받기 작년에 만든 PASS 인증을 위해1. AuthReq/index.tsx 에서 returnUrl 과 action 으로 만들고, getServerSideProps 로 받았던 코드가 있었다. 쨋든,, 이런 너저분한 코드가 있었다. 이걸 이번에 next.js 14버전이 되면서 app router로 바꿨는데,,안된다..인터넷을 겁나게 검색하면여러가지 말이 나오는데,, 후 다 복붙성이다(개짜증나!) 그래서 고민고민 또 고민 했다..결과 기존처럼form 데이터를 구성하고action url : 인증 urlreturn url :`${serverDomain}/api/AuthResult`로 구성했다. 이후import axios from 'axios';import { NextRequest, NextResponse } from .. 공감수 0 댓글수 0 2024. 9. 2.
[SuperPuTTY] Node.js 버전 컨트롤 next.js 14 버전으로 진행한 프로젝트를 서버에 올려야할 일이 생겼다.하지만 node 버전이 맞지 않아....업데이트를 좀 하려고 하는데 명령어가 말을 듣지 않는다.. sudo n 00.00.0 // 00.00.0 은 버전이다 자꾸sudo: n: command not found이라는 문장만 뜬다... 그러던 중 한줄기 희망을 발견한다. 1. n 을 찾아라which n 2. sudo와 함께 명시적으로 사용input: which nouput: /abc/local/abc/ninput: sudo /abc/local/abc/n stable // stable 버전으로 업데이트 이런식으로 사용한다. 이후에도 N_PREFIX 를 설정하는 하고 어쩌고가 있긴한데,,,잘 모르겠으니 담에 공부하는 걸로~! 공감수 0 댓글수 0 2024. 8. 30.
[스크롤 이벤트] 메뉴버튼 누르면 해당 위치로 이동하기 const CategoryMenu = ({ category }: string[]) => { const onClickTitle = (Title: string) => { const $Title = document.getElementById(Title); if ($Title) { const offsetTop = $Title.offsetTop; window.scrollTo({ top: offsetTop - 20, behavior: "smooth", }); } }; return ( {category ? ( {category?.map((item) => { return ( .. 공감수 0 댓글수 0 2024. 8. 29.
[Next.js] 회원가입 Form 만들기 🍖 회원가입 폼 위 화면을 구현해보려고 한다. 최소한의 스타일링만 했다! 🥩 기능 🍗 비밀번호 show & hide - 최초 비밀번호를 숨긴다. - 버튼을 누르면 비밀번호를 보여준다. 🍗 본인인증 - pass 인증을 한다. - 인증을 마치면 해당 인증이 된 데이터를 기반으로 가입자의 휴대폰 번호가 찍힘. - 다만, 연습이기 때문에 생략 - 무료로 쓸 수 있는 다른 인증 방식을 붙여보려고 한다. 🍗 약관동의 - "전체 약관에 동의합니다."를 누르면 아래 4개의 약관 체크 🍗 가입완료 - 모든 유효성 검사를 통과해야 가입완료 버튼 활성화 - 미통과시 버튼 비활성화 - 이메일: 기본적인 이메일 양식. - 비밀번호: 8~16자리 숫자, 영문, 특수문자 조합. - 비밀번호 확인: 상단의 비밀번호와 같은지. - 본.. 공감수 0 댓글수 0 2023. 8. 6.
내가 자주 쓰는 것들 회사 업무를 할 때, 공부할 때 등등,, 타입스크립트 버전이 필요할 때가 많았다. 매번 찾기 귀찮아서 생각날 때마다 업데이트하겠다. 2023.08.05 - 1차 🍕 classnames npm i @types/classnames 🥚 classnames의 타입스크립트 버전이다. 🥚 이 친구는 리액트의 classname을 중첩해서 표현하기 좋다. 공감수 0 댓글수 0 2023. 8. 5.
[프로그래머스] LV.00 🍳 공백으로 구분하기 function solution(my_string) { var answer = []; answer = my_string.replaceAll(' ',',').split(',') return answer; } 🍳 n보다 커질 때까지 더하기 function solution(numbers, n) { return numbers.reduce((acc, cur) => acc > n ? acc : acc+cur, 0) } 공감수 0 댓글수 0 2023. 8. 3.
[SVG 애니메이션] SVG 이미지에 애니매이션 넣기 프로젝트를 진행 중 사이드바의 svg 이미지에 애니메이션을 적용시켜야 할 상황이 생겼다.. 이 하트가 커져야 한다. 🎁 완성코드 1. SVG 이미지 컴포넌트 import React from "react"; const IPlanetSVG = ({ hover }) => { console.log(hover); return ( ); }; export default IPlanetSVG; 🎀 부모 컴포넌트에서 결정되는 hover가 true일 경우 조건부 인라인 스타일링이 된다. 2. 부모 컴포넌트 . . . // SVG 호버 --------------------- const [hover, setHover] = useState(false); const toggleHover = () => setHover(!hover).. 공감수 0 댓글수 0 2023. 8. 2.
[input] 체크박스 이쁘게 만들기 // html 주문한 상품정보(상품명, 상품가격, 휴대폰번호)를 가나다(상품 배송업체)에 전달 동의합니다. // css .checkbox { display: none; } .checkbox-label { position: relative; display: inline-block; width: 20px; height: 20px; cursor: pointer; } .checkbox-label:after, .checkbox-label:before { content: ""; position: absolute; background: #fff; } .checkbox-label:before { width: 9px; height: 5px; border-left: 2px solid $gray-30; border-bott.. 공감수 0 댓글수 0 2023. 7. 28.
[Next.js] 모달 창 켰을 때, 새로고침 / 뒤로가기 / 스크롤 막기 import { useEffect } from "react"; // 뒤로가기 금지 const usePreventBackButton = () => { useEffect(() => { if (typeof window !== "undefined") { window.history.pushState(null, "", window.location.pathname); window.onpopstate = () => { window.history.pushState(null, "", window.location.pathname); }; } return () => { window.onpopstate = null; }; }, []); }; // 스크롤 금지 const usePreventScroll = () => { useEf.. 공감수 0 댓글수 0 2023. 7. 26.
[프로그래머스] LV.00 코딩테스트 연습 🍕 마지막 두 원소 function solution(num_list) { var answer = [...num_list]; let num1 = num_list.at(-1); let num2 = num_list.at(-2); if(num1 > num2) { answer.push(num1 - num2) } else { answer.push(num1 * 2) } return answer; } 🍕 배열에서 대소문자 변환하기 function solution(strArr) { var answer = []; for(let i = 0; i < strArr.length; i++) { i % 2 === 1 ? answer.push(strArr[i].toUpperCase()) : answer.push(strArr[i].to.. 공감수 0 댓글수 0 2023. 7. 24.
[Next.js] 간단하게 아코디언 메뉴 만들기 (일반 css 버젼) 회사에서 이런 저런 컴포넌트들을 만들다가 아코디언 메뉴를 대량으로 만들어야할 상황이 생겼다. 어찌저찌 만들었지만, 좀 더 깔끔하게 만들어보고자 기본만 챙겨보았다.(과연..?) 🚆 MainComponent.tsx import React, { useState } from "react"; import Card from "./Card"; import styles from "../styles/mainCompo.module.css"; import cl from "classnames"; type ItemDatas = { id: string; maxPoint: number; minPoint: number; usePoint: number; point: number; }; const datas = require("/cor.. 공감수 0 댓글수 0 2023. 7. 22.
[프로그래머스] LV.0 문제들 🚑 첫 번째로 나오는 음수 function solution(num_list) { var answer = -1; for(let i = 0; i < num_list.length; i++) { if(num_list[i] < 0) { return i } } return answer; } 🚒 접두사인지 확인하기 function solution(my_string, is_prefix) { var answer = 0; answer = my_string.slice(0, is_prefix.length) === is_prefix ? 1 : 0 return answer; } ** slice라는 내장함수를 통해 잘라서 === 비교 한다. 🚚 조건에 맞게 수열 변환하기1 function solution(arr) { return .. 공감수 0 댓글수 0 2023. 7. 19.
[input 자동 넘기기] Input의 길이만큼 입력했을 때, 다음 Input으로 자동 넘기기 많은 사이트를 보면 위 사진처럼 입력창이 연달아 있는 걸 볼 수 있다. 이때, 사용자 편의를 위해 입력이 완료되면 자동으로 넘어가게 해보자. 🎈 완성 코드 import Image from "next/image"; import styles from "@/styles/bookNLife.module.scss"; import classNames from "classnames/bind"; import { useState, useRef } from "react"; const cn = classNames.bind(styles); const BookNLife = ({ item, seq }) => { // 도서상품권 div 추가 const [inputGroups, setInputGroups] = useState({ ca.. 공감수 0 댓글수 0 2023. 7. 19.
[모던 자바스크립트] 13장 스코프 * 본 블로그 글은 모던 자바스크립트를 읽으며 진행했음을 밝힙니다. * 개인적인 공부 기록용이, 상업적으로 사용하지 않으며 문제가 있을 시 즉시 글을 내리도록 하겠습니다. 13장 스코프 1. 스코프란? scope란, 유효범위이다. 자세히 말하면, 매개변수를 참조할 수 있는 유효범위이다. (var / let / const 가 다 다르다.) var x = 'global'; function foo() { var x = 'local'; console.log(x); } foo();// local console.log(x)// global 🚗 이렇게 같은 x 지만 결과 다르다. 🚗 자바스크립트는 어떤 변수를 참조할 지 선택하는데, 이를 식별자 결정 이라고 한다. 🚗 따라서, 스코프란 식별자를 찾는 규칙이라고도 할 .. 공감수 0 댓글수 0 2023. 7. 18.
[프로그래머스] Lv.0 글자 이어 붙여 문자열 만들기 🍔 글자 이어 붙여 문자열 만들기 function solution(my_string, index_list) { var answer = ''; for(let i = 0; i < index_list.length; i++) { let index = index_list[i]; answer += my_string[index]; } return answer; } 🍕 문제 해설 간단하다. 내가 뽑아야 할 index가 들어있는 index_list를 처음부터 훑어서 준배열인 문자열 my_string를 탐색한다. 공감수 0 댓글수 0 2023. 7. 18.
[프로그래머스] Lv.02 최솟값 만들기 🍔 최솟값 만들기 function solution(A,B){ let answer = 0; const sortA = A.sort((a, b) => a - b); const sortB = B.sort((a, b) => b - a); for(let i = 0; i a - b: 작은 수 부터 큰 수 🍟 (a, b) => b - a: 큰 수 부터 작은 수 공감수 0 댓글수 0 2023. 7. 18.
[env 경로 오류] .env.어쩌고 에서는 "=" 양쪽에 공백은 안돼~ 환경변수 파일인 .env 파일들이 있다. 갑자기 api들이 호출 되지 않아 머리가 아파왔다. # USER NEXT_PUBLIC_USER_AA = "http://localhost:3000/----------" NEXT_PUBLIC_USER_BB = "http://localhost:3000/----------" # PRODUCT NEXT_PUBLIC_PRODUCT_CC = "http://localhost:3000/----------" NEXT_PUBLIC_PRODUCT_DD = "http://localhost:3000/----------" 왜 안될까 생각을 하다가 이런 키워드를 발견했다. # USER NEXT_PUBLIC_USER_AA="http://localhost:3000/----------" NEXT_.. 공감수 0 댓글수 0 2023. 7. 18.
[모던 자바스크립트] 12장 함수 * 본 블로그 글은 모던 자바스크립트를 읽으며 진행했음을 밝힙니다. * 개인적인 공부 기록용이, 상업적으로 사용하지 않으며 문제가 있을 시 즉시 글을 내리도록 하겠습니다. 1. 함수란? const add = (x, y) => { return x + y; } add(2, 5) // 7 프로그래밍 언어에서 함수란, 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수를 호출하고 ( ) 에는 인자를 넣고, 함수는 (x, y) 매개변수를 받는다. 🎈 처음 프로그래밍을 할 때, 가장 많이 하는 실수가 있는데, 바로 함수를 만들고 호출을 하지 않는 것이다. 🎈 함수는 가독성좋고, 유지보수가 용이하게 만들어야 한다. 🎈 때문에 이름도 잘 지어야하고, 함수 내부의 코드도 잘 만들.. 공감수 0 댓글수 0 2023. 7. 13.
[css, scss] Rotate로 화살표 빙글빙글 요런 거 본 적 있을 거다. 이 화살표를 눌렀을 때, 이렇게 만들어야 할 일이 생기는데, 어떻게 하면 좋을까? 🍕 완성코드 Toggle.tsx import Arrow from "@/public/icon/Arrow.svg"; import styles from "스타일 경로"; import classNames from "classnames/bind"; const cn = classNames.bind(styles); const Home = () => { const [isRotate, setIsRotate] = useState(false); const handleArrowClick = () => { setIsRotate(!isRotate); }; return ( ); }; Home.module.scss // 화.. 공감수 1 댓글수 0 2023. 7. 12.
[프로그래머스] LV.2 올바른 괄호 🍕 문제풀이 1차 시도 const solution = (s) => { let answer = 0; const sArr = [...s]; for(let i = 0; i { let answer = 0; let sArr = [...s]; for(let i = 0; i < sArr.length; i++) { sArr[i] === '(' ? answer++ : answer-- if (answer < .. 공감수 0 댓글수 0 2023. 7. 5.
[프로그래머스] Lv.2 JadenCase 문자열 만들기 🌭 문제풀이 const solution = (s) => { let answer = ''; answer = s.toLowerCase() .split(' ') .map(el => el.charAt(0).toUpperCase() + el.substring(1)) .join(' ') return answer; } 🌭 해석 🍿 s.toLowerCase(): 문자열 s를 소문자로 바꾼다. 🍿 .split(' '): 공백을 기준으로 자른다. 🍿 .map(el => el.charAt(0).toUpperCase() + el.substring(1)) 반복문이다. el.charAt(0).toUpperCase(): el의 첫번째 문자 선택 후 대문자로 변환 + el.substring(1): el의 1번째부터 끝까지 선택 후 .. 공감수 0 댓글수 1 2023. 7. 4.
[모던 자바스크립트] 11장 원시 값과 객체의 비교 * 본 블로그 글은 모던 자바스크립트를 읽으며 진행했음을 밝힙니다. * 개인적인 공부 기록용이, 상업적으로 사용하지 않으며 문제가 있을 시 즉시 글을 내리도록 하겠습니다. 11장 원시 값과 객체의 비교 자바 스크립트의 데이터 타입에는 원시 타입과 객체 타입이 있다. 원시 타입의 값 객체 타입의 값 변경 불가능한 값 변경 가능한 값 변수 할당시 실제 값이 저장 변수 할당시 참조 값이 저장 다른 변수에 할당 시 원시 값 복사, 전달 다른 변수에 할당 시 참조 값 복사, 전달 🍔 원시 값 원시 값은 변경 불가능한 값이다.(immutable value) 변경 불가능하다고 해서 재할당이 안되는 것은 아니다. 쉽게 설명하면 이미 종이에 적힌 글자를 변경할 방법은 없다. 다만, 새로 적으면 변경할 수 있는 것이다. .. 공감수 0 댓글수 0 2023. 7. 3.
[프로그래머스] Lv.2 최댓값과 최솟값 🍕 문제풀이 const solution = (s) => { let answer = ''; const sArr = s.split(' '); const maxNum = Math.max(...sArr); const minNum = Math.min(...sArr); answer = `${minNum} ${maxNum}` return answer; } 🍕 해석 const sArr = s.split(' '); 문자열 s "1 2 3 4"를 공백을 기준으로 분리하여 sArr에 저장한다. const maxNum = Math.max(...sArr); const minNum = Math.min(...sArr); Math.max: 인수로 받은 숫자 중 가장 큰 수 Math.min: 인수로 받은 숫자 중 가장 작은 수 ..... 공감수 0 댓글수 0 2023. 7. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.