클론코딩 인스타그램 클론 코딩 프로젝트 후기 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 빡공단 19일차 인스타그램 페이지 레이아웃만 잡기 ➰ 여백을 없애기 위해 body의 margin을 0으로 둔다. ➰ 헤더부분 ➰ 높이 54px, 배경을 빨간색으로 구분! : container 안에 content 부분과 aside 부분을 가로로 배치해야 하기 때문에 display: flex로 바꿔준다. 🌕 story 부분 잡기 ➰ 스토리부분 ➰ 높이 84px, padding을 위아래로만 16px을 줬다. 테두... 클론코딩인스타그램CSS빡공단htmlCSS 유튜브 클론코딩 복습노트-2 각각의 상황에 맞는 페이지를 만들어나가면 다음과 같을 것입니다. video: /trending-videos /see-video /edit-video /upload-video /delete-video 이 경로들에 대한 요청을 모두 app.get()으로 받고, 각각에 해당하는 컨트롤러를 만들고, 필요한 미들웨어까지 만든다면 server.js 파일은 필요 이상으로 복잡해집니다. Express의 r... 클론코딩JavaScript유튜브node.jsexpress.jsJavaScript 실습 - 키즈가오(3) 📌학습 내용 실무 팁 (1) position에 대한 감이 생길 때까지는 큰 공간(div)을 작업할 때 일단 position: relative;로 설정해두고 배치 작업을 진행해도 괜찮음 (3) 한 프로젝트에서 id와 class 이름은 일관성 있게 지어져야 함 (대소문자, 숫자, 특수기호 사용법 등) 💡 설계:style.css 💡 NIGHT2 애니메이션: animation.css 💡 NIGHT2... 클론코딩대구AI스쿨CSS실습htmlCSS 브라우저가 데이터를 저장하는 법 지난 시간에 로그인 인풋 값을 활용해 이름을 띄우는 것에 성공했다. 이번 시간에는 브라우저를 새로고침해도 이름이 사라지지 않고 유지할 수 있는 법을 배웠다. 먼저 지난 시간에는 onloginsubmit을 활용해 event를 방지하고 form에 히든클래스를 적용해 input 데이터를 안보이게 처리하고 h1의 이너텍스트에 벡틱을 적용해 글을 채웠다 그리고 기존에 적용되있던 히든을 제거하는 과정을... 클론코딩JavaScriptJavaScript dwitter 1.2.0 업데이트 '좋아요' 데이터는 유저 객체 안에 추가할 수도 있고 드윗 객체 안에 추가할 수도 있습니다. 드윗을 불러올 때는 불러오는 모든 드윗의 id 값과 현재 유저의 데이터 안에 있는 '좋아요 표시한 리스트'에 저장된 id 값을 대조합니다. 그러나 좋아요 데이터를 유저 객체에서 관리하면 화면에 로딩되는 드윗의 id 를 현재 유저의 '좋아요 리스트' 안의 id 들과 대조하기만 하면 됩니다. 또한 좋아요... 클론코딩Dwittertwitter좋아요업데이트Dwitter 빡공단 22일차 ➰ class="faccount"는 친구 추천 겸 본인 프로필 소개 부분 ➰ class="img"는 프로필 사진 부분 ➰ 그 옆에 계정 이름과 설명 부분 ➰ 제일 오른쪽에 팔로우 버튼 ➰ 그 아래부터 친구추천 부분. ➰ 마지막에 소개말 부분도 추가! ➰ class faccount부분의 display: flex로 두고, 세로로 가운데 정렬을 했다. ➰ img 아래의 div 묶음(계정, 설명)은... 클론코딩인스타그램CSS빡공단htmlCSS 21.8.3 html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. 리스트 안에(ol/ul) 사용할 수 있는 태그 : list item (li) html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. element당 하나의 id만 가질 수 있다. 사진과 같이 css를 작성할 수 있다. span은 옆에 다른 span이 올 수 있다. 옆에 다른 요소가 못 오는 것을 block, ... 클론코딩Today I learned카카오톡TIL노마드코더TIL 2021.08.25 공부 일기 그래도 다시 오늘 시작했다.. 그냥 전부 다 기록하는 중이다 이해가 안되더라도 기록하고 고등학교 때 수학했던거 생각하면서 하는 중이다. 나는 고등학교 때 수학을 진짜 못했다. 그러다가 고1 때 충격적인 점수를 받고 학원을 옮기고 그 다음 시험에 그 때 느낀게 뭔지 아시나요..? 바로 내가 공부를 안했구나 였다. 그 때는 그냥 답지를 외우겠다 라는 마인드로 계속해서 풀었다. 그러다보니까 언젠가... 클론코딩공부프론트엔드htmlhtml 유튜브 클론코딩 복습노트-8 회원가입 폼을 통해 받으려는 유저 정보는 다음과 같습니다. 이제 이 정보들을 저장할 유저 스키마를 구현하겠습니다. 위의 내용을 바탕으로 유저 스키마는 이렇게 구현할 수 있을 것입니다. 그리고 다른 파일에서 사용할 수 있도록 export default 로 유저 모델을 내보냅니다. 이제 회원가입 페이지를 사용할 수 있도록 뼈대를 만들어주겠습니다. globalRouter가 /join 경로의 GET... 클론코딩mongoosepug유튜브node.jsmongodbexpress풀스택express [프로젝트] 프라이탁 클론 코딩 프로젝트 기간중 erd수정을 가장 많이 한거 같다. 처음 프로젝트라 어떤 기능이 우선시해하는지 어떻게 짜야 하는 페이지에 적합한지 기능 구현하면서 많이 느끼는 부분이었다. 역할 분담 및 기능 구현 리스트 페이지 기능 구현 상세페이지 기능 구현 메인페이지 기능 구현 장바구니/검색 기능 구현 코드 리뷰 기존 코드 검색 기능과 리스트 페이지 기능이 동일하게 정보를 가져오기 때문에 합칠 수 있었다.... 클론코딩프로젝트클론코딩 [날씨 기본앱] #4 도시 추가 구현하기 - NotificationCenter란 무엇일까? 를 참고해보면 A notification dispatch mechanism that enables the broadcast of information to registered observers. 즉, 등록된 관찰자(옵저버)에게 정보를 동시에 알려줄 수 있는 전송 알림 장치라고 합니다. Notification의 이름을 작성합니다. object 전송할 객체가 있다면 객체를 담습니다. 옵셔널이기 ... 클론코딩iOSiOS [트위터 클론코딩] - 파이어베이스 셋팅하기 파이어베이스를 사용해서 트위터 클론코딩을 해 볼 예정이다. 우선, firebase를 설치한다. 또는 해당 링크로 이동해서 프로젝트를 만들고, apiKey를 생성한다. 프로젝트를 생성하면 다양하게 SDK 설정을 할 수 있다. 내가 사용한 firebase 버전은 8.10.0 버전이다. 프로젝트에서 firebase.js 파일을 생성해준 뒤, SDK에서 생성된 apiKey를 입력해준다. index.... 클론코딩프론트앤드파이어베이스초보노마드코더노마드코더 빡공단 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 빡공단 19일차 인스타그램 페이지 레이아웃만 잡기 ➰ 여백을 없애기 위해 body의 margin을 0으로 둔다. ➰ 헤더부분 ➰ 높이 54px, 배경을 빨간색으로 구분! : container 안에 content 부분과 aside 부분을 가로로 배치해야 하기 때문에 display: flex로 바꿔준다. 🌕 story 부분 잡기 ➰ 스토리부분 ➰ 높이 84px, padding을 위아래로만 16px을 줬다. 테두... 클론코딩인스타그램CSS빡공단htmlCSS 유튜브 클론코딩 복습노트-2 각각의 상황에 맞는 페이지를 만들어나가면 다음과 같을 것입니다. video: /trending-videos /see-video /edit-video /upload-video /delete-video 이 경로들에 대한 요청을 모두 app.get()으로 받고, 각각에 해당하는 컨트롤러를 만들고, 필요한 미들웨어까지 만든다면 server.js 파일은 필요 이상으로 복잡해집니다. Express의 r... 클론코딩JavaScript유튜브node.jsexpress.jsJavaScript 실습 - 키즈가오(3) 📌학습 내용 실무 팁 (1) position에 대한 감이 생길 때까지는 큰 공간(div)을 작업할 때 일단 position: relative;로 설정해두고 배치 작업을 진행해도 괜찮음 (3) 한 프로젝트에서 id와 class 이름은 일관성 있게 지어져야 함 (대소문자, 숫자, 특수기호 사용법 등) 💡 설계:style.css 💡 NIGHT2 애니메이션: animation.css 💡 NIGHT2... 클론코딩대구AI스쿨CSS실습htmlCSS 브라우저가 데이터를 저장하는 법 지난 시간에 로그인 인풋 값을 활용해 이름을 띄우는 것에 성공했다. 이번 시간에는 브라우저를 새로고침해도 이름이 사라지지 않고 유지할 수 있는 법을 배웠다. 먼저 지난 시간에는 onloginsubmit을 활용해 event를 방지하고 form에 히든클래스를 적용해 input 데이터를 안보이게 처리하고 h1의 이너텍스트에 벡틱을 적용해 글을 채웠다 그리고 기존에 적용되있던 히든을 제거하는 과정을... 클론코딩JavaScriptJavaScript dwitter 1.2.0 업데이트 '좋아요' 데이터는 유저 객체 안에 추가할 수도 있고 드윗 객체 안에 추가할 수도 있습니다. 드윗을 불러올 때는 불러오는 모든 드윗의 id 값과 현재 유저의 데이터 안에 있는 '좋아요 표시한 리스트'에 저장된 id 값을 대조합니다. 그러나 좋아요 데이터를 유저 객체에서 관리하면 화면에 로딩되는 드윗의 id 를 현재 유저의 '좋아요 리스트' 안의 id 들과 대조하기만 하면 됩니다. 또한 좋아요... 클론코딩Dwittertwitter좋아요업데이트Dwitter 빡공단 22일차 ➰ class="faccount"는 친구 추천 겸 본인 프로필 소개 부분 ➰ class="img"는 프로필 사진 부분 ➰ 그 옆에 계정 이름과 설명 부분 ➰ 제일 오른쪽에 팔로우 버튼 ➰ 그 아래부터 친구추천 부분. ➰ 마지막에 소개말 부분도 추가! ➰ class faccount부분의 display: flex로 두고, 세로로 가운데 정렬을 했다. ➰ img 아래의 div 묶음(계정, 설명)은... 클론코딩인스타그램CSS빡공단htmlCSS 21.8.3 html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. 리스트 안에(ol/ul) 사용할 수 있는 태그 : list item (li) html tags mdn으로 구글링하면 웹 관련 정보들 볼 수 있음. element당 하나의 id만 가질 수 있다. 사진과 같이 css를 작성할 수 있다. span은 옆에 다른 span이 올 수 있다. 옆에 다른 요소가 못 오는 것을 block, ... 클론코딩Today I learned카카오톡TIL노마드코더TIL 2021.08.25 공부 일기 그래도 다시 오늘 시작했다.. 그냥 전부 다 기록하는 중이다 이해가 안되더라도 기록하고 고등학교 때 수학했던거 생각하면서 하는 중이다. 나는 고등학교 때 수학을 진짜 못했다. 그러다가 고1 때 충격적인 점수를 받고 학원을 옮기고 그 다음 시험에 그 때 느낀게 뭔지 아시나요..? 바로 내가 공부를 안했구나 였다. 그 때는 그냥 답지를 외우겠다 라는 마인드로 계속해서 풀었다. 그러다보니까 언젠가... 클론코딩공부프론트엔드htmlhtml 유튜브 클론코딩 복습노트-8 회원가입 폼을 통해 받으려는 유저 정보는 다음과 같습니다. 이제 이 정보들을 저장할 유저 스키마를 구현하겠습니다. 위의 내용을 바탕으로 유저 스키마는 이렇게 구현할 수 있을 것입니다. 그리고 다른 파일에서 사용할 수 있도록 export default 로 유저 모델을 내보냅니다. 이제 회원가입 페이지를 사용할 수 있도록 뼈대를 만들어주겠습니다. globalRouter가 /join 경로의 GET... 클론코딩mongoosepug유튜브node.jsmongodbexpress풀스택express [프로젝트] 프라이탁 클론 코딩 프로젝트 기간중 erd수정을 가장 많이 한거 같다. 처음 프로젝트라 어떤 기능이 우선시해하는지 어떻게 짜야 하는 페이지에 적합한지 기능 구현하면서 많이 느끼는 부분이었다. 역할 분담 및 기능 구현 리스트 페이지 기능 구현 상세페이지 기능 구현 메인페이지 기능 구현 장바구니/검색 기능 구현 코드 리뷰 기존 코드 검색 기능과 리스트 페이지 기능이 동일하게 정보를 가져오기 때문에 합칠 수 있었다.... 클론코딩프로젝트클론코딩 [날씨 기본앱] #4 도시 추가 구현하기 - NotificationCenter란 무엇일까? 를 참고해보면 A notification dispatch mechanism that enables the broadcast of information to registered observers. 즉, 등록된 관찰자(옵저버)에게 정보를 동시에 알려줄 수 있는 전송 알림 장치라고 합니다. Notification의 이름을 작성합니다. object 전송할 객체가 있다면 객체를 담습니다. 옵셔널이기 ... 클론코딩iOSiOS [트위터 클론코딩] - 파이어베이스 셋팅하기 파이어베이스를 사용해서 트위터 클론코딩을 해 볼 예정이다. 우선, firebase를 설치한다. 또는 해당 링크로 이동해서 프로젝트를 만들고, apiKey를 생성한다. 프로젝트를 생성하면 다양하게 SDK 설정을 할 수 있다. 내가 사용한 firebase 버전은 8.10.0 버전이다. 프로젝트에서 firebase.js 파일을 생성해준 뒤, SDK에서 생성된 apiKey를 입력해준다. index.... 클론코딩프론트앤드파이어베이스초보노마드코더노마드코더 빡공단 23일차 ➰ post-title 부분 만들기! ➰ 첫 번째 div는 프로플 사진 부분. ➰ 두 번째 div는 사용자 이름 부분. ➰ post-title의 첫 번째 자식인 프로필 사진 부분의 배경을 구분하기 위해 red로 줬고, 크기를 가로 세로 각각 40px씩 줬다. ➰ post-title의 두 번째 자식인 user name의 왼쪽 margin을 10px을 줘 프로필 사진과의 간격을 두었다. ➰ po... 클론코딩인스타그램CSS빡공단htmlCSS