모모의 IT성장수첩

렉시컬 스코프란스코프란 식별자(변수, 함수 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름) 접근 규칙에 따른 유효 범위를 뜻합니다.렉시컬 스코프란 식별자 유효 범위가 함수를 호출할 때 결정되는 것이 아닌, 선언할 때 결정되는 것을 뜻합니다. 정적 스코프(Static scope)라고도 합니다. 자바스크립트는 렉시컬 스코프를 따릅니다. 렉시컬 스코프는 변수의 유효 범위(scope)를 결정하는 방식 중 하나로, 변수가 어디서 정의되었는지에 따라 결정됩니다.이 개념은 프로그래밍 언어에서 매우 중요한 개념 중 하나로 여겨지며, 다양한 언어에서 일관되게 적용됩니다.   1. 렉시컬 스코프의 기본 원리 렉시컬 스코프는 코드가 작성된 위치에 기반하여 변수의 스코프를 정의합니다. 함수를 어디..

성장일지 2024. 6. 21. 11:38

프로젝트 생성하기npm init react-app .터미널에서 원하는 디렉토리에 들어가서 npm init react-app .를 입력하면 현재 디렉토리에 리액트 프로젝트를 생성합니다.  개발 모드 실행하기 npm start (npm run start)터미널에서 npm run start를 입력하면 개발 모드 서버가 실행됩니다.  실행 중인 서버 종료하기ctrl + c서버가 실행 중인 터미널에서 ctrl + c를 입력하면 서버가 종료됩니다.  개발된 프로젝트 빌드하기npm run build터미널에서 npm run build를 입력하면 빌드를 시작합니다.  빌드한 것 로컬에서 실행하기npx serve build터미널에서 npx serve build를 입력하면 serve 프로그램을 다운 받고 build 폴더에서..

성장일지 2024. 6. 19. 13:45

로그인과 회원가입 스크립트를 공유해본다. 요구사항 로그인활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다...

성장일지 2024. 6. 15. 15:58

this 란?자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수를 말합니다.자바스크립트에서 this 는 호출방식에 따라서 동적으로 결정됩니다. 바인딩이란?함수 또는 메소드를 호출한 대상에 실제 함수를 연결해주는 것을 말합니다.자바스크립트에서 this 는 어떤 환경에서 사용하는지에 따라 this 에 바인딩되는 객체가 달라집니다.  전역 환경웹 브라우저, 전역 환경에서 this 는 전역 객체인 window 가 바인딩됩니다.console.log(this === window); // true  함수 내부함수 내부에서 this 의 값은 함수를 호출한 방법에 의해 결정됩니다.  단순 호출전역에서 함수를 호출하고 있어 this 는 전역 객체인 window 가 바인딩됩니다.function retu..

성장일지 2024. 6. 14. 21:49

이벤트 버블링자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 합니다.기본적으로 이벤트 버블링이 일어나고, 이를 막으려면 이벤트 객체에서 stopPropagation 메소드로 전파를 막을 수 있습니다.  이벤트 캡쳐링부모 요소에서 자식 요소로 이벤트가 전파되는 것을 이벤트 캡쳐링이라고 합니다.캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener 에 세번째 프로퍼티에 true 또는 { capture: true } 를 전달하면 됩니다. 이벤트 위임자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리하는 방식을 이벤트 위임이라고 합니다.

성장일지 2024. 6. 14. 21:43

Git Flow 브랜치 전략? 각 branch 생성에 규칙을 만들어서 협업을 유연하게 하는 방법론이며,깃에서 제공하는 강력한 브랜칭 기능을 활용한 변경이력 관리 전략이다. Git Branch 전략이 왜 필요해? Git Branch 전략이 무엇인지는 알았는데, 왜 Git Branch 전략이 필요한 걸까?바로 팀원들간의 공통의 Branch 용어를 정하여 Git Branch에 대해 팀원들간의 공통의 이해를 달성하고,더 나아가서 팀의 Git Branch를 효율적으로 관리할 수 있기 때문에 Git Branch 전략이 필요하다고 생각한다. * Git Flow- 브랜치 수가 많고 여러 규칙이 있는 만큼, 규모가 큰 프로젝트에서 적합하다.- 배포 주기가 잦지 않은 프로젝트에서 적합하다.- 다양한 버전 관리가 필요한 모..

성장일지 2024. 6. 7. 06:00

Git merge란? git branch를 다른 branch로 합치는 과정을 merge라 한다.merge의 기본 단위는 브랜치이며, git merge 명령어로는 커밋 단위로 합치기가 불가능하다 git merge    병합하는 브랜치 사이의 관계에 따른 merge 종류 Fast-forward 머지3-way 머지 머지를 하면 새로운 커밋이 생긴다.그리고 머지를 통해서 생겨난 커밋을 머지 커밋(merge commit)이라고 부른다.이 그림을 보면 지금 master 브랜치에서 premium 브랜치를 머지해서 검은색의 머지 커밋이 생긴 것을 알 수 있다.하지만 머지를 한다고 항상 이렇게 새로운 커밋이 생기는 건 아니다. 지금 저는 master 브랜치에 HEAD가 master 브랜치를 가리키고 있다.이 상태에서 ..

