Age of Discovery

이전 글에서 얕은복사와 깊은복사에 대해 간략하게 알아봤는데 이번엔 불변 객체를 만드는 법에 대해서 알아보자 let a = { name: 'ryu', hobbies: ['football', 'piano']} a.name = 'kim' console.log(a) // let a = { name: 'kim', hobbies: ['football', 'piano']} a라는 객체가 있는데 이름을 kim으로 바꿔준 후 다시 a를 출력하면 당연하게도 kim이라는 name을 가지고있는 a객체를 반환한다. 하지만 let a = { name: 'ryu', hobbies: ['football', 'piano']} Object.freeze(a) a.name = 'kim' console.log(a) // let a = { n..

원시형데이터와 참조형데이터에 대해 알아보았다. 이번엔 참조형데이터의 얕은 복사와 깊은 복사에 대해 알아보자 // Object의 얕은 복사 let object = {a:0, b:0, c:0} let object2 = object console.log(object.a, object2.a) // 0, 0 object2.a = 3 console.log(object.a, object2.a) // 3, 3 // 배열의 얕은 복사 const a = [1, 2, 3, 4]; const b = a; b[3] = 3 console.log(a) // 1, 2, 3, 3 console.log(b) // 1, 2, 3, 3 위 코드와 같이 object라는 객체에 데이터를 할당한 다음 object2라는 객체에 object를 할당..

원시자료형과 참조자료형 두 가지 데이터 타입이 존재한다. 원시자료형 기본자료형이라고도 불린다. 단 '하나'의 정보만 가지고 있다. number : 3.141592 string : 'Jurgen’ boolean : true & false undefined : 변수가 정의되지 않았거나 값이 없다. null : 의도적으로 비어있음을 표현하기 위해 null 이라는 것이 들어있다. symbol 참조자료형 참조형은 원시형 데이터의 집합이다. 배열([])과 객체({}), 함수(function(){})가 대표적이다. 동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당한다. 배열 – Array : [0,1,2,3,4] 객체 – Object {name : “Hana..

자바스크립트의 undefined와 null은 비슷하지만 다르다. undefined는 undefined라는 자료형을 가지고 있으며 null은 null이라는 자료형을 또 따로 가지고 있다. 그래서 콘솔창에 자료형을 명시해주는 typeof를 사용해보면 undefined의 타입은 undefined라고 나오고 null은 null이라는 자료형이 나와야하는데 쌩뚱맞게 object가 출몰한다. 이건 아직까지 고쳐지지 않고 있는 자바스크립트 초기버전의 버그이다. 정확히는 고칠생각이 없는 버그이다. 그 이유는 JS의 하나의 타입을 바꿔버리면 전 세계 수많은 프로젝트에 오류가 생길 위험성이 있고 더욱 더 웃긴 답변은 이런 자잘한 버그를 고치지 않는 것이 '자바스크립트의 정신'이라고 한다. JS는 정말 간지나는 언어다. 그럼..

프론트엔드 개발자를 목표로 한다면 자바스크립트(이하 JS)를 갈고 닦고 다듬어야한다. JS의 고유한 특성과 다른 언어들이랑은 다른 동작원리까지 현재 [자바스크립트란?]의 카테고리에 시리즈로 정리해보려고 한다. JS는 자바, C언어와는 다르게 '융통성'을 가지고 있다. 개발자들이 좀 더 편하게 사용할 수 있고 타자를 한 글자라도 덜 칠 수 있도록 해주는 언어이다. 변수선언을 예로 들어보자 아래의 코드는 JAVA의 변수선언이다. i라는 변수에 100을 할당해준다. int i=100; let, var, const를 무시하고 극단적으로 비교해보자면 JS는 아래와 같이 i = 100 간단명료하게 사용할 수 있다. (물론 이렇게 사용하는 개발자는 없다.) 또한 자료형을 비교할 때에 특히 고유의 특성이 드러난다. 1..

