728x90 Sesac21 [SeSAC] 프로젝트를 앞두며(feat. 노드크루) [SeSAC] OT [SeSAC] OThttps://sesac.seoul.kr/course/active/detail.do?courseActiveSeq=1783&srchCategoryTypeCd=&courseMasterSeq=450¤tMenuId=900002022 청년취업사관학교(성동2기) 🥇클라우드 기반 실전sesac.seoul.kr 백엔드 개발자가 되고 싶었다. 취업cloakinghost.tistory.com 어느덧 프로젝트를 앞두게 되었다시작하기에 전에 지금까지의 활동을 돌아보고자 한다.한 줄요약하자면,모든 과정이 기억에서 떠나지 않길 바랄만큼 귀중한 시간이었다. 학습과목 총 6개JavaScript, React.js, Java, Spring Boot, Docker, AWS3번의 미니프로젝트TMDB .. 2025. 2. 18. [SeSAC] JSX JavaScript 코드와 XML(HTML)이 혼용될 수 있는 파일 확장자이다JS 기반 문법에 HTML을 작성할 수 있다.JS를 사용해도 되지만 JS코드에서 HTML을 작성하는 과정의 번거로움을 덜어주는 역할을 한다.HTML을 함수에 담아 재사용 할 수 있기 때문이다Component컴포넌트란 재사용 가능한 UI 요소를 의미한다.렌더링이 가능한 요소를 반환하는 함수에 구성된다.다시 말하면 JSX 요소를 반환하는 함수를 리액트에서는 컴포넌트라고 한다.HTML에서 사용했던 태그처럼 사용이 가능하여 UI 요소를 다룰 때 유용하다.규칙하나의 루트 엘리먼트로 반환function App() { return ( 제목 // 에러 발생 내용 );}export default App;단 하나의 엘리먼트로 감.. 2024. 11. 6. [SeSAC] React 시작하기 JS를 사용하며 필요할 때마다 요소(Element)를 생성한 경험이 있을 것이다.const liTag = document.createElement("li");const divTag = document.createElement("div");liTag.append(divTag);DOM조작을 통해 트리에 정보를 업데이트 시켜 화면에 나타나게 한다.이러한 작업이 반복되고 더욱 복잡하다면 reflow가 발생해 큰 비용과 성능에 문제가 발생한다.reflow: 요소의 너비, 높이, 위치 등이 변경되어 렌더트리 재생성Virtual DOMJS Object로 만들어진 DOM두개의 가상돔 객체를 가진다.렌더링 이전 화면 구조렌더링 이후에 보이게 될 화면 구조어떤 이벤트로 인해 DOM조작이 필요하여 내용이 변한다면가상돔에 먼.. 2024. 11. 4. [SeSAC] JS_함수 // 선언식function addVer1(num1, num2) { return num1 + num2;}// 표현식const addVer2 = function (num1, num2) { return num1 + num2;}// 화살표 함수(Arrow Function)const addVer3 = (num1, num2) => { return num1 + num2;}// Object Methodconst calc = { // 선언식 addVer4: function (num1, num2) { return num1 + num2; }, // 선언식 축약형 addVer5(num1, num2) { return num1 + num2; }, // 화살표 함수 addVer6: (num1, num.. 2024. 10. 25. [SeSAC] 반복문 const arr = [1, 'a', [4, 5, 6], { name: "something" }]// for 기본형태for (let i = 0; i 위 코드는 모두 결과가 동일하다.상황과 편의에 따라 선택적으로 활용하면 된다.처음에는 문법 자체가 어려울 수 있겠으나 해결 방법은 반복이 최선이다. 추가적인 팁으로는 변수들에 실제 값을 하나씩 넣어보며 변화과정을 느끼는 것도 방법이다.또한 손으로 그림을 그리는 것 또한 이해에 도움이 된다. for (초기화; 조건식; 증감식) { // 실행할 코드}for (let key in 객체) { // 실행할 코드}for (let value of 반복 가능한 자료형) { // 실행할 코드}while (조건식) { // 실행할 코드} 무엇이든 사용하려 할 때는 목적.. 2024. 10. 24. [SeSAC] 참조 자료형 const arr = ['a', 'b', 'c', 'd', 'e'];const otherArr1 = arrconst otherArr2 = arrconsole.log(arr === otherArr1) // tureconsole.log(arr === otherArr2) // tureconsole.log(otherArr1 === otherArr2) // tureotherArr1[2] = 't'console.log(arr) // [ 'a', 'b', 't', 'd', 'e' ]JS는 문자열||숫자 타입 외에 Object 타입일 경우선언을 통해 할당하면 값이 직접 담기는 것이 아니라 간접적으로 값이 담긴 주소를 담는다 할당된 주소값을 다른 변수에 담을 경우 마찬가지로 주소값이 담기게 된다. 이로 인해 2가지 특징.. 2024. 10. 24. 이전 1 2 3 4 다음
