완벽한 프론트엔드

안녕하세요! jefferson98님!1. 가장 큰 차이는 하이브리드앱의 추가가 될 것 같아요!2. 그 다음 부분적인 차이는, react18 버전으로 수업 내용이 업데이트되어, 클라이언트컴포넌트와 서버컴포넌트가 나뉘어지면서 알아야하는 내용들이 추가되었고, 성능과 유지보수를 위한 리팩토링 전략들이 추가되었어요=> npm 배포, 무한스크롤성능개선(windowing), form-initialize 리팩토링, fragment 리팩토링, 글로벌스테이트 리팩토링(shallow-routing), 페이지히스토리 리팩토링(parallel-routing) 정도가 추가되었어요!

과제 Profile 부분 질문

안녕하세요! eehijnooy님!프로그래밍에서는 하나의 결과를 만드는데에 있어서 여러가지 방법이 있답니다!다만, 그 방법이 상황에 따라 효율적인지 여부가 중요할 뿐이지요! 따라서 어떠한 방법으로 작성하시더라도 모두 정답이며, 1. name, phone, E-mail, Instagram 모두가 다 다른 고유의 스타일을 가지고 있는 경우라면?직관적인 아래 방식이 효율적일 것 같아요!(내가 만든 코드를 다른 사람이 수정할 때, 시간낭비를 줄일 수 있음)=> profile_detail_name=> profile_detail_phone=> profile_detail_email,=> profile_detail_instagram,2. name, phone, E-mail, Instagram 모두가 다 동일한 스타일을 가지고 있는 경우라면?중복되는 코드를 방지하고 1회만 작성하면 되는 통일하는 방식이 효율적일 것 같아요!(중복코드를 작성/수정 하는 시간낭비를 줄일 수 있음)=> profile_detail 통일추가로, 모두 동일한데 phone 부분만 살짝 달라져야한다면?=> class는 id와는 다르게 여러개를 입력할 수 있답니다!=> 따라서, 아래와 같이 profile_phone의 CSS를 추가해 주세요이름 Phone E-mail 인스타그램

self-signed certificate in certificate chain 에러 발생

안녕하세요! gkdlsb1234님!상위 질문에서 답변드렸습니다!^^https://www.inflearn.com/community/questions/1525785/http-gt-htrtps-%ED%98%B8%EC%B6%9C-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EC%8B%A0%EB%A2%B0-%EC%98%A4%EB%A5%98

http => htrtps 호출 인증서 신뢰 오류

안녕하세요! gkdlsb1234님!self-signed 인증서를 사용하고 계신 것으로 보아, 로컬에서 톰캣 개발시 https 설정한 것 처럼 node/nestjs에서도 https를 설정하여 테스트 해보고 싶으신 것 같아요!톰캣 개발시 사용하셨던 방법과 마찬가지로, node에서도 self-signed 인증서를 적용하여 연습해 보실 수 있어요!아래와 같이 인증서를 만들어 보시고 적용해 보세요!(보안 목적상, 실제 배포 수업에서는 로드밸런서 등의 정식인증서를 활용하여 배포하며, self-signed 인증서는 단지 로컬에서 연습용으로만 사용해 주세요.) 연습용 self-signed 인증서, 키 만들기openssl req -nodes -new -x509 -keyout server.key -out server.cert -days 365 2. 중간에 localhost만 입력하고 나머진 다 그냥 Enter!(사진) 3. 완성된 결과는 아래와 같아요!(사진) node 서버에서 https 인증서 적용하여 https서버 만들기import express from 'express' import https from 'https' import fs from 'fs' import cors from 'cors' const app = express() app.use(cors()) app.get("/qqq", (req, res) => { res.json(JSON.stringify({ name: "철수", age: 12 })) }) https.createServer({ key: fs.readFileSync("server.key"), cert: fs.readFileSync("server.cert") }, app).listen((8443) => { console.log("https://localhost:8443 배포 완료") }) 요청을 위한 프론트엔드 만들기=> /qqq 엔드포인트에 api 요청해보기 https 요청하자 const call = async () => { const result = await fetch("https://localhost:8443/qqq") const data = await result.json() console.log(data) } 요청하자 self-signed는 신뢰하기 어려운 자체인증서이므로, 최초 접속시, 연결 허용하도록 풀어줘야 합니다.(사파리 브라우저도 마찬가지임)(사진) (사진) (사진)* 이제부터 해당 주소는 로컬에서 작동 가능합니다.(axios, fetch 등) 버튼을 클릭하여 요청해보기(사진)(사진)

