Youngble_개발스토리

서버구축 자바스크립트언어 기반 node.js 를 사용하여 서버를 만들어볼려고한다. 먼저 node.js 장점은 비동기처리를 한다는것, A,B,C 라는 작업이 들어왔다면 순서대로 끝날때까지 하는게 아니라 일단 A,B,C 작업을 받아서 빠르게 처리하는것부터 완료하는것이다. 예를들어 SNS, 채팅 서비스 같은경우 요청이 매우 많고 여러 요청을 바로바로 처리해야한다. 무거운 요청까지도 일단 받아들이기때문에 멈춤이 없다는 장점이 있는것이다. 기본서버환경 만들기 express express 라이브러리를 사용하면 쉽게 서버를 만들수 있다고한다. creact-react-app을 통해 만드는게 아니기 때문에 package.json 과 같이 패키지 라이브러리 버전관리 파일이 필요하다. 따라서 npm init 을 통해서 새 ..

프론트를 진행하면서 백단에서의 흐름이나 로직에 대해서 초반에 따라만든것말고는 아는게 없어서 다시 개념을 잡아서 기본은 알아야겠다고 생각했다. 먼저 DB에 대해서 간략하게 아는대로 적어봐야겠다. SQL 엑셀과 같이 행/열의 생김새가 정해져 데이터를 저장한다. 만약 데이터가 50만개가 적재되어있다면, 그 중간에 갑자기 열 하나를 더하는것은 어렵지만 정형화되어 있어서 데이터의 일관성 및 분석이 용이하다고 한다. NoSQL 딕셔너리 형태 {"a" : "blabla", "b" : "mumble", ...} 로 데이터를 저장해두는 DB 로써 SQL과 달리 데이터 하나하나 마다 값들을 가지지 않아도되고 자유로운 형태로 데이터를 적재할수있다. 하지만 일관성이 부족 하다고 할수있다 Ex) MongoDB 이러한 자유로때문..

리액트를 사용하면 JSX 문법을 자연스럽게 접하게 된다. 막상 쓰는법은 알지만 이것이 정확히 무슨뜻이고 무슨 원리이고 어떤 배경이 있는지는 자세히 알지못했다. 풀어쓰면 Javascript XML 인데 이때 XML은 html과 비슷하지만 다른 확장성 마크업 언어이다. 따라서 무엇이 JSX이고 그안에 있는 XML 은 무엇인지 정리해보기로 했다. XML eXtensible Markup Language 약자이며 확장성 마크업 언어 이다. 보통 XML 형태는 html 태그와 비슷하지만 분명한 차이점이 많이 존재한다. XML은 data를 전달하는 데에 포커스를 맞춘 언어이고 HTML은 data를 표현하는 데에 포커스를 맞춘언어이다. XML은 HTML과 달리 tag가 미리 정의 되어 있지 않다. 장점으로는 문서 자체..

overflow-y 속성값 header와 footer 사이의 내용물이 길어질때 해당 영역을 스크롤을 통하여 위치 고정 visible: 기본값으로 내용이 잘리지 않고 넘치는 내용은 밖으로 흘러 넘침 hidden: 내용이 잘리고 스크롤바는 나타나지않음 scroll: 내용이 잘리고 스크롤바가 나타남 auto: 내용이 잘리고 필요할때만 스크롤바가 나타남

자바스크립트 최신 문법들을 다시한번 훑어보면서 optional chaining 기능을 배웠는데 들으면서 번뜩 떠오른 부분이 있었고 이 최신 문법을 사용하여 예전 프로젝트를 수정하면 코드가 더 줄어들지 않을까 생각했던 부분이 있었다. Optional Chaining? The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid. 위는 MDN 에서 정의된 설명이다. 번역하자면 optional chaining(?.) 을 사용하..

JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 서버와 데이터를 주고받을때 보통 JSON형식으로 보내준다. (또는 XML) 또한 api를통해 받은 정보들을 localStorage나 sessionStorage 에 데이터를 저장할때 따로 설정이없다면 객체의 값은 string형식으로 저장이 된다. 예시 현재 프로젝트에서 localStorag에 담아 사용중인 키값들 LocalStorage를 콘솔로그 출력화면 만약 내가 원하는 값이 boolean 형식이거나 number, object등 다른 타입이라면 저장했다가 쓸때 하나의 문자열로만 되어있기때문에 정확하게 쓸수없..

