TREASURE408

• 

  [JS] - 자바스크립트란? 웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어 객체지향, 함수형 프로그래밍 스타일에 적합한 동적 인터프리터 언어이다. 자바스크립트로 작성된 프로그램 ➜ Script. 웹페이지를 로드할때 스크립트가 자동으로 실행 컴파일 없이 문자 형태로 작성/실행 가능 웹브라우저 뿐만 아니라 서버에서도 실행 가능 JS는 인터프리터언어 이다. 즉, 프로그래밍 언어의 소스 코드를 바로 실행 한다. 01. JS 엔진 1. 클라이언트 JS - [브라우저에서 작동하는 방식] 웹브라우저 자체에 JS 엔진이 내장 되어있음. 페이지 로드➜ 브라우저가 버튼/레이블 등 요소를 DOM이라는 데이터 구조로 변환 ➜ JS엔진이 JS코드를 Bytecode(이진 표현법)로 변환( JS - 기계 중개자 역할) ➜ EventListene.. FRONT-END/JAVASCRIPT 2023. 1. 18.

• 

  [풀스텍 미니 프로젝트] Linkle Linkle S.A Linkle Linkle S.A 1. 프로젝트명 Linkle Linkle - 링클 링클 2. 소개 많은 개발자 분들께서 에러, 모르는 부분, 알게된 점 등등을 구글링을 통해서 알아갑니다. 이때, 문제를 해결하고 나서 다시 검색하는 경우가 많다. 다시 검색하는 것을 방지하기위해 발생한 문제와 참고했던 사이트를 카테고리별로 정리할 수 있게 해줍니다. 3. 기술 스택 4. 와이어 프레임 1-1) 홈페이지 / 로그인 & 회원가입 페이지 홈페이지 바로시작하기 버튼 클릭 ➜ 애니메이션과 함께 로그인 form 등장 로그인 유지 : JWT 토큰 방식 사용 로그인 정보가 없다면 회원 가입 버튼 클릭 ➜ 중복확인, 비밀번호 확인 로그인 버튼 클릭 ➜ 홈 카테고리 이동 1-2) 카테고리 페이지 카테고리가 존재하지 않다면 ➜.. PROJECT/FE 프로젝트 2023. 1. 17.