JWT는 JSON Web Token의 약어로 쿠키와 세션을 통한 로그인과는 다른 방식의 로그인 기능으로 인증에 필요한 정보들을 암호화시키는 방식을 의미한다. 이론은 워낙 다뤄야될 내용들도 방대하고 쉽게 검색해볼 수 있으니 필자가 미니프로젝트를 하면서 사용했던 코드위주로 설명하겠다. flask 프레임워크를 이용했으며 JWT와 토큰의 지속기간을 결정할 datetime 그리고 DB에 저장될 password를 암호화하기 위한 hashlib을 import해온다. 그리고 secret_key를 지정해준다. 여기서 시크릿 키는 글 포스팅을 위해 아무거나 작성한 것이고 실제로는 더 복잡하고 강력한 암호키를 사용해야한다. 이렇게 했을 때 username과 nickname그리고 password 데이터를 회원가입으로 받고 D..

살려줘

항해를 빨리 결정하고 지원했던 게 정말 다행이라는 생각이 든다. 정확히 2주만에 깃헙을 사용하고 백과 프론트 협업을 배워 하나의 프로젝트를 완성시켰기 때문이다. 아마 늦게 지원했으면 사전스터디 조에도 늦게 참여했을 거고 토이 프로젝트는 꿈도 꾸지 못했겠지... 끝까지 완주한 우리 팀원들 그리고 팀장님 다들 고생하셨습니다!! 프로젝트 명은 신세계 프로젝ㅌ... 가 아니라 이번 여행, 준비됐나? -이다. 코로나가 풀리면서 억눌려있던 여행심리가 폭발했을 것이고 그에 맞춘 컨셉을 토이 프로젝트에 접목했다. 웹개발 종합반 강의에서 들었던 내용들을 최대한 활용하였고 간단한 기능설명을 하자면 - 각 테마에 맞는 숙소를 크롤링해서 저장한다. - 각 숙소에 챙겨가야할 것들이나 갔다온 후 챙겼으면 좋았을 준비물들을 입력,..

본격적인 항해를 떠나기 3일 전이다. 사전 프로젝트 진행 일정을 계산해보니 아이디어를 채택하고 회의 한 후 첫 코드를 짠지 딱 2주가 지났다. 개인프로젝트를 하려고 했을 때 어떻게 접근해야할지 몰라 흐지부지 끝난적이 종종 있었는데 의욕적인 팀원들이랑 머리를 맞대고 시간을 충분히 할애한 결과 드디어 프로젝트의 끝이 보인다. 처음엔 조금 막막했는데 그래도 계속하니까 된다. 그냥 묵묵히 하니까 된다 아마 오늘 회의를 끝으로 각자의 브랜치를 합치고 최종 결과물을 제출하게 될 것 같다. 아쉽게도 항해의 사전프로젝트 시리즈는 이 다음 포스팅을 끝으로 마무리 될 예정... 그동안의 작업물을 보기 쉽게 올릴테니 많관부!!

프론트엔드와 백엔드에 대한 고민을 살짝 털어놓고 싶다. 프론트엔드 개발자가 된다고 해도 백을 간과해선 안되니 그제, 어제, 오늘 총 3일에 걸쳐 스프링, node.js, 리액트 세션을 들었는데 듣고 난 후 생각은 역시 모든 개발자는 풀스택으로 귀결된다! 이다. 직감적으로 알고있었지만 오늘까지 총 3일에 걸쳐 들은 세션은 그 생각을 더욱 확고하게 만들어줬다. 하지만 취업하여 경력을 쌓기 위해선 결국 프론트와 백을 선택해야 한다. 풀스택 개발자 채용! 이란 공고는 지금 내 수준에서는 감히 올려다보지도 못할 터이니... 선택과 집중을 하자면 나는 무조건 프론트이다. 지금까지 배운게 아깝기도하고 자바를 새로 배우기엔 처음부터 다시 시작해야 된다.... 무엇보다 결과적으로 클라이언트의 눈에 직접적으로 보이는 결과..

