개요 더 좋은 React 컴포넌트를 구조에 대해 리서치를 하다보니 이라는 키워드를 자주 접하게 되었다. React의 아버지 의 글을 보면서 어떤 패턴인지 확인 해보자. 참고: 2019년에 남긴 Dan Abramov에 의하면 그는 더이상 이 패턴을 강제로 사용하기를 추천하지 않는다고 한다. (컴포넌트를 이 패턴으로 나누지 않고 커스텀 훅을 이용해서도 가능하는 등에 다양한 패턴이 있을 수 있기에) 왜 이러한 패턴을 정의했는가? 컴포넌트를 더 쉽게 재사용할 수 있기 때문이다. 살펴보자 이 두 형태의 컴포넌트들을 명확히 구분하기 위해서 각 각 다른 폴더에 넣는다. presentational 컴포넌트 어떻게 생겼는 지(표현)에 집중한다. presentational과 container 컴포넌트 둘 다 가질 수 있지만, 보통 DOM 마크업과 스타일을 가지고 있다. 종종 this.props.children 을 통해 방지했던 것을 허용한다. Flux actions 나 store 와 같은 다른 앱…

useCallback은 무엇인가? 개요 댓글 기능을 가진 Component예제 코드를 보다가 작성 된 내용을 요청하고 콜백함수로 hook으로 감싼 함수를 호출하는 부분을 보고, 저 hook은 무슨 역할을 하는 건지 궁금해졌다. 공식문서를 먼저 살펴보았다. 정의 Returns a memoized callback. 대정의는 간단한다. memoized(저장되어진) callback(콜백함수를) return(리턴) 하는 것이다. Pass an inline callback and an array of dependecies. will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to…

1. 딥브레인AI 아카데미 수료 및 프로젝트 완료 🥛 내배캠을 수료한 후 지난 5주간 딥브레인AI 아카데미에서 웹어플리케이션을 만들기 위한 여러 기술들을 배웠다. 매주 토요일에 풀타임(9:30-18:00)으로 진행되긴 했지만, 깊게 배우기에는 너무 짧은 시간이였다. 박물관 AI 가이드는 , 와 딥브레인AI에서 제공한 를 활용한 프로젝트였다. 시간이 많지 않았기 때문에(같이하시는 분을 일하고 계시고, 나는 스파르타 공모전 프로젝트도 같이 진행했다) 완성도는 부족하지만 내게는 새로웠던 기술로 웹애플리케이션을 만들 수 있어서 재미있고, 뿌듯했다. 1-1 이번 프로젝트로 얻은 것 framework에서 웹애플리케이션 개발이 가능하다. 를 통해 컴포넌트를 만들고 화면 구성할 수 있다. 로 컴포넌트를 꾸밀 수 있다. 비디오 제작 프로세스를 일정한 주기로 API 요청 및 확인하여 진행상황을 화면에 표시할 수 있다. (요청마다 프로세스 진행상황을 응답해주는 경우) 1-2 내가 작업한 부분 살펴…

에러메시지를 띄우기 위한 re-render 어떻게? 개요 스파르타 공모전에 참여하여 되었다. 지금은 를 만들고 있다. 아직 서버로 요청하는 부분은 작업하지 않았고 custom hook을 만들어 이메일과 패스워드 정보에 대한 유효성검사를 하는 부분까지 작업하였다. 이메일 형식에 맞지 않는 값을 입력하거나 비밀번호를 공란으로 둔 채 로그인 버튼을 누르면 에러메시지가 나와야하는데, 이게 를 할 경우 짜여진 코드에 의해서 에러메시지가 나올 텐데 어떻게 해야할 지 고민이 되었다. 더미 state를 만들어 그 state를 변화시키는 방식으로 re-render를 하는 글을 보았으나 이는 좋지 않은 구조라고 글쓴이가 얘기를 해서 고민 끝에 아래와 같이 코드를 작성하여 해결하였다. 나의코드 submitHandler함수는 로그인 버튼을 클릭 시 호출되는 함수인데, 이메일이나 비밀번호가 유효하지 않으면 blur가(입력 필드에 포커스아웃) 될 때 호출하는 함수를 콜하게 하였다. 이렇게 되면 함수 콜에 …

오늘 공부한 React 예제 코드 살펴보기 개요 React(리액트) 할 줄 아는 프론트엔드 개발자가 되고 싶어 요즘 Udemy에서 React - The Complete Guide (incl Hooks, React Router, Redux) 강의를 듣고 있다. 오늘 들은 관련 강의 중에 나온 App.js 예제 코드를 살펴보자. (설명은 주석으로) 예제코드 새로 배운 것 자바스크립트에 fetch를 이용하여 api서버에서 데이터를 가져올 수 있다. firebase를 통하여 아주 간단하게 api서버를 만든다(무료) 오늘 공부한 React 예제 코드 살펴보기 개요 예제코드 새로 배운 것

The four F’s (Facts, Feelings, Fidings, Futures) Next.js 2가지 Pre-rendering Next.js에서는 2가지의 미리 렌더링 방법 있는데, 어떤 것들이 있는 지 확인 해 보자. SSG(Static Site Generation) 이는 할 때 미리 HTML을 생성하고, 매 요청마다 생성된 HTML을 재사용 한다. 마케팅 페이지, 블로그 글, 이커머스 상품 리스트, 도움말과 문서 같은 웹 페이지에 추천되는 방식이다. 을 통해 미리 외부 데이터를 가져와 렌더링에 사용한다. 아래는 그 예다. SSR(Servier Side Rendering) 이는 각 요청마다 HTML을 미리 생성한다. 모든 요청마다 페이지 내용이 변화거나 자주 데이터의 변화를 보여줄 때 추천되는 방식이다. 미리 렌더링하지 않는다면 CSR(Client Side Rendering)로 위의 방식을 해결 할 수도 있다. 을 통해 매 요청마다 필요한 데이터를 가져와 렌더링에 사용한…

TCP와 UDP 개요 우리가 현재 사용하고 있는 인터넷은 TCP/IP모델을 따르고 있다. 아래 흐름도를 보고 어떻게 통신이 이루어지는 지 파악하고 이후에는 전송계층에서 쓰이는 TCP와 UDP의 특징과 차이를 보자. TCP/IP 모델의 통신흐름 참고: 모든 개발자를 위한 HTTP 웹 기본 지식 강의 내용 중 발췌하여 저의 손으로 그려 봄 애플리케이션(Application) 계층에서 보낼 데이터와 함께 정보 생성 애플리케이션(Application) 계층에서 위 정보를 Sokcket library를 통해 전송(Transport) 계층으로 전달한다 전송(Transport) 계층에서 HTTP 데이터를 포함하여 정보 생성한다 네트워크(Network) 계층에서 TCP 데이터를 포함하여 패킷 생성한다 네트워크 인터페이스(Network Interface) 계층에서 LAN카드를 통해, 인터넷을 통해 목적지인 서버에 위 과정을 거친 정보를 전송한다. TCP (Transmission Contro…

OSI 7 계층 정의 및 특징 OSI 7 계층은 Open System Interconnection 참조 모델로 국제 표준화 기구(ISO)에서 제안한 통신 규약이다. 다른 네트워크 망 끼리 통신하기 위해서 표준을 만들었다. 전송할 데이터가 계층을 지나면서 통신을 위한 데이터(헤더)가 추가되어 전송된다. 각 계층이 하는 일이 명확하여 오류의 추적과 상태관리가 쉬워진다. 실제 인터넷에서 사용되는 TCP/IP 계층은 OSI 참조 모델을 기반으로 만들어짐 구조 출처: 100-105 ICND1 Video Series: 1.1 Compare and contrast OSI and TCP/IP models: Part 2 OSI는 7 계층을 제안했지만, 실제 우리가 사용하는 인터넷은 TCP/IP 계층을 사용하며 4 계층(original)이었지만 지금은 5 계층(updated)으로 나누어 사용 중이다. Layer (계층) Physical (물리) 통신을 수행하는 두 장치 간의 실제 접속 담당 010…

The four F’s (Facts, Feelings, Fidings, Futures) Bye and Hello 4개월동안 진행되었던 가 끝이 났다. 인공지능, 딥러닝에 대한 이론 및 실습도 진행 해 보고, Django Ninja를 통해 Restful한 API 서버도 만들어보고, 테스트 주도 개발이 무엇인지도 배우고, AWS의 몇개 서비스를 통해 배포 및 CI/CD 구현도 하고, 고객 피드백을 통해 프로젝트 개선 작업도 해보는 등 많은 것들은 배우고 익혔다. 시작 전에는 이 곳에서 배움을 통해 백엔드 개발자로 취업 하려 하고 있겠지 생각 했는데, 여러 경험과 생각들을 통해서 지금은 프론트엔드 혹은 풀스택 개발자로 취업하려고 생각을 하고 있다. 감사하게도 이를 도울 수 있는 교육과정에 몸을 담게 되었다. 매주 토요일 딥브레인AI에서 사용하는 웹 기술스택을 배우고, 그들이 만들어 낸 솔루션을 활용하여 프로젝트를 해야 한다. 토요일만 수업을 하기 때문에 제대로 배우기가 어렵다고 판단이…

오잉? 상태변화 할 때 값을 복사하고 한다? 위와 같이 라는 배열의 state를 변경할 때 직접 해당 배열의 값을 변경하는 것이 아니라 를 사용하여 배열을 복사하고, 값을 변경하고, state 변화를 해준다. 직접 객체변경 혹은 데이터 변경이 이루어져도 결과는 같지만 이 immutability(불변성)이 가진 장점이 강력하기 때문에 React에서도 권장한다. immutability 장점 1. 복잡한 특징을 단순하게 을 위에 과정을 통해 쉽게 할 수 있다. 이전 데이터를 재사용하기 용이하다 2. 변화 감지 객체가 직접 수정이 이루어지면 변화 감지를 위해서 이전 사본과 전체 객체 트리를 돌며 비교해야 한다. 반면 immutable 객체는 이전 객체와 다르면 변화 했다고 빠르게 판단할 수 있다. 3. 리렌더링 시기 결정 React에서 를 만드는데 도움을 주고, 성능을 최적화 할 수 있다. 직접적으로 값을 변경하면 매번 state변화와 함께 가상DOM에서 리렌더링이 발생하기 때문에 CPU…

면접을 준비하다 지금까지 진행한 프로젝트를 중심으로 어제까지 이력서를 완성했다. 나는 최대한 텍스트가 많이 담기지 않지만 어떤 기술을 사용했고 경험했는 지 담도록 했다. 그런데 인터넷에 공유되어 있는 선배 개발자들의 이력서와 비교하면 내 것은 너무 초라하다고 생각이 되어졌다. 웹 개발자로써 앞으로 많은 것들을 자신있게 이력서에 담을 수 있도록 끊임없이 노력해야겠다. 이력서를 토대로 오늘 모의 면접을 보았다. 모의 면접관님이 편안하게 분위기를 이끌어주셔서 떨지 않고 질문에 내가 가진 경험과 지식을 잘 대답했다. 전반적으로 괜찮다는 평을 받았다. 이력서에서 기술의 순서나 불필요한 내용은 안 넣어도 된다고도 하셨다. 사실 많은 준비를 한 채 진행했던 것은 아니라 어떤 느낌인지를 확인하는 자리가 맞을 것 같다. 앞으로 실전에서 더 좋은 지원자가 되려면 갈 길이 멀었다. 노력하자! 수료생 특강 다른 스파르타 내배캠 수료생이 이 과정이 끝난 후 해야 할 일이라 하면서 본인이 취업을 위해서 어…

1. blank Final 팀프로젝트 완료! 🦚 우리 팀의 처음이자 마지막 팀프로젝트 무야호가 완료 되었다. 지금까지와 다르게 중간에 실제 유저들의 피드백을 받아 개선 시키는 기간도 있었다. 이를 통해 유저들의 생각도 엿볼 수 있었고, 완성도가 높은 프로젝트로 개선할 수가 있어서 좋은 경험이었다고 생각한다. 이번 프로젝트 때 새롭게 경험했던 것들을 나누고 싶다 :) 1-1 AWS의 다양한 서비스를 사용 를 사용하여 가지고 있는 도메인을 등록하고 AWS EB와 연결을 해보았다. 로부터 SSL인증서를 받아 HTTPS 사이트로 구성할 수 있었다. 을 우리 Github repository와 AWS EB 앱서버를 연결하여 자동 배포 할 수 있게 해 보았다. 1-2 프론트 개발 챌린지 회원가입 유효성 체크 회원가입 입력 필드에서 벗어나면 바로 유효성 체크를 하게 하였다. 이메일, 닉네임의 경우는 비동기로 서버 요청하여 중복체크도 하게 하였다. 중복체크는 서버 요청 및 응답을 함에도 빠르게…

The four F’s (Facts, Feelings, Fidings, Futures) 고객 피드백 열심히 팀원들과 최종프로젝트를 만들었지만 다른 사람들에게 공개하기가 조금 민망했다. 많이 부족하다 생각했기 때문이다. 그래도 팀원 모두가 라고 했었고, 나도 이 기회에 안하면 언제 해보나 싶어서 여러 커뮤니티에 홍보하고 지인들에게도 홍보했다. 대부분 지인들이 피드백을 해줬지만 몇몇은 실제 커뮤니티 홍보글을 보고 피드백을 주셨다. 그 의견들이 너무 귀했다. 피드백 대부분은 우리도 이미 논의하고 생각했던 의견들이였지만 몇몇은 전혀 예상하지 못한 버그를 찾아주셨고, 새로운 좋은 기능들도 제안해주셨다. 종합적으로 느낀점은 사람들은 더 편한 UI/UX를 바라고 더 좋은 컨텐츠를 바란다는 것을 알았다. 기술적인 어려움이나 공수가 많이 드는건 그들이 신경 쓸 부분이 아니다. 더욱 성장해서 많은 이들이 사랑해주는 서비스를 제공해주고 싶다. 실력을 쌓자!! 끝나간다 이제 한 주 남았다. 지난 12…

