코딩기록

1. html에서 js로 이벤트 적용하기모달 열고, 닫기 제목입니다 내용입니다 수정하기 삭제하기 정말 삭제하시겠습니까? 취소 삭제   2. wiggle 애니메이션 복잡한 애니메니션이 필요할때 사용 안녕하세요!   wiggle.css  /* wiggle 애니메이션 */@keyframes wiggle { 0% { transform: rotate(0deg); color: red; } 25% { transform: rotate(10deg); color: orange; } 50% { transform: rotate(0deg); color: yellow; } 75% { transfor..

SASS(SCSS 싸스)란?( Syntactically Awesome StyleSheets )CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. SASS에는 Sass와 SCSS가 있다.또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다.  scss를 css로 변환하는 방법 2가지1.  Live Sass 확장자vscode에서 scss를 쓰기..

html에서 아이콘 사용하는 2가지 방법 1. i 태그2. svg 1-1. 링크삽입https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"   integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="   crossorigin="anonymous" referrerpolicy="no-referrer" />1-2. https://fontawesome.com/icons아이콘 홈피에서 아이콘 테크 복사  예시) 돋보기 아이콘   2-1.  svg 안에 svg 태그를 쓴다  ...  head 태..

내가 생각하는 프론트엔드 개발이란 ?홈페이지 앞단에서 유저가 기능을  편리하게 사용할 수 있게 하는 작업이라 생각한다. 눈이 불편하거나 마우스 사용이 불편한 유저 혹은 컴퓨터 사용이 익숙치 않은 유저 등 다양한 환경의 유저를 생각해 기능을 배치하고 사용하기 편하게 만들어야 하는 사람이라고 생각한다. 그저 주어진 일만 하는것이 아니라 내게 맡겨진 일을 잘 할 수록 다른이들에게 도움이 된다니  ' 널리 인간을 이롭게 하라 '는 우리 민족 정기의 상징인 '홍익인간'의 정신 아니겠는가! 단순 반복적인 일보다 동기부여가 되는 일에 보람을 느끼는 나로서는 더할나위 없이 딱인 일이다. 나는 앞으로 어떤 도움 되는 일을 할까? 꾸준히 갈 수 있기를.  프론트엔드와 백엔드 개발의 차이점은 ?프론트는 홈페이지를 열었을때 ..

제로베이스 프론트엔드 스쿨에 참여하는 나의 다짐 백엔드를 거쳐 드디어 프론트엔드가 되기위해 공부를 시작했다. 집보다 도서관에서 공부하는 타입인 나는 여러 부캠중 온라인으로 하는 제로베이스 프론트엔드 과정을 선택했다. 시기도 6월3일 ~ 11월 말일까지. 다시 부캠을 하게될줄은 몰랐지만. 혼자 하는 것 보다 관리를 받으며 공부할 필요가 있다 싶어 등록했다. 3개월동안 빡세게 해서 노드로 취업했는데 6개월이면  cs를 좀 더 파고, js, ts를 더 다지기엔 충분 한것 같다. 이번에는 운동도 병행해서 체력도 챙겨야겠다. 해보자!  프론트엔드 개발자가 되기로 결심한 이유개발자는 풀스텍, 백엔드, 프론트엔드로 나뉘다. 백엔드, 프론트엔드로 특정된다 하더라도 다른 파트도 조금은 알고 있어야 협업할때 소통이 잘 된..

1. Git Bash를 켠다.2. 키가 있는지 확인한다.$ cd ~/ .ssh$ lsid_dsa나 id_rsa라는 파일 이름이 보일 것이고 이에 같은 파일명의 .pub 라는 확장자가 붙은 파일이 하나 더 있을 것이다. 그중 .pub 파일이 공개키이고 다른 파일은 개인키다. 만약 이 파일들이 없거나 .ssh 디렉토리도 없으면 ssh-keygen 이라는 프로그램으로 키를 생성해야 한다. ssh-keygen 프로그램은 Linux나 Mac의 SSH 패키지에 포함돼 있고 Windows는 'Git for Windows' 안에 들어 있다. 3. 명령어로 키생성.   이름을 적고 비번을 두번 적는다. (비번이 없어도 무방)$ ssh-keygen 확인해보니 gitlecture.pub 키가 생성되었다.4. 키 내용 확인...

웹퍼블리셔 강의 기초부터 - https://wtss.tistory.com/168#실습 - https://blog.naver.com/rebehayan/221351418973  *텍스트한줄효과 2가지 방법- 1.overflow: hidden; width: 50px; height: 10px;2.overflow: hidden; text-overflow: ellipsis; white-space: nowrap; *이미지를 표현하는 방법 2가지1. html- img 태그로 표현(의미가 있을 때) / alt 태그 - 대체 문자 표현2. css - background 속성(의미가 없을 때) - 대체 문자 x3. 이미지를 background 속성 - 웹 표준 준수하기 위해서.     가상으로 대체 문자를 만듬(IR 효과)..

오늘까지 생활코딩 HTML, CSS는 마무리하고간단히 ATOM Editor, 크롬개발자도구 강의를 보고 갈 생각이다.그 후에는 웹퍼블 강의 하나 듣고 리액트 강의, 자바스크립트 강의로 들어갈 계획이다. 1) Korean Language Pack for Visual Studio Code- 한국어버전으로 VS code를 사용할 수 있도록 해주는 플러그인 2) Prettier - Code formatter- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구 3) Atom KeymapAtom에서 자주 사용하는 바로 가기 키를 사용할 수 있음.  4) Settings Sync- github에 VS Code Setting을 올리고..