• 

  [TIL] 230115 JWT, 쿠키, 세션 프론트엔드는 백엔드의 고객이고, 사용자는 프론트엔드의 고객이다. 백엔드 자료 ➜ 프론트엔드 유저 배포 ➜ 유저 01. JWT, 쿠키, 세션? HTTP : 인터넷상에서 데이터를 주고받기 위해 서버 및 클라이언트 모델을 따르는 규약 문제점 사용자가 브라우저나 컴퓨터의 전원을 끄게 되면 연결 종료 후 상태 정보가 저장되지 않는다. 그렇게 되면 사용자에 대한 정보가 없기 때문에 접속하는 사용자들을 새로운 사용자로 판단해 식별한다. 해결 방법 비연결성 / 비상태성을 보완해 서버가 클라이언트를 식별할 수 있게 해주는 쿠키/세션을 사용하는 것이다. 쿠키 : 웹에 접속할 때 생성되는 정보를 담고 있는 임시 파일이다. 서버를 대신해 사용자의 웹 브라우저(로컬)에 정보를 저장한다. 사용자가 서버에 무언가를 요청할 때, 저.. FRONT-END/TIL 2023. 1. 16.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch03 | 0. State? ReactJS State 바닐라 JS에서 버튼을 클릭하면 Count가 올라가는 함수를 이벤트 리스너와 함께 구현하면 다음과 같다. 클릭된 숫자: 0 클릭 바닐라 JS와 ReactJS는 값이 변경될 때 UI가 어떻게 rerender 되는지 확연하게 구분된다. ReactJS는 UI에서 바뀐 부분만 업데이트해주고, 바닐라 JS는 변경된 태그 전체를 업데이트한다. ReactJS로 변환 위 바닐라 JS코드를 ReactJS로 변환해 보자면 오류 확인 하지만 버튼을 클릭하면, 클릭 이벤트는 정상적으로 작동하지만 UI에 반영되지는 않는다. 웹 페이지가 처음 실행되면 Container은 함수이기 때문에 바로 실행되지는 않고, 페이지가 로드되면서 Container 컴포넌트가 딱 한 번 랜더링 된다. 이벤트 리스너를 등록하.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 6. 컴포넌트 사용 JSX에서 컴포넌트 사용 이전에 만들었던 container 부분도 JSX를 사용하여 변경해 보고, Title과 NewBtn을 컴포넌트 형식으로 변경해 웹에 뿌려보도록 하자. 컴포넌트 생성 방법 우리가 만든 컴포넌트를 사용하기 위해서는 반드시 Uppercase로 작성되었어야 했다. 그리고 이 컴포넌트를 Arrow function을 사용해 함수로 만들어 주면, 사용할 수 있는 컴포넌트로 바뀌게 된다. //Title에 arrow function을 사용해 함수로 변경해줌! const Title = () => ( console.log('타이틀에 마우스가 감지 되었습니다.')}> 안녕하세요 ); const NewBtn = () => ( console.log('클릭 되었습니다.')} style={{ border: '.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 5. JSX 사용법 JSX JSX는 자바스크립트를 확장한 문법이다. 보통 HTML이랑 비슷하지만 property를 HTML 태그의 속성처럼 사용하면 안 된다. 또한 반드시 컴포넌트는 uppercase로 넣어줘야 한다. /* 아래 방법은 절때 사용하지 않음 (기본 구조만 이해하면 됨) */ const Title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요'); /* 대신 JSX를 사용하는것이 훨씬 편리하고 많이 쓰인다.*/ const title = ( console.log('타이틀에 마우스가 감지 되었습니다.')}> 안녕하세요 ); 처음에 사용했던 기본 React 문법과 .. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 3. Events in React ReactJS로 영화 웹 만들기 자바스크립트에서는 마우스와 같이 어떠한 이벤트를 주기 위해선 많은 단계를 거쳐야 한다. addEventListener를 사용하여 간단하게 보자면 아래와 같다. 안녕하세요 클릭 클릭 이벤트 위 바닐라 JS를 React로 바꿔주면 더욱 간편하게 이벤트를 적용시킬 수 있다. const를 render 하고 싶은 경우 div를 만들어준다. 그리고 React.createElement("div", null, \[title, btn\]); 와 같은 배열을 만들어서 const를 넣어준다. const container = React.createElement('div', null, [title, btn]); 이제 버튼이나 태그 안 property에 eventListener 넣는 것도 가능하다.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [노마드/ReactJS 영화 웹 만들기] - Ch02 | 2. 리액트 설정 및 기초 ReactJS로 영화 웹 만들기 React는 HTML, CSS, 자바스크립트만으로 웹 페이지를 만드는 것과 비교해 큰 이점이 있다. 프로그램 설계를 조직화할 수 있다. 웹 페이지를 HTML로 만들다 보면 같은 부분을 여러 번 다시 사용해야 하는 번거로움이 있지만, HTML만 봐도 페이지마다 공통적으로 바뀌는 부분을 일일이 인덱스를 이동하며 넣어줘야 한다. 그렇기에 웹 사이트가 커질수록 관리도 어려워지게 된다. 루트(route)가 수십 개이고 그 안에 사용되는 코드가 수 백 줄인 웹 사이트 라면 이 방법대로 하는 것이 아주 좋지 않다. 심지어 컴포넌트를 만들어서 넣어줄 수 도 없다. 그래서 만들어진 것이 Facebook에서 만든 ReactJS와 같은 프레임워크이다. 01) 전체 프로그램 설계를 깔끔하고 일.. FRONT-END/ReactJS Clone project 2023. 1. 15.

• 

  [TIL] 230114 Git 20230114 GIT 오늘은 현업에서 사용하는 깃에 대해 알아보았다. 개인프로젝트를 할 때에는 하지 않았던 버전관리, 레포, 브랜치 생성 및 머지 그리고 푸시를 토이프로젝트를 진행하면서 알게 되었다. 처음에는 터미널과 깃허브 데스크톱으로 진행했지만, 전체적인 흐름을 보기위해 소스트리도 병행하며 깃에 대한 전반적인 지식을 익혔다. 우선, 정리한 대표적인 깃 명령어는 다음과 같다. 대표 깃 명령어 git status - 깃의 변경사항을 알 수 있다. git add . - 스테이징에 수정된 모든 파일을 스테이징 area에 넣음 git commit -m “fix: RestController를 Controller로 변경” - 커밋 메시지를 넣음’ 최대한 자세하게 커밋메시지를 넣어주는 것이 중요 git check.. FRONT-END/TIL 2023. 1. 15.