개요 팀프로젝트를 하는 데 우리는 개발 DB서버와 서비스 DB서버를 한 개로 사용하고 있었다. 이는 분명 문제가 있다 생각하고, 각 자 로컬 DB서버를 구성해서 개발해야 할 필요성을 느꼈다. 그래서 Docker image로 로컬 MySQL 구성 하는 방법을 정리 해 보았다. 환경 구축 1. Docker 설치 OS에 맞는 docker 설치 : https://www.docker.com/products/docker-desktop 2. 설치 확인 위 명령어로 docker 버전이 확인 되어진다면 잘 설치가 되어진 것이다. 3. MySQL Docker image 다운로드 최신버전 mysql docker image 다운로드 특정 버전 image 다운로드 4. Docker image 다운로드 확인 이름으로 이미지가 리스트에 보인다면 다운로드 성공 5. MySQL 컨테이너 생성 및 실행 [저의 경우 예시] 컨테이너의 이름은 mysql root계정의 비밀번호는 로컬의 3306포트를 컨테이너…

용기를 내다 팀원들과 열심히 만든 에 대해 너무 자신감이 없었던 것 같다. 홍보를 하고 우리 프로젝트를 선보이기가 부끄러웠다. 많이 부족하다는 생각이 들었기 때문이다. 그러나 저번주에 팀원들과 얘기하면서 그들의 용기와 열정에 나도 힘을 얻고 같이 해보기로 했다. 5개 정도 커뮤니티에 홍보하고 각 팀원의 지인들에게 서비스를 사용하게 하고 피드백 요청을 했다. (구글폼 작성하면 스벅 기프티콘이!!) 나도 한 사이트를 맡아 홍보 글을 올리려는 데 너무 떨렸다. 팀원분들도 각각 용기 내어 올리는 것을 보고 나도 작성을 맞쳤다. 250분 정도가 해당 게시글을 보셨다. okky를 통해 피드백을 주신 분은 한 분 정도였던 것 같다. 그래도 이런 활동을 하면서 고객에게 직접 피드백을 받는 건 좋은 경험인 것 같다. 앞으로 2일 더 피드백을 받고 팀원들과 더 좋은 방향으로 우리 프로젝트를 개선 해 봐야겠다. 용기를 내다

Docker Container 끼리 연결 Docker의 각 컨테이너는 서로 다른 FileSystem과 Network를 가진다. 그렇기 때문에 따로 설정을 해주지 않으면 컨테이너 끼리 통신이 불가능하다. 그러면 어떤 방법으로 Docker container끼리 통신이 가능할까? mongoDB와 FlaskApp 두 컨테이너를 연결 해보자. 1. Docker network를 생성 memo 라는 이름으로 docker network를 생성해주었다. 2. MongoDB 컨테이너를 네트워크 memo와 연결 로 내 컴퓨터의 27017포트를 mongo 컨테이너의 27017와 연결 memo라는 이름의 네트워크 와 연결 mongo라는 이름으로 mongo컨테이너를 가리키는 network 이름 3. Flask 앱 내에 DB link를 변경 MongoDB를 가리키는 연결정보를 2번 항목에서 alias해준 mongo로 변경 4. Docker Flask 네트워크 memo와 연결 그렇다. 중간에 옵션을 추…

The four F’s (Facts, Feelings, Fidings, Futures) 자동 배포 지난 주에 어느 정도 개발을 마치고 어플리케이션 서버와 인공지능 서버를 AWS EB에 올려 배포를 했었다. 그리고 AWS CodePipeline을 통해 Github에 변경사항이 생기면 자동적으로 어플리케이션 서버에도 반영되도록 CI/CD 또한 구성을 하려 했었다. 그런데 AWS 시크릿키 등 감추어야 할 정보를 Github에 올릴 수 없어 실행에 옮기지 못했다. 서비스를 하기 위해선 이 과정이 꼭 필요하겠다 싶었다. (이것이 무중단 배포?) 튜터님께도 여쭙고 정보를 찾은 결과 숨기고 싶은 값들을 환경변수 값으로 넣고 불러오면 가능하다 생각했다. 패키지를 통해 로컬에서는 .env 파일에서 값을 가져오고 EB에서는 환경변수 알맞은 키와밸류만 넣어주면 동일하게 그 값들을 읽을 수 있다는 것을 알고 적용했다. 그리하여 deploy브랜치에 변경사항이 반영되면 자동으로 연결된 eb서버에도 적용되…

The four F’s (Facts, Feelings, Fidings, Futures) 네이버 검색 API 다른곳에서 만든 API를 이용하면 내가 A~Z까지 하지 않고 요청만으로도 원하는 결과값을 받을 수 있다. 내가 선택한 산 주변에 맛집 정보를 보여주면 그 또한 유저에게 좋은 정보가 될 것이라 생각했다. 우리는 100가지 국내의 산 정보를 제공하는데 현실적으로 이 산을 다 돌아다니며 데이터를 얻기는 힘들다. 대한민국 최고의 검색포털 사이트인 네이버에서는 요청한 검색어에 맞는 상호명 등의 비즈니스 정보를 결과로 돌려주는 API를 제공하고 있었다.(단, 5개만 준다. 무료라서 그런가) 섬에 있는 산들에 대해선 결과가 나오지 않지만 그 외는 그래도 주변 식당,카페 등의 정보를 제공해준다. 나는 이를 리스트 형태로 보여주고 클릭을 하면 API에서 제공해주는 식당, 카페의 사이트로 연결해주거나 네이버 검색결과를 보여주게 했다. API를 사용하여 정보를 얻고 그것을 화면에 보기 좋게 뿌려…

오늘 배운 것 AWS Route 53에 다른 사이트에서 생성한 도메인을 붙인다. 가비아에서 구매한 도메인의 NameServer를 Route 53에서 제공하는 것으로 변경한다. AWS Certificate Manager를 통해 SSL인증서를 발급 받아 Route 53에 등록한 도메인을 https를 변경 한다. Route 53에 등록된 도메인에 AWS Elastic Beanstalk 서버를 붙인다. AWS EC2 Loadbalancer에서 http(80포트)를 https(443포트)로 리다이렉트 설정을 한다. AWS Codepipleline 설정으로 Github repository 내용 변경 시 자동으로 배포(EB 파일들이 업데이트)하도록 한다. (CI/CD) 느낀점 AWS에서 모든 것들을 위한 세팅이 너무 잘 되어 있어 너무나 쉽게 위에 작업들을 다 할 수 있었다. 보안부터 자동배포에 이르기까지 간단하게 맛을 볼 수 있어서 정말 신기하고 재밌었다. AWS를 통해 프로젝트가 조금 더 …

The four F’s (Facts, Feelings, Fidings, Futures) 뚝딱뚝딱 이번 한 주는 각 자 담당한 것을 개발하는 데에 시간을 온전히 보냈다. 아직 완성이 돼진 않았지만 조금씩 모습을 갖춰가고 있다. 나 같은 경우 네이버지도에 선택 된 산의 등산로를 보여주는 일이 제일 큰 챌린지였던 것 같다. 다행히도 네이버맵 API에서 등산로 위치정보를 주는 API 결과값(GeoJson)으로 맵에 표시할 수 있게 이미 함수를 제공하고 있어 생각보다는 쉽게 되었던 것 같다. 일단 이번 한 주는 맡았던 것을 쭈욱 개발하고, 다음 한 주는 하나 하나 테스트를 하면서 완성도를 높일 생각이다. 오잉 많은 사이드, 토이프로젝트 팀들이 크게 디자인, 프론트, 백엔드로 나뉘어서 하나의 프로덕트를 만드는데 우리는 백엔드 다섯이서 서비스를 하나 만드려고 하다니 라는 생각이 갑자기 들었다. 무언가를 한다면 제대로 하는 게 맞다고 생각하는 사람인데, 우리는 제대로 하기 위한 요소들을 잘 갖추…

등산로를 지도에 띄우려면? 산 상세정보에 등산로 정보를 넣어야 한다. 대한민국에서 가장 사용을 많이 하는(제 생각) 과 중 어떤 것으로 할까 고민하던 중 네이버맵에서는 기본적으로 등산로가 보일 때 화재에 다른 등산로 개,폐 여부가 맵에 표시되어 있었다. 요즘 산불도 많이 나는데 해당 내용이 등산로를 보여주는 데 있어서 유용할 거라 생각되어 네이버맵으로 선택했다. 또 좌표정보가 담긴 Geojson, GPX 형식의 데이터값들도 바로 지도에 띄워볼 수가 있어서 망설이지 않고 선택했다. 우리는 우선 대한민국의 100대 명산에 대한 정보만 제공해주는 서비스를 하기로 초기 기획을 했었다. 나는 해당 산들에 관한 2가지 정도 쓸만한 데이터를 확보했다. 하나는 명산 100개에 대한 등산로 gpx파일들이고, 다른 하나는 를 사용해 geojson 값이다. 2가지 다 바로 네이버맵에 올려볼 수 있어 등산로만 표시하면 크게 문제는 없다. 다만 각 데이터들에 대해 고려해아 할 것이 있다. 일단 gpx파…

The four F’s (Facts, Feelings, Fidings, Futures) 다다익선 . 지난 주말 최종 프로젝트 아이디어를 생각하기 위해 이런 저런 정보도 찾아보고, 생각을 많이 했는데 해보고 싶다 혹은 할만하다 라고 할 게 없었다. (물론 과자 관련해서 하나 생각해 두긴 했다) 주말이 지나고 팀원들이랑 얘기를 나누다보니 아이디어가 잡혔다. 신기했다. 혼자 끙끙대면서 그렇게 생각해도 딱히 뭐가 안 떠올랐는데 팀원 분 중 한 분이 꺼낸 한마디로 그 아이디어에 대해 서로 의견을 내면서 구체화 해보고 또 최종 프로젝트 주제로 확정하기도 했다. 사람이 여럿이니 내가 생각지도 못한 것들이 다른 분들을 통해 나오는 것을 느꼈다. 나는 혼자 생각해보고 혼자 진행하는 걸 선호하는 편이긴 하다. 아무래도 다른 사람 생각안하고 혼자 편하게 이렇게 저렇게 해 볼 수 있기 때문이다. 그런데 돌이켜보면 혼자 진행해서 뭔가 결과를 만들어낸 것은 많지가 않다. 지금 생각해보니 진짜 별로 없다. …

이젠 개발이다 일주일 동안 최종 프로젝트 아이디어를 선정하기 위해서 이것 저것 알아보고 팀원분들이랑 많은 시간 얘기를 나누었다. 노션, 피그마를 오고 가며 열심히 S.A(Starting Assignment) 작성을 했다. 튜터님들의 피드백 또한 나쁘지 않았다. 그렇다면 이제 계획한 대로 구현만 잘하면 된다. 앞으로 여러가지 문제로 머리를 부여잡겠지만, 개발자가 되기 위해서 이 여정을 잘 마무리하고 싶다. 그러고 나면 나는 지금보다 조금은, 아주 조금은 좀 더 나은 개발자가 되어 있지 않을까? 팀원들을 신뢰하고 재밌게 으쌰으쌰 하자. 잊지말자! 사람을 놓치면 아무것도 할 수 없다는 것을 말이다. 이젠 개발이다

풀고 싶은 문제에 대하여 최종 프로젝트에서는 추천 시스템을 활용하여 사용자를 위한 서비스를 만들어야 한다. 우리는 등산 유저들에게 필요한 산 정보와 더불어 각 각이 관심 갖을만한 산과 등산로를 추천해주는 서비스를 하기로 했다. 특히나 등산은 하고 싶으나 산에 대한 정보가 없는 유저들에게 유용할 서비스가 될 거라는 생각이 들었다. 그런데 추천 시스템을 하려면 충분한 데이터셋이 있어야 한다는 피드백을 들었다. 그런데 우리는 명확하게 어떤 데이터셋으로 어떻게 추천을 해줘야할까 를 명확하게 정의하지 못했다. 일단 유저 정보를 기반한 등산 관련 데이터셋을 찾기가 어려웠다. 그 말인즉슨 데이터셋을 모으기 위해 우리가 무언가 액션이 필요하다는 것이다. 예를 들면 크롤링을 통해 데이터를 모으고 또 정제하여 우리에게 유의미한 데이터셋을 만들든지, 아니면 직접 사람들에게 설문하여 모으든지 말이다. 1000개 이상 정도는 모아야 어느 정도 결과를 뽑을 수 있지 않나라고도 얘기하셨다. 그래서 주제를 바…

docker container 데이터 유지 시키기 db를 담은 docker 컨테이너를 삭제 하는 경우 혹은 새로운 db 컨테이너를 생성하는 경우 기존과 다른 컨테이너이기 때문에 데이터가 동일 하지가 않다. 이럴 때 을 사용하게 되면 다른 컨테이너가 생성되더라도 기존 컨테이너에서 사용한 데이터를 계속 유지 할 수 있다. 처음 db 컨테이너를 만들기 전 volume 명령어로 로컬에 공간을 확보하자 (아래는 memo라는 이름의 volume을 생성 함) 새로 생성하는 컨테이너에 위에서 만들어준 volume을 연결 시켜 준다 (예제는 mongodb 컨테이너이다) 라는 이름의 로컬 volume과 mongodb 컨테이너 안의 공간을 연결 해 주었기 때문에 db에 쌓이는 데이터는 로컬 공간에도 쓰게 된다. 다음에 새로운 mongodb 컨테이너를 생성 할 경우 2번과 같은 명령어로 다시 volume에 연결 해준다면 기존에 쓰여진 데이터를 새로운 컨테이너에서도 그대로 쓸 수 있게 된다. dock…

