전체 글

프로토타입과 클래스

객체 생성자 객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현할 수 있게 해준다. 객체 생성자를 사용할 때 보통 함수의 이름은 대문자로 시작하고, 새로운 객체를 만들 때에는 new 키워드를 앞에 붙여주어야 한다. function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); // 멍멍 cat.s..

position 수평 중앙 정렬

위치 고정을 통해 요소를 정렬할 때 화면의 중앙에 오도록 하는 방법이 있다. .btn { width: 300px; height: 50px; position: fixed; bottom: 16px; left: calc(50% - 150px); /*화면 너비의 절반만큼 오도록 계산*/ }

배경 이미지 삽입/정렬

이미지 삽입/정렬 배경에 이미지를 삽입할 때 항상 같이 따라 다니는 3줄의 코드가 있다. 이미지 주소 - 위치 - 사이즈 .background { width: 400px; height: 800px; background-image: url('이미지 주소'); background-position: center; background-size: cover; } 화면 이미지 비율 모바일에서 볼 수 있는 반응형 웹페이지를 만들고자 할 때, 화면의 크기에 따라 보여지는 이미지의 크기가 달라지게 만들 것이다. 이 때 vw 단위를 사용하면 화면의 크기에 따라서 이미지의 크기가 늘어나고 줄어든다. .background { width: 100vw; height: 100vh; max-width: 450px; } 하지만 100..

README 관리 팁

1. 구현 기능 목록화해서 정리하기 2. 설치 및 실행법 명시하기 3. option / 프로젝트 구조 설명 추가 기능이 있다면 작성하기 프로젝트의 구조가 어떤 식으로 이루어졌는지? 4. 배포 주소 / 기능별 영상 읽는(보는) 사람을 고려하여 과제를 직접 배포하여 주소를 README에 걸어두거나, 작동하는 모습을 기능별로 영상화해서 걸어두기. (영상/움짤을 삽입하면 좋을듯) 모듈을 설치할 필요 없이 배포 링크와 내부 코드만 보고 확인할 수 있게! 5. 코드 설명, 과제 후기 적지 않기 개인 블로그에 적고 링크를 걸어두자. 장황해지면 읽지 않는다. + commit 관리 Commit 한 번에 끝내지 말고 세부 내용도 함께 적는다. 진행 과정 보이게 4~10개 적기. 전략적으로 시간차를 두고 내가 이 프로젝트에..

Flex-box 정렬

아이템을 정렬하는데 있어서 정렬하는 개념들은 종종 헷갈리곤 하기 때문에 간단하게 메모하면 좋을 것 같아서 작성하게 되었다. 컨테이너 내부 아이템 중앙으로 정렬하기 아이템이 여러개일 때 - 수직으로 쌓이도록 정렬 .container { display: flex; flex-direction: column; justify-content: center; align-items: center; } 아이템1 아이템2 아이템이 여러개일 때 - 수평으로 쌓이도록 정렬 .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } 아이템1 아이템2

React 프로젝트 초기 세팅

폴더 구조 depth 주의 아래와 같이 만들수 있지만, clone 해온 repository 폴더 내에 CRA로 초기세팅을 진행하게 될 경우 내부에 프로젝트 폴더 하나가 더 추가되어서 이런식으로 depth 가 하나 더 생기게 된다. 이렇게 폴더 안에 한번 더 들어가야 코드와 관련된 파일 및 폴더가 나오는 구조는 기본적으로 좋지 않다. CRA로 프로젝트 폴더 생성 git init 으로 해당 프로젝트 폴더를 repository로 지정 github에서 repository 생성 git remote add 를 통해 해당 repository를 내 프로젝트의 remote repository로 지정 commit 및 push 이러한 과정을 거쳐 Github에 프로젝트를 depth를 깊지 않게 만들면서 깔끔하게 올려 버전 ..

내일배움단 프로젝트 챌린지 15일차 개발일지

코딩개발일지 시작의 한마디 1/20 (목) 오늘이 마지막이다! 개발 업무 내용 1. 프로젝트 최종 점검 최근 검색어 저장은 담당하시던 분이 못하겠다고 하셔서 기능을 빼게 되었다. 크롤링 연결 확인 및 워드클라우드 이미지 가져오기 확인완료 결과페이지/기록페이지 디자인 완료 서버 배포는 안하기로 했다. 2. 발표회 리허설 3. 마지막 튜터님 / 팀들과 단체 사진! 업무 중 이슈/고민/해결내용 오늘이 발표회 전날이어서 프로젝트를 잘 마무리 할 수 있을 까 걱정했는데 다행히도 잘 마무리해서 완성했다. 기능 문제점 동시접속 시 인스타 하나의 계정으로 사용하기 때문에 크롤링이 안된다. 크롤링 시 인스타에 로그인 하게 되기 때문에 자주 접속 시 인스타에서 차단되어 계정 해제까지 시간이 걸린다. 저장소에서 pull 받..

