전체 글197 [Github actions + React]배포 후 navigate 상대 경로 에러 React, Typescript, Vite로 진행중인 프로젝트를Github actions으로 배포함https:///.github.io//이런식으로 무료 도메인을 받음 에러 요약 : /부분은 base url로 인식이 안됨. 에러설명 : 1. 부여받은 도메인을 클릭하면 홈이 안뜨고 404가 뜸2. 예를들어서 로그인 페이지로 이동한다고 해보자, 로그인 버튼을 클릭하면 '/BaseUrl// LogIn' 로 가는게 아니라 '/BaseUrl/LogIn' 으로 감.. 홈으로 가는 버튼 클릭해도 '/BaseUrl/'로 안가고 '/BaseUrl/ '으로감.. 에러해결 방법: createBrowserRouter 함수의 두번째 인자로 basename을 설명해주면 됨. 에러 원인: 만약 로그인 페이지로 이동한다고 했을 때.. 2024. 11. 1. 문서를 잘 읽자 지금 진행하고있는 프로젝트에 드래그앤드롭 로직이 필요함 react-beautiful-dnd-grid라는 라이브러리를 발견!!!아주 반갑게 맞이하고 각종 우여곡절을 겪으며 거의 완성을 해가던 무렵...에러가 나서 검색해봤더니 이런 청천벽력을 뒤늦게 발견함 .....대략 새로운 라이브러리를 개발할꺼고 해당 라이브러리의 유지보수는 중단되었다는 이야기 내가 겪고 있는 에러를 고치고 사용할 수 있는 방법은 있었지만 더이상의 유지보수가 중단된 라이브러리를 사용하는것은 추후에 좋지 않을 것이라 판단하여 모두 지우고다시 하기로 ... 휴... 앞으로는 눈을 더 크게뜨고..정신 똑바로 차려야지 똑바로하자 2024. 10. 30. [React]createContext VS React.createContext const authContext = createContext(null);const authContext = React.createContext(null);두 코드 모두 같은 역할을 한다. 다른 예시를 들면useState를 React.useState로 사용하는 것 과 같음. 사실 React.useState로 호출하는 코드는 아직 한번도 보지 못했다... 그래도 궁금해서 찾아봄 나처럼 궁금해하는 사람들이 꽤 있었군 아무튼 결론은 차이점은 호출의 차이 const authContext = createContext(null);위의 방식은 글로벌 스코프에 createContext 함수가 존재한다고 가정하고 호출하는 방식.장점으로는 코드가 더 간결하다. const authContext = React.createC.. 2024. 10. 25. [React]Axios 에러테스트 feat.jest React typescript프로젝트에서 axios 에러 테스트 진행! (jest로 함)여기서 주의할 부분은 API 호출 성공 후 에러 상태 반환에 대한 테스트!! //에러 핸들링 파일import axios, { AxiosError } from 'axios';import ValidationMessages from '../components/Validations/ValidationMessages';const errorMessages: Record = { 40000: ValidationMessages.LOGIN_FAILED, 40001: ValidationMessages.INVALID_FORM, 40002: ValidationMessages.EXIST_USER, 40003: Valid.. 2024. 10. 24. [React]간편한 상태관리 훅 useLocation useLocation 란 ? 현재 경로로 이동할 때 상태(state)를 전달할 수있음. 전역적으로 관리해야할 상태가 아니라면 간단하고 쉽게 구현할 수 있다는 장점이 있음단점은 해당 상태가 브라우저에 저장되기때문에 새로고침하면 상태 다 날아감 사용하려면 react-router-dom이 설치되어 있어야한다.없다면 이렇게 설치하기npm install react-router-dom 사용 목적 : 이미지 목록에서 한 이미지를 선택하면해당 이미지의 디테일 페이지로 이동! 이때 클린한 이미지의 데이터를 함께 전송하고 싶었다. 그동안 사용했던 방식은 1. useContext, Redux를 통해서 데이터를 보관했다가 사용2. 쿼리에 id를 담아서 이동 후, 해당 페이지에서 id값을 받아서 다시 API와 통신하여 데이.. 2024. 10. 4. Git terminal 명령어 모음 작업 플로우↓# 1. 메인 브랜치로 이동git checkout main # 2. 원격 저장소의 최신 메인 브랜치 상태를 로컬로 가져오기git pull origin main # 3. 작업할 새로운 브랜치 생성 (기존 `main` 브랜치에서 분기됨)git checkout -b feature/name # 4. 작업 내용을 스테이징 영역에 추가git add . # 5. 커밋 메시지와 함께 변경 사항 커밋git commit -m "The message"# 6. 원격 저장소의 main 브랜치의 최신 상태를 다시 한 번 확인하여 가져오기 (병합하기 전에 최신 상태 유지)git pull origin main # 이 명령어로 원격 main의 변경 사항을 로컬로 가져옴. (fetch + merge 자동 실행)# 7. 로컬.. 2024. 8. 29. [백준 2747번 node.js] 피보나치 수 https://www.acmicpc.net/problem/2747 n이 주어졌을 때, n번째 피보나치 수를 구하는 프로그램을 작성하기동적 프로그래밍 (Dynamic Programming - DP)큰 문제의 해답에 그보다 작은 문제의 해답이 포함되어 있을 때 프로그램의 속도를 비약적으로 향상 시킴쉽게 말해서, 메모리를 사용해서 중 복 연산을 줄이고 중복 연산을 줄여서 수행 속도를 개선한다 가장 처음에 푼것은 DP의 가장 중요한 포인트는 죄다 던져두고 지멋대로 풀었다. let num = 10;//테스트 인풋function fibonacci(n) { if(n 하지만 이 문제에서 가장 중요한 것은 반복되는연산을 다시 수행하지 않는것!!!!!!!! 우선 재귀함수를 적용했을 때 ( 직관적이지만 여전히 같은 연.. 2024. 8. 21. [백준 7568번 node.js] 덩치 https://www.acmicpc.net/problem/7568 학생 N명의 몸무게와 키가 담긴 입력을 읽어서 각 사람의 덩치 등수를 계산하여 출력여담 코딩테스트를 꽤나 간만에 풀었더니... 매일 풀 때와 달리 시작 전부터 버벅 거렸다. 이럴때는어떻게 처리해야할지 먼저 단계적으로 적어보고 주어진 것, 요구하는 것, 필요한 로직 이렇게 나누어서 적어보면어떻게 접근해야하는지 시동이 걸리는 느낌이다.다시 코테와 친근해지기전까지는 계속 이럴 듯.. 해결방법 1. 주어진 문자열에서 필요한 값 추출const inputLines = input.trim().split("\n");const peopleCount = Number(inputLines[0]); // 사람 수const people = inputLine.. 2024. 8. 12. [JavaScript]prototype과 __proto__의 차이 .prototype이 뭐냐: prototype은 함수 객체(특히 생성자 함수)에만 존재하는 속성.생성자 함수로 객체를 생성할 때, 이 prototype 속성이 그 객체의 프로토타입이 됨. .prototype을 왜 쓰냐: prototype은 모든 인스턴스가 공유할 메서드나 속성을 정의하는 데 사용됨.예를 들어, 생성자 함수로 객체를 여러 개 생성했을 때, 이 객체들은 모두 동일한 prototype 객체를 참조함.이를 통해 메서드나 속성을 모든 인스턴스에 공유할 수 있음. .prototype 예시:function Dog(name) { this.name = name;}Dog.prototype.bark = function() { console.log("Woof!");};//생성자 함수에 있는 프로.. 2024. 8. 8. [TypeScript]Type Assertion , Type Casting Type Assertion 이 뭐냐 : 타입스크립트에서만 사용하는 개념으로 타입을 확인하거나 강요할 때 사용, 사용을 피하는 것이 좋음. 쉽게 말해서 컴파일러에게 "이 변수는 이 타입이야"라고 알려주는 방법Type Assertion 왜 하냐 : TypeScript 가 알 수 없는 타입을 사용할 경우, 타입을 선언하지않으면 에러가 난다.이런 상황에서 Type Assertion (타입 단언)을 해준다.에러 상황 예시const myCanvas = document.getElementById("main_canvas"); Type Assertion 어떻게 하냐 : as 문법꺾쇠 괄호() 문법Type Assertion 예시 :let someValue: any = "this is a string";let str.. 2024. 8. 4. 반쪽짜리 주니어의 2024년 상반기 회고 1. 초기목표 : 2024년도 초기목표의 키워드는 "협업" 이었다. 막 취업을 한 그때의 난... 2024년도에는 치열하게 사는 주니어 개발자로 성장해야지!라는 마음으로 가득했다.가장 좋았던 점은 내가 정말 재미있어서 한 취미와 회사의 서비스가 같아서 더 특별하게 느껴진 소중한 첫 회사였다. 기술적인 부분은 당연지사. 깃을 이용한 협업 환경에 직접 투입된다는 것이 가장 설렜다.2. 실제 일어난 일 :Git, Jira를 둘 다 이용해 볼 수 있었다. 깃은 회사에서 기존에 이용하던 것이라서 컨벤션을 따르며 순조롭게 습득했다. 하지만 지라는 막 도입을 한 단계여서첫번째 시도는 개발팀만 사용,두번째 시도는 모든팀이 함께 사용 이렇게 다르게 시도를 해보았다. 모든 팀이 함께 사용했던 것은 잦은 수정사항.. 2024. 8. 1. [TypeScript]Interface VS Type 간단 비교 📢📢인터페이스와 타입의 차이점!!! 우선 한 개 씩 알아보자첫 타자, 인터페이스 인터페이스란객치 구조를 정의하는 역할을 한다. 다시 말해서 특정 객체가 가져야하는 속성과 메서드의 집합을 인터페이스로 정의하여 객체가 그 구조를 따르게 함! 쉽게 말해서 객체와 객체들 간의 의사소통을 위해 규격을 정해놓는 것 like a 계약서. interface StudentInterface { age: number; name: string; } 인터페이스명은 대문자로 짓는다.다음 타자, 타입타입이란간단히 말해서 어떤 데이터를 담을때, 어떤 모습의 데이터를 담을지 정하는것. type StudentType { age: number; name: string; } 위의 타입은 number자료형만.. 2024. 7. 30. [백준 11047번 node.js] 동전 0 https://www.acmicpc.net/problem/11047 필요한 동전 개수의 최솟값을 구하는 프로그램 작성하기 해결방법 1. 주어진 문자열에서 필요한 값 추출let targetAmount = givenData.split('\n')[0].split(' ').map(Number)[1];let array = givenData.split('\n').map(Number).slice(1).reverse(); 2. 거꾸로 정렬되어있는 배열에서 목표금액과 배열에있는 동전들의 아이템들을 비교한다.array.reduce((acc,curr)=>{}); 3. 목표금액보다 작은 동전 아이템이 나오면!! 나누기를 실시하고 정수만 추출 acc.count = acc.count + Math.floor(acc.rem.. 2024. 6. 9. [백준 2884번 node.js] 알람 시계 https://www.acmicpc.net/problem/2884 원래 설정되어 있는 알람을 45분 앞서는 시간으로 바꾸는 프로그램을 작성 해결과정 1. 주어진 문자열 분리 const covertedInput = input.split(' '); 2. Date생성자 적용const convertedInput = new Date(2021, 0, 1, covertedInput[0], covertedInput[1]); 3. timestamp 생성 후 계산 const offset = 45 * 60 * 1000; const caculatedTimeStamp = givenDate - offset;4. Date 형태로 포맷 const newDate = new Date(caculatedTimeStam.. 2024. 6. 9. [백준 2908번 node.js] 상수 https://www.acmicpc.net/problem/2908 두 수가 주어졌을 때, 상수의 대답을 출력하는 프로그램을 작성 해결과정 1. 주어진 문자열을 숫자타입의 배열로 바꾼다. 배열로 바꿀때 선택자는 띄어쓰기 사용input.split(' ')2. 바꾼 배열의 숫자들을 거꾸로 정렬input.reduce((accumulator,currentValue)=>{},0) //숫자타입으로 변환하니까 0으로 설정 3. 정렬한 두 개의 숫자를 비교하고더 큰 숫자를 숫자타입으로 반환const reversedValue = Number(Array.from(currentValue).reverse().join(''));return reversedValue > accumulator ? reversedValue .. 2024. 6. 9. [백준 : 11720번 node.js] 숫자의 합 https://www.acmicpc.net/submit/11720/79358793 N개의 숫자가 공백 없이 쓰여있다. 이 숫자를 모두 합해서 출력하는 프로그램을 작성 해결 방법 1. 주어진 숫자를 프로그램에 사용할수있도록 쪼개기 let test = input.split('\n')[1]; 2. 주어진 숫자는 문자열이니 배열에 담자3. 합산식을 해야하니 문자열을 숫자로 변환하자let array = Array.from(String(test), Number); 4. 더하자let result = (array.reduce((accumulator, currentValue) => accumulator + currentValue, 0)); 5. 제출const fs = require('fs');const fileP.. 2024. 6. 8. [백준 : 10988번 node.js] 팰린드롬인지 확인하기 https://www.acmicpc.net/problem/10988 첫째 줄에 팰린드롬이면 1, 아니면 0을 출력한다. 팰린드롬이란 앞으로 읽을 때와 거꾸로 읽을 때 똑같은 단어를 말한다. 해결과정 1. 주어지는 단어를 배열로 담는다 2.각 알파벳을 쪼개서 담고 , 다시 합친다 3. 주어지는 문자와 비교하여 같으면 1 리턴, 다르면 0리턴 4. 제출const fs = require('fs');const filePath = process.platform === "linux" ? '/dev/stdin' : __dirname + '/input.txt';const input = fs.readFileSync(filePath).toString().trim();function reverseString(give.. 2024. 6. 8. [백준 : 2753번 node.js] 윤년 https://www.acmicpc.net/problem/2753 연도가 주어졌을 때, 윤년이면 1, 아니면 0을 출력하는 프로그램을 작성 해결 과정 1. 주어진 조건 나열_year % 4 === 0 && _year % 100 !== 0) || _year % 400 2. 출력되어야 할 값 추가 _year % 4 === 0 && _year % 100 !== 0) || _year % 400 === 0 ? 1 : 0; 3. 함수로 작성function leapYearGenerator(_year){ return (_year % 4 === 0 && _year % 100 !== 0) || _year % 400 === 0 ? 1 : 0;} 4. 테스트 코드 작성const assert = require('asse.. 2024. 6. 6. [백준 : 10172번 node.js] 개 https://www.acmicpc.net/problem/10172 콘솔로그로 귀여운 강아지를 출력하는문제고민 과정 1. 자바스크립트에 쓰이는 명령어가 있는가2. 있다면 어떻게 예외처리를 할 수 있는가? 아래처럼 냅다 콘솔로그로 찍으면 에러가 난다 ..console.log(`|\_/||q p| /}( 0 )"""\|"^"` |||_/=\\__|`); 해결 과정 1. 역슬래시 ( Backslash ) 는 \\를 사용해야 한개로 출력가능, 왜냐... \로 시작하는 명령어가 있기때문에 \ 다음으로 오는 문자를 명령어로 인식함 따라서 \\ (Forward Slash) 로 입력해줌으로써 escape 2. 백틱을 사용하면 줄바꿈명령어를 굳이 안 쳐도 되지만 ... 자동 줄바꿈 기능이있는 Fo.. 2024. 6. 6. [JavaScript]바닐라자바스크립트 컴포넌트생성하기 // 페이지(컴포넌트) 임포트 import Home from "./public/pages/Home.js"; import Design from "./public/pages/Design.js"; import Board from "./public/pages/Board.js"; import Submit from "./public/pages/Submit.js"; // 경로 문자열을 정규 표현식으로 변환하는 함수 const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$"); // 매개변수와 일치하는 값을 추출하는 함수 const getParams = match => { const values.. 2023. 12. 5. [JavaScript]Vanilla Javascript로 웹 컴포넌트 만들기 --스크랩 https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC-%E1%84%80%E1%85%AE%E1%84%92%E1%85%A7%E1%86%AB Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝open in new window에서 진행하는 블랙커피 스터디open in new window에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io 2023. 12. 4. [React.js]명령어로 리액트 프로젝트 생성하기 리액트 프로젝트 설치 전에 다운로드해야할 프로그램들 Node.js npm ( Node Package Manager) Node.js https://nodejs.org/ko/download/ npm $ node -v npm 으로 진행할 경우 아래의 명령어를 실행 npx create-react-app hello-react OR yarn https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com yarn으로 진행할 경우 아래의 명령어를 실행 yarn create react-app hello-react 프로젝트가 있는 경로로 이동하기 .. 2023. 12. 3. [JavaScript]비동기 작업 수행하는 코드 뜯기 아래 코드는 unbookClub 프로젝트를 진행하면서 API 도서검색 기능구현을 하며 사용한 코드다. onClick 함수로 아래의 아래의 코드와 연결시켰다. 기능 목록 event.preventDeafault(); => 새로고침 방지 setSearchError(null); => 검색 오류를 나타내는 상태 변수를 초기화.(useState 리액트 내장함수 사용) startLoading(); => customHook(contextAPI와 함께 사용함) 으로써 로딩 이미지를 보여주는 커스텀훅 호출 async { ... } await(error) { ... } => async 키워드는 함수를 비동기 함수로 선언. 이는 함수 내에서 await 키워드를 사용할 수 있게 하고, 함수가 항상 Promise를 반환. asy.. 2023. 11. 21. [firebase Hosting]프로젝트 배포 후 업데이트하기 feat.짱 쉬움 프로젝트 내용 수정 후 업데이트 하려면 아래와 같은 명령어를 입력해야함. 업데이트가 잘 되었다 야호 2023. 11. 9. [React.js]아코디언 메뉴 만들기 가이드라인이 적인 페이지를 만드는데 너무 밋밋해서 아코디언 기능을 넣기로 했다! 아래 사진의 질문, 답변은 임시텍스트를 아무거나 붙여놓음.. 위의 네모박스로 체크해둔 부분을 아코디언으로 구현하기로 했고 위의 HTML, CSS는 아래와 같다. 여기서 useCallback을 사용하면 함수가 렌더링마다 재생성되지 않으며, 의존성 배열을 사용해서 해당 배열의 값이 변경될 때만 handBtnClick함수가 다시 생성된다. 또한 직접함수를 선언하면 메모리에 여러 함수 인스턴스가 생성될 수 있지만,useCallback을사용하면 함수 인스턴스가 최소화 되어 메모리 사용량을 줄일 수 있다. 왜냐하면 useCallback을사용하면 함수 인스턴스를 재사용하기때문! 근데!! 위에처럼 엄청 간단한 코드는 많은 메모리를 사용하지.. 2023. 11. 6. [TypeScript]JS react -> TS react 리팩토링 자바스크립트로 작성된 프로젝트를 타입스크립트로 변환하는 과정. 기존 작업한 리액트 프로젝트 : React, webpack, babel로 구성되어있음. 마이그레이션 진행 전 폴더를 따로 백업해두고 새로 레파지토리와, 폴더를 만들어서 진행함. 참고한 블로그! https://projooni.tistory.com/entry/%EA%B8%B0%EC%A1%B4-Git-Repository%EB%A5%BC-%EB%B3%B5%EC%82%AC%ED%95%98%EC%97%AC-%EC%83%88%EB%A1%9C%EC%9A%B4-Repository-%EB%A7%8C%EB%93%A4%EA%B8%B0 기존 Git Repository를 복사하여 새로운 Repository 만들기 보통 Git Repository를 복사할 때 fork를.. 2023. 10. 25. [TypeScript]JS -> TS 리팩토링하며 겪은 오류 오류 메세지 : Cannot use JSX unless the '--jsx' flag is provided.ts(17004) const Container: IStyledComponent 오류 원인 : TypeScript가 JSX 확장자 파일 인식을 못해서. 해결 방법 : jsx 속성을 추가한다. 오류 메세지: Argument of type 'ProductItem | undefined' is not assignable to parameter of type 'ProductItem'. Type 'undefined' is not assignable to type 'ProductItem' 오류 원인 : 정의되지 않은 값이 들어올수 있다고 TS에게 정의를 하지 않아서, 알 수 없는 타입을 전달하는 과정에서 생김 해.. 2023. 10. 24. [React.js]구조설계 --스크랩 https://velog.io/@_seeul/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EC%A7%84%ED%96%89%ED%95%A0%EB%95%8C-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0%EB%A5%BC-%EC%9E%A1%EB%8A%94%EA%B2%83%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C React | 리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?🤔 리액트 초기세팅 후 컴포넌트 구조 설계하기 🧸 velog.io 매번 프로젝트 생성할 때 마다 .. 2023. 9. 25. [Git]원격저장소 -> 로컬저장소 clone || pull 오류 해결 --스크랩 clone 시 fatal: destination path '프로젝트명' already exists and is not an empty directory. 라고 뜨면 https://nagneo.tistory.com/18 [Git] 비어있지 않은 로컬 저장소로 Clone하기 보통 새로운 프로젝트를 만들 때, Github에 repository를 만들고 해장 저장소를 Clone 해서 사용한다. 오늘은 반대로 로컬 저장소에 폴더 및 파일을 만들고 이를 원격 저장소와 연결하는 절차를 정리하 nagneo.tistory.com 위의 블로그 참고, 혹은 로컬 폴더내에서 로컬 저장소를 pull하려고 할 때 Remote origin already exists 오류가 뜬다면 https://coding-factory.tisto.. 2023. 9. 20. [React]App.css VS index.css 결론부터.. 현재 코드를 작성하는 폴더의 이름과 같은 css 파일이 가장 바람직함. 개인적인 의견으로는 연습용 코드작성이라면 index.js보다는 App.js로 하는게 낫다. App.js는 프로젝트 진행시 서버 설정 / 미들웨어 정의 / 라우트 정의/인증 등 여러가지를 설정하고, (App의 상위 파일인) index.js는 index.html과 연결하여 화면에 렌더링을 하는 역할을 하기 때문에 대부분의 작업은 컴포넌트 -> App.js로 연결 -> index.js가 App.js를 import -> index.html와 연결되어 화면에 렌더링 하기때문에 실제로 index.js에 직접 화면 구현을 위한 코드를 짤 일이 많지 않기 때문.. 관련 블로그글 : https://pink1016.tistory.com/8.. 2023. 9. 15. 이전 1 2 3 4 ··· 7 다음