The four F’s (Facts, Feelings, Fidings, Futures) 모바일용 웹 어플레케이션 이란? 일반적인 유저들이 PC보다는 모바일로 웹서핑을 많이 하는 시대라고 들었다. 그래서 모바일용 웹페이지 요구는 아주 당연하다. 그래서 우리는 모바일용 웹페이지로 프로젝트를 진행했었다. 프론트엔드를 담당했던 나는 이 점을 고려해서 화면을 잘 구현했어야 했는데, 실패한 것 같다. 첫번째로 크기와 사이즈는 특정 폰 사이즈에만 맞춰 제작한 것이다. (픽셀로 크기를 정해버렸다) 둘째는 마우스오버, 화면 크기를 계산하여 나타내는 모달창 등은 실제 모바일환경에서는 제대로 작동을 하지 않는다는 점이다. 크롬 브라우저에서 개발자 모드에서 모바일 모드로 화면을 볼 수 있다. 나도 당연히 해당 모드로 몇 번 확인을 했지만, 그것은 이미 마감이 얼마 남지 않은 시점이였다. 다음에 프로젝트를 진행할 때는 사이즈 뿐 아니라 정말 모바일에서 잘 구동할 수 있도록 해당 환경에 맞는 UI로 구현하…

1. 코스인함시 두번째 팀프로젝트 완료! 🦚 우리 팀의 2번째 팀프로젝트 미정의 스케치북가 완료 되었다. Pretrained 된 유화제작 모델을 가지고 웹어플리케이션을 만들어 보았다. 이번 프로젝트의 필수 포함은 아래와 같다. 인공지능 서버 / 앱 서버를 따로 구축해주세요. (Django, Flask, Django-Ninja 프레임워크 중 용도에 알맞은 프레임워크를 고민하셔서 구축해주세요. 다만 이전 프로젝트에서 아쉬웠던 부분은 개선하며, 한단계 성장한 개발자 다운 개발을 진행해 봅시다.) 인공지능 서버 / 앱 서버 모두 AWS 를 통해 배포해주세요. AWS S3 / RDS 를 사용해주세요. 유화제작 인공지능 기술 (NST) 을 사용해서, 사용자가 이미지를 넣으면 유화 스타일이 적용된 이미지로 변환되어 출력되는 서비스를 만들어주세요. 이번에 새롭게 도전되는 부분은 앱서버와 인공지능 서버를 2개 aws에 올려 어디서든 접속할 수 있는 어플리케이션을 만드는 것이였다. 학습기간에 새로…

작은 디테일도 쉽지 않구나 내일 있을 프로젝트 발표를 앞두고 담당한 페이지에서 손 봐야할 게 없나 살펴보았다. 크게 기능 수정할 것들은 없었지만 테스트를 하면서 자잘하게 수정할 게 발생하는데 이게 은근히 꼼꼼함을 요구한다. 디테일도 잘 챙기는 개발자가 되고 싶다. 열심히 하긴 했는데 뭔가 좀 아쉬움이 남는다. 보여주는 부분을 맡게돼서 임팩트있게 뭔가 보여주고 싶었는데 그럴만한게 있나 라고 작아진다. 조금 지쳐있기도 하지만 끝까지 잘 마무리 해 보자. 작은 디테일도 쉽지 않구나

오늘 무엇을 학습하고 다루었나 javscript 파일 다운로드 구현 axios 사용 a태그 download property 사용 AWS s3 CORS 이슈 해결 클립보드 복사 구현 navigator.clipboard.writeText() 사용 자잘한 css, js 작업

The four F’s (Facts, Feelings, Fidings, Futures) 네번째 팀프로젝트 시작! 이번 프로젝트는 NST(Neural Style Transfer)를 이용한 유화 제작 서비스를 만드는 것이다. 모델 자체를 우리가 학습시켜 만들진 않지만 이미 만들어진 것을 활용하여 서비스를 만드는 것이다. 기발한 컨셉으로 진행했으면 좋았겠지만, 딱히 떠오르는 게 없었나보다. 우리 팀은 해당 기술 이용해서 흔히 알고 있는 에서 스타일을 뽑고 본인이 원하는 이미지를 합쳐 유저만의 유화를 가지게 되는 요소를 주는 서비스를 만들기로 했다. 이번 프로젝트에서 우리는 2개의 서버를 올려 서로 통신하는 것을 배우게 될 것이며, 어떻게 유저 친화적이고, fun한 UI/UX를 고민하고 구현하게 될 것 같다. 지금까지와 다르게 이번에는 자진해서 프론트를 맡고 싶다고 했다. 웹 어플리케이션에서 어느 한 부분 중요하지 않은 곳이 없지만 유저가 먼저 맞닿는 프론트의 맛을 제대로 보고 싶어서다…

lazy loading 구현 새로운 것을 알고 익히는 것은 너무나 신나는 일인 것 같다. 지난 프로젝트 때 많은 양의 이미지 로드가 있어서 해당 페이지가 상당히 늦게 열리는 문제가 있었다. 시간이 없고 해서 그대로 마무리를 했는데 역시 튜터님들의 개선이 필요하다는 피드백을 받게 되었고 그 때 이라는 말을 듣게 되었다. 이번 프로젝트에도 많은 양의 이미지를 로드하는 부분이 있어서, 저 lazy loading이라는 것을 구현해서 이미지 로딩이 느리지 않게 하고 싶었다. 그래서 어떻게 구현하는 지 여러 블로그글을 보고 가장 기본적인 지식만을 가지고도 구현할 수 있는 방법으로 코드를 짰다. 여러 시행착오를 거쳐 우리 프로젝트에 맞는 코드로 잘 동작하게 했다. 시간이 되면 직전 프로젝트도 해당 기술을 써서 개선해보고 싶다. (그런데 그건 서버에서 응답해주는 시간이 느린거라 클라이언트-서버간 통신을 쪼개서 해야하나 라는 생각이 들긴한다.) 몰입 나는 프로젝트할 때는 프로젝트만 하는데, 어느 …

사용자 경험이 좋고, 재밌는 앱 프론트는 어플리케이션 최앞단에 서서 사용자들을 제일 먼저 맞이하게 된다. 가독성이 좋아 정보 전달이 좋고, 큰 설명이 없어도 사용자가 바로 어플리케이션을 사용할 수 있다면 뛰어난 프론트가 아닌가 싶다. 더불어 유저가 사용하는 재미까지 있다면 금상첨화 아닌가. 내가 지향하는 프론트의 모습이다. 프론트 작업의 재미는 역시 인터렉티브에 있는 것 같다. 자바스크립트, css를 가지고 동적으로 뭔가를 보여주고, 변화를 주면 개발을 하는 나도 신기해서 계속 만져보게 된다. 저번 프로젝트 최종 피드백때 받았던 을 이제 구현해보려고 한다. 처음 접하는 기술이지만 많은 이미지 혹은 파일을 불러오는 요즘 웹앱에서는 꼭 알아야 하는 기술인 것 같다. 잘 배워서 우리 프로젝트에 잘 넣어보자!! 사용자 경험이 좋고, 재밌는 앱

gif가 무엇이길래… 이번 프로젝트에서 프론트를 맡는다고 했을 때, 다른 여러가지 요소들도 중요하지만 인터렉티브한 요소를 조금이라도 가미 시키고 싶었다. 우선 메인 페이지를 담당해서 작업하고 있는데 유화작업페이지 랑 마이페이지로 가는 버튼을 마우스오버 하면 어느 곳으로 가게 되는지 사용자에게 보여주고 싶었다. 이를 하기 위해서 처음에는 일반 png 버튼을 배치하고 마우스 오버가 되면 제작된 gif파일을 보게 하면 되겠다고 생각했다. 그런데 이 gif만드는 과정이 싶지가 않았다. 기존에 배치된 이미지파일과 크기도 동일하게 된 상태에서 글씨가 쓰여지는 효과만 보이고 싶었는데 이런 디자인 작업은 내가 잘 몰라서 엄청 애를 먹었다. 결국 해내기는 했는데 여전히 만족스럽지는 않다. 그냥 오늘 하루종일 아이패드로 글씨쓰고 캡처해서 gif만들고 리사이즈,속도 조절 등 여러개를 만들었다가 바꾸었다가 아주 난리가 났었다. 생각만큼 잘 안되서 머리를 쥐어뜯으면서 했는데 이를 보고 느낀게 생각대로 잘…

4번째 팀 프로젝트 시작 그 동안 배운 NST(Neural Style Transfer)기술과 Django, AWS를 모두 녹여야 하는 네번째 팀 프로젝트가 시작되었다. 이번 프로젝트 기간에는 오늘 새로 오픈된 강의도 같이 들어야 할 것 같은데, 시간이 될 수 있을 지 모르겠다. 그래서 이전보다는 프로젝트에 조금 힘을 빼고 강의듣는 시간도 확보하려고 생각했었는데, 회의 시간에 먼저 나서서 를 맡고 싶다고 했다. 디자인 감각이 있는 분들이 잘 할 수 있다라 생각한 분야이긴 하지만 도전하고 싶었다. 왜냐면 나는 프론트도 어느 정도 할 수 있는 개발자가 되고 싶기 때문이다. 맞다, 나는 이다. 좋은 결과물이 나올지는 자신할 수 없지만, 할 수 있는 한 최선을 다해서 팀원 모두가 만족하는 화면을 구성하고 싶다. 퐈이아!!🔥 4번째 팀 프로젝트 시작

환경설정 하다가 시간 다 갔다 오늘 오전 강의에서 를 장고에서 어떻게 붙일 수 있는 배웠다. 모델 자체는 에서 사용하고 우리는 입력값(이미지)을 잘 가공만 해주면 된다. 를 사용하여 API서버는 뚝딱 만들었는데 이를 에 올리는 것은 쉽지 않았다. eb-cli를 통해 배포 하려 했는데 이게 쉽지 않았다. 설치를 하면 virtualenv 에러가 났고, 잘 설치했더니 eb-cli에서 올릴 때 environment에러가 났다. 처음 문제는 에러메시지대로 virtualenv 설치해서 해결했다. 그런데 2번째는 aws 정책관련 된 것이였는데, 에러메시지를 구글링해도 쉽게 해결하기가 어려웠다. 결론은 eb-cli 설정된 IAM이 eb-cli로 배포할수 있는 권한이 잆었던 것 같다. 그래서 나는 새로 모든 권한을 가진 IAM을 만들고 eb-cli에 설정해주니 잘 됐다. 글로 작성하면 몇자 안되지만, 저걸로 어제 오후를 다 보냈다. 하아. 그래도 다행인건 이것을 하는 과정에서 AWS 정책과 eb-…

The four F’s (Facts, Feelings, Fidings, Futures) 학습 시간이 늘었다 그런데 고민도 … 예정대로면 지난 목요일에 새로운 팀프로젝트가 시작이였다. 그러나 여러 캠퍼들의 의견을 반영하여 개인 학습의 시간이 더 늘어났다. 나도 사실 그 소식을 듣고 조금 좋았다. 프로젝트는 정말정말 재밌지만 ‘벌써 또 시작이야?’ 라는 생각이 들 정도로 조금은 지쳐있어서 그랬나싶다. 현재 듣고 있는 ‘Django 심화’ 강의가 이전에 들었던 그 어떤 강의보다 학습기간이 길었다. 모든 강의가 다 나에게는 새로운 라이브러리, 기술이였다. 그래서 만약 프로젝트가 중간에 시작되었다면, 심화 강의는 다 듣지 못한 채 프로젝트로 또 시간을 쏟아부었을 것이다. 어쨌든 어느정도 쉼을 가지면서 학습하고 있는 지금이 정말 좋다. 또 숨가쁘게 공부하느라 복습하기가 쉽지 않았는데 매일 오전 튜터님들이 파이썬, 장고, 머신러닝 보충강의를 해주셔서 배웠던 것을 다시 곱씹을 수 있는 시간도 가…

1. Render와 Redirect의 차이 Django view에서 return을 할 때 render로 하거나 redirect 로 합니다. 이 둘의 차이가 무엇일까요? render render는 위와 같이 templates에 있는 html을 보여줄 때 입니다. 이 때, url은 변경되지 않습니다. redirect redirect는 우리가 정해놓은 url로 리다이렉트 시킵니다. 이 때, url이 변경 됩니다. 2. @login_required Django view에서 함수 위에 를 적어주면 에게만 요청을 받아 view의 함수를 타게 할 수가 있습니다. 그렇다면 에게 요청을 받았을 때는 어떻게 응답을 해주면 좋을까요? 설정된 url로 리다이렉트 해줄 수가 있습니다. (로그인 페이지나 랜딩 페이지로 보내면 좋을 것 같습니다) 방법은 아래와 같습니다. @login_required 데코레이터 뒤에 로 로그인 되지 않은 유저를 리다이렉트 시킬 수 있습니다. 참고 https://docs.d…

