목록분류 전체보기 (53)
러너효방
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bmz3T7/btsyJyKsk6r/pEjakPSFSHFjzxyRM4gnNK/img.gif)
bootstrap 의 공백(Spacing) 부트스트랩 기반 템플릿을 사용하던 도중 여러가지 클래스들을 만나게 되었다. py-1 라는 클래스가 궁금해서 시작된 포스팅 😀😀 Box model 박스모델 bootstrap의 공백의 자세한 클래스들을 알아가기 전에, 먼저 박스 모델부터 잠깐 살펴보도록 하자! 박스 모델 은 HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는 것을 말한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다. margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음 border : 박스의 테두리 padding : 테두리와 content간의 간격 content : 엘리먼트 안에 포함되는 컨텐츠 M/P M : Margin P : P..
I 클라우드 기반 통합 개발환경 서비스 구름 IDE (https://www.goorm.io/) : 개인 PC에 설치할 필요 없이 Docker 컨테이너 기반으로 다양한 SW 프로그램을 개발할 수 있는 '온라인 코딩 테스트 서비스'를 제공 (파이썬 프로그래밍 환경구축하기, 웹투앱 개발 환경 구축하기 등) I 웹 페이지 프레임워크 Bootstrap (https://getbootstrap.com/) : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크. 반응형 CSS를 통해 스마트폰, 태블릿, 데스크톱까지 다양한 기기에서 웹페이지가 안 깨지고 보이도록 도와주는 도구. Materialize (https://materializecss.com/) : 반응형 CSS 프레임워크. 모던한 디자인을..
👍 폰트 사이트(상업적이용 범위 한번 더 확인하세요!) 폰트 라이선스 공식사이트 상업적 이용 범위 비고 나눔고딕, 명조 네이버 https://hangeul.naver.com/ 모두가능 무료 나눔바른고딕 나눔바른펜 나눔손글씨 붓, 펜 나눔스퀘어 나눔스퀘어 라운드 대한 윤디자인 http://www.19192019.com 모두가능 무료 민국 독립 만세 배달의민족 주아 우아한형제들 https://www.woowahan.com/#/fonts 모두가능 무료 배달의민족 도현 비비트리 고딕 비비트리 https://kr.123rf.com/krfreefont/ 모두가능 무료 비비트리 손글씨 비비트리 나무 하르방 제주감귤 123RF 오픈애즈 스웨거 스웨거 http://swagger.kr/font.html 모두가능 무료 아리..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b00Mvn/btsyLLibUJM/crRmx4kaLfP3FbGWZ5kHk1/img.png)
자바스크립트 특징 오래됐고, 발전이 빠름 인터프리터 언어 (순차적으로 소스를 해독해나감) 해독을 알아서해줌 (java 같은 언어는 컴파일이라고 하여 별도로 해독을 시켜줘야함) 자바스크립트 소스 드럽고 길어서 jquery로 사람들이 많이 씀 jquery 특징 편함 소스짧음 (그만큼 함축되어있는 의미가 많음) $(선택자) 로 뭔가를 부름 하다보면 암 script 선언 위치는 헤더에 작성하라 하지만 딱히 권고사항아님.. 요즘엔 하단에 작성하기도 함 자바스크립트 기초 변수선언 3가지 (var, let, const) 변수는 컴퓨터한테 내가 {변수명}에 어떤 {값}을 넣어줄 거야 라고 알려주는거 (마치 애키우는거랑 똑같음 안 알려주면 못 알아먹음...) 세미콜론 마지막에 빼먹으면 반성해주세여 **{변수명}**은 본..
#UNIT(CSS의 단위) 1. Absolute length (절대값) 예) px, cm, ... 2. Relative length (상대값) 예) rem, em, %, vh, vw, ... -rem을 기본으로 많이 쓴다 단어 줄바꿈으로 변경 word-break: break-all; relative 부모 element를 기준으로 위치한다 부모 : position: relative [기준점 잡기] position: absolute; [그 안에서 움직이기] translate(x,y) item이 원래 위치를 기준으로 이동한다 transform:translate(25px, 50px) X축을 기점으로 이동 transform:translateX(25px); y축을 기점으로 이동 transform:translateY..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bYAlq7/btsyNt2dUaS/55RBbxlAsiGJe4fGOoIKuK/img.png)
API 서버를 테스트하는 프로그램 https://www.postman.com/downloads/ Download Postman | Get Started for Free Try Postman for free! Join 20 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com 회원가입 후 포스트맨 다크모드 설정 설정 > Settings > Themes > Dark모드 선택 Workspaces > My Workspace API를 테스트 하는곳 메뉴 마우스 hover시 토글 가능 요청 할 탭 열기 localhost:3000 입력 후..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bLQNW8/btsyIMIWLpw/r0Ik6pkWaS6EfaTwxobCW1/img.png)
JWT(json web token)의 약자이다 JWT 형식 json 포맷 토큰 / json : 자바스크립트 오브젝트를 문자열 형태로 작성한것 로그인에 성공할 경우 서버가 발급한다 유저는 매 요청시에 서버에 토큰을 함께 전송한다 매 요청시 토큰을 보내는 이유 http 무상태성 토큰을 사용하여 인증해야해야 합니다. passport 러이브러를 사용 / 예) 여권을 보여주고 입장하는 형태 서버 작동할 시 해당경로로 /social-media-app/server/ 서버 켜기 npm run devstart 에러가 발생할 경우 오타일 확률이 높습니다. 정상 작동시 위 그림과 같이 나옵니다 .env 데이터베이스 연결 주소 변경시 해결되는 경우도 있습니다. 문자로 작성시 오류나는 경우 아래 그림과 같이 127.0.0.1 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bXHXEB/btsyLnVuNTI/su1u3sZK3bFWKKKvVvrD1k/img.png)
# MERN Stack M (MongoDB): 데이터베이스 E (Express): 서버 프레임워크 R (React): 프론트엔드 프레임워크 N (NodeJS): 서버 개발언어 # MVC패턴 모델(데이터구조)-뷰(UI를 정의)-컨트롤러(로직처리) / Model-view-controller 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴 # 파일과 디렉터리 - index.js Entry point (애플리케이션의 시작점) - package.json 애플리케이션의 정보들 - .env (enviroment variables) 환경변수(애플리케이션에서 전체적으로 사용되는 변수)를 저장하는 파일 - routes/ 라우트 처리를 하는 파일들을 보관한다 라우트: 요청받은 url을 컨트롤러(로직처리)에 연결하는 역할..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/m76lG/btsyLpseFCC/aeuFFPBbeI5H28po8MGSs1/img.png)
설치하는 진행 # 현재 디렉터리를 nodejs 프로젝트 디렉터리로 만든다 social-media-app/server npm init # 필요한 package 설치 npm install cookie-parser cors dotenv express formidable jsonwebtoken mongoose passport passport-jwt - 한 줄씩 따로 작성해서 설치하거나 한꺼번에 적어서 설치해도 무방하다 설치 시 오류 'formidable'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 위의 오류는 터미널에서 node등 프로그램을 사용시에 발생할 수 있다. 이미 설치를 완료했다면 해당 프로그램을 환경변수에 등록해주면 해결된다. window10기준 제어판 > 시..