포트원 질문입니다

안녕하세요! aasfa님!해당 이슈는 로그인이 안되어 있는 유저이기 때문에 실패한 것이랍니다!방금전에 테스트 해 본 결과, 정상적으로 작동됨을 확인하였어요!

[CSS 01-2-2] flex-wrap 한 칸 띄고 다음 줄로 넘어가는 현상...

안녕하세요! 수뼈님!현재 수뼈님께서는 제대로된 css를 작성하고 계시답니다!^^1. 아주 기본상태(부모는 width: 300 / height: 300 , 자식은 width: 90 / height: 100 )일 때.(사진)2. 부모 flexbox 내에 자식이 많아지면서 더 이상 공간이 없어지면?자식들이 조금씩 줄어드는 현상이 발생!(사진)(사진)사이즈를 줄어들게 만들고 싶지 않아요!차라리 줄바꿈 할래요! => flex-wrap: wrap(사진)따라서, flexbox의 기본 원리에 따라, 현재까지의 코드는 모두 정상적으로 작동하고 있는 것이랍니다!^^

tsconfig.json 파일에 대해 질문있습니다.

안녕하세요! 부드러운 족제비님!해당 에러는 src/App.js 또는 src/App.tsx 파일을 찾을 수 없을 때, 발생하게 됩니다.1. 이는 보통 windows의 경우, 파일명에 한글이 들어가 있는 경우에 찾을 수 없거나,2. App.js 또는 App.tsx 를 찾았지만, 해당 파일명을 변경/삭제 해서 찾을 수 없는 상태가 되는 등의 상황에서 발생하는 문제예요! 해결 방법으로는, vscode를 종료 후 다시 시작해 주시는 경우 해당 파일을 찾게 되면서 문제가 사라질 수 있으며, 이것으로 해결이 되지 않는 경우에는 위 2가지 방법을 하나씩 검토해 보세요!^^

23-05의 hoc적용시의 렌더링에 대한 질문드립니다.

안녕하세요! 지은님!위 내용만 가지고 현재 모든 상황을 파악하기에는 약간 어려움이 있으나,흐름을 놓고 보아, 쿼리의 이름 문제는 크게 관련이 없을 것 같아요! 우선적으로 테스트를 다시 진행해 보시되,반드시 테스트를 진행하시는 경우에는 소스코드 수정 => 자동리프레시를 통한 반영 상태에서 테스트 하지 마시고, 소스코드 수정 => 자동레프레시를 통한 반영 => 1회 새로고침 후 테스트를 진행해 주세요.(새로고침되지 않은 상태로는 완전한 초기화 테스트를 진행할 수 없음)위 과정으로 다시 궁금했던 부분들을 하나 하나 테스트 해 보시고, 그럼에도 문제가 되는 상황이 발생하면 해당 부분에 대해서 질문 남겨 주시면 해당 파트에 대해서 함께 테스트하면서 답변 드릴게요!^^

숙제 5번인데

안녕하세요! 규성님!질문의 내용으로 보아, import 대신에 왜 require를 사용하면 안되는지를 질문하신 것 같아요!javascript는 분리된 소스코드를 하나로 합치기 위해서 commonjs 방식과 module 방식이 존재한답니다! commonjs 방식을 사용하는 경우에, exports / require 셋트로 사용이 되며, module 방식을 사용하는 경우에, export / import 셋트로 사용이 된답니다! react 또는 nextjs를 사용하시는 경우에 내부에서 webpack 이라는 녀석이 위의 방식을 관리해 주게 되는데, 기본적으로 module 방식으로 작동하므로, export / import 셋트로 사용해 주셔야 한답니다!^^

타입에러가 계속생기는데

안녕하세요! 은님! 자세한 내용은 확인을 해봐야 알겠지만, react-infinite-scroller 라이브러리의 버전과 @types/react-infinite-scroller 의 버전이 달라서 생기는 문제도 의심해 볼 필요가 있을 것 같아요!더 높은 버전으로 올라가면서 타입이 달라졌거나, 추가/변경 되면서 생기는 에러일 가능성이 있어요!이를 강제로 재선언하여 해결하시긴 하였으나, 해당 라이브러리의 버전을 한 번 의심해 보시고 일치시키는 방법을 시도해 보는 것도 좋을 것 같아요!