파이썬 Generator의 우아함 함수 안에 local 변수들은 그 해당 함수가 호출이 되고 종료가 되면 그 값들이 다 사라지게 된다. 그러나 우리는 가끔 함수 내용을 거치고도 그 값을 계속 유지하고 싶을 때가 있다. 그래서 함수 밖에 변수를 선언하여 그 값을 유지하기도 한다. 이 방법은 그 함수를 호출하는 쪽에서 변수를 관리해야 한다. 아래 행운권 추첨 예제가 있는데, 0을 뽑으면 꽝이다. 그런데 2번 연속 꽝이면 그 이후에는 무조건 0이 아닌 값을 뽑게 만드는 행운권 추첨이다. 가장 최근에 뽑은 숫자를 관리하기 위해서 변수로 함수 호출 밖에서 관리를 해주고 있다. 조금 더 우아한 방법으로 Generator를 사용해보도록 하자. 이 방법을 쓰게 되면 함수 실행을 잠시 멈추었다가(함수 안 변수들의 값이 그대로 유지) 다시 실행 할 수 있게 된다. 아래 코드를 보자. 가 한 번이라도 함수 안에서 사용되면 generator 함수라고 할 수 있다. generator의 함수를 실행하면 …

[Django] 서로 다른 유저에게 좋아요 카운트를 동시에 받게 된다면? 버튼을 누를 때 마다 현재 DB에 들어 있는 게시글의 좋아요 수를 불러 온 후 1을 추가하고 다시 저장한다 라고 서비스로직을 만들었다고 해보자. 이 경우, 동시에 서로 다른 유저가 를 누르게 되면 좋아요 카운트가 올바르게 업데이트 되지 않을 수 있다. A가 카운트를 증가 후 저장하기 전에 B가 를 요청할 경우다. Django의 F() expressions를 사용하면 이를 해결할 수 있다. 해당 표현을 사용하게 되면 실제 데이터를 메모리에 올려 놓은 후 수정하는 것이 아니라 바로 수정할 수 있게 된다. 와 같이 코드를 작성하여 동시에 같은 컬럼의 값을 수정하게 되는 것을 순차적으로 하도록 하게 한다. 관련 문서 https://docs.djangoproject.com/en/4.0/ref/models/expressions/#f-expressions [Django] 서로 다른 유저에게 좋아요 카운트를 동시에 받게…

코드리뷰 지난 주에 마친 프로젝트에 대해서 각 자 작성한 코드를 리뷰하는 시간을 가졌다. 어떤 라이브러리를 이용하고, 기능을 구현하기 위해서 어떻게 코드를 작성했는 지 설명을 하기도 하고, 팀원들의 얘기를 듣기도 했다. 우리의 코드를 돌아보고 서로 어떻게 구현했는 지 직간접을 알게 돼서 유익하고 재미있었다. 다만 아쉬운 건 내가 사용한 라이브러리에 대한 이해가 조금 부족해 잘 알려주지 못한 것 같아 아쉽다. 계속 드는 생각이지만, 내가 A부터 Z까지 작성해서 구현하는 것도 중요하지만 이미 잘 되어있는 것을 잘 알고 구현하는 것도 매우 중요한 것 같다. 한 번 보면 딱 알게되는 이면 얼마나 좋을까 라는 생각을 해봤다. 쓸데 없는 소리 하지 말고 열심히 하자! Django 폴더 구조 이전까지는 기본적인 장고 폴더 구조에서 개발을 했는데, 이번 심화 수업을 들으면서 더 쪼개서 할 수 있게 됨을 알게 되었다. 우선 테스트를 위한 폴더, 비즈니스 로직을 담당하는 폴더, router(vi…

Django 심화 수업 중 오늘은 Django 심화 강의만 열심히 들었다. 특히 TDD(Test Driven Development) 맛보기를 제대로 하고 있다. 구현 하고자 하는 기능은 Service 따로 빼서 만들고, 기능 검증은 Test를 거쳐서 확인한다. 지금은 강의인지라 ‘아하 그렇구나’가 되는데, 실제 프로젝트 때 TDD로 하면, 더 좋은 개발을 할 수 있을 지 궁금하다. 워낙에 주어진 시간 안에 빨리 구현한다에 초점을 맞춘 개발만 해오다보니 테스트주도개발이 신기하면서도 잘할 수 있을까라는 생각도 든다. 기회가 된다면 다가오는 목요일부터 시작 될 새로운 프로젝트에 한 번 TDD로 진행해보는 것도 나쁘지 않을 것 같다. 남은 심화과정도 잘 익혀서 잘하는 장고개발자가 되도록 해보자! Django 심화 수업 중

The four F’s (Facts, Feelings, Fidings, Futures) 절반이 흘렀다 스파르타 내일배움캠프에서 공부한 지 벌써 2달이 지났다. 현재 진행중인 강의를 포함하여 8개 과목의 수업을 들었고, 3번의 팀프로젝트를 했다. 특히 머신러닝기초, AWS 와 Django 수업은 내가 이전에는 접하지 못했던 새로운 것들 이었기에 신기해하고 재밌게 배웠던 것 같다(물론 학습이 쉽진 않았다). 이 과정이 마친 후 나는 바로 취업을 할 생각이라 학습 뿐만 아니라 슬슬 취업을 위한 준비도 같이해야 하지 않을까 싶다. 최근 튜터님과 면담에서 ‘알고리즘’, ‘그림 그려 설명한다’, ‘주 프로그래밍언어 외에 2번째 프로그래밍언어’, ‘프로그래밍언어에 대한 이해와 실력’, ‘클린코드’ 와 같은 키워드들이 머릿속을 맴돈다. 첫번째는 취업을 위한 코딩테스트 준비가 필요함을 느끼게 되었고, 두번째는 내가 짠 코드를 다른사람에게 그림을 그려 설명하는 능력 또한 필요하다 하셨다. 내 코드가…

Pycharm은 되는데 VScode는 안되나요? 오늘 수업시간에 Django에서 테스트코드를 작성하고 명령어 로 테스트 하는 법을 배웠다. 그리고 Pycharm에서 간단하게 설정 몇개를 하더니 버튼 하나로 단위(함수)별 테스트와 디버깅이 가능한 것을 보았다. 내가 사용하고 있는 VScode에서도 동일한 방법으로 테스트를 하고 싶었다. 몇시간에 걸친 혈투 끝에 해답을 찾았다. VScode에서 Django 단위 테스트 해보자 환경 설정 ⚙️ vscode 왼쪽 탭에 플라스크 아이콘(Testing)을 누른다 그리고 버튼을 누른다 를 선택한다. (테스트 코드가 unittest 방식으로 작성되어 있다) 테스트 파일이 있는 경로를 설정 한다. 여기서는 Root(.)으로 하겠다 테스트 파일명의 형식을 선택한다. 여기서는 를 선택하겠다. 테스트파일명은 test_view.py 이다 위와 같이 설정파일 내용 선택을 마치면 파일이 생성되고 2번과 같이 내용이 작성된다 에 2번 내용을 작성…

정리 정리 정리! 지금까지는 프로젝트가 끝난 뒤 바로 회고 글을 작성했었는데, 어제는 그러질 못했다. 전날 밤을 새서 정신이 제정신이 아니었다. 그래서 오늘 우리팀 Github Readme와 회고글을 작성하는 것에 하루를 다 보냈다. 작성한 결과물을 봤을 때는 뿌듯하지만 한 편으로는 공부할 게 많은데, 이렇게 하루를 보내서 아쉽기도 하다. 이것저것 많이 배우고 하고 싶은 욕심도 필요하겠지만 지금 해야 하고, 할 수 있는 것에 최선을 다하다 보면 문서작업이나 글 작성에 더 능숙해지라 믿는다. 꾸준히 해 보자. ERD 작성 ERD작성할 때 테이블간 관계도를 나타내는 연결선을 어떻게 작성해야 하나 궁금했었다. 이번에 작성하면서 모든 관계도에 대한 것을 익힌 것은 아니지만 우리 프로젝트에 테이블간 관계도를 어떻게 작성해야 하는 지 확실히 알았다. 늘 ‘알아야 하는데’ 라고 생각으로 그쳤던 것을 이 교육을 하면서 하나하나 해 나가고 있는 것 같아 기분이 좋다. 학습의 시간 잠시 호흡을 쉴 …

1. 코스인함시 첫번째 팀프로젝트 완료! 🤸 이하 코스인함시 의 첫번째 팀프로젝트 를 마쳤다. 세계적인 스트리밍 서비스 중 하나인 의 외모와 주요기능들을 클론하고 프로젝트를 진행하면서 배우게 된 을 적용해야하는 것이 주요 챌린지였다. 우선 을 살펴보자. Django / Tensorflow 를 사용해주세요. AWS S3 / RDS 를 사용해주세요. (사이트 구현에 필요한 이미지 등은 모두 S3 에 올린 것을 사용하는 방식으로 하셔야 하고, DB도 RDS 서버를 이용하셔야 합니다.) ㄴ현업에서 아주 많이 사용되는 방식! 로그인 / 회원가입 기능을 구현해주세요. 추천시스템을 활용해주세요. (코사인 유사도만 사용하셔도 괜찮습니다.) 넷플릭스와 비슷한 UI를 가지도록 만들되, 내부 콘텐츠는 팀에서 자유롭게 선정해주세요. (뉴스 기사 추천 사이트를 만들어도 좋고, 유튜브 영상을 추천하는 사이트를 만드셔도 좋습니다.) 넷플릭스처럼 사용자에 따라서 메인에 정렬되는 콘텐츠가 달라지도록 구현해주세…

머리가 멈췄다! 언제가 마지막이었는지 기억도 안 난다. 오랜만에 아주 오랜만에 밤을 샜다. 전 날 오후부터 구현 해보고 싶은 기능이 있어 해 보다가 할 수 있겠다는 생각이 들어 잡고 계속 하다보니 다음날 아침이 되었다. 유저에게 영화를 추천해주면서 많은 영화 썸네일 이미지가 메인페이지에 배치가 되는데, 넷플릭스의 경우 각 해당 썸네일에 마우스를 가져다 놓으면 간단하게 영상 정보와 클립영상이 실행된다. 마우스오 오버로 보이는 div와 그러지 않을 때 div로 나누어 2개의 태그가 전환할때 css의 transition을 사용하게 매끄럽게 보이게 하였다. 그리고 영상클립은 네이버 TV와 네이버 영화 페이지에서 영상 url을 크롤링 하여 보여주는 방식으로 했다. 생각보다 구현이 이쁘게 잘 되었다. 잠을 못자서 중간중간에 머리가 멈춰서 아무것도 못한 적도 있었지만, 결과물을 보고 뿌듯했다. 발표만 하면 이제 끝이다! 프로젝트 중 배운 것들을 내것으로 잘 가져가도록 하자! 머리가 멈췄다!

API 문서 작성 잘 되어 있는 기술 문서를 보면 쉽게 해당 기술을 사용할 수 있게 도와준다. 그러한 도움을 많이 받아왔고, 지금도 받고 있는 사람으로써 잘 작성된 문서를 만들고 싶은 욕심이 있었다. 이번 프로젝트에서 담당한 것 중 영화추천과 검색에 관한 함수들을 만들었었는데, 이것들을 내가 구두로 설명하지 않아도 팀원들이 잘 사용하게 해주고 싶었다. 그래서 간단한 를 작성해보았다. 기본적인 함수의 형태와 설명 그리고 예시를 들어 최대한 쉽게 사용 해 볼 수 있도록 했다. 이게 짜임새 있게 잘 작성했는 지, 나도 잘 모르겠다. 다만, 필요한 정보를 최대한 간결하게 전달하고자 했고 무엇보다 처음으로 API문서를 작성하게 되어 스스로도 뿌듯했다. 앞으로도 에 초점을 맞추어 문서 작성을 재밌게 잘 해야겠다. 네이버 동영상 임베딩 그래도 넷플릭스 클론인데 영상 스트리밍은 못하지만 짧은 영상이라도 우리 웹페이지에서 보여주고 싶었다. 처음에는 유튜브 영상을 임베딩 하는 자료들이 많이 있어 각…

The four F’s (Facts, Feelings, Fidings, Futures) 새로운 챌린지의 연속 이번 프로젝트를 진행하면서 이전에 경험하지 못한 작업들을 많이 하게 되는 것 같다. 소셜 로그인 연동 우선은 이다. 하나 하나 API문서를 보면서 작성해볼까 라고 생각도 했지만, Django의 패키지를 사용하면 조금 더 쉽게 구현 되는 것 같아 그것을 통해 구현 해 보았다. 이 작업을 통해서 밑바닥부터 개발하는 능력도 필요하긴 하지만, 기존에 누군가 만들어 놓은 라이브러리를 잘 이용하여 개발하는 것도 꼭 필요한 능력인 것 같다. 그리고 그게 또 쉽지만은 않다. 내용을 잘 알고 있어야 내 입맛에 맞게 필요한 부분에 잘 가져다 쓸 수 있기 때문이다. 웹 크롤링 이전에 웹페이지에서 필요한 정보만 크롤링 하는 게 궁금해서 한 두어번 정도 해봤던 것 같지만, 지금 진행하는 프로젝트에 필요한 데이터셋을 모으기 위해 며칠간 제대로 씨름해서 어떻게 필요한 데이터를 가져와야 하는지 더 …

DB에 데이터 넣기 크롤링으로 필요한 데이터는 어느 정도 모은 것 같다. 이제 이것을 DB에 넣고, 또 추천시스템을 위한 모델을 만들어야 한다. 영화정보를 가지고 페이지에 보여주는 작업을 하시는 분들이 있기 때문에, 데이터를 DB에 넣는 작업부터 했다. 영화정보를 DB에 넣을 때 진행이 매끄럽지 않았다. 제목과 고유코드가 같을 경우 제거하는 필터링을 한 번 거쳤음에도 고유코드가 중복되어 있는 영화들이 있었다. 그렇다. 애초에 필터할 때 제목&고유코드가 아니라 그냥 고유코드만 했으면 됐는데, 필터링을 잘못했다. (제목은 다르나 코드가 같은 영화들이 꽤 있었다.) 처음에 제목+고유코드로만 데이터셋을 만들고 그 데이터를 기반으로 평점정보, 영화 자세한 정보, 명대사 등의 데이터를 수집했는데, 중복되는 것이 발견될 때마다 나머지 데이터에서 제거해주는 작업도 같이했다. 그러다보니 시간을 소요했다. 처음에 데이터를 잘 수집했어야 했는데 하는 후회가 들었다. 줄거리가 csv파일에서 여러 줄을 …

데이터가 필요해 담당하기로 한 로그인 기능이 어느 정도 완성이 되어서, 오늘은 크롤링으로 데이터셋을 모으는 데에 대부분의 시간을 보냈다.(여전히 더 모아야 할 정보들이 있다..) 각 영화별로 500명 유저의 평점을 모으고, 또 각 영화의 포스터(이미지)를 모았다. 약 1700여개의 영화 데이터셋이다 보니, 평점 정보는 약 65만개가 되고, 이미지도 2기가 정도나 되었다. 많은 양의 데이터가 파이썬으로 쏙 뽑아오니 매번 할 때마다 신기하다. 추가적으로 영화 디테일한 정보(장르, 개봉일, 등급, 상영시간, 감독, 배우 등)를 크롤링 할 예정이다. 조금씩 크롤링 하는 실력이 늘고 있는 느낌이 든다. 로 데이터를 더 잘 가지고 놀 수 있다면 더욱 좋을 것 같다. 포기하지 않고 계속하다보면 관련하여서도 자신감이 생기리라 믿는다. 설 연휴가 끝나고 오랜만에 팀원들과 다시 만나게 되어 좋았다. 혼자 할 때보다 팀원들과 함께 하는 것이 더 재밌는 것 같다. 내일은 팀장님 AWS가 잘 돼서 S3,…

소셜 로그인 연동 이번 프로젝트에서 로그인 페이지를 담당해서 개발 중이다. 담당을 정할 때 소셜 로그인을 언급했다가, 해보고 싶어서 맡게 되었다. 도 낯설고, 소셜로그인 연동도 한 번도 해본 적 없는 내게는 큰 도전이었다. 처음에는 블로그 글과 API문서를 보고 직접 백엔드를 개발 해 보려 했었다. 그러던 중, 패키지 존재를 알게되고 해당 패키지를 이용해서 연동 로그인을 개발하는 것으로 방향을 바꾸었다. 되어 있는 것을 내 입맛에 맞게 사용하는 것도 쉬운 것이 아님을 알게 되었다. 많은 검색과 시행착오를 겪게 되었다. 를 연동하고 나서 팀원분이 챌린지를 더 주셔서 , 까지 구현하게 되었다. 우선 하나를 해 놓으니, 나머지는 거의 동일하게 하면 되서 크게 어렵지는 않았다. 다만, 다른 소셜 플랫폼인데, 같은 이메일로 로그인을 하려하면 사용하는 패키지에서 제공하는 signup 페이지로 가는 이슈가 있긴 했다. 이는 로그인 시도 후 가게되는 view를 오버라이딩 하여 내가 원하는 메시…

The four F’s (Facts, Feelings, Fidings, Futures) 1. 3번째 팀프로젝트 시작! 한 주간 배운 장고(Django)와 튜터님이 알려주신 추천시스템을 가지고 넷플릭스 클론을 해야한다. 이번 프로젝트는 이전 팀에서와 달리 각 페이지별로 담당을 맡아 진행하기로 했다. 학습에 더 의의가 있기 때문에 한쪽으로 기술로만 치우쳐 프로젝트를 하기 보다는 두루 사용해보기로 했다. 이번 프로젝트는 설연휴가 끼어서 지금까지와 달리 2주간 하게 되었다. 기간만 보면 여유로워 보일 수 있지만, 설연휴가 포함되어 있다는 점과 이제 막 배운 장고와 추천시스템을 프로젝트에 포함시켜야 하기 때문에 만만치 않을 것 같다. 두려움보다 기대를 갖고 해보자! 많이 배워서 내것으로 만들자! 아자! 2. AWS가 내 돈을 가져간다 이번 프로젝트에서는 AWS S3(스토리지)와 RDS(데이터베이스) 를 사용해야 한다. 해당 기술을 익히기 위해 강의를 들으면서 AWS에서 여러 ec2 인스턴스…

휴, 다행이다 프로젝트에 꼭 사용해야되는 S3와 RDS를 배우기 위해 AWS강의 듣기 2일 째, 중간중간 강의녹화 시점과 현재 AWS가 조금 달라서 막히는 부분들이 생긴다. 원래 내 계획은 오늘 안으로 RDS 수업까지 듣고 싶었는데, 결국 오늘이 다 갔다. 2주차 마지막 강의에서 막힌 부분을 그냥 넘길까도 싶었는데, 너무너무 해결하고 싶어서 오후+저녁시간이 지나고 나서야 결론을 낼 수 있었다. 해결했다는 기쁨도 있지만, 그로 인해 오늘 내가 계획 했던 것을 못했던 아쉬움이 있다. 그래도 다행이다. 풀고 싶던 문제가 해결되어서 말이다. 설연휴 설연휴가 시작되었다. 설이라 들뜬 마음보다는 프로젝트가 잘 진행되야 하는데에 더 신경이 간다. 연휴기간동안 시간나는대로 틈틈히 맡겨진 일을 진행해야겠다. 휴, 다행이다 설연휴

사건의 발단 강의를 보고 그대로 AWS CloudFront로 파일 업로드 페이지를 구축, AWS Elastic Beanstalk로 파일 저장 API 서버를 구축했다. 그런데 화면과 다르게 나는 파일 업로드가 잘 안됐다. 처음 의심이 된 것은 내가 프론트, 백엔드 서버를 잘못 구축했나 싶었다. (AWS는 처음이라..) 그리고 크롬 개발자도구를 열어보고 콘솔창에 이러한 에러 메시지를 보았다. 혼돈의 시작 에러 메시지로 구글링 하니 관련 글이 나온다. 그 중 님의 블로그 글을 보았다. 해당 글의 시작은 이러했다 https 사이트에서 라는 말 외에는 모든 상황이 나랑 동일했다. 그리고 CloudFront 페이지를 보니 ‘자물쇠가 채워져 있었다’. 완벽히 나와 동일한 문제라고 생각했다. 그리고 그 솔루션은 html파일에 아래의 코드 한 줄을 추가하면 됐다. 다시 파일 업로드를 했다. 콘솔창에 아까와 같은 에러메시지는 없었다. 그러면 파일이 잘 업로드 된 후에 성공했다는 alert박스만…

AWS 신기하다 이번 프로젝트에서 필수 조건 중 하나가 AWS S3, RDS를 꼭 사용해야 하는 것이다. 그래서 지금 제공 해준 AWS 강의를 보면서 실습을 하고 있는데, AWS에서 제공해주는 게 정말 많다. 서비스도 엄청나게 많은데 그 중에 S3, CloudFront 정도 써보고 관련하여 정적 호스팅, 자동으로 깃헙 프로젝트 배포하는 것까지 처음 해보는 것들이 많다. 클라우드로 제공되는 그들의 서비스는 잘만 할 줄 알고, 과금에 부담이 없다면 정말 괜찮은 인프라를 구성할 수 있을 것 같다. 그래서 몇몇 큰 기업들이 자체 IDC를 사용하지 않고 AWS로 이전했는지 이해가 간다. 빨리 RDS까지 배워서 지금 진행되는 프로젝트에 적용해보고 싶다. 크롤링 재밌다 기존 박스오피스 TOP200 으로는 데이터셋이 너무 작다는 튜터님의 피드백을 받았다. 적어도 1000개 이상은 되어야 할 것 같다 하셔서 중 으로 검색되는 만 뽑아서 데이터셋을 만들기로 했다. 2005 ~ 2022년에 데이터를…

추천 시스템 강의 오늘은 라이브 강의로 하루를 시작하였다. 튜터님이 추천시스템과 관련하여 기사 크롤링 후 Doc2Vec모델로 유사 기사 추천, tensorflow hub에서 모델을 가져와 이미지 유사 추천, 영화와 평점 데이터를 통해 유사 추천 외에 여러가지 파이썬 패키지들과 문법들을 배울 수 있는 시간이여서 매우 좋은 시간이었다. 설날에 뭐 보지? 한국형 넷플릭스를 꿈꾼다! 너무 거창하지만, 한국영화를 볼 수 있는 넷플릭스 컨셉으로 프로젝트를 진행하기로 결정했다. 아직 기술적으로 해결할 게 많지만, 앞으로 주어진 2주 동안 팀원들과 하나하나 잘 만들고 많은 것을 배울 수 있는 시간이 되길 간절히 바라본다 :) 박스오피스 탑 200 과 네이버 영화를 연결하다 영화 제목과 개봉날짜를 필터로 박스오피스 탑 200 csv 파일과 네이버 영화 코드를 한 데이터셋으로 묶어볼 수 있을 것 같다. csv파일로 일단 저장해주면 될 것 같다. 남은 작업하러 가야겠다. 추천 시스템 강의 설날에 뭐 …

