Skip to content

3주차 세션 과제#13

Open
sunwin1029 wants to merge 1 commit intomainfrom
week03/Heaseung
Open

3주차 세션 과제#13
sunwin1029 wants to merge 1 commit intomainfrom
week03/Heaseung

Conversation

@sunwin1029
Copy link
Copy Markdown
Contributor

✨어떤 과제를 수행했나요?✨

  • 3주차 나만의 블로그 만들기
  • 프로젝트 기본 세팅

✨어려웠던점, 트러블슈팅✨

  • husky 를 적용하려 했지만, deprecated 된 명령어라고 떠서 여러가지 방법을 시도해봤지만 제대로 적용하지 못했습니다.
  • 생성형 ai 의 도움을 많이 받았는데, ai에만 의존해서는 원하는 결과물을 못만들것 같다는 생각이 들었습니다.

🤔 PR Point

  • husky 를 적용시키는 방법을 알고 싶습니다.
  • yarn dev를 통해 나오는 로컬 호스트 주소가 아닌, 다른 방법으로 실행을 해볼 수 있는 방법이 있는지 알고 싶습니다.

Copy link
Copy Markdown
Member

@hyun907 hyun907 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React의 핵심 개념들을 잘 이해하고 구현해주신 것 같아요!

특히,
컴포넌트 분리: UI와 로직을 적절히 분리해주신 점
상태 관리: useState를 활용한 깔끔한 상태 관리
조건부 렌더링: 화면 전환을 자연스럽게 구현해주신 점
이벤트 핸들링: 사용자 인터랙션을 잘 처리해주신 점

전부 좋았습니다! 😍

import styles from './styles/App.module.css';

function App() {
const [input, setInput] = useState('');
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용하지 않는 state는 주석처리나 삭제해도 될 것 같아요!

comments: [
{ id: 3, text: 'ai가 없던 시절 개발자들은 어떻게 프로그래밍을 했을까요' },
{ id: 4, text: '24시간이 부족해요' },
{ id: 5, text: '사자의 서재 만드신 운영진 분들이 너무 멋있어요' },
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

감사합니다... 😎

function App() {
const [input, setInput] = useState('');
const [selectedPost, setSelectedPost] = useState(null);
const [isWriting, setIsWriting] = useState(false);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

selectedPost와 isWriting 상태로 화면 전환을 관리한 점 정말 좋았습니다! 조건부 렌더링도 자연스럽게 잘 구현해주셨어요!

@hyun907
Copy link
Copy Markdown
Member

hyun907 commented Jul 27, 2025

PR Point에 대한 답변을 드리자면,

husky 적용 시 deprecated 된 명령어가 나왔다면,
혹시
npx husky add .husky/HOOK_종류 "실행할 커맨드"
를 실행하신 게 아닐까 싶네요.

yarn install -D husky 
npx husky init

해당 명령어 실행 후, 적용해보시고 안 되시면 다시 연락 주세요!
참고로 허스키는 .git 이 있는 Git 저장소 루트 위치에서 실행해야 동작한다고 합니다!

참고: https://velog.io/@seesaw/%EA%B0%9C%EB%B0%9C-%EC%83%9D%EC%82%B0%EC%84%B1%EC%9D%84-%EB%86%92%EC%9D%B4%EB%8A%94-Husky-%EB%8F%84%EA%B5%AC-%ED%99%9C%EC%9A%A9%EB%B2%95-wuwqli2l


두번째 질문은 실행 목적에 따라 달라질 것 같은데

  1. 포트 변경
    yarn dev --port 5000 이런식으로 포트를 바꿀 수 있어요!
  2. 개발 환경이 아닌 빌드 환경
    yarn build 입력 후
    yarn start 명령어 실행을 하면 빌드 환경에서 볼 수 있습니다!
  3. 외부 환경에서도 접속 가능하도록 실행
    yarn dev --host 0.0.0.0
    그러면 http://192.168.xxx.xxx:3000 과 같이 같은 네트워크에 있는 다른 기기에서도 접속 가능합니다.

대부분 프레임워크는 기본적으로 localhost에만 바인딩합니다.
외부 접근이 필요하면 --host 0.0.0.0으로 바꿔야 다른 기기에서 접근 가능하고,
실제 배포를 위해서는 Netlify, Vercel, AWS S3+CloudFront 등을 써야 합니다.

그 외에도 Docker 실행 (로컬 환경 의존성 줄이기) 하는 방법도 있으니 목적을 알려주시면 더 자세하게 알려줄 수 있을 것 같아요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants