WeCode [회고록] 꾸꾸까까~? Kukka 클론 프로젝트 회고 (1) *해당 클론 프로젝트의 경우 이미 있는 코드를 베낀 것이 아닌, DB 모델링 설계부터 중심 기능 구현까지 팀원들과 소통하며 직접 코드를 짠 프로젝트임을 밝힙니다. 지금까지 배운 것을 적용해봄과 동시에 약간 높은 단계의 기능도 구현해볼 수 있다는 확신이 생겼다. 각종 클래스명, 변수명을 어떻게 표현할지 정하는 컨벤션도 물론 중요하지만, 해당 프로젝트를 통해 각자 어느 부분을 배우고 보완하고 싶... WeCode저스트코드1차 프로젝트위코드Just Code회고1차 프로젝트 [Wecode] HTML & CSS를 활용한 자기소개 페이지 만들기 - 2 슬라이드의 HTML 구조이다. 슬라이드의 이동은 input type의 라디오 박스를 클릭하여 이동하게 구현하였고, 실제 클릭 이동 구현은 하단에 bullets라는 label 태그를 만들어 라디오 박스와 연동되게 만들었다. 즉, 하단의 bullets를 클릭하면 라디오 박스가 클릭되어 이동하게 되는 것이다. 슬라이드의 기본 CSS 구조이다. margin: 0 auto;를 주어 슬라이드를 가운데 ... CSSWeCodehtmlCSS JavaScript : 콜백함수의 활용 콜백함수 부분을 공부하다가 주로 어떤 부분에 활용되는지 궁금하여 해당 내용을 간단히 정리 해봄 함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수라고 한다. 콜백 함수는 이벤트 처리, 타이머 함수 등을 포함한 비동기 처리 및 배열 고차 함수에 활용된다. 학창시절 WIN API를 접했을 때 윈도우의 메시지 핸들러 함수... 모던 자바스크립트 Deep DiveWeCodeJavaScriptTILJavaScript 코드카타 05: getPrefix strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = ['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 "" 배열의 모든 요소를 하나씩 돌며 조건을 심사해야 하기에 every 메서드를 사용했고, startsWith 메서드는 구글링을 통해 알... WeCode위코드WeCode 위코드 팀 프로젝트 1차 (위솝) 회고 프로젝트 주제 프로젝트 기간 프로젝트 구성원 프론트엔드 4명 (김민주(PM), 전지현(본인), 장종환, 최희동) 전지현(본인) : feature/Login , feature/Cart 프로젝트 관리 프로그램 첫날 멘토님과 함께한 Planning meeting에서 이번 프로젝트 기간동안 진행할 기능 구현에 대해 정했습니다. 로그인 컴포넌트 카트 컴포넌트 제가 작업한 로그인, 카트 컴포넌트는 모두... WeCodeWeCode 위코드 팀 프로젝트 1차 - 로그인 컴포넌트 일반적으로 볼 수 있는 이분화된 로그인 / 회원가입 기능과 다르게 이솝에서는 첫 화면에서 이메일 주소를 입력받습니다. 해당 이메일 주소가 서버에 이미 존재하는 가입된 계정일시에는 로그인 화면을 띄어줍니다. 많은 state가 필요한 상황이였고 이를 어디에 배치하느냐도 정말로 중요했기에 실제 코드를 작성하다가 문제가 발생하면 해결하기 위해서 state를 추가하거나 삭제하고 다른 컴포넌트에 배치하... WeCodeWeCode Wecode 2차 프로젝트 후기(男의집) 호스트를 중심으로 모임을 주최하고 공통된 취향을 서로 나누는 커뮤니티 사이트인 남의집 사이트로 클론프로젝트를 진행함으로써 기획단계에서의 데이터베이스 모델링, KaKao API를 이용한 소셜 로그인(회원가입동시진행), 메인페이지 및 카테고리 중복 필터링, 프로그램 상세페이지, 호스트가 프로그램 등록, 프로그램 신청 예약페이지, 일반유저에서 호스트를 등록하는 페이지 등 각 API 기능들을 구현함... projectWeCodeWeCode 기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR [프로젝트 회고] 꽃 쇼핑몰 페이지 Vanila JavaScript로만 구현한 과제. 영상, 애니메이션, 팝업 등 다양한 기능을 구현할 수 있었던 과제. HTML5, SCSS, JavaScript Git & GitHub 배너, 팝업 창 🗂 배너 홈페이지 하단 배너 좌, 우측 background-image를 넣어주고 마우스 hover 시 text는 움직이지 않고 background-image만 확대되는 기능을 구현. SCSS를 ... Project-Logwanted프로젝트회고preonboardingWeCodeProject-Log 인스타그램 클론 코딩 프로젝트 후기 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 알고리즘이 너무 어려울 땐 - 4일차 회고 배열을 다시 객체로 할당해서 풀어보려고도 했다. json으로 된 object를 일반 object에 비교하는 방법을 볼 수 있었다. 그러나 모든 문제가 내 입맛에 맞춰서 들어올 순 없기에, 하나하나씩 분리한 후 키워드를 다시 검색했다. 해당 자료를 배열로 변환하면 기준이 되는 점수표를 한번씩 검토할 수 있는 반복문 생성이 용이할 듯 했다. entries()를 사용하면 다차원 배열로 변환될 것이... 생각정리JavaScript회고WeCodeJavaScript TIL14 | Python_List, Tuple list =[ ] 대괄호 사용하여 생성 1.여러 데이터타입이 들어간다.(list안에 list 중첩 가능) 2.값들에 순서가 존재하고 index라 하고 첫번째요소부터 0으로 시작한다. list와 비슷하게 요소들을 저장하지만 한번 선언되면 수정이 불가능 하다. list와 비슷한 tuple은 언제 쓰는걸까? Tuple은 일반적으로 2개에서 5개 사이의 요소들을 저장할때 사용되며, 특정 데이터를 a... WeCodepythonWeCode 다른 테이블 항목을 이용한 필터링 [20210911] 간략하게 먼저 언급하자면, 본인 테이블의 항목이 아닌 연결되어 있는 테이블의 항목으로 필터링을 하고자 할 때 사용할 수 있는 방법이다. 우리가 하고자했던 필터링은 SubCategory에 있는 main_category_id를 사용하여 Product를 필터링 하는 것이었다. 그런데 자기 자신의 테이블에 있는 항목이 아닌 연관된(해당 테이블에서 Forgin Key를 갖는) 테이블의 항목을 사용하여... WeCodedjangopythonback endfillteringWeCode Get / Update_or_create Get_or_create Get_or_create(default = none, **kwargs)는 (objects, created)와 같이 튜플 형태로 반환한다. 여기서 objects은 반환되거나 create되는 부분이며 created는 boolean 값으로써 True, False를 반환한다. object가 있다면 object와 False가 반환된다. 장바구니 담기 기능을 예로 가져왔다. 입... UPDATE_OR_CREATEWeCodeget_or_createUPDATE_OR_CREATE [TIL] # 18 python 기본 탄탄 귀도 반 로섬이라는 사람은 이런사람이구나 알 것 같았습니다 쉽다는 건 굉장히 주관적인 의견인데, 다른 언어에 비해 배우기가 쉽다지 결코 파이썬을 이용한 프로그래밍이 쉽다는 아닙니다 list : 순서가 있는 값들의 집합 (mutable) ex) {"사람": "Guido"} 이런식으로 앞쪽이 key 뒤쪽이 value 입니다 각각의 특성을 좀 볼게요 list, tuple, dictionary, s... TILWeCodepython위코드TIL 위코드 프로젝트 장고 초기 셋팅 첫 시간은 장고 초기 셋팅을 하기로 하였다 장고 초기 셋팅의 순서는 이렇다. github repo 생성 그 안에 개인 디렉토리 생성 후 장고 프로젝트 생성 datebases , 로그인 access_token 관련 알고리즘, SECRET KEY를 따로 보관할 파일 생성(생성 후 gitignore에 넣고 깃허브에 공개 거부) 장고 setttings.py 셋팅 git 브런치 생성 후 push 후 ... djangoWeCodeWeCode TIL | 파이썬 기초 - 4 얕은 복사(Shallow Copy) b에 a를 할당하면 값이 할당되는 것이 아니라 같은 메모리 주소를 갖게 됩니다. 따라서 a의 값을 가진 b를 따로 만들고 싶으면 리스트 a를 복사하여 b에 할당해 주어야 합니다. 그 중 얕은 복사의 방법 중 하나인 인덱싱이 있습니다. 다음은 copy모듈을 사용하여 복사하는 방법입니다. 그러나 두 복사 방법은 얕은 복사이기 때문에 리스트 안의 mutable한... WeCodepython위코드WeCode 21.3.25 최종 제작일 및 최종발표 준비일 1. 스탠딩 미팅 프론트 / 백엔드 진행 상황 공유 및 오늘 할 일 전반적인 부분 손보기(푸터, 로그인, 사인인 등) 메인페이지 맞추고 장바구니 및 주문 마무리 쿠폰 마무리 + 그 외 필요 작업(데이터) 나눠서 하기 data로 반복문 없이 아주 깔끔하게 받아올 수 있다. product_id와 user_id는 프론트가 주는 정보와 토큰으로 알 수 있기 때문. 2... pythonWeCodedjango위코드WeCode TIL | HTML & INTERNET - 문법 TAG : HTML코드를 작성할 때 시작 태그와 종료 태그로 작성한다. 모든 경우가 그런 것은 아니다. 위에 코드를 보면 꺾쇠 괄호로 표현된 것들이 보인다. 표현하고자 하는 글씨를 크게 만들거나, 혹은 인덱싱을 하거나(번호를 매기는 것), 'WEB'이라는 글씨처럼 페이지의 제목을 만들 때 등등 이런 TAG를 이용하여 코딩하게 된다. 아래 사진은 코드를 실행했을 때 웹페이지에서 보여지는 모습이... WeCode생활코딩htmlWeCode TIL_41_with Wecode 031 React state? 뜻 그대로 컴퍼넌트 내부에서 가지고 있는 컴퍼넌트의 상태값. 화면에 보여줄 컴퍼넌트의 UI 정보를 지니고 있는 객체. 클래스형 컴퍼넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은JSX 요소가 return 문 안에 들어가있다. render 함수 위의 constructor 함수는 state를 설정할 때 작성해줘야 하는 함수이다. 예시) state 객체 그래서... ReactStateWeCodeReact
[회고록] 꾸꾸까까~? Kukka 클론 프로젝트 회고 (1) *해당 클론 프로젝트의 경우 이미 있는 코드를 베낀 것이 아닌, DB 모델링 설계부터 중심 기능 구현까지 팀원들과 소통하며 직접 코드를 짠 프로젝트임을 밝힙니다. 지금까지 배운 것을 적용해봄과 동시에 약간 높은 단계의 기능도 구현해볼 수 있다는 확신이 생겼다. 각종 클래스명, 변수명을 어떻게 표현할지 정하는 컨벤션도 물론 중요하지만, 해당 프로젝트를 통해 각자 어느 부분을 배우고 보완하고 싶... WeCode저스트코드1차 프로젝트위코드Just Code회고1차 프로젝트 [Wecode] HTML & CSS를 활용한 자기소개 페이지 만들기 - 2 슬라이드의 HTML 구조이다. 슬라이드의 이동은 input type의 라디오 박스를 클릭하여 이동하게 구현하였고, 실제 클릭 이동 구현은 하단에 bullets라는 label 태그를 만들어 라디오 박스와 연동되게 만들었다. 즉, 하단의 bullets를 클릭하면 라디오 박스가 클릭되어 이동하게 되는 것이다. 슬라이드의 기본 CSS 구조이다. margin: 0 auto;를 주어 슬라이드를 가운데 ... CSSWeCodehtmlCSS JavaScript : 콜백함수의 활용 콜백함수 부분을 공부하다가 주로 어떤 부분에 활용되는지 궁금하여 해당 내용을 간단히 정리 해봄 함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수라고 한다. 콜백 함수는 이벤트 처리, 타이머 함수 등을 포함한 비동기 처리 및 배열 고차 함수에 활용된다. 학창시절 WIN API를 접했을 때 윈도우의 메시지 핸들러 함수... 모던 자바스크립트 Deep DiveWeCodeJavaScriptTILJavaScript 코드카타 05: getPrefix strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = ['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 "" 배열의 모든 요소를 하나씩 돌며 조건을 심사해야 하기에 every 메서드를 사용했고, startsWith 메서드는 구글링을 통해 알... WeCode위코드WeCode 위코드 팀 프로젝트 1차 (위솝) 회고 프로젝트 주제 프로젝트 기간 프로젝트 구성원 프론트엔드 4명 (김민주(PM), 전지현(본인), 장종환, 최희동) 전지현(본인) : feature/Login , feature/Cart 프로젝트 관리 프로그램 첫날 멘토님과 함께한 Planning meeting에서 이번 프로젝트 기간동안 진행할 기능 구현에 대해 정했습니다. 로그인 컴포넌트 카트 컴포넌트 제가 작업한 로그인, 카트 컴포넌트는 모두... WeCodeWeCode 위코드 팀 프로젝트 1차 - 로그인 컴포넌트 일반적으로 볼 수 있는 이분화된 로그인 / 회원가입 기능과 다르게 이솝에서는 첫 화면에서 이메일 주소를 입력받습니다. 해당 이메일 주소가 서버에 이미 존재하는 가입된 계정일시에는 로그인 화면을 띄어줍니다. 많은 state가 필요한 상황이였고 이를 어디에 배치하느냐도 정말로 중요했기에 실제 코드를 작성하다가 문제가 발생하면 해결하기 위해서 state를 추가하거나 삭제하고 다른 컴포넌트에 배치하... WeCodeWeCode Wecode 2차 프로젝트 후기(男의집) 호스트를 중심으로 모임을 주최하고 공통된 취향을 서로 나누는 커뮤니티 사이트인 남의집 사이트로 클론프로젝트를 진행함으로써 기획단계에서의 데이터베이스 모델링, KaKao API를 이용한 소셜 로그인(회원가입동시진행), 메인페이지 및 카테고리 중복 필터링, 프로그램 상세페이지, 호스트가 프로그램 등록, 프로그램 신청 예약페이지, 일반유저에서 호스트를 등록하는 페이지 등 각 API 기능들을 구현함... projectWeCodeWeCode 기프티콘 거래 웹앱 with Cypress 구현해야 할 부분은 Api 함수 구현, 결과 타입 정의, 공통 리스트 카드 컴포넌트 그리고 카테고리 상세 페이지, 브랜드 상세페이지이다. 구현해야할 기능은 드래그 가능한 nav bar와 카테고리 데이터 받아와서 뿌려주는 그리드 카드 두 가지이다. 드래그 기능은 다음 4가지 마우스 이벤트로 구현할 수 있다. 페이지에서 대분류 리스트 데이터와 카테고리 상세 데이터를 SSR로 받아와 Navigat... 원티드cypress프리온보딩next.jsSSRWeCodeSSR [프로젝트 회고] 꽃 쇼핑몰 페이지 Vanila JavaScript로만 구현한 과제. 영상, 애니메이션, 팝업 등 다양한 기능을 구현할 수 있었던 과제. HTML5, SCSS, JavaScript Git & GitHub 배너, 팝업 창 🗂 배너 홈페이지 하단 배너 좌, 우측 background-image를 넣어주고 마우스 hover 시 text는 움직이지 않고 background-image만 확대되는 기능을 구현. SCSS를 ... Project-Logwanted프로젝트회고preonboardingWeCodeProject-Log 인스타그램 클론 코딩 프로젝트 후기 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 알고리즘이 너무 어려울 땐 - 4일차 회고 배열을 다시 객체로 할당해서 풀어보려고도 했다. json으로 된 object를 일반 object에 비교하는 방법을 볼 수 있었다. 그러나 모든 문제가 내 입맛에 맞춰서 들어올 순 없기에, 하나하나씩 분리한 후 키워드를 다시 검색했다. 해당 자료를 배열로 변환하면 기준이 되는 점수표를 한번씩 검토할 수 있는 반복문 생성이 용이할 듯 했다. entries()를 사용하면 다차원 배열로 변환될 것이... 생각정리JavaScript회고WeCodeJavaScript TIL14 | Python_List, Tuple list =[ ] 대괄호 사용하여 생성 1.여러 데이터타입이 들어간다.(list안에 list 중첩 가능) 2.값들에 순서가 존재하고 index라 하고 첫번째요소부터 0으로 시작한다. list와 비슷하게 요소들을 저장하지만 한번 선언되면 수정이 불가능 하다. list와 비슷한 tuple은 언제 쓰는걸까? Tuple은 일반적으로 2개에서 5개 사이의 요소들을 저장할때 사용되며, 특정 데이터를 a... WeCodepythonWeCode 다른 테이블 항목을 이용한 필터링 [20210911] 간략하게 먼저 언급하자면, 본인 테이블의 항목이 아닌 연결되어 있는 테이블의 항목으로 필터링을 하고자 할 때 사용할 수 있는 방법이다. 우리가 하고자했던 필터링은 SubCategory에 있는 main_category_id를 사용하여 Product를 필터링 하는 것이었다. 그런데 자기 자신의 테이블에 있는 항목이 아닌 연관된(해당 테이블에서 Forgin Key를 갖는) 테이블의 항목을 사용하여... WeCodedjangopythonback endfillteringWeCode Get / Update_or_create Get_or_create Get_or_create(default = none, **kwargs)는 (objects, created)와 같이 튜플 형태로 반환한다. 여기서 objects은 반환되거나 create되는 부분이며 created는 boolean 값으로써 True, False를 반환한다. object가 있다면 object와 False가 반환된다. 장바구니 담기 기능을 예로 가져왔다. 입... UPDATE_OR_CREATEWeCodeget_or_createUPDATE_OR_CREATE [TIL] # 18 python 기본 탄탄 귀도 반 로섬이라는 사람은 이런사람이구나 알 것 같았습니다 쉽다는 건 굉장히 주관적인 의견인데, 다른 언어에 비해 배우기가 쉽다지 결코 파이썬을 이용한 프로그래밍이 쉽다는 아닙니다 list : 순서가 있는 값들의 집합 (mutable) ex) {"사람": "Guido"} 이런식으로 앞쪽이 key 뒤쪽이 value 입니다 각각의 특성을 좀 볼게요 list, tuple, dictionary, s... TILWeCodepython위코드TIL 위코드 프로젝트 장고 초기 셋팅 첫 시간은 장고 초기 셋팅을 하기로 하였다 장고 초기 셋팅의 순서는 이렇다. github repo 생성 그 안에 개인 디렉토리 생성 후 장고 프로젝트 생성 datebases , 로그인 access_token 관련 알고리즘, SECRET KEY를 따로 보관할 파일 생성(생성 후 gitignore에 넣고 깃허브에 공개 거부) 장고 setttings.py 셋팅 git 브런치 생성 후 push 후 ... djangoWeCodeWeCode TIL | 파이썬 기초 - 4 얕은 복사(Shallow Copy) b에 a를 할당하면 값이 할당되는 것이 아니라 같은 메모리 주소를 갖게 됩니다. 따라서 a의 값을 가진 b를 따로 만들고 싶으면 리스트 a를 복사하여 b에 할당해 주어야 합니다. 그 중 얕은 복사의 방법 중 하나인 인덱싱이 있습니다. 다음은 copy모듈을 사용하여 복사하는 방법입니다. 그러나 두 복사 방법은 얕은 복사이기 때문에 리스트 안의 mutable한... WeCodepython위코드WeCode 21.3.25 최종 제작일 및 최종발표 준비일 1. 스탠딩 미팅 프론트 / 백엔드 진행 상황 공유 및 오늘 할 일 전반적인 부분 손보기(푸터, 로그인, 사인인 등) 메인페이지 맞추고 장바구니 및 주문 마무리 쿠폰 마무리 + 그 외 필요 작업(데이터) 나눠서 하기 data로 반복문 없이 아주 깔끔하게 받아올 수 있다. product_id와 user_id는 프론트가 주는 정보와 토큰으로 알 수 있기 때문. 2... pythonWeCodedjango위코드WeCode TIL | HTML & INTERNET - 문법 TAG : HTML코드를 작성할 때 시작 태그와 종료 태그로 작성한다. 모든 경우가 그런 것은 아니다. 위에 코드를 보면 꺾쇠 괄호로 표현된 것들이 보인다. 표현하고자 하는 글씨를 크게 만들거나, 혹은 인덱싱을 하거나(번호를 매기는 것), 'WEB'이라는 글씨처럼 페이지의 제목을 만들 때 등등 이런 TAG를 이용하여 코딩하게 된다. 아래 사진은 코드를 실행했을 때 웹페이지에서 보여지는 모습이... WeCode생활코딩htmlWeCode TIL_41_with Wecode 031 React state? 뜻 그대로 컴퍼넌트 내부에서 가지고 있는 컴퍼넌트의 상태값. 화면에 보여줄 컴퍼넌트의 UI 정보를 지니고 있는 객체. 클래스형 컴퍼넌트 안에는 필수적으로 render 함수가 필요하고 화면에 나타내고 싶은JSX 요소가 return 문 안에 들어가있다. render 함수 위의 constructor 함수는 state를 설정할 때 작성해줘야 하는 함수이다. 예시) state 객체 그래서... ReactStateWeCodeReact