과연 우리는 어떤 프로젝트를? 오늘 프로젝트를 위한 사전미팅을 가지긴 했으나, 모든 인원이 참석하지 못해 모두의 의견을 나눌 수 없었다. 대략적인 이야기는 나누었으나, 내일 프로젝트 발제를 하고 난 뒤 명확하게 컨셉과 방향을 정할 수 있을 것 같다. 넷플릭스 그대로 clone하는 것도 많이 배울 수 있는 도전이긴 한데, 뭔가 우리만의 프로젝트라는 느낌을 주고 싶다. 우리에게 더 많은 지혜가 생겼으면 좋겠다. 그리고 오늘 에서 브레인스토밍을 했는데, 화면도 공유되고 실시간으로 함께하는 사람들의 작업 내용을 볼 수 있어서 원격으로 미팅하기 꽤 좋은 툴이라는 생각이 들었다. 이전에 로 화면을 공유해서 Github Project 사용법을 배울때도 인상적이었는데, 만이 전부는 아닌 것 같다.(게더는 너무 컴퓨터의 리소스를 많이 먹는다…) 이런 생산적인 협업툴들이 있어 재택근무가 가능하구나 싶었다. 익숙치 않은 웹 스크래핑 아직 정한 것은 아니지만, 한국 영화, 드라마 정도로만 데이터를 다…

아래는 추천시스템에 대해 알고 싶어 서울대학교 융합과학기술대학원 서봉원 교수님의 라는 글을 읽고 정리 한 것 입니다. 추천 시스템 사용자가 선호할 만한 아이템을 추측함으로써 여러 가지 항목 중 사용자에게 적합한 특정 항목을 선택(informaiton filtering)하여 제공하는 시스템. 추천 시스템 종류 협업 필터링(Collaborative filtering) 대규모의 기존 사용자 행동 정보를 분석하여 해당 사용자와 비슷한 성향의 사용자들이 기존에 좋아했던 항목을 추천하는 기술 - 사용자의 행동 기록을 이용 결과가 직관적, 항목의 구체적인 내용을 분석할 필요가 없다는 장점 비슷한 패턴을 가진 사용자나 항목을 추출하는 기술이 핵심 - 행렬분해(Matrix Factorization), k-최근접 이웃 알고리즘(k-Nearest Neighbor algorithm;kNN) 등 콜드 스타트(Cold Start): - 기존의 자료가 필요한 바, 기존에 없던 새로운 항목이 추가되는 경우…

환경세팅은 쉽지 않다. 사용하여 프로젝트를 생성하면 를 데이터베이스 기본값으로 설정되어있고, 또 DB로 사용할 수도 있다. 수업 중에는 를 사용했는데, 다가 올 프로젝트를 대비하여 를 사용 해 보고 싶었다. 로컬 맥북에 생성하기 싫어 놀고 있는 AWS 에 설치하였다. 그리고 database도 생성하고 유저도 생성해놓았다. 그런데 시 에러가 난다. 한참을 헤매다가 에 해당 포트를 열어야 함을 깨달았다. 그런데도 안된다. 이번에는 DB연결 설정 중 디비 접속 유저의 패스워드를 입력해야 하는 데, 그 해당 키 값이 소문자로 되어 있었다. 다른 키값은 대문자인데 왜 혼자 소문자로 되어 있는가? 대문자로 변경해주니 드디어 테이블을 잘 생성한다. 말은 간단히 했지만 이것을 해결하는 데 정말 많은 시간을 사용했다. 블로그 글도 여럿보고 커뮤니티 글도 보고, 이렇게 바꿨다가 저렇게 바꿨다가 등등 많은 것들을 했다. 단지 환경세팅이었을 뿐인데 말이다. 익숙했다면, 그리고 잘 알았다면 시간을…

리액트(React), 누구세요? 공식홈페이지의 정의를 보자. A JavaScript library for building user interfaces Declarative React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Component-Based Build encapsulated components that manage their own state, then compose them to make complex UIs. Learn Once, Write Anywhere We don’t make assumptions about the rest of your technology …

The four F’s (Facts, Feelings, Fidings, Futures) 1. 9velopment 안녕👋 마지막 프로젝트를 성공적으로 잘 마치고 3주간 함께 했던 팀원들과 지난 수요일 떨어지게 되었다. 정말 열심히 개인 공부도 하고, 팀프로젝트도 하고, 팀원들에게도 잘 배려해준 동료들에게 큰 박수를 보내고 싶다. 발표자가 아니였음에도 발표의 시간이 다가왔을 때, 떨렸던 그 순간이 떠오른다. 정말 애정을 갖고 해서 그런 것 같다고 주변 분들이 얘기해주셨다. 그런 얘기를 들으니, 엄청 열정적으로 임한 프로젝트였다고 자부 할 수 있겠다. 특히나 회원가입 시, 사용자가 마우스로 숫자를 그리고 머신러닝 모델이 그 숫자를 인식하여 제시된 숫자와 비교하는 기능은 나도 구현하면서 신기했다( 기능). 아쉽지만 정든 팀원들과 뜨거운 안녕을 했다. 또 다른 팀원들과 좋은 멤버십을 만들고 싶다. 2. 수업 시작 💪 다뤄본 웹 프레임워크이긴 하나, 너무 오랜만이라 모든 게 새로웠다. 제…

