클론코딩 인스타그램 클론 코딩 프로젝트 후기 feat westagram [Mission4] 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능 [Mission 2] Login | 로그인 버튼 활성화 기능 구현 [Mission 3] Main | 댓글 기능 구현 [Mission 5] Main | Mock data를 map을 활용하여 댓글 화면에 렌더링 기능 구현 [Mission 6] Main | Mock data를 map을 활용하여 ... 클론코딩WeCode위코드gitSassReact위스타그램React 빡공단 20일차 ➰ display: flex로 배열을 자유롭게 만들었다. ➰ 배경을 다시 흰색으로 만들었다. ➰ align-items: center로 nav 전체를 세로로 가운데 정렬! ➰ padding을 위아래는 0, 왼쪽 오른쪽은 20px를 줬다. ➰ flex: 1로 nav 안에 있는 친자식 div들끼리는 같은 간격으로 여백을 주었다. ➰ img는 인스타그램 페이지에서 가져옴! ➰ href="/"는 로고... CSS인스타그램클론코딩빡공단htmlCSS 유튜브 클론코딩 복습노트-2 각각의 상황에 맞는 페이지를 만들어나가면 다음과 같을 것입니다. video: /trending-videos /see-video /edit-video /upload-video /delete-video 이 경로들에 대한 요청을 모두 app.get()으로 받고, 각각에 해당하는 컨트롤러를 만들고, 필요한 미들웨어까지 만든다면 server.js 파일은 필요 이상으로 복잡해집니다. Express의 r... 클론코딩JavaScript유튜브node.jsexpress.jsJavaScript 브라우저가 데이터를 저장하는 법 지난 시간에 로그인 인풋 값을 활용해 이름을 띄우는 것에 성공했다. 이번 시간에는 브라우저를 새로고침해도 이름이 사라지지 않고 유지할 수 있는 법을 배웠다. 먼저 지난 시간에는 onloginsubmit을 활용해 event를 방지하고 form에 히든클래스를 적용해 input 데이터를 안보이게 처리하고 h1의 이너텍스트에 벡틱을 적용해 글을 채웠다 그리고 기존에 적용되있던 히든을 제거하는 과정을... 클론코딩JavaScriptJavaScript dwitter 1.2.0 업데이트 '좋아요' 데이터는 유저 객체 안에 추가할 수도 있고 드윗 객체 안에 추가할 수도 있습니다. 드윗을 불러올 때는 불러오는 모든 드윗의 id 값과 현재 유저의 데이터 안에 있는 '좋아요 표시한 리스트'에 저장된 id 값을 대조합니다. 그러나 좋아요 데이터를 유저 객체에서 관리하면 화면에 로딩되는 드윗의 id 를 현재 유저의 '좋아요 리스트' 안의 id 들과 대조하기만 하면 됩니다. 또한 좋아요... 클론코딩Dwittertwitter좋아요업데이트Dwitter 실습 - HELBAK 실무 팁 (2) CSS 작업할 때 html, body { width: 100%; height: 100%; } 디폴트로 넣어주기 (5) class별로 역할을 명확히 구분할 것 (6) class 나열할 때 붙여 쓰는 것과 띄어 쓰는 것의 차이 — .payment-icon .one: payment-icon의 자식인 one을 선택 — .payment-icon.one: 여러 payment-icon 중... 클론코딩대구AI스쿨CSS실습htmlCSS 유튜브 클론코딩 복습노트-8 회원가입 폼을 통해 받으려는 유저 정보는 다음과 같습니다. 이제 이 정보들을 저장할 유저 스키마를 구현하겠습니다. 위의 내용을 바탕으로 유저 스키마는 이렇게 구현할 수 있을 것입니다. 그리고 다른 파일에서 사용할 수 있도록 export default 로 유저 모델을 내보냅니다. 이제 회원가입 페이지를 사용할 수 있도록 뼈대를 만들어주겠습니다. globalRouter가 /join 경로의 GET... 클론코딩mongoosepug유튜브node.jsmongodbexpress풀스택express [프로젝트] 프라이탁 클론 코딩 프로젝트 기간중 erd수정을 가장 많이 한거 같다. 처음 프로젝트라 어떤 기능이 우선시해하는지 어떻게 짜야 하는 페이지에 적합한지 기능 구현하면서 많이 느끼는 부분이었다. 역할 분담 및 기능 구현 리스트 페이지 기능 구현 상세페이지 기능 구현 메인페이지 기능 구현 장바구니/검색 기능 구현 코드 리뷰 기존 코드 검색 기능과 리스트 페이지 기능이 동일하게 정보를 가져오기 때문에 합칠 수 있었다.... 클론코딩프로젝트클론코딩 빡공단 23일차 ➰ post-title 부분 만들기! ➰ 첫 번째 div는 프로플 사진 부분. ➰ 두 번째 div는 사용자 이름 부분. ➰ post-title의 첫 번째 자식인 프로필 사진 부분의 배경을 구분하기 위해 red로 줬고, 크기를 가로 세로 각각 40px씩 줬다. ➰ post-title의 두 번째 자식인 user name의 왼쪽 margin을 10px을 줘 프로필 사진과의 간격을 두었다. ➰ po... 클론코딩인스타그램CSS빡공단htmlCSS
인스타그램 클론 코딩 프로젝트 후기 feat westagram [Mission4] 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능 [Mission 2] Login | 로그인 버튼 활성화 기능 구현 [Mission 3] Main | 댓글 기능 구현 [Mission 5] Main | Mock data를 map을 활용하여 댓글 화면에 렌더링 기능 구현 [Mission 6] Main | Mock data를 map을 활용하여 ... 클론코딩WeCode위코드gitSassReact위스타그램React 빡공단 20일차 ➰ display: flex로 배열을 자유롭게 만들었다. ➰ 배경을 다시 흰색으로 만들었다. ➰ align-items: center로 nav 전체를 세로로 가운데 정렬! ➰ padding을 위아래는 0, 왼쪽 오른쪽은 20px를 줬다. ➰ flex: 1로 nav 안에 있는 친자식 div들끼리는 같은 간격으로 여백을 주었다. ➰ img는 인스타그램 페이지에서 가져옴! ➰ href="/"는 로고... CSS인스타그램클론코딩빡공단htmlCSS 유튜브 클론코딩 복습노트-2 각각의 상황에 맞는 페이지를 만들어나가면 다음과 같을 것입니다. video: /trending-videos /see-video /edit-video /upload-video /delete-video 이 경로들에 대한 요청을 모두 app.get()으로 받고, 각각에 해당하는 컨트롤러를 만들고, 필요한 미들웨어까지 만든다면 server.js 파일은 필요 이상으로 복잡해집니다. Express의 r... 클론코딩JavaScript유튜브node.jsexpress.jsJavaScript 브라우저가 데이터를 저장하는 법 지난 시간에 로그인 인풋 값을 활용해 이름을 띄우는 것에 성공했다. 이번 시간에는 브라우저를 새로고침해도 이름이 사라지지 않고 유지할 수 있는 법을 배웠다. 먼저 지난 시간에는 onloginsubmit을 활용해 event를 방지하고 form에 히든클래스를 적용해 input 데이터를 안보이게 처리하고 h1의 이너텍스트에 벡틱을 적용해 글을 채웠다 그리고 기존에 적용되있던 히든을 제거하는 과정을... 클론코딩JavaScriptJavaScript dwitter 1.2.0 업데이트 '좋아요' 데이터는 유저 객체 안에 추가할 수도 있고 드윗 객체 안에 추가할 수도 있습니다. 드윗을 불러올 때는 불러오는 모든 드윗의 id 값과 현재 유저의 데이터 안에 있는 '좋아요 표시한 리스트'에 저장된 id 값을 대조합니다. 그러나 좋아요 데이터를 유저 객체에서 관리하면 화면에 로딩되는 드윗의 id 를 현재 유저의 '좋아요 리스트' 안의 id 들과 대조하기만 하면 됩니다. 또한 좋아요... 클론코딩Dwittertwitter좋아요업데이트Dwitter 실습 - HELBAK 실무 팁 (2) CSS 작업할 때 html, body { width: 100%; height: 100%; } 디폴트로 넣어주기 (5) class별로 역할을 명확히 구분할 것 (6) class 나열할 때 붙여 쓰는 것과 띄어 쓰는 것의 차이 — .payment-icon .one: payment-icon의 자식인 one을 선택 — .payment-icon.one: 여러 payment-icon 중... 클론코딩대구AI스쿨CSS실습htmlCSS 유튜브 클론코딩 복습노트-8 회원가입 폼을 통해 받으려는 유저 정보는 다음과 같습니다. 이제 이 정보들을 저장할 유저 스키마를 구현하겠습니다. 위의 내용을 바탕으로 유저 스키마는 이렇게 구현할 수 있을 것입니다. 그리고 다른 파일에서 사용할 수 있도록 export default 로 유저 모델을 내보냅니다. 이제 회원가입 페이지를 사용할 수 있도록 뼈대를 만들어주겠습니다. globalRouter가 /join 경로의 GET... 클론코딩mongoosepug유튜브node.jsmongodbexpress풀스택express [프로젝트] 프라이탁 클론 코딩 프로젝트 기간중 erd수정을 가장 많이 한거 같다. 처음 프로젝트라 어떤 기능이 우선시해하는지 어떻게 짜야 하는 페이지에 적합한지 기능 구현하면서 많이 느끼는 부분이었다. 역할 분담 및 기능 구현 리스트 페이지 기능 구현 상세페이지 기능 구현 메인페이지 기능 구현 장바구니/검색 기능 구현 코드 리뷰 기존 코드 검색 기능과 리스트 페이지 기능이 동일하게 정보를 가져오기 때문에 합칠 수 있었다.... 클론코딩프로젝트클론코딩 빡공단 23일차 ➰ post-title 부분 만들기! ➰ 첫 번째 div는 프로플 사진 부분. ➰ 두 번째 div는 사용자 이름 부분. ➰ post-title의 첫 번째 자식인 프로필 사진 부분의 배경을 구분하기 위해 red로 줬고, 크기를 가로 세로 각각 40px씩 줬다. ➰ post-title의 두 번째 자식인 user name의 왼쪽 margin을 10px을 줘 프로필 사진과의 간격을 두었다. ➰ po... 클론코딩인스타그램CSS빡공단htmlCSS