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…

에러메시지를 띄우기 위한 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 예제 코드 살펴보기 개요 예제코드 새로 배운 것

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…

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

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

개요 팀프로젝트를 하는 데 우리는 개발 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와 연결 그렇다. 중간에 옵션을 추…

오늘 배운 것 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를 통해 프로젝트가 조금 더 …

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

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

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

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

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

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

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-…

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 심화 수업 중

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

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

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

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

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

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

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

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 사용법을 배울때도 인상적이었는데, 만이 전부는 아닌 것 같다.(게더는 너무 컴퓨터의 리소스를 많이 먹는다…) 이런 생산적인 협업툴들이 있어 재택근무가 가능하구나 싶었다. 익숙치 않은 웹 스크래핑 아직 정한 것은 아니지만, 한국 영화, 드라마 정도로만 데이터를 다…

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

데이터베이스 간 관계 👉👈 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…

하루를 돌아보며 … 어제 못 다한 댓글페이지 완성!! 내가 쓴 댓글 삭제 가능합니다 미리 조금 작성 해 놓았던 좋아요 기능을 완성했다. 머신러닝 강의를 들으면서 숙제로 만들어놓았던 숫자인식 모델(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 스크래핑 일부러 그런건지는 모르겠지만 해당 강…

머신러닝 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. 부딪히며 배우다 보고 듣는 것은 그래도 쉬운 편이다. 내 안에 있는 것들을 밖으로 끄집어 내는 것과 비교하면 말이다. 지금 있는 것 없는 것 다 끄집어 내서 프로젝트를 진행 중이다. 중간 중간에 텀이 길게 쉰 적이 있긴 하지만 그래도 나름 계속 에 있었는데도 내게는 가진 경력에 비해 쌓인 노하우가 많지는 않은 것 같다는 생각이 좀 든다. 스스로 돌아볼 때도 그런 부족함을 느끼기에 이 과정에 있긴 하지만 말이다. 그래도 기대가 되는 부분은 내가 가진 열정과 노력이 이전과는 다르다고 생각하기 때문이다. 크고 작은 프로젝트 및 과제를 내주어 학습에 대한 긴장의 끈을 놓지 않게 하고, 계속 하게 만든다. 그리고 나도 모르는 사이에 실력이 늘거라고 생각한다. 앉아서 듣기만 하는 수업보다 이렇게 프로젝트를 통해 계속 부딪히며 배우는 이 방법이 나는 너무 좋다. 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 - 프로젝트의 변…

인스타그램 모바일 화면 만들기 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에 님…

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…