코딩기록

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

제로베이스 프론트엔드 스쿨에 참여하는 나의 다짐 백엔드를 거쳐 드디어 프론트엔드가 되기위해 공부를 시작했다. 집보다 도서관에서 공부하는 타입인 나는 여러 부캠중 온라인으로 하는 제로베이스 프론트엔드 과정을 선택했다. 시기도 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. 김영한의 스프링 완전 정복 스프링 입문 - 코드로 배우는 스프링 부트, 웹 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~~~

참고 https://alkhwa-113.tistory.com/entry/TIL-TINYINTBIT-Spring-Content-type-%EC%BD%94%EB%93%9C%EB%A5%BC-DB-%EC%97%90%EC%84%9C-%EC%9D%BD%EC%96%B4%EC%99%80%EC%84%9C-%EC%B2%98%EB%A6%AC%ED%95%A0-%EB%95%8C-resource

*구체적으로 작성할 시간이 없어 우선 링크만 걸어둔다. 참고 https://stackoverflow.com/questions/50322550/hibernate-dialect-for-mysql-8

참고 https://velog.io/@yewo2nn16/REST-API-%EC%9D%91%EB%8B%B5%ED%98%95%EC%8B%9D-%EB%A7%8C%EB%93%A4%EA%B8%B0

벌쳐 서버는 비번이 나온다

1. 벌처/아마존 에서 만든 가상서버에 접속한다. 2. 포트 확인에 필요한 net-tools 를 설치한다. apt install net-tools 3. 현재 열린 포트 확인. netstat -tnlp | grep LISTEN 퍼옴 !! 아래 참고 블로그를 보면 더 자세히 알수 있습니다 Advanced Syntax 문법을 확장하여 목적지 주소와 포트, 프로토콜등을 지정할 수 있다. 특정한 IP 주소 허가/거부 특정한 IP주소 허용 sudo ufw allow from 예) 192.168.0.100 주소 허용(IP 주소192.168.0.100 에서만 접속이 가능해진다) BASH sudo ufw allow from 192.168.0.100 네트워크 단위로 지정하여 같은 네트워크 상에 있는 컴퓨터들은 접속가능해진..