내일배움단 프로젝트 챌린지 14일차 개발일지

코딩개발일지 시작의 한마디 1/19 (수) 이제 거의 마무리 단계이다...! 개발 업무 내용 남은 구현 기능들 확인하고 정리하기 메인 페이지 검색어 저장 시 [유저ID - 검색단어 - 입력받은 시간] 저장하기 검색 시 결과 보러가기 alert 내리기 로그인 시 화면 - 로그아웃 버튼 추가 결과페이지 로그인/로그아웃 여부에 따라 페이지 다르게 렌더링하기 로그인 시 - 로그아웃버튼, 나의 키워드 페이지 이동버튼 로그아웃 상태 - 로그인 버튼 보여주기 디자인 로그인/회원가입 회원가입 후 로그인이 바로 안되는 문제 (Flask를 다시 구동해야 작동함) (해결) 회원가입 시 로그인 DB에 유저정보를 추가하는 코드를 넣어 해결 나의 키워드 페이지 해당 페이지에서 홈버튼을 눌렀을 때 로그인 상태의 홈으로 돌아가기 최..

내일배움단 프로젝트 챌린지 13일차 개발일지

코딩개발일지 시작의 한마디 1/18(화) 이제 마지막 발표까지 얼마 남지 않았다..! 개발 업무 내용 1. 로그인 JWT 토큰 SECRET KEY 설정 및 저장 2. 데코레이터 구현 3. 클라이언트 쿠키 저장 업무 중 이슈/고민/해결내용 To-do List 업무 기한 ■ 클라이언트 쿠키 저장 코드 리뷰 ~

내일배움단 프로젝트 챌린지 12일차 개발일지

코딩개발일지 시작의 한마디 1/17(월) 개발 업무 내용 1. URL명 변경 REST API URL 규칙에 의해서 페이지에 대한 URL은 /login-page 이런식으로 페이지라고 명시해주고, 기능에 대한 URL은 /login 이런식으로 기능에 대한 루트로 명시해준다. https://velog.io/@pjh612/REST-API-URI-%EA%B7%9C%EC%B9%99 2. 페이지 이동 추가 3. 최근 검색어 테스트 업무 중 이슈/고민/해결내용 To-do List 업무 기한 □ ~

내일배움단 프로젝트 챌린지 11일차 개발일지

코딩개발일지 시작의 한마디 1/16 (일) 토큰의 세계는 어렵다.. 전체 코드가 나와있는게 아니다보니 이해하기가 어렵다..ㅜㅜ 개발 업무 내용 1. 로그인 토큰 - 백엔드에서는 프론트로 토큰을 보내주는 것까지는 가능하다고 했다. - 로그인 토큰을 쿠키에 저장하는 방식과 요청하면서 서버에 같이 보내는 방법을 아직 더 알아봐야 한다. 2. 검색어 저장 입력받은 검색어를 DB에 저장하는데 구현됐다. 3. 기능 줄이기 여부 화요일까지 해보고 시간이 안된다면 기능들을 빼기로 했다. → 관심단어 등록 페이지 업무 중 이슈/고민/해결내용 아직 페이지 디자인이 완성 안된것도 있고, 검색어 저장은 이제야 하나 구현됐다.. 구상했던 기능까지 다 구현할 수 있을까 걱정이다. To-do List 업무 기한 ■ 토큰 저장 ~ ..

내일배움단 프로젝트 챌린지 10일차 개발일지

코딩개발일지 시작의 한마디 1/15 (토) 토큰원리와 방식에 대해서는 공부했는데... 이걸 코드로 짜려면 어떤 언어로 어떻게 짜야하는지 아직도 모르겠다.....ㅜㅜ 개발 업무 내용 1. 스크랩 페이지 기능 제거 - 스크랩페이지를 담당하는 팀원이 검색어 저장하는 기능을 함께 담당하고 있는데, 검색어 저장도 안되고 있다보니 시간상 스크랩 기능은 빼기로 결정했다. 2. 서버로 데이터 전송 연결 저번시간까지는 서버와 연결까지만 확인해서 어떤 아이디 비밀번호 값을 입력하던 로그인이 됐었다. 이번에는 입력받은 데이터값을 서버에서 유저정보 유무나 회원가입 확인을 해주는 기능과 같이 연결될 수 있도록 구현했다. 마지막으로 DB에 저장되어서 회원가입한 아이디/비밀번호로 로그인이 진행되는지 확인해봐야 할 것 같다. 3. ..