서류통과 항해99에서 랜덤으로 협력사에게 이력서를 보낸곳중 하나에서 면접을 보러오라는 문자가 왔다. 처음에는 오? 하는 마음과 감사한 마음으로 회사위치와 어느 회사인지 봤는데 음..?전라북도..? 이건 좀... 항해 너는정말... 그래도 첫 서류합격?이기때문에 너무너무 감사하다. 찾아보니 면접을 안가더래도 미리 연락을 주는게 면접의예의라고하여 아마 내일쯤 연락을 해서 면접을 취소할 예정이다. 중고나라 코딩테스트 오늘 중고나라 코딩테스트를 봤다. 많이 준비는 못했지만 그래도 알고리즘 문제이기도 하고 떨어지더래도 실전 코테가 어느정도 레벨이인지도 알고 경험하면 좋겠다고 생각했다. 총 3문제의 알고리즘 문제였는데 전반적으로 어렵다라는 느낌은 없었다. 그래도 많이 안풀어봐서 시간소요도 많이되고 마지막3번째 문..

드디어 99일이란 시간이 지나고(설날로인해 101일까지 진행하긴했다) 2022.02.09 항해99 4기로 수료를 하였다. 정말 짧다면 짧고 길다면 긴 100일동안 스스로 성장하는 시간과 혼자가아닌 팀으로써 협업해나가면서 여러가지 경험을 했던 기간이었다. 대표님이 마지막으로 졸업생들에게 앞으로는 어떤 개발자 혹은 마인드를 가지면 좋은지를 이야기해주셨고 주차마다 함께한 몇몇 동료들과 감사인사와 앞으로의 개발자로써의 응원을 남기며 끝마쳤다. 홀로 산책로를 걸으면서 그동안 있었던 일들을 생각하니 여러번 울컥했다. 탄탄대로 잘 흘러가면 좋겠지만 사람인생이라는게 순조롭지만은 않고 그 과정을 끝까지 완주할수있었던 스스로에게 위로를 하고싶었다. 항해99에 대한 후기는 나중에 자리를 잡고 여유가 생긴다면 좀더 디테일하게..

모든 프로젝트가 끝나고 바로 이력서 포트폴리오를 작성해서 예상 질문과 함께 고치고 또 고친다. 뭔가 정신없이 제대로 준비 안된상태로 쓰니깐 내가 잘하고 있나 라고 생각도 들고, 과연 누가 날 면접으로 부를까 생각도 하고 면접가면 어떻게 대답을 해야할까 라는 생각이 많아진다. 뭔가 마지막 마무리를 잘해야하는데 걱정이 앞서니 심리적으로 준비도 마무리도 잘안되는거같다. 원티드, 로켓펀치 등을 통해 15곳을 지원하라고 하는데 일단 4군데만 지원했다. 1~2일만에 내가 원하는데를 찾지않고 막 넣는것도 아닌거 같고 뭔가 준비도 안하고 많이 지원하면 면접볼땐 어떻게 하라는건지 생각이 들어서 일단 예전에 배웠던 내용들 다시 보고있다. 예상질문도 만들어야하는데 음.....내일까지 가능할까? 아직 학업도 마치지 못해 이도..

fcm 서비스워커 등록, 설치 fcm 과 서비스워커 글이 중복되듯이 계속 쓰는거 같다. 수정사항이 생기고 추가될게 생기다보니 이렇게 중복되는 이름으로 쓰게 되는데 오늘은 그전에 썼던 fcm을 구독을 하고 취소하는 방법 그렇게 하기위해선 어떤 코드를 써야하는지 써보도록 한다. 먼저 메인화면에서 fcm 정보를 가지고 초기화를 해주는 코드를 썼다. 이렇게 하면 자동으로 fcm의 서비스워커 또한 생기게 되는데 아래스크샷을 참고하면 fcm 공식문서에서 fcm 서비스워커는 firebase-messaging-sw.js 로 정의 되어야한다고 한다. 이를 위해 참고주소: Messaging | JavaScript SDK | Firebase Reference for Messaging firebase.google.com pu..