173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
테디노트님 안녕하세요. 항상 좋은 강의와 빠른 QnA 감사드립니다. 다름이 아니라 제 페이지가 구글에서 검색되면, 위와 같이 제목이 'Github Pages'로 뜨고 favicon을 설정해주었음에도 해당 부분이 지구본으로 뜹니다. 파비콘은 구글링해서 완성 했고, 다른 영역에서는 잘 뜹니다. 혹시 이 부분들도 바꿀 수 있을까요? 감사합니다.
미해결
만들면서 배우는 리액트 : 기초
https://cataas.com/undefined 로 나오는데 왜그런건가요? 28강 수강하고 있는데 fetch를 사용하려고 하는데 이미지가 안나와요 ㅠㅠㅠ
해결됨
모두의 깃 & 깃허브
안녕하세요 PR 관련 질문드립니다. Fork 한 후 Clone 해서 Branch를 생성한다고 이해했습니다. 이 때 궁금한 것이 Fork 하지 않고 바로 제 로컬 저장소에 Clone한 후에 PR은 불가능한 것인지요? Fork 한 후 Clone 해서 Branch를 생성 후 커밋 한 후에 PR 요청을 보낼 때 만약 PR을 거절 당한다면 원본 repository와 저의 원격 저장소가 차이가 발생할텐데 보통 이런 경우에는 제 원격저장소를 reset해서 원본 repository와 버전을 맞춰주는지 궁금합니다.
해결됨
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
안녕하세요. 깃허브 블로그나 몇몇 올린 게시글들을 비공개 처리 하려고 하는데 "For security reasons, you cannot change the visibility of a fork." 계속 이런 문구가 떠서 비공개 처리가 안됩니다. 방법이 없을까요?
해결됨
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
좋은 내용 감사합니다. 프롬프트 내용중에 "Translate Into Korean~" 이라는 내용으로 답변을 한글로 받게 됩니다. 혹시 [events] 밑에 오는 사용자 입력값과 동일한 언어로 결과를 받고 싶다면 어떻게 작성하면 될까요? 강의 내용을 기준으로 다국어 서비스를 만들려고 하는데, 영어가 짧아서 질문 드려요
미해결
pnpm, vite를 사용하여 리액트 프로젝트 생성한 다음 tailwind 랑 typescript, shadcn/ui 를 설치하였는데요. shadcn/ui를 쓰려고 버튼 컴포넌트를 임포트 하는데 파일경로가 계속 잘못되었다고 합니다. 다 확인했는데 도저히 어디가 문제인지 몰라서 여쭤 봅니다. 이런 오류가 뜨고요 tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, "baseUrl": ".", "paths": { "@/*": ["./*"] }, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } vite.config.ts import path from "path" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, }) App.tsx import './App.css' import { Button } from "@/components/ui/button" function App() { return ( <> <div className="ml-4 mt-8 text-3xl font-bold underline"> Hello world! </div> <div> <Button>Click me</Button> </div> </> ) } export default App 입니다. 현재 @이게 적용이 안되고 있는 것 같습니다 근데 파일 누르면 올바르게 해당하는 파일로 이동이 잘됩니다. 어디가 문제일까요 ?
해결됨
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
안녕하세요, 테디노트님. 항상 좋은 강의 감사합니다. 이번 강의 거의 완강한 학생인데요. 검색 엔진 부분 2번 정도 돌려보며 안 따라한 게 있는지 체크까지 다 했는데, 일단 전부 제대로 하긴 했습니다. 근데 제 블로그가 그냥 구글에 검색하면 뜨지 않아서, 이게 제대로 되고 있는지 확신이 안 섭니다. 혹시 구글에 등록되었는지 확인하는 방법이 있을까요? 제가 해당 부분 따라한지 한 3주 정도 지났습니다.
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
name: Deploy Frontend on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin - run: docker build -t jaewonhimnae/react-test -f Dockerfile.dev . - run: docker run -e CI=true jaewonhimnae/react-test npm test - name: Generate deployment package run: zip -r deploy.zip . -x '*.git*' - name: Deploy to EB uses: einaregilsson/beanstalk-deploy@v18 with: aws_access_key: ${{ secrets.AWS_ACCESS_KEY }} aws_secret_key: ${{ secrets.AWS_SECRET_KEY }} application_name: react-docker-gh-test environment_name: React-docker-gh-test-env existing_bucket_name: elasticbeanstalk-ap-northeast-2-972153559337 region: ap-northeast-2 version_label: ${{ github.sha }} deployment_package: deploy.zip 코드가 이렇게 되어 있는데 run : docker build -t jaewonhimnae/react-test -f Dockerfile.dev . 이 부분을 보면 Dockerfile.dev 로만 build를 하는데 Dockerfile, docker-compose-yml, docker-compose-dev-yml 파일은 사용하지 않는 건가요? Docker desktop에 보면 이미지가 없던데 이미지는 다른 곳에 생성, 저장되는 건가요?
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
안녕하세요 수업내용 중 운영환경 도케 이미지를 위한 Dockerfile 작성하기 에서 *********************************************** FROM node:alpine as builder WORKDIR /usr/src/app COPY package.json ./ RUN npm install COPY ./ ./ CMD ["npm", "run", "build"] FROM nginx COPY --from=builder /usr/src/app/build /usr/share/nginx/html *********************************************** 위 와 같이 작성하였더니 아래 이미지와 같은 에러가 확인되었습니다. > [stage-1 2/2] COPY --from=builder /usr/src/app/build /usr/share/nginx/html: ------ Dockerfile:9 -------------------- 8 | FROM nginx 9 | >>> COPY --from=builder /usr/src/app/build /usr/share/nginx/html -------------------- ERROR: failed to solve: failed to compute cache key: failed to calculate checksum of ref 800cbe25-2c37-4cd8-a955-7b83c9ca7ed6::qsbcjgd4h6b5x2kfg8hzb8sb0: "/usr/src/app/build": not found *********************************************** >>> 경로를 생성하지 못하여 발생하는 것처럼 느껴져 RUN make -p 명령어를 사용하여 not found 되고 있다는 경로를 직접 생성해주고 나니 정상 build 되기는 하였습니다만. 이렇게 하면 혹시 덮어쓰기 되지 않을까해서 문의를 별도로 넣습니다. FROM node:alpine as builder WORKDIR /usr/src/app RUN mkdir -p /usr/src/app/build COPY package.json ./ RUN npm install COPY ./ ./ CMD ["npm", "run", "build"] FROM nginx COPY --from=builder /usr/src/app/build /usr/share/nginx/html
해결됨
모두의 깃 & 깃허브
혼자 공부하는 컴퓨터구조 + 운영체제, 모두의 깃 & 깃 허브 책 구입해놓고 영상이 좋아서 영상만 보고 있네요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
따라하며-배우는-노드-리액트-쇼핑몰 > 쇼핑 카트 페이지 데이터 가져오기 강의를 수강중에 있습니다. 17:30 부근에 제품을 배열로 다시 재정리 해주는 걸 설명해주고 계시는데 split 후에 map을 하는 이유가 궁금합니다. 값을 map 처리하기 전후로 찍어보니 값이 동일하게 나오는데 map 처리를 해주는 이유가 따로 있나 싶어서 여쭤봅니다.
해결됨
[React 1부] 만들고 비교하며 학습하는 React
안녕하세요 강의 정말 잘 듣고 있습니다. 해당 강의를 듣는중 궁금한점이 생겨서 질문 드립니다. 제가 원래 java/spring을 공부하다가 이번에 프론트 엔드쪽에 관심이 생겨서 React를 학습중인데 ide에서는 .js 파일을 Import할때 뒤에 왜 자동으로 .js가 안붙도록 되어있나요? 저는 강사님과 다른 ide를 사용중인데도 여기서도 .js가 자동으로 붙지 않습니다. import React from "react"; import Header from "./components/Header.js"; import KeywordList from "./components/KeywordList.js"; import SearchForm from "./components/SearchForm.js"; import SearchResult from "./components/SearchResult.js"; import Tabs, { TabType } from "./components/Tabs.js"; import store from "./Store.js"; 제가 추측한건데 React를 import 하는 경우에는 react 파일이 typeScript로 되어있고 나머지 경우는 전부 javaScript로 되어있습니다. 따라서 기본이 .ts로 설정 되어 있어서 javascript파일은 별로로 명시해줘야 찾을 수 있게 되어 있다고 생각이 듭니다. 별로 의미없는 질문이지만 궁금해서 질문 드립니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
서버 컴포넌트가 프론트 서버에서 미리 렌더링되는 것으로 알고 있었습니다. 이것이 맞을까요?? 클라이언트 컴포넌트랑 서버 컴포넌트의 렌더링 방식을 찾아봤음에도 여전히 헷갈리는데 시간적 여유가 되신다면 쉽게 알려주실 수 있을까요?? 클라이언트 컴포넌트 사이에 서버 컴포넌트를 넣으면 렌더링 동작이 어떻게 수행되는지 궁금합니다. 강좌에서는 PostArticle이라는 클라이언트 컴포넌트의 자식으로 서버컴포넌트를 넣는데, 공식문서에서는 클라이언트 컴포넌트가 DOM Tree의 끝에 오도록 하는 것을 권장하는 것으로 알고 있었는데 제가 잘못 알고 있던 것이었을까요??
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요. 2.1 단위 테스트란 무엇일까? 강의를 들으며 따라하고 있습니다. 강의에서 진행하고 있는 unit-test-example 브랜치에서 TextField.spec.jsx 파일을 따라 치며 테스트를 하려고 하는데 vscode 테스트 메뉴에서 '이 작업 영역에서 아직 발견된 테스트가 없습니다.' 라는 문구와 '추가 테스트 확장 설치'라는 버튼만 떠서 테스트 진행을 하지 못하고 있습니다. 강의에서 소개해주신 vitest를 설치하고 vscode를 껐다가 다시 켜봐도 테스트를 찾을 수 없다고 뜨고 있는데 제가 어떻게 하면 될까요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강의 보면서 PM2 배포를 따라해보았습니다. 5999번 포트를 사용했고, 몇 번 API 요청을 하면 EADDRINUSE 에러가 뜹니다. 0|index | Error: listen EADDRINUSE: address already in use :::5999 0|index | at Server.setupListenHandle [as listen2] (node:net:1872:16) 0|index | at listenInCluster (node:net:1920:12) 0|index | at Server.listen (node:net:2008:7) 0|index | at Function.listen (/home/ubuntu/hyerim-resume/server/nodemodules/express/lib/application.js:635:24) 0|index | at Object.<anonymous> (/home/ubuntu/hyerim-resume/server/index.js:6:11) 0|index | at Module._compile (node:internal/modules/cjs/loader:1376:14) 0|index | at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) 0|index | at Module.load (node:internal/modules/cjs/loader:1207:32) 0|index | at Module._load (node:internal/modules/cjs/loader:1023:12) 0|index | at Object.<anonymous> (/home/ubuntu/.nvm/versions/node/v21.2.0/lib/node_modules/pm2/lib/ProcessContainerFork.js:33:23) { 0|index | code: 'EADDRINUSE', 0|index | errno: -98, 0|index | syscall: 'listen', 0|index | address: '::', 0|index | port: 5999 0|index | } 이 에러가 이미 사용중인 포트로 실행하려고 하는 문제라고 해서 매번 sudo lsof -i :5999 , sudo kill -9 ~~ 로 서버를 껐다 키면 또 금방 해당 에러가 발생합니다. sudo lsof -i :5999 로 실행중인 프로세스를 확인하면 다음과 같습니다. COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME node\x20/ 1396 root 25u IPv6 451174 0t0 TCP ip-172-31-39-74.ap-northeast-2.compute.internal:5999->121.143.65.200:56521 (ESTABLISHED) node\x20/ 1396 root 26u IPv6 20785 0t0 TCP *:5999 (LISTEN) node\x20/ 1396 root 30u IPv6 451237 0t0 TCP ip-172-31-39-74.ap-northeast-2.compute.internal:5999->121.143.65.200:56645 (ESTABLISHED) Mac M2 로 서버에 접근해서 PM2를 실행하는데, Mac에서 AirPlay 모드를 꺼야 한다는 Stack Overflow 내용도 보고 꺼봤지만 역시나 에러가 뜹니다. pm2 start index.js —watch 로 pm2 인스턴스를 실행했더니 몇번 재시작을 자동으로 해주는 것 같지만 결국 재시작이 너무 잦다며 더이상 재시작이 되지 않는 것 같아요. 해결 방법이 궁금합니다 ㅠㅠ 아래는 제 서버의 package.json, index.js입니다. Package.json { "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node index.js" }, "author": "", "license": "ISC", "dependencies": { "compression": "^1.7.4", "cors": "^2.8.5", "express": "^4.18.2", "jsonwebtoken": "^9.0.2", "method-override": "^3.0.0", "mysql2": "^3.6.3", "nodemon": "^3.0.1", "socket.io": "^4.7.2", "winston": "^3.11.0", "winston-daily-rotate-file": "^4.7.1" } } index.js const express = require("./config/express"); const { logger } = require("./config/winston"); //log const port = 5999; express().listen(port); logger.info(`API Server Start At Port ${port}`);
해결됨
쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS
처음에 잘 되다가 다시 접속할려고 보니 다음과 같이 오류가 뜨면서 connect가 안됩니다.. 그리고 h2 embedded가 아닌 server로 계속 잡힙니다
미해결
코드로 배우는 React 19 with 스프링부트 API서버
토큰적용 후 발생하는 현상에 대해서 질문드립니다. Product게시판에 이미지에 경우, 아래와 같이 표시가되는데요 이때 토큰을 헤더에 설정 되어있지않기떄문에 {"error":"ERROR_ACCESS_TOKEN"}가 발생합니다. jwtAxios를 사용하여 처리는 가능할듯한데 문제는 결과값이 문자열로 되돌아와서 이미지표시가 좀 힘들어보이고 어떻게 처리해야할지 모르겠습니다. 이런경우 어떠한방식으로 처리하는게 좋을까요? src={`${host}/api/products/view/s_${product.uploadedFileNames[0]}`}
미해결
안녕하세요 react로 웹 페이지를 만들었는데 만든 사이트를 모바일로 삼성인터넷 앱을 통해 접속하니깐 크롬 연결 팝업이 자동으로 계속 나오게 되더라구요 혹시 코드상으로 크롬 연결 팝업이 뜨는걸 막을수있는 방법이 있을까요 ?
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
초반부에 도커 초록불 들어온 거 확인하고 docker run hello-world를 입력하고 엔터를 눌렀는데 아무 반응이 일어나질 않는데 뭐가 잘못됐는지 어림짐작가능하실까요?
해결됨
Next + React Query로 SNS 서비스 만들기
x.com 을 보면 로그인도 그렇고 게시글 올릴때도 그렇고 모달창이 뜰때마다 그냥 화면에 띄우는 방식이 아니라 저렇게 모달창을 띄울수 있는 url 따로 만든 이유가 뭘까요? 관리가 더 편해서일까요?
