위코드 [회고록] 꾸꾸까까~? Kukka 클론 프로젝트 회고 (1) *해당 클론 프로젝트의 경우 이미 있는 코드를 베낀 것이 아닌, DB 모델링 설계부터 중심 기능 구현까지 팀원들과 소통하며 직접 코드를 짠 프로젝트임을 밝힙니다. 지금까지 배운 것을 적용해봄과 동시에 약간 높은 단계의 기능도 구현해볼 수 있다는 확신이 생겼다. 각종 클래스명, 변수명을 어떻게 표현할지 정하는 컨벤션도 물론 중요하지만, 해당 프로젝트를 통해 각자 어느 부분을 배우고 보완하고 싶... WeCode저스트코드1차 프로젝트위코드Just Code회고1차 프로젝트 코드카타 05: getPrefix strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = ['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 "" 배열의 모든 요소를 하나씩 돌며 조건을 심사해야 하기에 every 메서드를 사용했고, startsWith 메서드는 구글링을 통해 알... WeCode위코드WeCode 인스타그램 클론 코딩 프로젝트 후기 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 Node.js : node express로 서버 개설하기 사용자와 사물(혹은 시스템) 사이에서 의사소통할 수 있도록 만들어진 매개체이다. 이 UI가 존재함으로써 사용자는 컴퓨터(사물)와 상호 작용할 수 있게 되는 것이다. API(Application Processing Interface)는 Application 간에 서로 상호작용할 수 있도록 돕는 매개체이다. 왜냐하면 메뉴판엔 어떤 요리를 시킬 수 있는지 명시해 놓아 그 특정 메뉴만 시킬 수 있기... 위코드NodeWecode FullStacknode.jsNode [TIL] # 18 python 기본 탄탄 귀도 반 로섬이라는 사람은 이런사람이구나 알 것 같았습니다 쉽다는 건 굉장히 주관적인 의견인데, 다른 언어에 비해 배우기가 쉽다지 결코 파이썬을 이용한 프로그래밍이 쉽다는 아닙니다 list : 순서가 있는 값들의 집합 (mutable) ex) {"사람": "Guido"} 이런식으로 앞쪽이 key 뒤쪽이 value 입니다 각각의 특성을 좀 볼게요 list, tuple, dictionary, s... TILWeCodepython위코드TIL TIL 12 | CSS - Basic 기존 HTML 문서는 출력하는 방식에 따라 그때그때 따로 문서를 만들어야 했지만 CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꿔서 같은 내용을 여러 기기에서 볼 수 있다. 스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있다. 사용자 스타일 인라인 스타일 간단한 스타일 정보... TILCSSWeCode위코드CSS TIL 8 | JavaScript - 클래스(Class) 객체지향 패러다임 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론. 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것. 복잡한 자료, 모듈, 시스템등으로부터 핵심적인 개념과 기능을 간추려내는 것. 객체지향 프로그래밍 객체들을 정의하고 그러한 객체들을 활용해서 프로그램을 만드는 것. 클래스 - 객체를 만들때 수많은 지원을 하는 대신 많은 제한을 거는 문법. 클래스 생성 클래스를 기반으... TILJavaScriptWeCode위코드JavaScript TIL 50 | 위코드 사전스터디1 : JS(콘솔로그,주석) 위코드 사전스터디 과정 중 JavaScript console.log, 주석에 대해서 정리해본다 console.log()란? console.log는 괄호 안의 메세지를 콘솔창에 출력하는 명령어이다 말 그대로 콘솔창에 ✌로그를 찍는다🤞는 뜻 자바스크립트가 출력을 할 수 있게 도와주는 기능을 의미한다 여기서 출력이란? 값을 눈에 보이도록 화면(브라우저)에 나타내는 것을 말한다 console.log... JavaScript위코드WeCode자바스크립트TILJavaScript JavaScript | pre course 19-날짜☀️와 시간⏰ 프론트엔드 개발을 하다보면 날짜와 시간을 다루는 경우가 많다고 한다. 회원가입을 한 날짜와 시간 글을 작성한 시간 휴대폰의 현재 시간 등등... 날짜와 시간을 저장하고 보여줄 때는 날짜 객체를 사용한다. 무슨 말인지 바로 인지가 안되니 코드를 통해 다시 공부해 보자. 여기서, GMT란 것은 Greenwich Mean Time의 줄임말이며 컴퓨터 언어에서는 GMT기준으로 시간을 알려준다고 한다... TILJavaScriptWeCode위코드JavaScript [PYTHON] For Loops, While Loops 요소를 한번에 하나씩 가지고 원하는 로직을 실행할 수 있게 해주는 역할 for 문은 list나 set, dictionary 등의 data structure 등을 기반으로 코드블록을 반복 실행한다. iteration : for 문에서는 리스트가 가지고 있는 요소의 수 만큼 for 문에 속해있는 코드를 실행시키는 부분(for element in list의 list 부분) 끝까지 for 문을 진행... pythonWeCode위코드WeCode k 2 - JavaScript 06. 반복문 반복문(lteration statesments)이란 동일한 동작을 조건(횟수)을 만족할 때 까지 반복해서 수행하는 개발자의 수고로움을 덜어주기 위해 탄생했다. 'HelloWecode'를 10번 출력하고 싶을땐 어떻게 할까🤷♂️? 3. 반복문을 활용하여 총 10번(조건을 만족할 때까지)을 콘솔로그로 문장을 찍어내도록(수행하도록)한다. 1> 초기 상태(let step = 0) : 선언 할 co... WeCode위코드사전스터디WeCode JavaScript | pre course 5-string concatenation 🙋목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자. 🙌 지금까지 우리가 할 수 있었던 문자열 출력은 다음과 같았다 자바스크립트에서 텍스트와 숫자를 구분하는 것은 " " (쌍따옴표)이다. 그렇다면 무엇이 텍스트인지 확인해보자 이를 통해 확인해 볼 수 있는 것이 있다 서로 다른 데이터 타입인 string 과 number 형을 더하면 항상 string 으로 반환됨 다른 프로그래밍 언어에서... TILJavaScriptWeCode위코드JavaScript [Westagram] : 로그인 JWT 적용 인증/인가 때 jwt를 배웠기 때문에 적용하면 되겠다 ㅠㅠ... 장고WeCodedjango위코드WeCode ManyToManyField & Junction Table ManyToMany(MtoM), 다대다 관계로 이루어진 DB 테이블 1대다 와 다대1 테이블의 중간기점 Q. 배우의 풀네임과 출연한 영화 목록 Get 으로 출력 -> Foriegn Key만 존재하는 Junction table이 참조하고 있는 다른 PK table의 데이터를 가져와 변환하는 방법이 주요 포인트 -> Actor의 PK를 참조하고 있는 Movie의 FK를 찾기 위해, "영화리스트"... WeCode위코드ManyToManyManyToMany TIL 55 | 위코드 사전스터디6 : 조건문 위코드 사전스터디 과정 중 JavaScript의 조건문에 대해서 정리해본다 조건문과 boolean 데이터 boolean 타입은 데이터 타입(표현)이 참인지 거짓인지를 알린다 조건문과 비교연산자 ✨조건문의 시작 조건문은 조건이 참일 때 실행하는 문, 거짓일 때 실행하는 문을 작성하는 것이기 때문에 비교연산자와 함께 사용한다! ✨비교연산자의 종류 비교연산자가의 종류와 조건문의 예시 더 다양한 조... WeCode자바스크립트위코드WeCode TIL | Django - 스타벅스 모델링하기(django A to E) - 5 💡해당 포스트는 MacOSX, Django, mySQL, iterm2 터미널, vim에디터, google chrome 등을 이용하고 있습니다. 사용하는 프로그램이 다를 경우 해당 글과 다른 결과가 나올 수 있음을 알려드립니다.💡 에서 이어집니다. manage.py가 있는 디렉토리에서 python shell 실행한다. Image의 URL을 등록하는 방법을 먼저 알아보자. 이 이미지의 URL주소... WeCode위코드WeCode [Django] 회원가입 및 로그인ver.3 -> bcrypt 를 이용한 비밀번호 암호화를 적용하고, 수십번의 수정 끝에 현재와 같은 코드 라인업이 만들어 졌다. -> hased_pw 를 try문 위에(바깥에) 두었고, 변수값이 아닌 data[password] 로 직접 받는 형식을 취했더니 다음과 같은 comment를 받았다. 그래서 암호화하는 부분을 try안으로 옮기면서 변수로 설정한 값을 받아오는 것으로 수정했다. --> 추가로, ... WeCodedjango위코드WeCode [C.R.U.D.] Django Post, Get -------여기까지가 기본 세팅-------- Object Relational Mapping(ORM): Object(객체)는 OOP에서 사용되는 객체 그 자체를 의미하고, Relational(관계)는 흔히 사용하는 관계형 DB를 의미함 즉, 객체와 관계형DB를 매핑해주는 개념 예를 들어, Django(Python)에서 작성한 코드를 관계형 DB의 SQL 쿼리로 자동 변환 시켜서 개발자가 따... GETpython위코드POSTWeCodeDatabaseDatabase Django 맛보기 (환경설정) -> Django는 보편적인 웹 개발 업무를 빠르고 쉽게 만들어주도록 설계됨. -> Python 으로 만들어진 무료 오픈소스 웹 어플리케이션 프레임워크 -> 웹사이트를 구축할 때 필요한 비슷한 유형의 구성요소들을 갖춘 여러 프레임워크 중 하나 [ Django의 위치 및 역할과 FE, BE를 아우르는 전체적인 Flow] [ 위 페이지에서 Django의 초기 세팅과 더불어 사용 맛보기가 가능함 ... WeCodedjango위코드WeCode [Django] 회원가입 및 로그인ver.2 -> except ValidationError as e: = ({'message': e.(여러가지 속성들이 존재함), status=()}) = 여러가지 속성들을 이용해서 다양한 형태의 에러 메세지나 정보들을 확인할 수 있다. = validation.py 에서 raise 로 다수의 조건으로 나누어진 ValidationError 를 설정할 때, 각각의 메세지를 Json 형태로 확인하려면 'as ... WeCodedjango위코드WeCode [Westagram] : 게시물 등록 models.py 하나의 포스트에 여러개의 이미지가 있을 수 있으므로, 이미지 테이블을 분리 이미지 테이블은 당연히 포스트의 id를 참조 views.py 우선 데코레이터에서 선언한 request.user를 불러와서 email_id 변수에 저장 그리고 사진만 올리거나, 글만 쓰거나 등의 경우가 있기 때문에 데이터가 없으면 None 포스팅을 먼저 등록해준 다음, 그에 대한 이미지 파일을 등록해야... 장고WeCodedjango위코드WeCode
[회고록] 꾸꾸까까~? Kukka 클론 프로젝트 회고 (1) *해당 클론 프로젝트의 경우 이미 있는 코드를 베낀 것이 아닌, DB 모델링 설계부터 중심 기능 구현까지 팀원들과 소통하며 직접 코드를 짠 프로젝트임을 밝힙니다. 지금까지 배운 것을 적용해봄과 동시에 약간 높은 단계의 기능도 구현해볼 수 있다는 확신이 생겼다. 각종 클래스명, 변수명을 어떻게 표현할지 정하는 컨벤션도 물론 중요하지만, 해당 프로젝트를 통해 각자 어느 부분을 배우고 보완하고 싶... WeCode저스트코드1차 프로젝트위코드Just Code회고1차 프로젝트 코드카타 05: getPrefix strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = ['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 "" 배열의 모든 요소를 하나씩 돌며 조건을 심사해야 하기에 every 메서드를 사용했고, startsWith 메서드는 구글링을 통해 알... WeCode위코드WeCode 인스타그램 클론 코딩 프로젝트 후기 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 Node.js : node express로 서버 개설하기 사용자와 사물(혹은 시스템) 사이에서 의사소통할 수 있도록 만들어진 매개체이다. 이 UI가 존재함으로써 사용자는 컴퓨터(사물)와 상호 작용할 수 있게 되는 것이다. API(Application Processing Interface)는 Application 간에 서로 상호작용할 수 있도록 돕는 매개체이다. 왜냐하면 메뉴판엔 어떤 요리를 시킬 수 있는지 명시해 놓아 그 특정 메뉴만 시킬 수 있기... 위코드NodeWecode FullStacknode.jsNode [TIL] # 18 python 기본 탄탄 귀도 반 로섬이라는 사람은 이런사람이구나 알 것 같았습니다 쉽다는 건 굉장히 주관적인 의견인데, 다른 언어에 비해 배우기가 쉽다지 결코 파이썬을 이용한 프로그래밍이 쉽다는 아닙니다 list : 순서가 있는 값들의 집합 (mutable) ex) {"사람": "Guido"} 이런식으로 앞쪽이 key 뒤쪽이 value 입니다 각각의 특성을 좀 볼게요 list, tuple, dictionary, s... TILWeCodepython위코드TIL TIL 12 | CSS - Basic 기존 HTML 문서는 출력하는 방식에 따라 그때그때 따로 문서를 만들어야 했지만 CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꿔서 같은 내용을 여러 기기에서 볼 수 있다. 스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있다. 사용자 스타일 인라인 스타일 간단한 스타일 정보... TILCSSWeCode위코드CSS TIL 8 | JavaScript - 클래스(Class) 객체지향 패러다임 객체를 우선적으로 생각해서 프로그램을 만든다는 방법론. 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것. 복잡한 자료, 모듈, 시스템등으로부터 핵심적인 개념과 기능을 간추려내는 것. 객체지향 프로그래밍 객체들을 정의하고 그러한 객체들을 활용해서 프로그램을 만드는 것. 클래스 - 객체를 만들때 수많은 지원을 하는 대신 많은 제한을 거는 문법. 클래스 생성 클래스를 기반으... TILJavaScriptWeCode위코드JavaScript TIL 50 | 위코드 사전스터디1 : JS(콘솔로그,주석) 위코드 사전스터디 과정 중 JavaScript console.log, 주석에 대해서 정리해본다 console.log()란? console.log는 괄호 안의 메세지를 콘솔창에 출력하는 명령어이다 말 그대로 콘솔창에 ✌로그를 찍는다🤞는 뜻 자바스크립트가 출력을 할 수 있게 도와주는 기능을 의미한다 여기서 출력이란? 값을 눈에 보이도록 화면(브라우저)에 나타내는 것을 말한다 console.log... JavaScript위코드WeCode자바스크립트TILJavaScript JavaScript | pre course 19-날짜☀️와 시간⏰ 프론트엔드 개발을 하다보면 날짜와 시간을 다루는 경우가 많다고 한다. 회원가입을 한 날짜와 시간 글을 작성한 시간 휴대폰의 현재 시간 등등... 날짜와 시간을 저장하고 보여줄 때는 날짜 객체를 사용한다. 무슨 말인지 바로 인지가 안되니 코드를 통해 다시 공부해 보자. 여기서, GMT란 것은 Greenwich Mean Time의 줄임말이며 컴퓨터 언어에서는 GMT기준으로 시간을 알려준다고 한다... TILJavaScriptWeCode위코드JavaScript [PYTHON] For Loops, While Loops 요소를 한번에 하나씩 가지고 원하는 로직을 실행할 수 있게 해주는 역할 for 문은 list나 set, dictionary 등의 data structure 등을 기반으로 코드블록을 반복 실행한다. iteration : for 문에서는 리스트가 가지고 있는 요소의 수 만큼 for 문에 속해있는 코드를 실행시키는 부분(for element in list의 list 부분) 끝까지 for 문을 진행... pythonWeCode위코드WeCode k 2 - JavaScript 06. 반복문 반복문(lteration statesments)이란 동일한 동작을 조건(횟수)을 만족할 때 까지 반복해서 수행하는 개발자의 수고로움을 덜어주기 위해 탄생했다. 'HelloWecode'를 10번 출력하고 싶을땐 어떻게 할까🤷♂️? 3. 반복문을 활용하여 총 10번(조건을 만족할 때까지)을 콘솔로그로 문장을 찍어내도록(수행하도록)한다. 1> 초기 상태(let step = 0) : 선언 할 co... WeCode위코드사전스터디WeCode JavaScript | pre course 5-string concatenation 🙋목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자. 🙌 지금까지 우리가 할 수 있었던 문자열 출력은 다음과 같았다 자바스크립트에서 텍스트와 숫자를 구분하는 것은 " " (쌍따옴표)이다. 그렇다면 무엇이 텍스트인지 확인해보자 이를 통해 확인해 볼 수 있는 것이 있다 서로 다른 데이터 타입인 string 과 number 형을 더하면 항상 string 으로 반환됨 다른 프로그래밍 언어에서... TILJavaScriptWeCode위코드JavaScript [Westagram] : 로그인 JWT 적용 인증/인가 때 jwt를 배웠기 때문에 적용하면 되겠다 ㅠㅠ... 장고WeCodedjango위코드WeCode ManyToManyField & Junction Table ManyToMany(MtoM), 다대다 관계로 이루어진 DB 테이블 1대다 와 다대1 테이블의 중간기점 Q. 배우의 풀네임과 출연한 영화 목록 Get 으로 출력 -> Foriegn Key만 존재하는 Junction table이 참조하고 있는 다른 PK table의 데이터를 가져와 변환하는 방법이 주요 포인트 -> Actor의 PK를 참조하고 있는 Movie의 FK를 찾기 위해, "영화리스트"... WeCode위코드ManyToManyManyToMany TIL 55 | 위코드 사전스터디6 : 조건문 위코드 사전스터디 과정 중 JavaScript의 조건문에 대해서 정리해본다 조건문과 boolean 데이터 boolean 타입은 데이터 타입(표현)이 참인지 거짓인지를 알린다 조건문과 비교연산자 ✨조건문의 시작 조건문은 조건이 참일 때 실행하는 문, 거짓일 때 실행하는 문을 작성하는 것이기 때문에 비교연산자와 함께 사용한다! ✨비교연산자의 종류 비교연산자가의 종류와 조건문의 예시 더 다양한 조... WeCode자바스크립트위코드WeCode TIL | Django - 스타벅스 모델링하기(django A to E) - 5 💡해당 포스트는 MacOSX, Django, mySQL, iterm2 터미널, vim에디터, google chrome 등을 이용하고 있습니다. 사용하는 프로그램이 다를 경우 해당 글과 다른 결과가 나올 수 있음을 알려드립니다.💡 에서 이어집니다. manage.py가 있는 디렉토리에서 python shell 실행한다. Image의 URL을 등록하는 방법을 먼저 알아보자. 이 이미지의 URL주소... WeCode위코드WeCode [Django] 회원가입 및 로그인ver.3 -> bcrypt 를 이용한 비밀번호 암호화를 적용하고, 수십번의 수정 끝에 현재와 같은 코드 라인업이 만들어 졌다. -> hased_pw 를 try문 위에(바깥에) 두었고, 변수값이 아닌 data[password] 로 직접 받는 형식을 취했더니 다음과 같은 comment를 받았다. 그래서 암호화하는 부분을 try안으로 옮기면서 변수로 설정한 값을 받아오는 것으로 수정했다. --> 추가로, ... WeCodedjango위코드WeCode [C.R.U.D.] Django Post, Get -------여기까지가 기본 세팅-------- Object Relational Mapping(ORM): Object(객체)는 OOP에서 사용되는 객체 그 자체를 의미하고, Relational(관계)는 흔히 사용하는 관계형 DB를 의미함 즉, 객체와 관계형DB를 매핑해주는 개념 예를 들어, Django(Python)에서 작성한 코드를 관계형 DB의 SQL 쿼리로 자동 변환 시켜서 개발자가 따... GETpython위코드POSTWeCodeDatabaseDatabase Django 맛보기 (환경설정) -> Django는 보편적인 웹 개발 업무를 빠르고 쉽게 만들어주도록 설계됨. -> Python 으로 만들어진 무료 오픈소스 웹 어플리케이션 프레임워크 -> 웹사이트를 구축할 때 필요한 비슷한 유형의 구성요소들을 갖춘 여러 프레임워크 중 하나 [ Django의 위치 및 역할과 FE, BE를 아우르는 전체적인 Flow] [ 위 페이지에서 Django의 초기 세팅과 더불어 사용 맛보기가 가능함 ... WeCodedjango위코드WeCode [Django] 회원가입 및 로그인ver.2 -> except ValidationError as e: = ({'message': e.(여러가지 속성들이 존재함), status=()}) = 여러가지 속성들을 이용해서 다양한 형태의 에러 메세지나 정보들을 확인할 수 있다. = validation.py 에서 raise 로 다수의 조건으로 나누어진 ValidationError 를 설정할 때, 각각의 메세지를 Json 형태로 확인하려면 'as ... WeCodedjango위코드WeCode [Westagram] : 게시물 등록 models.py 하나의 포스트에 여러개의 이미지가 있을 수 있으므로, 이미지 테이블을 분리 이미지 테이블은 당연히 포스트의 id를 참조 views.py 우선 데코레이터에서 선언한 request.user를 불러와서 email_id 변수에 저장 그리고 사진만 올리거나, 글만 쓰거나 등의 경우가 있기 때문에 데이터가 없으면 None 포스팅을 먼저 등록해준 다음, 그에 대한 이미지 파일을 등록해야... 장고WeCodedjango위코드WeCode