본문 바로가기

분류 전체보기

(20)
<TIL>15일 프로젝트 후기 -1-</TIL> 해시태그 : #내일배움단 #코딩프로젝트 #국비지원 #내일배움카드 #스파르타코딩클럽 내용 목차 #코딩 개발일지 시작의 한마디 오늘은 메이킹 챌린지 열두번 째 날 # 개발 업무내용 [오늘의 목표] 회원가입 API, 로그인 API 개발 # 업무 중 이슈/고민 .. 그리고 해결한 내용 백엔드 개발은 우리 조가 예쁘게 만든 웹페이지에 생명을 불어 넣는 작업이라고 생각한다. 페이지마다 다르긴 하지만, 우리 조의 결과물을 코어는 어떠한 정보를 DB에 저장하고 저장한 정보를 잘 가져다 써야하는 작업이기 때문이다. 백엔드 개발을 하면서 개발과정중 print(), console.log() 로 어떤 정보를 주고 받는것에 있어서 시각화 할 수 있었지만, 어디서 어떻게 써야 할지 조차도 몰랐었을때는 개발함에 있어서 눈을감고 코..
<TIL>venv</TIL> 파이썬을 다루다 보면 venv 파일이 만들어지는데 이 파일을 건들면 뭔가 안될 거 같은 느낌이 든다. 그래서 오늘으 venv를 공부해봤다. venv 란? virtural environment의 약자이다. virtural 가상의라는 말이고, environment 환경이란 말이니, 합치면 가상 환경이라는 말이 된다. 아! venv는 가상 환경에서 안에 있는 파일들은 어떻게 한다는 말이구나! 그것을 가능하게 해주는 파일이 venv/bin/activate라는 파일이 가상 환경을 실행한다. 이 파일은 해당 파일 안에서 아래와 같이 실행할 수 있다. 활성화 (.venv)..생략..$ source .venv/bin/activate 비활성화 (.venv)..생략..$ deactivate 이 가상환경을 이용해서 얻을 수..
<TIL>Responsive WEB</TIL> 반응형 작업을 간단하게 설명하자면 특정 뷰포트의 크기에서 웹사이트의 구조를 어떻게 바꿀 것인가를 설정하는 것이다. 반응형 작업을 할때 꼭 알아야 하는 것이 미디어 쿼리이다. 미디어 쿼리는 다양한 미디어 유형이나 장치에 따라, 서로 다른 스타일 규칙을 적용하는 것이다. 문법은 아래와 같다. @media 미디어타입 and (미디어특성) { CSS코드 } 미디어 타입 타입 의미 기본값 all 모든 미디어 타입에 적용 all (생략 가능) screen 컴퓨터 화면, 타블렛, 스마트폰 등 print 인쇄 전용 미디어 특성 특성 의미 width 뷰포트의 가로 너비 max-width 뷰포트 최대 가로 너비(이하) min-width 뷰포트 최대 가로 너비(이상) height 뷰포트의 세로 너비 max-height 뷰포..
<TIL>GitHup</TIL> 오늘은 깃헙에 대해서 공부했다. 깃헙은 CLI와 GUI로 사용할 수 있는데, CLI는 터미널로 GUI는 소스트리와 같은 그래픽UI로 깃헙을 사용하는 것이다. CLI로 사용하는 방법을 공부하면서 실전에서 쓸 수 있는 명령어를 정리해보려고 한다. git init $ git init 저장소를 초기화하는 명령어이다. 프로젝트를 시작하고 소스 코드를 Git으로 관리하려고 한다면 먼저 git init으로 저장소를 초기화 해야한다. 중요포인트는 git init을 사용할 폴더로 찾아 들어가서 사용해야 한다. git add $ git add . $ git add yourfilename.html 만들어진 파일, 수정, 삭제등의 파일들을 stage로 올리는 명령어이다. 스테이지에 올라간 파일들은 바로 깃허브에 올라가는 것이..
<TIL>Flask를 이용한 API 만들기</TIL> API 란? 은행에 창구가 있드시, 서버에도 응답을 받기 위한 창구가 있다. 은행 창구에도 규칙이 있드시, API에도 규칙이 있다. 그 규칙을 메소드라고 하는데, 메소드에 종류가 있다. GET : 데이터를 조회(Read)를 요청 POST : 데이터를 생성(Create), 변경(Update), 삭제(Delete)를 요청 서버에 무언가를 요청할때 Ajax로 요청한다. API를 만들고 클라이언트에 Ajax로 콜해보는 식으로 계속 연습을 하면서 머리속에 API를 만들면서 코드가 잘 동작하는지 계속 연습해야 한다. API 코드를 작성후 Ajax로 요청을 크롬 개발자 도구를 이용해서 하면 잘 실행되는 것을 볼 수 있다. 구동하는 움직임을 보면 Ajax에서 GET타입으로 url이 /test 로 시작하는 정보를 가지고..
<TIL>Flask</TIL> 오늘 기록할 내용은 백엔드 내용을 공부를 하다가 정 답답해서 다시 처음부터 복습을 하면서 내가 미처 놓쳤던 부분들을 써나갈 것이다. 프레임워크를 쓰기 위해선 정해진 규칙들을 따라주는게 정석이다. Flask는 대표적으로 정해진 폴더 구조가 필요하다. 스크린 샷과 같은 폴더 구조가 필요하다. (해당 폴더의 이름은 정확하게 입력해줘야 한다.) 그 이유는 render_template 라는 코드를 입력했을 때, 해당 폴더로 들어가서 html 파일을 찾아서 브라우저에 랜더해주기 때문이다. 폴더의 쓰임을 정리해보면 - static : Image, CSS 를 담아둘 때 사용된다. - templates : HTML 파일을 담아둔다.
스파르타 코딩 11일 챌린지 후기 내일 배움단으로 스파르타에 들어온지 벌써 11일째가 되었다. 그동안 5주짜리 강의를 11일만에 완주하자! 라는 목표의 챌린지가 있는데. 11일 완주하면 5만포인트를 주시고, 후기를 쓰면 1만 포인트를 주시고 후기를 잘쓰면 선정 20명에게 5만 포인트를 더주신다. 거기에 고용노동부에서 내일 배움카드로 결재했던 10% 자기부담금이 다시 환불되는 ! 아주 베리 나이스한 챌린지라 말할 수 있다. 나는 이미 5개월정도 코딩을 혼자 공부한 경험이 있기 때문에 몇 일만에 다 끝낼 수 있을 줄 알았지만, 매일 8강 이상을 수강할 수 없다는 것이 함정이었다. (8강이상 수강할 수 없다, 다음날 핸드폰으로 인증하고 다시 8강을 들어야한다.) 그치만 꼬박꼬박 8강씩 듣는다는 것에서 좀 더 지속성있게 공부한다라는 느낌이 들어..
<TIL>반응형해더</TIL> 간단해 보이지만, 코드로는 절대 간단하지 않았던 반응형 해더. 엄청난 CSS코드 분량과의 싸움 이 코드들을 움직이는 것처럼 보이게 하기 위한 JS 개발자는 편한것을 만들기 위해 편하면 안 되는 것 같다. 보면 알겠지만 토글 버튼이 클릭으로 열렸을때 뿐만아니라, 토글 버튼으로 메뉴가 내려왔을 때 브라우저 크기를 변동시키면 토글 버튼이 그대로 열려있는 것과 같은 상태를 제어하기 위한 resize 펑션을 만드는 부분은 생각지도 못한 부분이었다.