성장일지 2024. 6. 7. 05:45

코드잇 국비 부트캠프를 참여한지 한달이 다되어가는데...어느날 깜짝 선물이 도착했다.      나라에서 지원받아 정말 무료로 공부하는데이런 선물까지 주시면더 열심히 해야죠.ㅎㅎ  그냥 큰 기대를 안하고 열었는데나름 알찬 구성에  기분이 좋았다.   무지 노트에 나중에 다시 다 정리 해봐야겠다.   펜도 나름 필요한 아이템^^    어머나 이쁜 키링까지귀욤뽀짝하네..나의 아이팟에 달아두겠다.나중에 같은 코드잇 수료자들 보면 요건 표식이다.    무선 충전기까지..와웅. 이건 단가가 비쌀텐데다음 회사 다니면 가져가서 쓸께요.     블랙 씨크한 텀블러~이것도 다음 회사 다닐때 꼭 쓰겠습니다^^    요 귀욤 뽀짝한 스티커로 노트를 꾸며보았다.원래 노트북에 붙여도 될 것 같았지만나는 노트북 스티커 잘 안붙여서..

성장일지 2024. 6. 7. 03:34

position 속성 종류static, relative, absolute, fixed, sticky 가 있습니다. 각 속성들의 특징position의 기본 값은 static이고, 이 경우 원래 있어야 할 위치인 HTML에 작성된 순서 그대로 브라우저 화면에 표시됩니다.    relative 는 요소의 원래 위치를 기준으로 상대적으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다. top, bottom, left, right 속성을 이용해서 요소의 원래 위치 기준 이동하도록 설정할 수 있습니다.    absolute 는 가장 가까운 포지셔닝(static 이 아닌 position 속성 값)이 된 조상 요소를 기준으로 배치됩니다. 이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 ..

성장일지 2024. 5. 31. 23:24

시맨틱 태그란의미론적 태그를 뜻합니다. 시맨틱 태그는 태그가 가진 목적이나 역할을 나타내기 때문에, 태그 사용만으로도 의미를 쉽게 파악할 수 있습니다. 사용 시 이점검색 엔진 최적화(Search Engine Optimization = SEO)웹 접근성(Web Accessibility = A11y)동료 개발자가 코드를 읽고 의도 파악하는데 도움이 됩니다. 주의할 점시맨틱 태그에 너무 집착하면 개발 생산성이 떨어집니다. 따라서, div 태그로 개발하고 필요할 때 시맨틱 태그로 바꿔 나가는 것이 효율적일 수 있습니다.  참고 자료https://www.semrush.com/blog/semantic-html5-guide/

성장일지 2024. 5. 31. 23:19

cascade란?일반적으로 cascade란 계단 형식의 폭포의 형태 일컫는다고 한다.지금 배우고 있는 css에서는 규칙을 순서에 따라서 합치는 걸 cascade라고 한다.  위 내용처럼 여러 css규칙이 적용될 때 순서에 따라 합쳐지는 형태이다.취소선 있는 속성은 위에 속성이 우선되기 때문에 적용되지 않고 정의되지 않은 영역만이 그대로 적용이 된 걸 볼 수 있다.   cascade 순서 1. 똑같은 클래스라면 맨 아래 코드 줄에 적인 스타일이 우선 적용된다.2. 선택자에 대한 명시도에 따라 우선 적용된다. 명시도는 아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 매긴다.    요약 (+추가 정보) CSS는 "Cascading Style Sheets"의 약자라고 한다.캐스케이드는 ..

성장일지 2024. 5. 20. 22:28

6개월간 수업을 들으려니 두려움과 설렘 두 가지 마음이 공존한다.혼자서 이 싸움을 잘 이겨낼수 있을지.... 내가 잘 하고 있는 걸까..ㅎㅎㅎ 왜 일을 벌렸을까......  부트캠프는 처음인데.. 우선 수업을 앞서 OT를 가졌다.문제도 풀면서 뭔가 익히게끔 체계가 있어 보였다. 부트캠프라서 이런 건지아니면 코드잇이 잘 만든 건지.... 코드잇이 8기까지 오면서 시행착오도 있었을테고... 무튼정말 꼼꼼하고 영상 퀄리티도 너무너무 좋다.  디스코드란 메신저로 이야기하면서팀플개념으로 서로 미팅을 한다.주강사 님이 각 팀에 계시고 팀장을 뽑아서 데일리 미션을 갖는다.뭐.. 참...쉽게 가는건 하나도 없구먼.빡센 수업이 될 것 같다. 그래도 안심인건출석 제도에서 미리 수업을 들으면 특정 일에는 덜 들어도 보완이 ..

성장일지 2024. 5. 18. 22:25