티스토리

JadeCode

검색하기

블로그 홈

JadeCode

jiyeongstar.tistory.com/m

오류를 발견하고 해결하는 것에 매우 큰 희열을 느낍니다

구독자: 0

방명록 방문하기

주요 글 목록

[SQLD] 제55회 SQLD합격 후기 제55회 SQLD 합격 후기 자격증을 따게 된 이유2024년 10월. 갑자기 퇴사하고싶은 마음이 들면서 이직을 위해 이대론 안되겠다, 자격증을 따야겠다라는 생각이 들었다.그 전까지는 전공자인데 자격증을 왜? 라는 생각이 들었지만 일을 하면서 프론트엔드 개발자라도 간단한 쿼리정도는 어느정도 할 줄 알아야한다고 생각했기 때문이다. 스스로 쿼리를 짜 보면 되지만 목표가 없으면 하지 않을 성격이기에, SQLD를 따기로 마음 먹었다.SQLD 시험 구성시험 시간은 총 90분이며 아래와 같이 문제가 출제된다.1과목 - 데이터 모델링의 이해: 10문제(문항당 2점) → 총 20점 (8점 미만 과락)2과목 - SQL 기본 및 활용: 40문제(문항당 2점) → 총 80점 (32점 미만 과락)각 과목별로 최소 40% 이상 .. 공감수 1 댓글수 0 2025. 3. 25.
[TypsScript] 타입스크립트의 독특한 타입들 (Unknown, Never, Void, Any) 타입스크립트는 자바스크립트에서 타입을 추가한 확장 버전이다. 타입스크립트는 정적 타입 검사를 통해 많은 런타임 오류를 컴파일 타임에 미리 잡아낼 수 있다.타입 불일치, 함수 호출 오류, 잘못된 객체 접근, 잘못된 반환 값, 잘못된 this 참조 등의 오류를 실행 전에 잡아낼 수 있어 이를 통해 코드의 안정성, 가독성, 유지보수성을 크게 향상시킬 수 있다. 타입스크립트의 타입 중 독특한 타입에 대해 알아보는 시간을 가져보자. * 더 큰 타입의 값을 더 작은 타입의 값으로 할당하는 것은 안된다.let num1: number = 10; // 더 큰 타입 ex) 직사각형let num2: 10 = 10; // 더 작은 타입 ex) 정사각형num1 = num2; // num1에 num2 할당 가능num2 = num.. 공감수 1 댓글수 0 2025. 2. 20.
[tailwindcss] 테일윈드란? .m-1{margin:10px} .m-2{margin:20px} .text-sm{font-size:12px} .text-lg{font-size:18px} 자주 쓰는 스타일을 클래스명으로 만들어 사용하는 utility class utility class 여러 개 모아놓은 라이브러리이다. Bootstrap과의 차이점 bootstrap도 완성된 Component를 많이 제공하고 Utility class를 제공한다. tailwindcss가 더 많다. 그래서 tailwind가 용량은 크지만 build시 안 쓰는 스타일은 제거해준다. Material UI와 차이점 mui는 미리 만들어진 컴포넌트들을 이용하는 느낌이라면 tailwind는 className으로 빠르게 커스텀하는 느낌이다. Tailwind단점 자주 쓰는.. 공감수 0 댓글수 0 2023. 5. 22.
[Next.js13] 2023. 새로운 next create-next-app으로 프로젝트를 새로 만드는데 App router(recommend)라는 cli옵션이 있었다. 아무 생각 없이 Y를 누르고 프로젝트가 생성되기 기다렸다..... 컴포넌트 구조가 기존에는 app/pages, app/styles였다면 이번에는 바로 src/app으로 통일되어있었다. 이제서야 찾아본 나. 반성하는 중이다... next.js가 13버전으로 업데이트 되면서 라우팅 방식이 바뀐 것이다. 그리고 여러가지 바뀐 점이 있는데.. 1. Layout 과거의 프로젝트에서는 따로 Layout.tsx로 파일을 만들고 _app.tsx에 제일 상단에 적용했다. import Layout from "@/components/utils/Layout"; export default function A.. 공감수 0 댓글수 0 2023. 5. 21.
[모노레포] 공통 패키지 만들어 의존성 넣기 모노레포를 사용하는 가장 큰 이유는 공통된 작업을 줄이기 위해서라고 생각한다.예를 들어 Header, Footer, 버튼 스타일 등 한 서비스에서 각각의 프로젝트를 진행한는데에 공통된 컴포넌트나 함수가 있을 때 공통 패키지를 만들어 사용하는 것이 효율 성이 좋을 것이다. packages/lib폴더를 생성하고 package.json파일을 생성하고, typescript를 설치한다.//루트 디렉토리상태mkdir packages/libcd packages/libyarn inityarn add typescriptpackages/lib/package.json파일 이름을 변경하고 main을 추가한다."name":"@non/lib","main":"./src/index.ts"packages/lib/tsconfig.jso.. 공감수 0 댓글수 0 2023. 5. 19.
[모노레포] yarn berry 시작하기 1. yarn berry 버전 변경2. 프로젝트에 yarn berry 초기화 후 apps디렉터리 생성 후 package.json > workspaces에 apps추가yarn init -wmkdir appscd appsapps디렉토리에서 yarn create next-app으로 next.js 프로젝트 생성yarn create next-app? Tainwind ?그동안 스타일링을 scss, styled-components 등 다양한 디자인 방식을 적용해왔다.최근 Tailwild CSS를 사용하여 개발한 사람들은 개발 속도가 빨라지는 장점이 있다고 한다. 따로 css파일 없이 하는거라 컨텍스트 스위칭도 없고, 시멘틱한 클래스명을 정하는 시간도 사라지는 장점이 있다고 한다. 4. package.json 의 "n.. 공감수 0 댓글수 0 2023. 5. 18.
[모노레포] 협업을 위한 .nvmrc 모노레포는 여러 개의 관련된 프로젝트를 하나의 저장소에서 관리하기 때문에 node.js버전을 통일하여 개발하는 것이 버그와 호환성 문제를 예방할 수 있다. node.js버전을 명확히 하는 것이 좋다. nvm은 node version manager로 노드 버전을 쉽게 관리하고 변경할 수 있다. 1. nvm 설치 nvm -v로 nvm설치 확인을 하자 mac os nvm 설치방법 https://jiyeongstar.tistory.com/143 [리뷰] Linux와 Node CLI command-line interface 프롬프트(prompt) CLI의 명령줄 대기모드를 가리키는 것으로, 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간 명령어 pwd // 현재 위치 확인 mkdir // 새로운 폴더 생성.. 공감수 0 댓글수 0 2023. 5. 18.
웹사이트를 앱으로? 웹뷰! https://mealti-38fed.web.app/ MEALTI 밀티로 오늘의 식사를 기록해보세요 식비 가계부 보러가기 → 뭐 먹을지 고민 된다면? 레시피 추천 받으러 가기 → mealti-38fed.web.app 파이어베이스로 호스팅 한 내 웹 사이트 밀티! 반응형으로 구현하였기 때문에 모바일 상에서도 잘 열린다. 하지만 왠지 모르게 어플로 된다면 좋겠다... 라는 생각이 들던 와중 웹뷰로 해서 폰에 다운 받으면 어떨까 라는 생각에 웹뷰에 대해서 알아보게 되었다. React Native로 만들기! expo를 사용하면 쉽게 만들 수 있다. npm install -g expo-cli npx create-expo-app 앱이름 npm install -g eas-cli // eas 서비스 이용 Expo 회원.. 공감수 0 댓글수 0 2023. 5. 18.
React-Query 도입기 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 5. 2.
모노레포(MonoRepo) 기존에 react-native로 만들었던 앱 프로젝트를 next.js로 웹으로 만들려고 했다. 하지만 둘에서 공통으로 작업되는 함수가 있으며 비슷한 코드들이 있어서 하나의 레포로 만들면 어떨까 하는 생각으로 기술을 찾아 보다가 모노레포 라는 것을 발견했다. 모노레포(Monolithic Repository)는 하나의 저장소에 여러 프로젝트나 모듈들을 함께 저장하는 소프트웨어 개발 방법론이다. 기존에 하나의 프로젝트마다 별도의 저장소를 유지하는 멀티레포 방식과는 다르게 모노레포에서는 모든 코드를 하나의 저장소에서 관리함으로써 여러 가지 장점을 제공한다. 코드 공유와 코드 복사 붙여넣기의 양을 줄일 수 있으며, 코드 병합과 코드 배포의 작업을 더 쉽게 관리할 수 있다. 대표적으로는 Turborepo, Yarn.. 공감수 0 댓글수 0 2023. 4. 27.
네아로 로그인 시 발생한 오류 nonployfill을 사용하면 된다. https://medium.com/bom-i/naver-login-api-babel-polyfill-issue-af6f3cd22387 Naver Login Api Babel polyfill issue 네아로 Api를 많은 사용자들이 사용하고 있고 최근에는 다양한 SPA가 같이 활용되고 있습니다. medium.com 공감수 0 댓글수 0 2023. 4. 22.
Next.js에서 나만의 customAlert 만들기 일반 alert창을 조금 특별하게 만들고 싶었다. 너무 너무 만들고 싶었다. customAlert("확인")}/> 위의 div에서 onClick 을 눌렀을 때 진짜로 커스텀 알람이 실행되길 원했다. 우선 검색을 해 보니 ReactDOM.render를 사용해서 만들어 보길 추천하였다. 그래서 코드를 작성했다. import { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import styled, { css } from "styled-components"; interface CustomAlertProps { message: string; onConfirm: () => void; } const CustomAlert = ({ mes.. 공감수 0 댓글수 0 2023. 4. 21.
GraphQL 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 4. 13.
[혼프] 혼자하는 프로젝트 3. firebase storage Firebase Storage 사진저장 방법 사진을 저장하기 위해 또 clientApp.ts에서 새롭게 import할 라이브러리가 있다. // firebase/clientApp.ts import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; import "firebase/compat/auth"; import firebaseConfig from "firebaseConfig.json"; const app = firebase.initializeApp(firebas.. 공감수 0 댓글수 0 2023. 3. 31.
[혼프] 혼자하는 프로젝트 2. firebase store 이제 로그인을 했으니 초기 정보를 저장해야지~~ 나에게 필요한 기본 정보는 간단하다. 유저 별 초기화 날짜와 월 식비! 일단 파이어베이스에 Firestore Database를 추가한다. 그 후에 작업 시작 일단 컬렉션은 users로 두고 문서의 ID는 유저의 uid를 사용해서 정보를 저장한다. import React, { useState } from "react"; import { doc, getDoc, setDoc } from "firebase/firestore"; import { firestore,fireAuth } from "firebase/clientApp"; interface InputForm {//input initialDate: number; budget: number; } const Reg.. 공감수 0 댓글수 0 2023. 3. 30.
[혼프] 혼자하는 프로젝트 1. firebase-auth 적용기 MEALTI - mealtime(식사시간) - 식비기록가계부 커뮤니티 작년 2학기, 캡스톤 디자인이라는 수업에서 팀 프로젝트를 했다. 하지만 리액트 네이티브를 처음 도입해봤고, 새로운 시도였기 때문에 별로 마음에 들지 않았다. 피그마에 디자인이 남아있기도 해서 혼자 firebase로 적용해보겠다고 생각했다. firebase로그인 with firebaseui next-firebase-auth를 사용할까 하다가 firebaseui로 하면 더 쉬울 것 같아서 react-firebaseui를 하려고 했다가. https://github.com/gladly-team/next-firebase-auth#readme GitHub - gladly-team/next-firebase-auth: Simple Firebase a.. 공감수 0 댓글수 0 2023. 3. 29.
[Next.js] 유튜브 불러오기 프로젝트를 하던 중 유튜브 링크를 입력하고 불러와야하는 작업이 있었다. 처음에는 iframe을 사용하여 유튜브 링크를 넣었다. src 에 유튜브 링크 주소를 그대로 넣었더니 이런 메세지가 떴다. 검색을 해 보니 "https://www.youtube.com/watch?v=????" 형태로 된 주소는 허용하지 않는 것이다. 해결 방법은 단순하다. ????부분은 영상의 ID로 그 ID를 토대로 불러오면 된다. "http://www.youtube.com/embed/????" 형태로 src에 집어 넣으면 된다. function extractVideoID(url: string) { var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=.. 공감수 0 댓글수 0 2023. 3. 23.
[Leetcode] Algorithm Day2 Two Pointers 977. Squares of a Sorted Array 정렬하기. 하지만 sort내장함수 쓰지 않고 시간복잡도 O(n)으로 만들기 1. 일단 각 숫자들을 문제에 나와있는대로 제곱을 한다. 2. 선택 정렬 알고리즘 사용한다. * 선택정렬 알고리즘 배열을 돌면서 최소값을 찾아간다. 현재 index와 최소값을 가진 index를 swap한다. /** * @param {number[]} nums * @return {number[]} */ var sortedSquares = function (nums) { nums = nums.map((el) => Math.abs(el) * Math.abs(el)); const swap = (a, b, nums) => { [nums[a], nums[b]] = [nums[b], nu.. 공감수 0 댓글수 0 2023. 3. 18.
React-Query 시작하기 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 3. 17.
React-Query 도입에 대한 고민 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 3. 16.
[styled-components] 타입스크립트 적용, 다크모드 최근 스타일도 컴포넌트화 하는 CSS-in-JS가 점점 뜨고있다. 직접 사용해보니 props를 넘겨 사용할 수도 있고 여러 면에서 편리하여 애착이 가는 라이브러리이다. 프로젝트를 처음 세팅할 때 styled-components 에 초기 세팅하는 법을 정리해보자. 설치 일단 프로젝트를 생성한다. 최근 공부하고 있는 next.js와 typescript로 생성하자. npx create-next-app@latest --typescript 그리고 만든 프로젝트 내부에 styled-components를 설치한다. npm i styled-components npm i @types/styled-components //타입지정 타입스크립트도 사용할 예정이기 때문에 npm i @types/~ 도 설치해야된다. 또한, st.. 공감수 0 댓글수 0 2023. 3. 14.
[Leetcode] Algorithm Day1 Binary Search Binary Search Binary Search(이진 탐색) 이진 탐색은 오름차순으로 정렬된 리스트에서 특정한 값의 위치를 찾는 알고리즘이다. 최소값는 리스트의 첫 번째 값이고, 최대값은 리스트의 마지막으로 설정한다. 중간의 값을 중앙값으로 설정하고, 중앙값 target이면 중앙값이 새로운 최대값이 된다. 정렬된 리스트에만 사용할 수 있다는 단점이 있지만, 검색이 반복될 때마다 목표값을 찾을 확률은 두배가 되므로 속도의 측면에서는 장점이다. 704. Binary Search 기본적인 binary search이다. /** * @param {number[]} nums * @param {number} target * @retu.. 공감수 0 댓글수 0 2023. 3. 7.
console.log에 색깔 넣기 console.log에 %c를 사용하여 색깔을 넣을 수 있다. console.log("%c Hello, World!","background:blue; color:white") 배경색과 글자색 모두 변경할 수 있다. 또한 error와 warn역시 표현할 수 있다. console.error("error!") console.warn("warn!") 공감수 0 댓글수 0 2023. 3. 4.
[프로그래머스] Level2 > 시소 짝꿍.js 문제 설명 어느 공원 놀이터에는 시소가 하나 설치되어 있습니다. 이 시소는 중심으로부터 2(m), 3(m), 4(m) 거리의 지점에 좌석이 하나씩 있습니다. 이 시소를 두 명이 마주 보고 탄다고 할 때, 시소가 평형인 상태에서 각각에 의해 시소에 걸리는 토크의 크기가 서로 상쇄되어 완전한 균형을 이룰 수 있다면 그 두 사람을 시소 짝꿍이라고 합니다. 즉, 탑승한 사람의 무게와 시소 축과 좌석 간의 거리의 곱이 양쪽 다 같다면 시소 짝꿍이라고 할 수 있습니다. 사람들의 몸무게 목록 weights이 주어질 때, 시소 짝꿍이 몇 쌍 존재하는지 구하여 return 하도록 solution 함수를 완성해주세요. 제한 사항 2 ≤ weights의 길이 ≤ 100,000 100 ≤ weights[i] ≤ 1,000 몸.. 공감수 0 댓글수 0 2023. 3. 3.
[프로그래머스] Level2 > 카펫.js 문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 .. 공감수 0 댓글수 0 2023. 2. 28.
[자바스크립트] 2진수, 8진수, 16진수 변환 알고리즘을 풀다보면 2진수로 변환해 풀어야하는 문제들이 종종 있다. 자바스크립트 메소드를 사용하면 쉽게 바꿀 수 있다. 10진수 -> 2진수 ->10진수 let decimal = 25; let binary = decimal.toString(2); // '11001' let binaryToDecimal = parseInt(binary,2); //25 + 8진수, 16진수 let octal = decimal.toString(8) //'31' let hexadecimal = decimal.toString(16) //'19' let octalToDecimal = parseInt(octal,8) //25 let hexadecimalToDecimal = parseInt(hexadecimal,16) //25 중요한 .. 공감수 0 댓글수 1 2023. 2. 9.
Typescript를 사용하는 이유 타입스크립트는 왜 만들어졌을까? ?자바스크립트를 버리고 타입스크립트로 넘어오는 이유? 타입 안전성때문 엄청난 개발 경험. 코드에 버그가 줄어든다. 런타임 에러가 줄어든다. 생산성도 늘어난다. 런타임에러가 최악인 이유? 왜 타입 안전성이 중요한가? 자바스크립트는 매우 유연한 언어이다. 그렇기 때문에 자바스크립트는 에러를 보여주지 않으려고 노력한다. 예를들어 [1,2,3,4] + false 를 작성하면 '1,2,3,4false' 배열과 false를 더하면 string형태가 된다. 다른 언어였다면 이상한 일인데 가능하다. 또한 argument가 2개 필요한 코드도 한개만 작성해도 에러가 안나고 NaN이 나온다. 개발자로서 우린 조금 보호받을 필요가 있다. 다른 언어는 보호해준다. 자바스크립트는 확인작업을 거치.. 공감수 0 댓글수 0 2023. 1. 2.
Android 에 Firebase 연동하기 데이터베이스와 간단한 rest api까지 사용 가능한 파이어베이스를 사용해서 안드로이드 어플 만들기 파이어베이스 프로젝트 생성 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 파이어베이스 사이트에 들어가서 시작하기 -> 프로젝트 추가 를 눌러 프로젝트를 생성한다. 디버그 서명 인증서 SHA-1 우측 코끼리를 누른 후 gradle signingReport를 검색하고 엔터를 누르면 여러 정보들이 나온다. 여기서 필요한 SHA1을 찾아 복사 붙여넣기를 하면 된다. 앱 등록 후 구성파일 다운로드 후 추가한다. Firebase SDK추가 다.. 공감수 0 댓글수 0 2022. 12. 11.
RN navigation 공식문서 https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org expo로 프로젝트 생성 후 tabs로 설치하면 자동으로 설치된다. 그렇지 않으면 하나하나 설치해주어야 한다. 필자는 처음부터 expo로 설치했다. 설치 npm install @react-navigation/native npm install @react-navigation/native-stack with expo npx expo install react-native-screens react-native-safe-area-context with bare React Native npm i.. 공감수 0 댓글수 0 2022. 11. 18.
RN 디버깅 에러 핸들링 에러메세지 읽기. 무엇이 잘못되었고 문제가 무엇인지에 대한 첫번째 힌트이다. 에러메세지가 완벽하지 않은 경우도 있지만 제일 첫번째 에러가 생긴 이유를 알 수 있다. 에러메세지를 보면 해결을 위해 어디를 살펴봐야 하는지와 어떤 부분을 수정해야 하는지도 알 수 있다. 추가적으로 아랫부분에 스택트레이스를 살펴보면 어디에서 에러가 발생했는지 알 수 있다. 보다보면 유용한 정보가 있다. 공식문서를 살펴보는 것이 좋은 해결책이 될 수 있다. 모바일기기의 에러메세지보다 터미널의 에러메세지를 보는 것이 더 분명하다. CONSOLE.LOG이용 console.log를 이용하면 어플리케이션의 흐름을 이해하기 좋다. 값이 출력되거나 변수나 상태의 값이 출력되게 할 수도 있다. 자바스크립트로 원격으로 디버깅하기 터미널에서 m버.. 공감수 0 댓글수 0 2022. 10. 30.

문의안내

티스토리
로그인
고객센터

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