데이터베이스 간 관계 👉👈 1. One-to-many 📗 우선 위키피디아(Wikipedia) 정의를 보자. In systems analysis, a one-to-many relationship is a type of cardinality that refers to the relationship between two entities (see also entity–relationship model) A and B in which an element of A may be linked to many elements of B, but a member of B is linked to only one element of A. For instance, think of A as books, and B as pages. A book can have many pages, but a page can only be in one book. (쿠니번역🤖 ) 시스템 분석에서 는 다음과 같은 두 개체간 관계를 …

장고(Django) Authentication 사용 해 보기 1. 세팅 (models.py, setting.py) Django프로젝트를 처음 만들면 admin 페이지가 이미 구축이 되어 제공되어 진다. 그래서 우리는 을 만든 후 로그인을 하면 해당 페이지를 이용할 수 있다. 여기서 ’ 을 만들 수 있다?’ 그렇다. 이미 DB에 유저를 생성할 수 있는 모델이 있다라는 것이다. 우리는 그 모델의 각 필드와 제약조건을 으로 그대로 가져와 새로운 유저 모델을 만들 수 있다. (패스워드 암호화에 대한 코드를 따로 작성할 필요도 없고, 로그인 인증도 쉽게 할 수 있다) 프로젝트명과 같은 이름의 앱 폴더 안에 있는 에 아래의 코드를 추가 해줘야 한다. 기본 인증과정(AUTH_USER_MODEL)을 user앱에 작성한 UserModel로 사용하겠다는 의미 입니다. (기본적으로 장고(Django)는 룰 사용자 관리 테이블로 지정해 놓음) 2. 활용하기 (views.py) 로그인 로 db에 id,…

