08-06

안녕하세요! imhj11777님! 올려주신 스크린샷은 크게 문제가 있어보이진 않아요!실행시 사용되었던 docker-compose.yaml 파일과 해당 버전 등을 확인해볼 필요가 있을 것 같아요!^^docker-compose.yaml 파일을 스크린샷으로 공유해 주세요!^^

mydocker

안녕하세요! imhj11777님!docker-compose 설정에서 1. my-database 서비스를 만들어주셨는지 먼저 확인해 주세요.다음으로, 2. 성공메시지 또는 실패메시지 둘 중 하나가 나타나야 해요!실패하였다면?=> 해당 로그를 통해 실패 이유를 확인해 주세요!아무 내용도 나오지 않는다면?=> 접속이 되지 않아 시간이 걸리는 경우일 가능성이 높아요!(이 경우에는, 설정 또는 이름이 제대로 되어있는지 등을 확인해 주셔야 합니다!)

db관련 질문있습니다.

안녕하세요! 크하함님!postgres 파트는 백엔드 맛보기 수업으로 온라인에서만 제공되었어요!해당 과정은 별도의 보충수업 개념이기 때문에, 메인 과정에 영향을 주지 않는답니다!

coolsms statuscode 2000 인데 전송안돼는 경우 확인.

안녕하세요! Junee님!좋은 정보 공유 감사드립니다!^^

for in for of 강의에서 starter() 함수가 starter is not defined

안녕하세요! 규성님!민규님의 말씀대로 start 함수가 counterMakert 내부에 있네요!답변주신 민규님 감사드립니다!^^

검색 결과 페이지네이션 1페이지(일단해결)

안녕하세요! 희주님!굉장히 꼼꼼히 공부하고 계신 것을 보니, 추후 완성될 프로젝트의 퀄리티가 기대되네요!^^페이지네이션은 어쨌든 검색결과들의 페이지이기 때문에 영향이 존재하는 것이 맞아요!검색어에 따른 페이지네이션 결과는 항상 변해야하기 때문이지요!따라서, keyword를 전달해 주시는 것이 맞으며 현재 잘 작성하고 계신 것이랍니다!만약 추가적으로 더 고도화된 학습을 원하신다면, 추가적인 리팩토링 방법을 아래에 알려드릴게요! 1단계) 키워드를 로컬데이터캐시(recoil, zustand 등)을 통해 전달 받는 방법2단계) 페이지 이동시 샬로우라우팅을 활용하는 방법 나중에 시간이 나시면 해당 키워드를 참고하여 리팩토링도 도전해 보세요!^^추가 질문에 대한 답변도 드리자면, useEffect에서 setState는 피할 수 있으면 피하되, 상황이 어쩔 수 없다면 꼭 나쁘다고만 볼 수는 없어요!^^(특히, 억지로 피하려다가 오히려 유지보수를 해친다면 차라리 한 번 더 렌더하는게 나을 것 같네요!^^)따라서, 먼저 한 번 도전 해 보시고, 최종 결과를 보고 선택해 주세요!yarn dev 가 적용이 안되는 경우는, 어쨌든 yarn dev를 하였을 때 컴퓨터는 관련된 파일들을 모두 읽어서 하나로 묶고 어떤 내용들이 변경되었는지 등의 일을 해야 한답니다!(.next 폴더)하지만, 파일이 많아지면서 이러한 변화 감지가 제대로 되지 못할 수 있는데, 이럴 때는 .next 폴더를 삭제하고 다시 yarn dev를 해주시는 방법으로 시도해 보시면 좋을 것 같아요!(마찬가지로 타입체킹, eslint 체킹 등도 파일이 점점 많아지면서 읽어들이는데 시간이 소요되거나 잘 못 읽을 수도 있답니다^^)

질문드립니다

안녕하세요! baekjw9님!좋은 질문 감사드립니다!^^1. axios 또는 fetch 수업 추가 및 변경 계획이 있는지=> next 서버 fetch 방식으로 수업이 변경될 수도 있음을 염두하고 있으나, 당분간은 현 구조를 유지할 계획에 있답니다!^^이유를 말씀드리면, 현재 react18과 next14의 버전 업데이트에 따른 변화로 미래 프론트엔드 시장에 큰 변화가 진행중에 있답니다!현재 프론트엔드에서 사용중인 서버데이터의 클라이언트캐시(react-query, apollo-client 등) 도구들 대신에 next 서버에서 fetch를 활용한 next서버캐시 구조로 점점 프론트엔드 시장이 변화중에 있어요이러한 시장 변화에 따라, next 서버 fetch 방식으로 수업이 변경될 수도 있음을 염두해 두고 있으나, 아직은 대부분의 회사가 클라이언트캐시를 적극적으로 사용하고 있으므로 당분간은 현 구조를 유지할 계획에 있답니다!^^ 2. nextjs에서는 axios를 사용하는 대신에 fetch를 사용하는것이 맞을까요?=> fetch 사용을 추천드려요!과거 axios를 많이 사용하였으나, 현재 fetch가 브라우저에 내장되었을 뿐만 아니라, node에도 fetch가 도입되었습니다. 따라서, jest 등의 테스트 연동에서도 효율적일 수 있으며, next 서버단에서 fetch 역시 추가적인 캐시기능이 포함되었으므로 axios는 현 시점에서 이러한 장점을 누리기 어려울 것 같아요! 미래 방향도 동일할 것이라 판단되네요!^^(과거 수업에서 axios로 진행했던 부분도 이번 업데이트 수업에서 fetch로 변경되었어요!)

