# LIKELION
Ceo 트랙 과제 230927
1. 벨로그는 원래 가입되어 있음. 2. Chat GPT 14개 질문 결과 정리 > 1. 아래 요구사항을 고려해 신규 사업아이디어를 5개 적어주세요 주제 : 노인을 위한 키오스크 연습 플랫폼 타깃국가 : 대한민국 포멧 : 표 **1. 노인 키오스크 학습 앱: 노인들이 키오스크를 사용하는 방법을 학습하고 연습할 수 있는 모바일 앱. 노인 친화형 키오스크 튜토리얼: 실제 키오스크와 유사한 환경을 가상으로 제공하며 연습할 수 있는 웹 플랫폼.** 키오스크 시뮬레이션 게임: 게임 형식으로 노인들이 키오스크를 연습하고 경쟁하며 학습할 수 있는 플랫폼. 키오스크 사용자 커뮤니티: 노인들이 키오스크 사용에 관한 경험을 공유하고 서로 도움을 주고받을 수 있는 온라인 커뮤니티 플랫폼. 개인화된 키오스크 학습 계획: 노인들의 학습 수준과 필요에 따라 개인화된 키오스크 학습 계획을 제공하는 학습 플랫폼. > 2. 아래 요구사항을 고려해 사업아이디어를 만들어
FE 교육 1주차 TIL
React란?? 페이스북에서 만든 js 웹프레임 워크이며 정말 많이 사용된다. NPM vs YARN?? 이 둘은 라이브러리, 모듈들을 쉽게 설치 관리하게 해주는 패키지들이며, 앞으로의 교육에서는 성능이좋고 크기가 작은 YARN을 사용해 줄 것이다. 리액트 프로젝트 시작하기 1) Node js 설치 구글링을 통해 최신버전을 설치한다. 2) yarn 설치 vs코드 내에서 터미널 창을 열고 다음 명령어를 입력한다. 3) CRA (react app 폴더 생성) 해당 터미널에 Component?? 컴포넌트는 재사용 가능한 UI를 나타내는
JS 알고리즘 1주차
문제1. 배열의 유사도 문제 설명 : 문자열 배열 s1과 s2가 주어질 때 이 두 배열에서 일치하는 원소의 개수를 출력하는 함수를 작성하라!!! 해결 방법 : 2중 for문을 통해서 각원소를 각각 비교했다. 해답 코드 문제2. 다음에 올 숫자 문제설명 : 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. 해결방법 : 등비수열인지 판별해주는 함수 isGeometricSequence 함수를 만들어주고 이를통해 다음에 올 수를 계산해 줬다. 해답 코드 문제 3. 특이한 정렬 문제설명 :
JS 알고리즘 1주차 React
배열의 유사도. 두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ s1, s2의 길이 ≤ 100 1 ≤ s1, s2의 원소의 길이 ≤ 10 s1과 s2의 원소는 알파벳 소문자로만 이루어져 있습니다 s1과 s2는 각각 중복된 원소를 갖지 않습니다. 다음에 올 숫자 문제 설명 등차수열 혹은 등비수열 common이 매개변수로 주어질 때, 마지막 원소 다음으로 올 숫자를 return 하도록 solution 함수를 완성해보세요. 제한사항 2 < common의 길이 < 1,000 -1,000 < common의 원소 < 2,000 common의 원소는 모두 정수입니다. 등차수열 혹은 등비수열이 아닌 경우는 없습니다. 등비수열인 경우 공비는 0이 아닌 정수입니다. 입출력 예 common result [1, 2, 3, 4] 5 [2, 4, 8]
1주차 React 과제
코딩애플강의로 리액트 정리+실습 하기! https://youtube.com/playlist?list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP&si=W3atfcsM7zIeyHYr 2022 리액트 1강 기존에 하던대로 리액트를 설치하고 명령어를 통해 리액트 앱을 만들고 리액트 개발 환경을 세팅한다. App.js는 우리가 사용할 메인페이지 node_modules 폴더는 라이브러리 코드 보관함 public 폴더는 static 파일 모아 놓는 곳이다. (html,css,img,js 등등..) src 폴더는 우리가 코드를 짜는 곳이다. js파일에 html코드를 짜도 실행이 가능하다?!?! app.js 에 있던 html을 index.html에 넣고 있는 것이다. => 그것을 가능하게 해주는 것 : index.js package.json : 리엑트를 구동하기 위한 프로젝트 정보, 라이브러리 정보들이 세팅되어있다 2022 리액트 2강 본격적으로
1주차 Front-E 스터디 TIL React
이번에는 1주차 Front-E 스터디를 진행했다. 먼저 리액트 설치를 하였다! 자세한 사항은 아래 벨로그에서 친절하게 설명해준다! https://velog.io/@nxnaxx/React-개발-환경-구축-yarn과-CRA-설치 오늘 배운 것을 알아보도록 하자! 인라인 styling > 속성명은 CSS와 다르게 CamelCase 로 작성해야 한다. 똑같은 코드를 기반으로 style객체를 사용하면 된다. > 객체(class와 동일한 개념)를 사용. 스타일 속성에 객체를 사용 마찬가지로 Camel Case로 작성 똑같은 코드를 기반으로 css파일을 import한다 css 와 다른 속성명과 속성값을 언제 다 외우냐.... 안되는 것도 많네 참.... styled-component가 해결해준다. > npm install styled-components or yarn add styled-components 를 해서 styled-components를 설치해준다.
플로우 차트 (Flowchart)
1. Flowchart(순서도) 란? 처리하고자 하는 문제를 분석하여 국제표준기구(ISO : International Standardization Organization)에서 지정한 기호와 흐름선을 활용, 프로세스의 처리 순서를 포함한 단계 간의 상호관계를 알기 쉽게 나타낸 그림 원고의 초안, 건축의 설계도와 같은 프로그래밍의 기초가 된다. 타인에게 전달, 크로스랭귀징, 유지보수 등에 기반이 되는 중요한 요소 > 논리의 흐름을 특정한 순서도 기호 (flow chart symbol) 를 사용하여 도식적으로 표현한 것 2. 순서도 차트의 종류 1) 시스템 순서도 어떤 작업을 하는지 알려주는 순서도로 자료가 정보로 변환되는 과정을 컴퓨터가 처리하는 과정, 데이터의 흐름을 중심으로 도식화한 것 데이터 흐름을 중심으로 작성하는 특징으로 인해 데이터가 처리되는 작업 단위로 나타내고 데이터가 변환되는 매체들을 표현하며 프로그램 논리는 작성하지 않는다. 작
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
조현영님의 Node.js 강의 언더독 레볼루션 학습 커리큘럼을 따라갑니다. 현재 글 진행 과정 목차 Chapter 0 노드 강좌 소개 노드의 정의 노드의 특성 서버로서의 노드 노드, vscode 다운 Q&A Chapter 2 REPL와 js 파일 실행 Common js 모듈 시스템 Chapter 0 0-1. 노드강좌소개 그렇게 크게 바뀌진 않았지만 제일 중요한 점은 타입스크립트가 생김 유튜브의 Chapter 8까지 무료 책을 사기 전 교안과 유튜브 강의를 통해 구매 여부를 파악해보면 좋음! 깃허브 및 수업 자료 Node.js 교과서, 개정 3판 0-2. 노드의 정의 노드는 서버가 아님 노드는 런타임입니다. 런타임이란? 간단하게 말하면 실행 노
Node.js 1일차 TIL
섹션 0. 노드 Intro 1. 노드의 정의 Node.js는 자바스크립트 런타임이다. 런타임이란? 런타임은 프로그래밍 언어가 구동되는 환경이다. 즉 어떤 프로그램이 동작할 때, 프로그램이 동작하는 장소이다. 크롬, 사파리 같은 웹 브라우저가 바로 JavaScript 런타임이다. 노드는 서버가 아닌가요? 서버의 역할도 수행할 수 있는 자바스크립트 런타임 노드로 자바스크립트로 작성된 서버를 실행할 수 있음 서버 실행을 위해 필요한 http/https/http2 모듈을 제공 ➡️ 노드 자체는 서버가 아니다! 역할 정리 자바스크립트: 언어 노드: 런타임 자바스크립트 엔진: V8 2. 노드의 특성 1. 이벤트 기반 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 이벤트의 예: 클릭, 네트워크 요청, 타이머 등 이벤트 리스너: 이벤트를 등록하는 함수 콜백 함수: 이벤트가 발생했
멘토링 과제2
쿠키, 세션, 토근이란? 완벽 정리! 쿠키, 세션, 토큰, 캐시 그리고 CDN [프론트엔드] 기술면접 — 쿠키, 세션, 토큰 Django ORM? Django ORM(Querysets) · HonKit SQL을 이해하고 사용하는 Django ORM Django Key? [DB] 📚 데이터베이스 키(KEY) 종류 🕵️ 정리 [Django Models](https://brunch.co.kr
Django 9일차 TIL
RedirectView를 통한 Subscribeapp 시작 Subscribeapp 생성 Field Lookup을 사용한 구독 페이지 구현 Filter 그동안 코드를 짜면서 아래와 같은 형식을 사용했다. pk=xxx, user=xxx는 AND function이다. OR, WHERE function은 어떻게 쓰는걸까? > 1. 유저가 구독하고 있는 프로젝트 확인하기 프로젝트들 안에 있는 모든 게시물을 가져오기 위의 코드를 아래의 코드로 바꿀 것이다. 장고에서 제공하는 Field Lookups(_) 사용! ➡️ 조금 더 복잡한 DB 쿼리를 사용자가 구현할 수 있도록 하기 위함 views.py 구현 WYSIWYG의 소개 및 적용 WYSIWYG What You See Is What You Get의 약자로 보는대로 글이 써진다는 의미이다. 게시판 기능 중 하나이다. 깃허브의 누군가가 제공해준 링크를 받아 사
Django 8일차 TIL
Mobile Responsive Layout How to connect with Mobile browser? 현재까지 구현한 앱을 어떻게 모바일 환경에서 보여줄 수 있을까? python manage.py runserver* = python manage.py runserver 127.0.0.1: 8000* ➡️ python manage.py runserver 0.0.0.0:8000 로컬 호스트 말고도 다른 컴퓨터에서 ip 주소를 기반으로 구동되고 있는 서버에 접속할 수 있는 포트가 열리게 된다. ALLOWED_HOST 로 설정 가능하다. Connect to WIFI local network server IP ip 확인 후 브라우저에 입력하고 접속한다. cmd에서 구현하기 지금 상태에서 모바일로 접속하면 에러가 발생한다. 따라서 setting을 바꿔줘야 한다. settings.py 접속하는 모든 호스트를 허용한다. 단, 배포를 할
Django 7일차 TIL
getsuccessurl 함수 그리고 리팩토링 detail에서 누구나 edit을 할 수 있는 문제점 발생 getsuccessurl 함수를 만들어 이를 방지한다. self.object는 Profile을 의미한다. MagicGrid 소개 및 Articleapp 시작 Articleapp 생성 1. articleapp 생성 2. practice_django/setting.py와 urls.py에 url 연결 setting.py urls.py 3. articleapp의 urls.py 생성 후 연결 4. list.html 파일 작성 MagicGrid.js Article 모델 생성 오류 수정 모델 생성 1. articleapp에서 models.py에 모델 내용을 작성한다. ondelete=models.SETNULL: 회원탈퇴를 했을 때 게시글이
HTML Beginner
HyperText Markup Language 태그를 통해 텍스트에 생명을 불어넣는 것 Block Element 태그 자기 자신 앞, 뒤의 라인을 구분하고 하나의 면을 차지하는 요소 , , ` , ` Inline Element 텍스트 영역에만 영향을 미치는 요소 `` `` HTML - body ... heading 태그 제목이나 표제를 의미 heading 태그는 글씨를 키우려는 목적으로 사용❌ `` paragraph 태그 하나의 문단을 구성하여 글을 나타냄 `` line break 태그 태그의 앞 뒤 부분을 줄바꿈 닫는 태그가 없는 단일태그 , , list 태그 순서를 매기는 `` 순서를 매기지 않는 `` 각 내부요소 `` `` anch
프론트엔드 온보딩 트랙(CH7)
1. OG Tag 웹페이지가 공유되었을 때 조금 더 멋지게 나타내기 위한 태그 공유한 링크로부터 웹 페이지의 정보를 미리 보여주는 것 그리고 OG Tag를 html에 적용하여 깃허브 페이지로 확인해보았다. 2. 레이아웃 -웹페이지에서 보이는 규칙적인 구조 의미를 가진 태그 = semantic tag 용도별로 태그를 나눈 것이다. header, nav, section, footer 용도별 태그는 영역 분할 뿐만 아니라 기계의 웹 페이지 해석을 돕는다. 3. Github Pages 배포 아래 이미지는
Github 반영과 협업
Github 소스반영 Step 1. remote add origin $ git remote add origin github에서 저장소를 만들고 등록하는 명령어 로컬 저장소의 프로젝트를 원격 저장소에 반영 Step 2. push $ git push -u origin 원격 저장소의 로컬소스를 실제로 반영하는 명령어 같은 저장소 안에서도 다수의 브랜치로 병렬 작업중인 소스를 관리할 수 있음 원격 저장소에도 동일하게 반영됨 -u 옵션 현재 작업 중인 브랜치와 원격 저장소의 브랜치를 매핑해주는 역할 처음에 옵션을 주면, push를 계속해야하는 상황에서 $ git push 명령어 만으로도 작업 수행 가능 ➡️원격 저장소로 프로젝트를 push 하면 github에서 코드 확인 가능 
실용주의 프로그래머 Pinterest 만들기 유료버전 정리 방식 깃허브에 하나의 강의마다 하나의 폴더를 구성하여 RADEME.md 구성 오른쪽 상단에 commits를 클릭할 시 매 챕터별로 학습한 내용을 정리 및 파일구조 제공 목차 CreateView를 통한 회원가입 구현 Login/Logout 구현 Bootstrap을 이용한 Form 디자인 정리 DetailView를 이용한 개인 페이지 구현 UpdateView를 이용한 비밀번호 변경 구현 DeleteView 기반 회원탈퇴 구현 Authent
프론트엔드 온보딩 트랙(CH6)
1. HTML 구성 html 문서구조 html에서 일정한 규칙을 띄고 있는 것을 boilerplate라고 한다 ex) head, body 태그 etc.. 2. HTML head html doctype, title, utf-8 등등에 대한 것을 알아보았다. 3. 블록 요소와 인라인 요소 블록요소가 면을 만들었다면 인라인 요소는 선을 만들었다고 볼 수 있다 면의 성격을 가진 블록 요소는 블록요소와 인라인요소를 포함할 수 있지만 선의 성격을 가진 인라인요소는 블록요소를 포함 할 수 없다 4. HTML body 
Django 6일차 TIL
Authentication 인증시스템 구축 views.py Decorator를 이용한 코드 간소화 함수를 받아 함수의 앞, 뒤, 앞뒤를 꾸며준다. 함수 내부에 직접적인 영향은 없다. superuser, media 관련 설정 superuser 설정 media 설정 settings.py 터미널 Profileapp 시작 그리고 ModelForm Profile app 생성 setting.py에서 profile app 명시 urls.py에서 경로 연결 profileapp/models.py 연결되어 있는 user객체가 delete될 때 그와 연결되어 있는 profile 객체가 어떤 행동을 결정할지 정책 부분을 담당한다. Form ModelForm을 상속받은 후에 어떤 모델을 사용할 것인지, 어떤 필드를 입력할 수 있게 만들 것인지 설정만 하면 model이 fo