장고(Django)는 뭘까? 🤔 는 파이썬 웹 프레임워크 중 하나다. 공식 홈페이지를 살펴보면 함축적으로 이를 잘 설명하고 있다. The web framework for perfectionists with deadlines. Django makes it easier to build better web apps more quickly and with less code. (발번역중🥲) 마감시간 완벽하게 지키는 이를 위한 웹 프레임워크. 는 더 적은 코드로 더 빠르고 좋은 웹 어플리케이션을 쉽게 만들어준다. 지금까지 사용했던 (경량 파이썬 웹 프레임워크)보다 더 많은 유틸(기능)들을 제공한다 ex) DB, 로그인, Admin, 패스워드 암호화 등. 그리고 대형 웹 프로젝트에 사용하기 적합하며, 커뮤니티와 문서가 다른 파이썬 웹프레임워크 보다는 잘 되어 있다. 장고(Django)는 MTV패턴을 사용한다 M (Model) 데이터베이스의 모델(ORM) 저장되고 사용되는 데이터의 형태 T (T…

1. 9velopment의 두번째(마지막) 팀프로젝트를 마쳤다.🥺 기존 1차 때 만든 을 업그레이드 하는 방향으로 진행하기로 했고, 또 이미 한 번 합을 맞춰 보았기 때문에 프로젝트 시작하기가 이전보다 훨씬 수월했다. 아래 구현 요구사항을 포함시켜 진행했다. Flask / Tensorflow 를 사용해주세요. CNN / 전이학습 등을 활용해주세요. 팀에서 자유롭게 이미지 데이터 및 카테고리를 선정하여, 이미지 분류 모델을 만들어주세요. (ex. 강아지/고양이 분류, 사람/동물 분류, 풍경 분류 등) 웹 상에서 사용자가 이미지를 올리면, 해당 이미지가 어떤 카테고리에 속하는지 재치있게 결과를 출력해주는 서비스를 만드시면 됩니다! (ex. 특정 스포츠 사진을 넣으면, 어떤 스포츠인지를 분류해주는 서비스 등) 1-1. 결과물 🕶 숫자 이미지 인식 모델(Neural Network) 신경망 네트워크 모델에 MNIST(숫자 손글씨 이미지) 데이터를 학습 시켜 Captcha 구현 정확도 - …

The four F’s (Facts, Feelings, Fidings, Futures) 1. 두번째 팀프로젝트 시작 지난 화요일에 새로운 프로젝트가 시작되었다. 다행히도 팀 변경없이 기존 팀과 같이 2차 프로젝트를 하게 되었다. 다만 아쉬운 점은… 결국 지난 프로젝트 때 많이 어려워하던 팀원분이 결국 하차하셨다. 이번 프로젝트 때 조금이라도 기여를 하게 해서 코딩의 즐거움을 맛보게 하려 했었는데, 정말 아쉽다. 어쩔 수 없이 이번에는 지난번과 다르게 4명으로 시작하게 되었다. 한 주간 배운 머신러닝 모델을 사용한 웹어플리케이션을 만들어야 하는게 이번 프로젝트의 주제였다. 우리는 1차 때 했던 프로젝트에 이번 기술을 접목 시키자고 마음을 모았다. 우리 팀의 처음이자 마지막은 이 되는 것이다. 또 머신러닝 기술만 넣는 것이 아니라 1차 때 여력이 되지 못해 넣지 못한 기능들도 이번에 조금 추가하기로 했다. 더 완성도가 높아진 이 기대가 된다. 2. 쓰기 쉽지 않은 머신러닝 모델 우리…

하루를 돌아보며 … 어제 못 다한 댓글페이지 완성!! 내가 쓴 댓글 삭제 가능합니다 미리 조금 작성 해 놓았던 좋아요 기능을 완성했다. 머신러닝 강의를 들으면서 숙제로 만들어놓았던 숫자인식 모델(pixel을 학습한, 이미지 아님)이 있었다. 강의 중 테스트 데이터를 넣어 숫자인식을 잘하는지 확인하는 실습은 없었다. 튜터님이 가이드 해 주신 것도 이미지 인식 관련 된 것 밖에 없었다. 실습했던 코랩 내용 + 튜터님 가이드 + 각종 커뮤니티 글 + 공식문서 등을 통해 해결했다! 여러자료를 통해 해냈다는 기쁨을 누릴 수 있었다. 개발의 묘미? 코드 정리 및 내가 쓴 코드를 확실히 머릿속에 넣어야 겠다. 1차때 짰던 나의 코드에서 버그가 발견됐다. 그 당시에도 조금 이상했지만 잘 동작하여 그냥 넘겼는데, 결국 팀원분이 다른 작업을 하다가 문제가 있다는 걸 확인했다. 그래서 버그를 수정할 수 밖에 없었고, 수정했다. 문제를 보았을 때, 대충 넘기지말고 바로 잘 고치는 습관을 들이자. 시간이…

1. 거만 했다(?) 완전하게 한 것은 아니었지만, ‘좋아요’기능 구현과 회원가입 페이지에 넣을 Canvas(숫자 그리기)에서 서버에 이미지 파일로 저장하는 것까지 테스트를 하여 생각보다 많은 진척을 이루어냈다고 착각을 한 것 같다. 그래서 주말이 되기전에 어느정도 완성할 수 있겠구나 생각이 들었는데, 오늘 나에게 할당된 작업을 하면서 이 마음은 곧 사라지고 말았다. 나는 오늘 를 담당하게 되었다. 물론 프론트만 말이다. 그런데 이것이 생각만큼 쉽지가 않았다. 여러 포스트가 있는 메인페이지에서 특정 포스트에 대한 댓글페이지(댓글 div)를 모달로 띄우고 또 그 포스트의 내용과 달린 댓글들을 보여줘야 했다. 포스트를 생성할 때 필요한 데이터들을 자바스크립트에서 잘 받을 수 있게끔 작업이 되어 있지 않으면 해당 내용을 구현하기 어렵다 생각했다. (다른 더 쉬운 방법이 있다면 알려주세요..ㅠ-ㅠ) 그런데 더 쉽지 않은건 css 였다. 브라우저의 크기에 따라 계속 변하는 html요소들의 …

1. 2차 팀프젝트 시작 이번 프로젝트는 지난 1주간 배운 머신러닝 기술을 녹여서 만들어야 한다. 아예 새로운 프로젝트에 다시 만들어도 되지만, 우리조는 1차 때 만든 에 배운 기술을 넣어 업그레이드 하기로 하였다. 1차와 다르게 멤버 1명이 빠졌지만, 이미 한 번 손발을 맞추어 봤기 때문에 진행이 수월하였다. 기존 프로젝트를 업그레이드 하는 방향으로 갔기 때문에 이전보다 상대적으로 쉽게 된 것 같기도 하다. 2. 어떻게 업그레이드? 우리는 우선 필수포함사항인 을 만들어 글을 쓸 때 이미지 파일이 선택되면 그 이미지가 어떤 음식인지 인식하고 자동으로 하는 기능을 넣기로 하였다. 그리고 가능하다면(지금 구현 관련 자료 검색중), 회원가입 할 때 임의의 숫자를 제시하고, 사용자가 그 숫자를 직접 마우스로 쓰면 그 이미지를 모델이 바르게 숫자로 인식하고 제시한 숫자와 같으면 이라 판단하고 회원가입을 가능케 하는 기능을 넣으려고 한다. 머신러닝 외 개선되는 부분은 댓글, 좋아요, 스크랩 …

Job리스트 스크래핑 - 3 1. 로딩화면이 필요하다 검색어가 입력이 되면 최대로 검색되는 만큼 스크래핑을 한 다음 화면에 보여주게 되어 있다. 검색결과가 많은 경우 사용자의 입장에서는 멍하니 진행되고 있는 것 조차 모르는 채 기다려야만 했다. 이를 해결하기 위해 여러가지 방법이 떠올랐지만, 나는 우선 로딩화면을 보여주기로 결정했다. (한 번 구현 해보고 싶었다.) 우선 Loading.io에 가서 마음에 드는 무료 로딩 gif를 받았다. 2. 로딩화면 구현 kkamikoon님의 글을 보고 구현했습니다. 1️⃣ 브라우저 화면의 높이와 너비를 구한다. 2️⃣ 전체 화면을 음영처리 할 div 생성한다. 3️⃣ 로딩이미지를 담을 div, img 태그 생성한다. 4️⃣ body에 전체 음영처리 div, 로딩이미지 div를 추가한다. 5️⃣ 위치와 크기 등을 css로 꾸며주고 보여준다. 3. 검색결과 페이지에서 뒤로가면..? 위와 같이 구현하여 로딩이 끝난 후 검색페이지로 넘어가는 것 처럼 보인다. 그런데 사…

Job리스트 스크래핑 - 2 1. csv 파일로 저장 csv 모듈을 import 한다 file 열기(파일명, 쓰기모드) 후 csv.writer에 매개변수로 넣어준다. writer로 첫번째 줄에 Title, Company, Location, Link 를 쓴다. (Table header) 헤더의 순서대로 값을 리스트화 하여 한줄 한줄 쓴다. 아래와 같이 csv 파일이 생성 된다. 2. csv 파일 다운로드 이러한 url로 요청이 오면 아래 export함수가 실행된다. (버튼 or a태그를 통해) Query string에서 얻은 값으로 저장되어 있는 job리스트를 불어 온다. (실제 디비는 아니고 스크래핑된 데이터가 검색어가 키값인 딕셔너리로 저장되어 있음) Query string값이 약속된 키값으로 받지 못하거나 디비에 해당 키값이 없을 경우 / (루트) url로 보낸다. 디비에 Query string 값이 있다면 해당 job리스트를 csv파일로 저장한다. 그 후 (Flask me…

1. 컨테스트 도전 과일예측 딥러닝 모델(기존 Perceptron 모델을 Transfer Learning(전이학습))을 학습시키는 데 굉장히 시간(약 8시간)이 오래 걸려 수업진도를 못나가던 찰나 팀원 중 한분이 관심있으면 요런 컨테스트 한 번 해 보라고 링크를 주셨다. 해당 사이트에서 로 제공되는 웹스크래핑 강의를 듣고 채용리스트 사이트를 만드는 것이다. 스파르타에서 배운 웹스크래핑을 리마인드 할 겸 틈나는대로 컨테스트에 제출 할 사이트를 만들어 봐야겠다. 2. 작업환경 Replit.com 라는 곳이 있다. IDE가 웹브라우저에서 구동 된다고 생각하면 된다. 파이썬을 사용하려면 파이썬 설치 및 환경변수 설정 등을 해야하는데, 저 곳에선 이미 세팅이 다 되어 있다. 그냥 프로그래밍 언어만 선택하고 프로젝트를 생성하면 된다. 물론 나는 이미 파이썬 개발환경이 다 갖춰져 있지만 강의 실습에서 알려준 사용해보기로 했다. 3. indeed 스크래핑 일부러 그런건지는 모르겠지만 해당 강…

The four F’s (Facts, Feelings, Fidings, Futures) 1. 첫번째 팀프로젝트 마침 감사하게 잘 마쳤다. 모든 팀원 한명 한명이 포기하지 않고 열심히 해준 덕분에 괜찮은 결과물이 나온 것 같다. 막판에 시연영상을 찍어야 할 때 솔직히 ‘이런 것까지 해야 돼?’ 생각이 들었지만, 다하고 나서 우리에게 남은 시연영상을 보니 뿌듯하다. 팀프로젝트 관련된 회고는 에 썼으니 이 곳에선 생략하겠다. 감사 감사!!🙏 2. 머신러닝 수업 팀 프로젝트를 마친 후 다시 학습 시간이 돌아왔다. 새로 오픈 된 강의 위주로 학습을 했다. #Kaggle #Colab #Tensorflow #Keras #Numpy #Pandas #LinearRegression #DeepLearning #LearningRate #Batch #Iteration #Epoch #Model … 이번에 배우면서 생각나는 키워드를 나열해보았다. 배우면서 말로만 듣던 텐서플로우니 캐글이니, 넘파이, 판다스…

머신러닝 3주차 Homework ❓ 문제 손으로 쓴 0~9 숫자 이미지 데이터셋으로 딥러닝(Deep Laerning) 모델 구현하기 1. 필요한 데이터셋 다운 및 패키지 import 2. 트레이닝 & 검증 데이터셋 Dataframe 만들어주기 3. 트레이닝 데이터셋 Output 결과값(숫자별) 갯수 확인 4. 트레이닝 & 검증 데이터셋 입력값과 출력값 분리 5. 트레이닝셋의 데이터를 이미지로 출력 해보자 이거 너무 신기하다! 한 데이터씩 784개(28 x 28)의 픽셀 컬러값을 가지고 있다. 요걸 matplotlib 을 이용해 그려주면 위와 같이 숫자가 보인다. 즉, 숫자 이미지 -> 각 픽셀의 컬러 값으로 데이터화. 이미지를 데이터화 한 것도 또 그 데이터를 간단한 함수로 이미지를 볼수 있는 게 정말 신기하다. 6. 출력값(0~9)을 One-hot encoding 데이터로 변환 컴퓨터가 좋아하는 0과1로 이루어진 벡터로 데이터를 구별해준다. 0 -> [1, 0, 0, 0, 0…

머신러닝 1주차 Homework ❓ 문제 연차-연봉 데이터셋으로 선형회귀(Linear regression) 모델 구현하기 ❗️ Hint Learning rate(lr)를 바꾸면서 실험 Optimizer를 바꾸면서 실험 손실함수(loss)를 mean_absolute_error로 바꿔서 실험 1. 나의 캐글 정보 세팅하기 나의 캐글 정보를 세팅을 해야 캐글에서 원하는 데이터셋을 다운 받을 수 있다. 2. Dataset 다운로드 원하는 데이터셋을 다운 받은 후 압축을 풀어준다. Colab에서 맨 앞에 를 붙여주면 리눅스 명령을 할 수 있다. 3. 필요한 라이브러리 import tensorflow & keras TensorFlow is an end-to-end open source platform for machine learning. Keras is a deep learning API written in Python, running on top of the machine learning …

1. 내가 정리한 Git 3주차 개념지도 PR, Amend, Revert : contributer가 자신의 작업(commit)을 PR 하면 프로젝트 관리자가 해당 commit을 main에 병합 할 지 말지를 결정한다. merge 요청. : 제일 최근에 했던 커밋의 메시지 수정이나 해당 커밋에 파일을 다시 추가 할 수 있다. : 선택한 과거의 시점으로 돌아간 후 그 상태를 다시 커밋한다. (히스토리가 계속 남아 있음) Reset, Stash : 선택한 과거 시점 이후 작업(커밋)들을 삭제 한다. 선택한 시점이 Head가 된다. 삭제된 커밋들에 대한 히스토리가 남지 않는다. : 현재 작업중인 파일들(Uncommited) 상태를 저장한다. 브랜치 이동하여 작업, pull 을 하는 등의 행동을 하고 다시 불러올 수 있다. 추가내용 Amend, Revert, Reset 과 같은 기능은 자신의 branch에서만 하는 게 좋다고 한다. 왜냐하면 메인 branch에서 해당 작업을 하게 되면 …

1. 드디어 9velopment의 첫번째 팀프로젝트를 마쳤다. 💪 아직 배운게 익숙하지 않고, 기간도 길지 않은 시간에 팀이 하나가 되어 아래의 필수 포함 사항을 잘 녹여 프로젝트를 잘 완성한 것 같다. 기술 선택은 배운 내용 안에서 할 것 기본 CRUD 포함 로그인(JWT), 마이페이지(자기가 쓴 글) 포함 GIT 코드, 이슈, 프로젝트, 위키 기능 사용 AWS EC2 업로드 후 도메인 붙일 것 1-1. 결과물 🎬 사진 2. 발표 이후 팀원들과 KPT회고를 진행하였다. ✍️ K (Keep) 잘하고 있는점. 계속 했으면 좋겠다 싶은 점 P (Problem) 뭔가 문제가 있다 싶은 점. 변화가 필요한 점 T (Try) 잘하고 있는 것을 더 잘하기 위해서, 문제가 있는 점을 해결하기 위해서 우리가 시도해 볼 것들 참고: https://techblog.woowahan.com/2677/ 2-1. 9K밥 프로젝트 KPT 회고록 🍚 Keep 코드를 이해하고 응용 하려는 노력을 계속 하자! 아침…

The four F’s (Facts, Feelings, Fidings, Futures) 1. 팀 변경 및 팀장 팀이 변경되고 더불어 새로운 팀프로젝트도 동시에 시작되었다. 새로운 사람을 만나는 건 늘 새롭고 신나는 일이지만, 바로 만나서 같이 무엇을 하는 게 쉬운일은 아니다. 그런데 이 또한 앞으로 현업에서 겪게 될 일을 미리 훈련 시켜주는 건가 이기도 싶다. 일을 하다보면 처음보는 사람들과 새롭게 같이 무언가 하게 되는 이전의 경험들이 저런 생각을 들게 했다. 팀 내에서 그래도 다른 분들에 비해 개발경력이 있는 나는 팀장을 해보겠다 했다. 수동적으로 일을 하기보다 능동적으로 하기 원하는 경험들을 했으면 했다. 팀을 이끌어야 하다보니 자연스롭게 능동적으로 모든 것을 해낼 수 밖에 없었다. 어떻게 화면을 구성하고, 기능을 만들 것이며, 어떻게 프로젝트를 진행할 것인가 등등을 리드하며 작지만 소중한 경험을 하는 중이다. 그리고 팀원들 한명 한명이 정말로 열심히, 그리고 그 몫을 해주고…

1. 부딪히며 배우다 보고 듣는 것은 그래도 쉬운 편이다. 내 안에 있는 것들을 밖으로 끄집어 내는 것과 비교하면 말이다. 지금 있는 것 없는 것 다 끄집어 내서 프로젝트를 진행 중이다. 중간 중간에 텀이 길게 쉰 적이 있긴 하지만 그래도 나름 계속 에 있었는데도 내게는 가진 경력에 비해 쌓인 노하우가 많지는 않은 것 같다는 생각이 좀 든다. 스스로 돌아볼 때도 그런 부족함을 느끼기에 이 과정에 있긴 하지만 말이다. 그래도 기대가 되는 부분은 내가 가진 열정과 노력이 이전과는 다르다고 생각하기 때문이다. 크고 작은 프로젝트 및 과제를 내주어 학습에 대한 긴장의 끈을 놓지 않게 하고, 계속 하게 만든다. 그리고 나도 모르는 사이에 실력이 늘거라고 생각한다. 앉아서 듣기만 하는 수업보다 이렇게 프로젝트를 통해 계속 부딪히며 배우는 이 방법이 나는 너무 좋다. 2. 팀원들의 성장을 돕다 서당개 삼년이면 풍월을 읊는다 처럼 그래도 나는 경험이 있는 편이라 개발에 이제 밟을 담근 지 얼마 …

어제 보다 나은 오늘 너무 좋은 말이지 아니한가. 어제 보다 나은 오늘. 오늘이 딱 그러한 날인 것 같다. 어제 우리가 프로젝트 작업한 진행도를 보고 사실 조금 암울했는데, 다들 열심히 해서 오늘 프론트, 백엔드 다 껴 맞추니까 그래도 설계한대로 잘 동작한다. 물론 로그인, 회원가입 2페이지 밖에 되지 않지만 말이다. 오늘은 그래도 어제 와 다르게 페이지 하나 (글쓰기) 맡아서 앞, 뒤단 다 구현했다. 관리만 하는건 나의 너무 안일한 생각이였다. 협업을 하면서 가장 어렵게 느끼는 건 개개인의 실력이 다르다는 것도 있지만, 하나의 어플리케이션을 만드는데 한 명이 정성껏 여기저기 섬세하게 만든 것과 같이 만드는 게 쉽지 않다는 거다. 사실 백엔드 쪽은 눈에 보이는 부분은 아니다 보니 크게 걱정은 되지 않지만, 프론트는 얘기가 다르다. 처음부터 모든 페이지를 일관성있게 미리 디자인 하고 개발을 들어간게 아니여서, 지금 담당하신 분들의 각 페이지를 보면 그냥 다른 어플리케이션 같다. 그래…

1. 뭘 모르겠는데 일단 해보자 모든 프로젝트과정을 에 담아내고 싶었다. 그래서 한번 더 써보지 않은 라든지 , 등을 사용 해 보기로 했다. 우선 Wiki에는 우리가 구현 해야 할 기능 리스트를 담은 페이지, 프로젝트 진행 시 어려운 부분 팀 내에서 해결 못할 경우 튜터님께 묻는 질문 리스트 페이지, 그리고 commit 메시지 규칙도 간단히 올려보았다. 에는 대략 적인 큰 틀에서 우리가 해야할 것 들을 적고 하위로 조금은 더 세분화 된 (일감)를 등록했다. 나도 이렇게 하는 게 잘 모르겠지만, 최대한 Github이 제공하는 협업 툴로 이번 프로젝트를 진행 해 보고 싶어서 한 번 해보았다. 모두 Github에 익숙 해지면 좋겠다. 2. 내 역할 이렇게 하는 거 맞아? 우선 이번 프로젝트의 주 개발업무는 나 외에 나머지 4분에게 담당시켰다. 나는 팀장으로 개발과 협업을 할 수 있는 환경 세팅 위주로 하고, 팀원 분들이 잘 모르고 어려워하는 부분들을 알려주고 있다. 이렇게만 하는 건 …

1. 대격변 지난 2주간 함께 했던 분들과 안녕을 하고 새로운 분들을 만나게 되었다. 서로 알아가기도 바쁜 첫 만남에서 우리는 바로 팀프로젝트 이야기를 하게 되었다. 우리에게 주어진 시간은 ! 이 곳 스파르타코딩클럽 내배캠에 와서 처음 하는 팀프로젝트이다. 지금까지 배운 기술을 총 동원하여 인스타그램을 클론 코딩하는 것이다. 이전과 다르게 백엔드(Flask, Mongo DB) + AWS + 도메인 연결 까지 다 해야 하는 프로젝트이다. 우리가 함께 만들어갈 것이 기대가 되면서도 잘 할 수 있을까 걱정도 된다. 2. 와이어프레임 이런 팀프로젝트는 당연히 역할을 나누어서 하는 게 맞다. 그래도 초기 기획단계에서는 어떻게 화면을 구성하고, 기능은 무엇을 넣을지 각 자 고민해보는 것도 필요하다는 생각을 했다. 그래서 시간을 주고 각자 와이어프레임 작성도 해보고, 기능 및 API 설계도 해 보았다. 이 작업을 하면서 느낀 것은 우리가 가진 실력에 비해 우리가 너무나 큰 것을 만드려고 하…

핵심 쏙쏙 Git - 숙제 1. 앞으로 git 프로젝트로 만들고 싶은 것 아이디어가 넘치는 사람이 참 부럽다. 그 분이 개발자이든 아니든 말이다. 나는 크게 불편하게 느끼지 않고 적응하는편(?) 인가 보다. 늘 새롭게 뭐하고 싶은 거 얘기하자 하면, 머릿속에 들어 있는 게 없다. 아무튼, 프로젝트의 크기, 실현 가능성, 내 현재 가진 실력 등 다 배제하고 내가 만들어보고 싶었던 것을 얘기해보자면, 쉽게 입력하는 지출부(식료품 한정, 영수증 이용) 운동타이머 및 프로그램이 대신 써주는 운동 일지 과거의 오늘 나는 뭐 했을까? 관심있는 축구 구단 일정 및 라이브방송 알림 오픈마켓+중고마켓 통합 가격비교 지금 생각 나는 건 5가지 정도이다. 내가 관련해서 검색 해보지는 않았지만 아마 유사 프로그램이 꽤 있을 수도 있을 것 같다. 만약 내가 생각한 기능들을 다 포함한 앱이 없다면 한 번 만들어 보고 싶다. 나를 위해! ㅎㅎ 2. 1주차에서 배운 Git 주요 키워드 Git - 프로젝트의 변…

The four F’s (Facts, Feelings, Fidings, Futures) 1. 매일 매일 가 있었다. 지난 1주 간 배운 것을 토대로 할 수 있는 , 등이 매일 진행 됐다. 배운 것들을(Python, Html, Css) 얼마나 잘 알고, 잘 쓸 수 있는 지 스스로 점검 해 볼 수 있는 기회였다. 간단한 프로젝트여서 그런지는 몰라도 구현을 잘 해낸 것 같다. 튜터님의 코드와 비교해도 크게 다르진 않았던 것 같다. 또한 정해진 기간 내에 해야 해서 시간을 맞춰 작업하는 힘도 조금은 길러 볼 수 있었다. 함께 교육을 수강하는 분들의 발표를 보면서는 아직 더 멀었다는 생각이 들었다. 그들은 주어진 챌린지를 겨우 구현한 나와 다르게 그 이상의 것을 해냈다. 구현도 구현이지만, 작고 센스있는 아이디어를 프로그램에 넣는 기발함들이 있었다. 예를 들면 간단한 CLI 게임에도 스토리를 넣는다던지, 재시작을 할 수 있다던가 말이다. 작은 일에도 정성과 열정을 다하는 자가 되어야겠다.…

인스타그램 모바일 화면 만들기 1. 개요 어제에 이어 오늘도 소셜미디어 클론하기 이다. 더 많은 오브젝트들이 화면에 있어 시간이 꽤 걸렸다.(기한 내에 제출하기 위해 점심도 안 먹고 했다는 건 안 비밀..) 그리고 px를 사용하지 않고 상대적 크기 단위인 %, vh, vw, em, rem 등만 사용해서 레이아웃을 잡아야 했다. (나중에 안 사실이지만 모바일용 페이지라 max-width는 px로 고정해도 된다고 하셨다) 2. 구현 1️⃣ 우선 레이아웃을 잡았다. header, content, footer 로 잡았다. content 안에는 내용이 많아 더 쪼개야 했다. 2️⃣ header와 footer는 position:fixed로 고정을 했다. 안에 content 내용만 스크롤이 된다. 3️⃣ 예제 화면을 보고 수치를 계속 조정 해가면서 비슷하게 만들었다. 4️⃣ width 를 %로 잡아 브라우저 크기에 따라 화면도 같이 변화도록 했다. 5️⃣ 폰트는 구글폰트 ‘주아체’를 사용했다. 3. 코드 코드줄…

카카오톡 프로필 클론하기 1. 개요 대한민국에서 가장 많이 사용하는 메신저는 무엇일까? 나는 이라 생각한다. 친구 목록에서 친구들을 누르면 를 볼 수가 있다. 오늘은 그 페이지를 html과 css를 가지고 그대로 구현 해 보는 시간을 가졌다. 2. 구현 1️⃣ 처음 클론 하라는 이미지를 보았을 때 크게 세 부분으로 나누어야겠다 생각했다. 상단부(상태글), 중간부(프로필사진 및 이름), 하단부(3개의 버튼) 이렇게 말이다. 2️⃣ 1번에서 언급한 세 div를 한 div에 담아 display:flex로 세로로 정렬 시켰다. 그 중 중간부(프로필 사진 및 이름) 부분은 위,아래 사이에 겹쳐서 있어야 했기에, position:absolute를 사용했다. 3️⃣ 상단부 작은 회색 선(물체)은 button으로 구현했다. (튜터님을 통해 hr태그 있다는 걸 나중에 알았다.) 4️⃣ 하단부 버튼 3개 역시 display:flex로 가로로 정렬 5️⃣ (추가조건) em, rem, % 등 상대적 수치는 사용 불가,…

턴제 RPG 게임 만들기 1. 개요 드디어! 어릴 적 부터 좋아했던 이다. 물론 내가 지금까지 해 온 것과 비교해서는 초라한 것이지만, 어떻게 몬스터와 전투를 하는 지 내가 직접 개발을 하며 들여다 볼 수가 있다. 이번 프로젝트에 주요 키는 를 사용하는 것이다. 사용자와 몬스터간 1:3 대결이고, 사용자는 자신의 턴에 일반 공격과 마법공격 2가지 행동을 할 수가 있고, 몬스터는 회복, 대기, 공격 3가지 행동을 할 수 있다. 턴제 방식으로 전투가 진행되며 사용자가 먼저 행동 할 수 있다. 모든 몬스터의 체력이 0 이면 반대의 경우 이다. 2. 로직 1️⃣ 먼저 이름, 체력, 공격력을 멤버변수로, 상대방 공격 하는 함수를 멤버함수로 갖는 부모 클래스 Object를 만든다. 참, 현재 자신의 체력을 보여주는 클래스 내장함수 도 써보았다. 2️⃣ Object클래스를 상속받고 마법 공격을 하는 멤버 함수를 갖는 Player클래스, 마찬가지로 Object를 부모로 상속받고 대기, 회복을 멤버 …

베스킨라빈스 31 게임 만들기 1. 개요 “베스킨~ 라빈스~ 31!“. 좀 놀아보았다 하신 분들은 모를 수가 없는 게임. 각 게임 플레이어가 차례로 1~3 중의 수를 외쳐서 계속 수를 더하고, 마지막 31을 외치는 플레이어가 지는 게임이다. 컴퓨터와 사용자가 1:1 대결을 한다. 2. 로직 1️⃣ Random.randrange() 를 사용하여 누가 먼저 시작할지 정한다. 2️⃣ 컴퓨터가 말하는 함수를 만든다. 컴퓨터는 random 함수를 이용하여 1과 3 사이를 말하게 한다. 현재 숫자가 어떻게 변화 되고 있는 지는 한 변수를 정하여 누적하여 값을 더하며 확인한다. 3️⃣ 사용자가 말하는 함수를 만든다. 사용자의 숫자는 input()을 이용하여 받는다. 입력 예외처리 해준다. (1~3외에 값을 받지 못하게 한다) 4️⃣ 사용자 친화적으로 게임 진행상황을 출력해주는 함수를 만든다. 5️⃣ 누군가 31을 말하게 되면 상대방이 승리 했음을 알린다. 3. 코드 베스킨라빈스 31 인공지능 만들기 1. 개요 …

업다운 게임 만들기 1. 개요 오늘부터 매일 개인프로젝트를 과제를 준다고 한다. 오늘은 으로 만들기 이다. 컴퓨터가 1~100 범위에서 랜덤으로 정한 수를 맞추면 된다. 기회는 총 5번이 있고, 만약 컴퓨터가 정한 수 보다 낮게 추측할 경우 , 그 반대의 경우 이라고 힌트를 출력 해줘야 한다. 2. 로직 1️⃣ random.randrange 함수를 사용하여 1~100 사이 랜덤 수를 생성 2️⃣ input()으로 사용자 추측 숫자를 입력 받는다. 3️⃣ 5번 안에 랜덤으로 생성 된 수와 사용자가 추측한 숫자가 맞다면 “성공”을 출력한다. 그렇지 못할 경우 “실패”를 출력한다. 4️⃣ 예외처리) 정수외 입력 값(소수, 문자열 등)을 받을 경우 다시 입력 값을 받게 한다. 3. 코드 업다운 인공지능 만들기 1. 개요 이번에는 컴퓨터가 사용자가 입력한 값을 맞출 차례이다. 몇 개의 차이점을 빼고는 모든 것은 위에 프로그램과 동일하다. 그 차이점이란 컴퓨터는 random 함수를 이용하여 답을 추측할…

1. 나도 나의 블로그를 갖고 싶다. 😊 많은 개발자들이 자신의 블로그를 운영하며 많은 지식을 공유하기도 하고, 자신의 성장과 기술을 표현하기도 한다. 나에게도 그런 창구가 필요했다. 전부라고 말할 수는 없지만 크게 Tistory, Medium, Velog, Github 그리고 블로그를 직접 만들어 운영하는 것 같다. 나는 조금 욕심(?)이 있어 직접 블로그를 만들어 운영하고 싶었다. 여러 정보를 찾던 중 님을 만났다. Github+Gatsby+zoomkoding템플릿 조합으로 나만의 블로그를 만들 수 있음을 알게 되었다. 2. 그래서 어떻게 만들죠? 🙄 위에서 언급했던 님이 가이드 작성을 정말 잘해주셔서, 그저 따라하기만 하면 된다. 그는 그저 이다. 3. 무슨 원리인가요? 🤔 우선 Github에 repository를 만든다. 이와 같이 만들게 되면 Github Pages를 이용할 수 있게 된다.(Github이 제공하는 무료 정적 페이지 호스팅!) 해당 repository에 님…

Facts 지난 월요일, 교육이 시작 되었다. 100명의 교육생이 에 모여 하루 12시간씩 몰입하여 공부하였다. 이번 주는 파이썬 기초, 웹프로그래밍, 자료구조/알고리즘 강의를 통해 지식과 기술을 습득하였다. 그리고 스스로 학습의 방향을 잘 잡을 수 있도록 수요일에는 시간을 가졌다. 주어진 1시간 30분동안 제시해 준 화면과 기능 구현하는 것이다. 5명이 한 팀을 이루었다. 매일 스터디를 진행 중이다. Feelings 로 커리어로 전환하고자 결심 한 뒤, 혼자 공부하고 준비하는 게 너무 외로웠다. 스파르타에서 같은 목표를 가진 동료들을 99명이나 만나게 되어 정말 행복하다. 실제로 교육을 진행하면서 슬랙 혹은 게더타운에서 서로 모르고 어려운 것을 질문하고 답을 하며 소통하니 문제들이 빨리 해결되었다. 학습자료가 주어지고 스스로 공부를 하는 교육이다 보니, 처음에는 너무 방치(?) 해 두는 건 아닌가 싶었는데, 조금씩 적응을 하면서 가 되도록 돕는 스파르타만의 특별한 교육방식인…

Linked List(링크드 리스트, 연결리스트)🚂 In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. It is a data structure consisting of a collection of nodes which together represent a sequence. 참조: https://en.wikipedia.org/wiki/Linked_list (발번역중🥲) 컴퓨터 공학에서, 링크드 리스트는 데이터 요소들의 선형적 집합이고, 그 순서는 메모리 배치에 따라 정해지는 것이 아니다. 대신에 각 요소는 다음 요소를 가리키고 있다. 이것은 순차적으로 표현 된 노드들 집합으로 이루어진 자료 구조다. 화물 열차를 생…

Part1. 삼각형 회전 (너무어렵다😭😭😭) 아래와 같은 삼각형을 보자 (시계방향을 돌린다고 생각) 한 번만 시계방향으로 돌린 경우 입력: , 출력: 어떤 로직을 거쳐 위와 같은 출력이 나올 수 있을까? (0,0) ~ (5,5) 좌표평면으로 나타내서 돌린 다음 각 수의 위치와 이전 수와의 관계성을 찾으면 풀 수 있지 않을까? 고민 해 보았지만 풀지 못했다. 입/출력을 보고 리스트에 한 개씩 값을 변경 해보자 (한 팀원 분이 해결해주셨다🙂) 각 인덱스의 첫번째 문자만 보면 아래와 같은 규칙을 찾을 수 있었다. 첫번째 문자의 이동 위치(index) = length - 1 - (입력 리스트에서 현재 이동하고자 하는 문자의 index) 그런데 그 다음 문자 부터 재밌다. 각 index에서 처음 문자의 다음 2개의 문자는 그 처음문자 index(변경된)+1 로 위치가 변경 된다. 그 다음 2개의 문자는 처음문자 index(변경된)+2 ex) 5 (2->0), 67 (2->1), 89 (2…

Part 1. 새로운 연산자(Feat. 바다코끼리🦭) 문제 보고 입력의 끝을 어떻게 알 수 있지? 하고 멘붕. 문제 클릭 전 라는 힌트를 봄 stands for . This is the point in the program where the user cannot read the data anymore. 참조: https://www.delftstack.com/howto/python/python-end-of-file/ 는 더 이상 데이터를 읽은 수 없는 파일의 끝이라는 의미이다. 사용자 입력을 문제에 맞게 출력 해주다가 만나면 종료시켜주면 되는 문제다. 풀이1 풀이2 처음에 풀 때 아무 생각 없이 위와 같이 풀어 제출했는데, EOFError라는 결과를 받게 되었다. 거기서 try ~ except 구문으로 해결해보면 어떨까 에서 착안함. 풀이3 - Walrus Operator 사용 (Python 3.8 이상) 위에 관련 글 보다가 알게 된 연산자를 이용해보았다. Python 3.8…

Part 1. Python 한 줄 코딩 하기 한줄 if 문 한 줄 for문 filter - list의 모든 원소 중 특별한 것만 뽑기 *args 매개변수 매개변수명 변경가능, 여러 매개 변수 list에 담기 **kwargs 매개변수 매개변수명 변경가능, 여러 매개 변수 dict에 담기 Part 2. 이렇게 접근 하는 거였어? 🙄 (Feat. 알고리즘 문제) 알고리즘 강의를 듣다 아래와 같은 문제를 만났다. 문제를 처음 보았는 때 내 머릿속 사고 모든 수를 곱셈으로 연산하면 가장 큰 수 나오는 거 아닌가? 0을 보며 ‘그렇게는 쉽게 안 되겠네’ 라고 깨달음 그렇다면 모든 경우의 수를 비교 하여 구해야 되나? ($2^6$번..?) 저렇게 많은 연산을 하려면 어떻게..? (for문 덕지덕지? 재귀함수?) 모르겠다. 정답을 보고 난 후 모든 수를 곱할 때가 가장 큰 수가 나오는 것은 맞다. 그런데, 0과 1을 곱할 때 문제가 생긴다. 위와 같은 경우는 더 해주고 나머지 수에 대해서 곱해주…

다짐 스파르타 코딩클럽 AI 웹개발 교육 시작과 함께 오늘부터 TIL을 실천 하겠습니다. [Python] map 띄어쓰기로 구분하여 2개의 입력 값을 받는 알고리즘 문제를 보았다. 아래와 같은 방법으로 입력값을 받을 수 있음을 알았다. 그런데 저기서 은 무엇이더냐? map(함수, 반복적인) 리스트, 튜플과 같은 반복자의 모든 값들을 map의 첫번째 인자 함수에 적용 후 반복자를 리턴 해준다. map(function, iterable, …) Return an iterator that applies function to every item of iterable, yielding the results. [참조] https://docs.python.org/3/library/functions.html#map 예를 들어 이 경우, 리스트의 담긴 각 문자열 값이 안에서 int 내장함수를 거치면서 정수형을 담은 리스트가 되었다. iterable한 자료형의 각 값을 특정 함수에 거쳐 새로운 ite…