드디어 해결했다.. 문제가 안풀릴수록 단순하게 생각할 필요가 있는데 고민이 꼬리에 꼬리를 물다보니 스스로 어렵게 꼬아버린 느낌이다. 의도했던 건 단지 리스트가 하나씩 사라지게 하고싶었을 뿐인데 먼 길을 돌아왔다. 위 사진 각각의 리스트가 1부터 5까지의 value를 가지고 있는게 보인다. 이 리스트 하나하나에 보이지 않는 index값을 부여하기 위해 생성 될 때 마다 현재 리스트 배열의 길이에 +1을 index값으로 지정해줬으니 1부터 5까지의 value를 갖고있는 리스트의 index도 매칭되어 1부터 5까지 순서대로 하나씩 가지고 있다. 저기서 만약 3을 지운다면 1,2,4,5가 남고 index도 1,2,4,5가 남는데 이 상태에서 input창에 하나를 추가로 입력하면 배열이 4개남아있으니 index가..

블로그의 리액트 쇼핑몰 프로젝트를 보셨다면 쉽게 눈치채셨을 개인적인 취미를 공개하자면 약 4년 넘게 폭설, 폭우, 우박이 쏟아지지 않는 이상 매주 토요일 빼먹지않고 참석하는 am 7-9 축구.. 정확히는 풋살 오늘은 더위에 지쳐 집오자마자 쓰러졌는데 쓰러질것 같은 더위에도 혹은 살을 에는 추위에도 매주 새벽에 일어나 뛸 수 있는 원동력 단지 좋아하니까 그 뿐이다. 그 자체를 즐기면 새벽 일찍 일어나는 것도 힘들지 않다. 요즘 공부하고 있는 웹 개발도 한창 문법공부하다가 지칠 때쯤 항해를 통해 프로젝트를 진행하게 되어 하루하루가 재밌다. 아직 내가 개발을 좋아한다라고 말할 수는 없지만 하루에 12시간 이상 컴퓨터 앞에 앉아서 공부하는 게 그렇게 힘들지 않다. 허리랑 목 통증 외엔... 경제학 전공을 살려야..

간단한 CRUD라 오래 걸리지 않을거라 예상했지만 의외의 복병을 마주했다. 몽고DB CRUD 중 하나인 delete문법... @app.route("/supplies/delete", methods=["POST"]) def supplies_delete(): index_receive = request.form['index_give'] num_receive = request.form['currentNum_give'] print(index_receive, num_receive) db.supplies.delete_one({ "$and": [{'num': int(num_receive)}, {'supplieslist.index': int(index_receive)}]}) return jsonify({'msg': '삭제..

백엔드 능력자 분께서 마침내 해결해주셔서 done작업을 끝낼 수 있었다. 플라스크 프레임워크가 되게 가볍고 편한데 구글링에 의존하기에는 정보가 부족하다해야되나? 정확히는 플라스크 문법이 아니고 몽고DB와 연동하는 문법이라 DB가 또 나눠지기 때문에 더 구글링이 어려웠던 것 같다. 우리가 의도한 바는 2페이지 각각의 사진 하나당 이러한 데이터베이스 카드 하나가 기록되는 방식이고 각 카드에 supplieslist라는 준비물 배열을 추가할 수 있게 만드는 것 그리고 아래 사진의 리스트 하나당 또 다른 객체 요소로 구성되어 있다. @app.route("/supplies/done", methods=["POST"]) def supplies_done(): index_receive = request.form['inde..

오늘의 사전프로젝트는 쉬어가는 느낌이었다고 해야되나 정확히 말하자면 프론트는 프론트대로 막히고 백은 백대로 막히는 부분이 있었어서 진도를 어쩔수 없이 못나갔다. 따로따로 막힌게 아니라 데이터베이스를 연결하려면 어쩔 수 없이 프론트쪽도 손을 봐야하기 때문에..... 이럴 때 일수록 침착함을 유지할 필요가 있다. 작동하는 코드가 아니기 때문에 코드블럭이 아닌 그냥 사진으로 밀어넣겠다 ㅋㅋ 사진을 클릭했을 때 튀어나오는 준비물 모달창 리스트에서 준비물을 챙겼는지 여부를 파악하는 done요소를 0에서 1로바꾸고 1에서0으로 바꾸는 토글 기능을 구현하려고하는데 뭔가 될듯될듯 안된다.. 사진에 귀속되는 데이터 요소들중에 supplies라는 데이터 안에 또 준비물리스트를 구성하는 요소들이 있는데 플라스크에서 몽고DB..