기존강의 수강질문

안녕하세요! 크하함님!코드캠프와 함께해 주셔서 감사합니다!^^만약, 절반 이상 수강중이시라면 기존 강의를 마무리 짓고, 추가된 내용만 따로 학습(아래 스크린샷 첨부)해 주실 것을 추천드립니다!항상 마무리가 중요한 것 아시죠!^^ 새롭게 업데이트된 강의에서는 아래와 같은 내용이 추가 되었으므로 꼭! 추가 학습 해 주세요!1. CSS&JS => 기초적인 부분 탄탄히! (쌓임맥락/z-index/애니메이션/크로스브라우징 등)2. 프론트엔드 => 더 실무적으로(제네릭타입을 활용하여 공통라이브러리 만들기/공통라이브러리 npm에 올리기/와이어샤크로 알아보는 api 트러블슈팅)=> react18과 next14로 바라보는 미래 프론트엔드(RCC와 RSC/클라이언트캐시 vs next 서버캐시)=> 리팩토링 다모여라!(shallow-routing으로 로컬데이터캐시 최소화/parallel-routing으로 복잡한 뒤로가기 시스템 통합/fragment로 graphql 최적화/RSC-RCC 를 알맞게 사용하자!)3. 하이브리드앱=> 반응형 디자인만 하면 앱도 만들 수 있는거 아니었어?(웹뷰 사용 이유/웹-앱 데이터전달 시스템/서로 다른 디바이스에 UI 최적화 시키기/1개 잘 만들어서 태블릿과 웹에 확장하는 시나리오)=> 로그인 토큰은 async-storage에 저장하면 되는거 아니었어?(루팅을 활용한 async-storage 위험성 실습/앱에서의 로그인프로세스)=> 도메인을 분리하자(마이크로프론트엔드, 웹뷰간 캐시공유)하이브리드앱은 현재 업로드중에 있으며, CSS&JS와 프론트엔드먼저 아래에 스크린샷으로 확인해 주세요!* 파란색 박스가 신규 추가 내용들입니다CSS&JS(사진)(사진)(사진)(사진)(사진)(사진)(사진)(사진) 프론트엔드(사진)(사진)(사진)(사진)(사진) 하이브리드앱=> 업로드 진행중

싸이월드 과제 쪽이 궁금합니다.

안녕하세요! 푸우푸우님!프로그래밍 공부를 열심히 하고 계신 것 같아 보기 좋아요!^^먼저, 시작하기 앞서 프로그래밍에서는 틀린방법이란 존재하지 않습니다!얼마나 더 효율적인지가 다를 뿐!, 결과맞 알맞게 나온다면 모두 맞는 방법이랍니다^^따라서, 프로그래밍 공부를 하실 때는 방법은 언제든 개선하면 되는 것이므로, 결과가 알맞게 나오는지 많이 시도해 보시는게 중요해요! 또한, 이러한 시행착오가 더 나은 코드를 만들어주게 된답니다!^^(가장 효율적인 코드를 찾긴 어려워요! 왜냐하면 그보다 더 효율적인 코드가 어딘가엔 또 있을테니까요!) 그러면, 더 효율적인 관점에서 첨언을 드리자면,(사진)좌측과 같이 바깥상자에 패딩을 주시면 1번만 주시면 되지만, 안쪽상자들에 마진을 각각 주시게되면, 상자 갯수가 늘어날수록 해야할일이 많아지게 된답니다!그렇다고 무조건 마진이 나쁜 것은 아니며, 패딩이 무조건 좋은 것도 아니랍니다!상황에 따라 효율적인 방법을 선택해 주셔야 하며, 현재 상황에서는 각각에 모두 마진을 주는 것보단 바깥 상자에 패딩을 주는 방향으로 바꾸면 더 좋은 코드가 될 것 같아요!^^

댓글 내용 수정 중 문제 / inputs 리팩토링 중 질문

안녕하세요! 희주님!이미 작성한 댓글을 삭제하는 것은 가능하나, 빈문자열("")로 수정하는 방법은 일반적인 웹 서비스에서 허락되지 않는 경우가 대부분이랍니다!왜냐하면, 등록할 때도 마찬가지로 빈문자열("")의 댓글을 등록하려면 등록이 안되는 것과 동일한 맥락이에요!그럼에도 불구하고, 이를 가능하게 만들고 싶다면, state를 하나 만들고(ex, const [touch, setTouch] = useState(false)), 댓글의 입력창을 1회 이상 건드렸을 때 해당 state를 true로 변경해 보세요!^^실제로 비슷한 경우에 많이 사용되는 변수명(touch) 이랍니다!희주님! 정말 실력이 많이 올라오신 것 같아요!^^Object.fromEntries 기능을 활용하여 리팩토링 하신 것 깔끔한 방법인 것 같네요!^^1) 위에서 만든 방법을 import만 하여 재사용 가능하도록 function으로 만들어서 언제든지 불러올 수 있도록 업그레이드도 고려해 볼 수 있을 것 같아요!2) 만약, form이 너무 복잡해져서 안의 구성 내용을 한눈에 파악(코드가 복잡하고 큰 규모의 프로젝트라면, 코드가 길더라도 가독성 높고 안전한 코드가 더 중요합니다!)할 수 있어야 하는 경우라면,const initialize = { // name: "",// age: "",// likeCount: 0// ...// ...}와 같이 초기값을 설정해 주시고, 초기화가 필요할 때 setInputs(initialize) 형태로 사용해 보세요!^^