[JS 03-1-1] 스크롤-스크롤 실습 관련 질문입니다.

안녕하세요! 방가워요님! 뒷부분에 크로스브라우징과 관련한 수업이 있으나 먼저 말씀드리자면, 크롬도 모두가 같은 크롬이 아니며, 버전에 따라 적용 가능한 기능이 다를 수 있어요! 따라서, 아래 2가지 방법 중 하나를 시도해 보세요.크롬 버전을 최신버전으로 업데이트 후, 다시 한 번 시도해 주세요.또는, 크롬브라우저에서 chrome://flags 를 입력하고 엔터를 쳐서 들어가시면, 관련 기능 설정을 제어할 수 있어요. 해당 목록에서 smooth scrolling 부분의 설정을 변경해 보세요!^^

댓글 수정 함수 바인딩이 안되는 것 같습니다.

안녕하세요! 룰루리랄라님!올려주신 코드만 보아서는 오타도 없고, 제대로 작동해야 정상일 것 같아요!보통, 이렇게 "당연히 돼야하는데 왜 안되지...?" 와같은 문제를 만나게 되시면,꼭 이 질문 이외에도 아래의 방법을 항상 따라해 보시면 거의 100% 해결되실겁니다!^^ [대부분의 문제 종류]node_modules, .next 등의 문제알고보니 잘못 작성했던 코드상의 오류버전 문제 [해결방법]node_modules와 .next 폴더를 삭제하고 yarn install을 다시 해 주시고 실행해보세요!=> 기존에 실행했던 코드내역이 새로운 코드로 리프레시가 안되었거나, 새롭게 적용되는 과정에서 발생된 문제일 수 있어요! 위 1번으로 해결이 안되었다면, 지금 해결하려는 내용을 제외하고 나머지 모든부분을 주석합니다.(관련된 내용의 함수명/변수명을 조금씩 변경해 보거나, console.log를 활용하여 잘 넘어오는지 체크해 보세요)1) 그랬는데 되는 경우: 주석했던 내용을 풀면서 어떤 주석을 풀었을때 문제가 발생하는지 찾아내기2) 그랬는데도 안되는 경우: 새로운 next폴더를 create-next-app으로 생성한 다음, 관련 파일만 최소한으로 이동시켜서 실행 => 보통은 여기서 다 해결됩니다(여기서 해결되면 본 프로젝트 폴더에서 app, layout 등 관련된내용 전부다 주석처리하고 하나씩 풀면서 원인을 찾아갑니다) 보통 2번까지 했는데도 안되신다면, 그건 버전문제가 99%이므로, create-next-app을 다른 버전으로 만들거나, 추가로 설치되는 라이브러리를 버전을 바꿔가면서 설치해보시면 결국 해결됩니다!^^

findOne 타입스크립트오류

안녕하세요! 크하함님! 데이터를 조회 해봤더니 없을 수도 있으므로, Product객체가 아닌 null이 될 가능성도 있어요!따라서, 최종 리턴타입에 Promise 부분에 Promise 을 추가해 주세요!(사진)

padding 과 box-sizing 질문

안녕하세요! 트랙님!어떠한 경우라도(box-sizing 이 border-box라 할지라도) padding값이 태그의 가로/세로 길이를 넘어가게되면 내용이 화면에서 사라지므로 표현 자체가 불가능하기 때문에, 마치 content-box인 것 처럼 전체 사이즈가 늘어나게 돼요!1. block 요소 + 가로/세로 길이가 없는 경우: 1-1) 가로: 가로길이가 없더라도, block요소는 한 줄 전체를 차지하므로, 가로 padding은 상관 없습니다.1-2) 세로: 세로높이가 없으면, padding을 조금이라도 주게되면 내용이 사라지므로 어쩔 수 없이 전체 높이가 늘어나게 됩니다. block 요소 + 가로/세로 길이가 있는 경우:2-1) 가로: 가로길이가 있더라도, padding이 가로길이를 넘어가게되면, 내용이 사라지므로 어쩔 수 없이 전체 가로가 늘어나게 됩니다.2-2) 세로: 세로높이가 있더라도, padding이 세로높이를 넘어가게되면, 내용이 사라지므로 어쩔 수 없이 전체 세로가 늘어나게 됩니다.inline 요소의 경우(inline요소는 원래 가로/세로 길이가 없음):=> inline요소는 가로/세로 길이 자체가 content에 맞춰지므로 padding이 추가되면 내용이 사라지므로, 어쩔 수 없이 늘어나게 됩니다. 최종적으로 1줄 요약드리면,box-sizinig이 border-box이든 inline이든 block 요소이든 상관 없이, 화면에서 표현이 불가능하면 일단 보여는 줘야되기 때문에 영역이 늘어나게 됩니다!^^

완벽한 프론트엔드

안녕하세요! 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의 기본 원리에 따라, 현재까지의 코드는 모두 정상적으로 작동하고 있는 것이랍니다!^^