전체 글69 [SeSAC] React 학습 정리(1) 1. React React는 웹 UI를 구성하기 위한 프론트엔드 자바스크립트 라이브러리이다. 2. React 프로젝트 생성 및 실행 방법 https://dksl00.tistory.com/57 - 리액트 프로젝트 이름 규칙 : 대문자 사용X, 단어 구분은 하이픈(-) 사용 - 프로젝트 생성 & 실행 : - npx create-react-app my-test-app - npm start * npx create-react-app my-test-app 명령어로 생성된 디렉토리 구조 * npm start 명령어로 서버 실행시 브라우저를 통해 접근 3. React는 단방향 데이터 바인딩 React는 단방향 데이터 바인딩을 지원하고 권장해서 데이터의 흐름이 한 방향으로만 흐르는 것을 지향 합니다. https://dk.. 2023. 9. 26. [SeSAC] 웹 풀스택 과정_프로젝트_새싹 커뮤니티 웹사이트 만들기(2) MVC 구조와 Sequelize 까지 학습 한 후에 진행한 팀프로젝트에 대한 회고록 입니다. 며칠 전 프로젝트 발표를 마친 후에 주말이 되어서야 회고록을 작성 합니다. 프로젝트는 대략 20일의 시간이 주어졌고 모든 팀은 그에 맞춰 기획,설계,개발,발표를 진행했습니다. 맡은 역할 백엔드 포지션에서 자유게시판 섹션 API 개발 및 개발일정 관리, 서버 배포 무슨 프로젝트 인가 청년취업 사관학교(새싹) 에서 교육을 받는 교육생들의 커뮤니티 게시판 프로젝트 입니다. 프로젝트 이름은 SesacIN 으로 질문과 답변으로 이루어진 지식인에서 따왔습니다. - 사이트 : https://sesacin.online - Github : https://github.com/SesacProjectTeamC/SesacIn GitHu.. 2023. 9. 24. [SeSAC] 웹 풀스택 과정_프로젝트_새싹 커뮤니티 웹사이트 만들기(1) MVC 구조와 Sequelize 까지 학습 한 후에 진행한 팀프로젝트에 대한 회고록 입니다. 1. 기간 : 9/4 ~ 9/22 2. 팀 구성 및 사용 기술 - 프론트 2명 CSS / Js / EJS / BootStrap - 백엔드 3명 Nodejs / Express / MySQL / ORM(Sequelize) 3. 주제 선정 - 주제 선정은 팀별로 진행하며 자유 주제 입니다. - 저희팀은 새싹(청년취업 사관학교)의 다양한 과정을 학습하고 있는 사람들이 이용할 수 있도록 질문과 답변 위주의 게시판 형식의 웹사이트를 만들기로 했습니다. 4. 설계 단계 ( ~ 9/7) 4-1. 개발에 들어가기 전 팀 회의를 통해 프로젝트 컨셉에 따라 필요한 기능들을 표로 정리 했습니다. 4-2. ERD(Entity Relat.. 2023. 9. 17. [JavaScript]객체의 메서드에 this를 쓸때 헷갈리는 동작 1. 기본 동작 JavaScript에서 객체의 메서드는 메서드가 속한 객체에 바인딩된 this 값을 가지게 됩니다. 그러나 객체의 메서드를 콜백 함수로 사용하는 과정에서 this의 값이 예상과 다르게 변할 수 있는데요. 이러한 현상은 주로 함수의 호출 방식에 기인합니다. 아래 예시를 통해 살펴보겠습니다. const obj = { method: function () { console.log(this); }, }; obj.method(); // obj 위 코드에서 obj.method()를 호출하면, 메서드 내부의 this는 obj 객체에 바인딩되어 메서드가 속한 객체인 obj가 출력됩니다. 2. this를 사용하는 메서드를 다른 함수에 콜백으로 넘겼을 때 근데 아래 코드처럼 obj.method를 사용했을때,.. 2023. 8. 29. [SeSAC] 웹 풀스택 과정_프론트엔드와 백엔드에서의 자바스크립트 역할 / 클라이언트-서버 구조 3주 동안 HTML, CSS, JavaScript, Bootstrap, JQuery 등 흔히 프론트엔트라고 분류되는 것들을 배워서 직접 만든 페이지를 웹브라우저에 띄우는 것들을 해봤습니다. 그리고 4주 차에는 JavaScript로 프로그램을 만들고 그 프로그램을 Node.js 위에서 실행하기 위한 백엔드 수업이 시작되었습니다. 제가 작성한 자바스크립트 코드가 의도한 대로 동작할 수 있는 이유는, 브라우저 자체에 내장된 API들을 활용할 수 있기 때문입니다. 이렇게 웹브라우저는 자바스크립트 코드가 실행되기 위한 API 등의 환경을 제공해 주고 이런 환경을 런타임이라고 합니다. 따라서 웹 브라우저는 자바스크립트의 여러 런타임 중 하나로 볼 수 있습니다. 반면에 Node.js는 웹 브라우저와 유사한 방식으로 .. 2023. 8. 12. [SeSAC] 웹 풀스택 과정_뭐든 만들어 보기(미니프로젝트) 1. 시작 3주차 마지막 수업과 더불어 그동안 배운 HTML, CSS , Js, 부트스트랩, Jquery 등을 사용해서 개인 미니 프로젝트를 진행하는 시간이 있었습니다. 2. 요구사항 - 주제는 자유 - 배운것 들을 활용(HTML, CSS , Js, 부트스트랩, Jquery 등) 3. 주제 스스로 문구를 적고 애니메이션을 통해 화면에 보여주는 간단한 웹 어플리케이션을 만들어봤습니다. 스마트폰 어플인 '모두의응원 LED' 를 써보고 제가 따라해볼 수 있을것 같아서 진행해 봤습니다. 4. 화면 화면은 CSS와 부트스트랩 Grid System 을 사용해서 모바일웹 에서 잘보이는 것을 목적으로 만들었습니다. PC의 브라우저에의 화면을 바꾸고 싶을 수도 있을것 같아서 가능성을 열어두었습니다. 1번 / 전광판 : .. 2023. 8. 7. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