*훅의 이름은 use~ 로 시작한다.  HTML*모바일 지원  CSS생활코딩 css수업: https://opentutorials.org/course/2418/13340*css참고 사이트: codepen.io*아톰에디터- https://github.blog/2022-06-08-sunsetting-atom/사용법- 생활코딩: https://opentutorials.org/module/1579 *grid-화면에 나란히 위치시킨다. 150px 고정 display: grid;grid-template-columns: 150px 1fr; *반응형- 스크린의 최소폭이 800이되면 div디스플레이가 사라진다@media(min-width:800px) {  div{     display:none;   }}*반응형 순서 캐스..

생활코딩 - React class vs. function style coding 시작  *다음 들을 강의1. HTML의 모든것, HTML 기초 2. WEB2-CSS, CSS기본부터 활용까지3. 생활코딩 - JavaScript Immutability, WEB2 - JavaScript 4. 개발자도구  개발자도구Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구Sources: JS 디..

개인메모장 1. JSX 2. Rendering Elements 3. Components and Props*** 4. State*** and Lifecycle 5. Hooks 6. Handling Events 7. Conditional Rendering 8. List and Keys 9. Forms 10. Lifting State Up 11. Composition vs Inheritance 12. Context 13. Styling 14. Mini Project 15. Appendix A. 리액트 버전18  8월 스케줄5번째 주  html/css 피드백 강의 & 프로젝트 마무리 하기mission04 (240829~30)mission05  (240830~31) 코딩 테스트 5차(240829)모던자바스크립트 ..

배열값을 오름차순과 내림차순으로 정렬 오름차순방법1.  \Math.min / Math.max로 시작점과 끝점을 지정function answer(x, y) { let result = []; // 시작점과 끝점 설정 const start = Math.min(x, y); const end = Math.max(x, y); // 단일 for문으로 처리 for (let i = start; i   방법2. 비교연산자 ( >,  x는 항상 작은 값, y는 항상 큰 값만약 x가 y보다 크다면, 두 값을 서로 바꿈.function answer(x, y) { let result = []; // x를 항상 작게 만듦 if (x > y) { let t = x; x = y; y = t; } /..

프론트엔드 신입 개발자를 구인하는 회사에서 요구하는 기술 스펙은 회사의 규모, 산업 분야, 그리고 팀의 기술 스택에 따라 다를 수 있다. 하지만 전반적으로 공통적으로 요구되는 기술과 역량은 다음과 같다1. 필수 기술 스택HTML, CSS웹 페이지의 기본 구조와 스타일을 작성하는 데 필수.요구사항:시맨틱 HTML 사용.반응형 디자인(Responsive Design)을 이해하고 구현할 수 있는 능력.CSS Flexbox와 Grid 시스템에 대한 이해.간단한 애니메이션(CSS Transition, Animation) 구현.JavaScript (ES6 이상)프로그래밍 언어로서 JavaScript에 대한 숙련도는 프론트엔드 개발의 기본.요구사항:최신 JavaScript 문법(ES6+, let, const, 화살표..

본 글은 인프랩 홈피에 있는 리스트를 가져왔습니다. 본인이 보기 위한 글입니다. 혹시 필요하신 분들은 참고하셔서 공부에 도움 되시면 좋겠습니다. 1. 김영한의 스프링 완전 정복 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 스프링 핵심 원리 - 기본편 모든 개발자를 위한 HTTP 웹 기본 지식 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 스프링 DB 1편 - 데이터 접근 핵심 원리 스프링 DB 2편 - 데이터 접근 활용 기술 스프링 핵심 원리 - 고급편 실전! 스프링 부트 2. 김영한의 스프링 부트와 JPA 실무 자바 ORM 표준 JPA프로그래밍 - 기본편 실전! 스프링 부트와 JPA활용1 - 웹 애플리케이션 개발 실전! ..

nullable=false vs @NotNull 이 때, 내가 위 코드에 적은 내용 중 nullable = false 라는 내용이 있다. nullable은 @Column의 속성 중 하나로, 기본값은 true이다. 값을 false로 설정해 주면, 해당 필드는 DDL 생성 시 not null이라는 조건이 붙은 채로 생성된다. 그런데, 누군가는 이런 생각을 할 수도 있겠다. "저렇게 써주면 DB에는 null이 들어갈 수 없지만, 엔티티의 필드에 넣는 건 가능하니까 위험하지 않을까? 엔티티에 Spring Bean Validation을 써서 검증하면 어떨까?" 코드를 먼저 보자. @Entity public class Member { @Id @GeneratedValue(strategy = GenerationType..

프로젝트 창 열기 및 닫기: Alt+ 1 General : 일반적인 단축키 Alt + #[0-9] : 각 단축키에 해당하는 도구창 열기 Ctrl + S : 모두 저장 Ctrl + Shift + F12 : 편집기(Editor) 영역을 최대로 크기로 토글 Ctrl + Shift + I : 현재 프로필 기준으로 현재 파일 검사 Ctrl + Alt + S : 설정창(Settings) 열기 Ctrl + Alt + Shift + S : 프로젝트 구조창(Project Structure) 열기 Double Shift : 전체 검색창 열기 Debugging : 디버깅 관련 단축키 F8 : 현재 브레이크된 라인에서 다음 라인으로 이동 F7 : 현재 브레이크된 라인에서 실행하고 있는 메소드로 이동 Shift + F8 : 브..

git이나 Bitbucket에서 브랜치 전체를 clone하지 않고 특정 브랜치 하나만 clone하는방법. git clone -b {branch_name} --single-branch {저장소 URL} git clone -b targetBranch --single-branch https://suzyp@bitbucket.org/q~~~