• 

  [TIL] 230113 토이프로젝트 4일차 끝 2023013 최종적으로 토이프로젝트를 마무리했다. 3일 차에서 URL을 넣는 Form을 만들었고, 그 안에 Ajax와 mongoDB를 사용해 POST형식으로 DB 쪽에 넣고 GET방식으로 홈페이지에 뿌려주었다. 더보기 function ajaxBookMark(url, data) { bookmark_list = {}; $('#cards-box').empty(); $.ajax({ type: 'POST', url: url, data: data, async: false, success: function (response) { if (response['msg']) { response['msg']; } else if (response['error']) { alert(response['error']); } bookm.. FRONT-END/TIL 2023. 1. 15.

• 

  [TIL] 230112 토이프로젝트 3일차 20230112 토이프로젝트 북마크세이버라는 프로젝트를 진행하면서 1-2일 차에 프론트엔드에서 헤더 기능, 타이핑 기능, 메인 인덱스 UI를 백엔드에서 회원가입 기능을 추가하여 인덱스 페이지와 로그인 페이지를 마무리 지었었다. 3일 차에는 메인 화면에 URL을 추가하면 해당 URL의 meta og 태그들을 긁어 오고, 인풋의 여러 로직을 만들어 URL / 사용자가 원하는 카테고리 / 태그까지 넣어 화면에 뿌려지는 형식으로 로직을 짰다. 이과정에서는 Python, Flask, Pymongo, JS, BS4 스택을 사용했다. 로그인 부분 태그 기능은 프론트엔드에서 tagify 라이브러리를 사용하여 tag를 보여주는 기능을 구현했고, 백엔드는 토큰기능과 hash 보안 기능이 없는 부분만 구현해 주셨다. 더보기.. FRONT-END/TIL 2023. 1. 14.

• 

  [TIL] 230110 - 230111 토이프로젝트 1일차 - 2일차 20230110 - 230111 향해99에 처음 합류하고 바로 시작한 토이프로젝트. 사전에 알게된 파이썬과 바닐라 JS로만 만들어야 했던 조그마한 토이프로젝트가 4일간의 여정을 시작했다. 주특기만 정해진 네명의(프론트엔드2 백엔드 2) 팀원들과 BookMark Saver라는 프로젝트를 만들고 하나하나 기능을 추가해 나갔다. 우선 큰 틀은 로그인을 하면 메인화면에 입장하게 되고, 그곳에서 저장하고 싶은 웹사이트 URL, 카테고리, 태그를 넣어주면 각 사이트마다 정해진 meta og tag를 가져와 페이지에 뿌려주는 방식의 북마크 웹 사이트다. Index 인덱스 페이지에서는 간단하게 로그인 화면으로 이동할 수 있게 버튼을 생성하고 Typing 되는 JS 로직을 만들어 텍스트 효과를 프런트엔드 쪽에서 주었다... FRONT-END/TIL 2023. 1. 12.

• 

  [TIL] 230111 20230111 향해99에서 지급해 준 PyCharm을 사용하면서 간단한 프로젝트를 돌려보다, 익숙했던 VSCode가 아니라 너무 복잡하고 귀찮았다. 파이참으로는 대부분 파이썬을 사용했기에 인터프리터만 다운로드해 주면 아주 편하긴 했었다. 하지만 OT주 토이프로젝트를 진행하면서 4개월짜리 파이참을 쓰기는 싫었다. 토이프로젝트는 파이썬 기반으로 만들어질 것이기 때문에 VSCode에도 파이썬 관련 인터프리터들을 pip3 install 형식으로 가져와줘야 했다. 하지만 VSCode에서는 다양한 오류들을 뿜었다. ModuleNotFoundError: No module named 'pymongo' ModuleNotFoundError: No module named 'Flask' 위와 같은 오류가 콘솔에 계속해서 찍.. FRONT-END/TIL 2023. 1. 12.

• 

  [TIL] 230110 20230109 향해99 12기의 토이프로젝트를 진행하면서 처음으로 백엔드와 프론트엔드가 협업 프로젝트를 만들어보았다. 매번 혼자 pull > commit > pull > push만 했던 터라 네 명 모두 깃헙 협업은 처음 해보는 상황이라 무작정 부딪혀야만 했다. 우선 Git에 프로젝트를 공유하고 협업하고 최종적으로 Pull Requests와 merge까지 시키는 것을 목표로 삼았다. 시도 우선 한 명의 개발자가 새로운 Project repository를 생성하고 구성원으로 초대하거나 타깃 repository를 자신의 repository로 Fork 해줬다. Fork로 생성한 본인 계정의 저장소에서 clone or download 버튼을 누르고 표시되는 url을 복사한다. 여기서 주의할 점은 타깃 repo.. FRONT-END/TIL 2023. 1. 10.

• 

  [TIL] 230109 20230109 문제점 티스토리의 스킨 기능을 통해 스킨을 꾸미면서 CSS의 border-radius 기능을 넣던 도중, 안드로이드 및 윈도우 기반의 크롬/사파리에서는 문제가 되지 않던 border-radius와 overflow-hidden 기능이 MAC / iPhone에서는 적용이 되지 않는 점을 확인했다. 시도 단순히 z-index문제라고 생각되어 적용된 모든 박스에 z-index를 수정해가며 시도해보았다. 하지만 결과는 실패... 처음엔 -webkit-border-radius라는것이 있나? 라고 생각되어 관련한 문서들도 찾아봤지만 그 기능은 없었다. 그러던 도중 MDN 자료의 쌓임 맥락이라는 게시글을 확인해보게 되었다. 해결방법 결론은 사파리의 렌더링 엔진인 -Webkit 버그라고 한다. 버그를 해.. FRONT-END/TIL 2023. 1. 9.