본문 바로가기

전체 글109

[Javascript] CONST, LET, VAR 차이 / SCOPE CONST 상수(변하지 않는 값) 누군가가 인위적으로 변수의 값을 바꿀 수 없으니 보안상 좋다. 다양한 thread가 동시에 접근해서 값을 변경해서 오류가 나는 것을 막아줄 수 있다. human mistake을 방지 할 수 있다. 'const' 는 아래처럼 변수 재선언, 재할당 둘 다 불가능 {} 단위의 scope EX1) - 재선언, 재할당 불가 const name = 'JASN' console.log(name) // JASN const name = 'OK' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = 'OK' console.log(name) //Uncaught TypeError:.. 2021. 4. 9.
[CSS] BEM(Block Element Modifier) 이란? BEM(Block Element Modifier) BEM(Block Element Modifier) 은 개발자들이 ID와 Class를 섞어 쓰면서, HTML에서 자신이 ID를 썼는지 Class를 썼는지 헷갈리면서 계속 확인하게 되자 그 시간을 단축시키려고 Class만 사용하기로 통일 하면서 사용되었다고 한다. Block 독립적으로 존재하고 재사용 가능한 요소를 block으로 명명 태그 값, id 사용x 클래스로 정의 position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용해야하니까!) 색상이나 크기 등을 묘사하는 이름x 구조적으로 의미 있는 이름으로 짓기 Ex) Element 블록 내부에 종속되어 실제 기능을 담당하는 것 종속의 의미를 block-name__element-name로 나.. 2021. 3. 29.
[CSS] Inline, Block, Inline-Block 비교 Inline in the same line(같은 줄에 위치할 수 있다) 의 줄임말 Height(높이)와 Width(넓이) 가 속성을 지정해도 무시 됨. (해당 태그가 마크업하고 있는 Content의 크기 만큼만 공간을 차지하기 때문) margin의 상하 간격이 적용되지 않는다.(위아래가 적용이 안됨.) Block Width,Height,Margin,Padding 모두 적용 가능하다. margin : box의 boader(경계)로부터 바깥 쪽에 있는 공간 padding : box의 boader(경계)로부터 안 쪽에 있는 공간 Inline-Block Inline처럼 줄 바꿈 없이 한 줄에 엘리먼트 나란히 배치. Inline에서 불가능한 Width,Height 조정 및 Margin,Padding 상하 조정이 .. 2021. 3. 26.
[HTML] Semantic HTML이란? What is Semantic HTML? 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 태그는 non-semantic 태그라고 할 수 있고, , 등 이름만 보고 태그의 역할을 유추 할 수 있는 태그는 semantic 태그라고 볼 수 있다. 예전 HTML 문서들을 보면 를 남발한 non-semantic한 문서들이 많았다고 한다. 하지만 지금은 코드만 봤을 때도 왜 사용했는지 유추가능한 Semantic HTML을 많이 쓴다고 한다. WHY? 검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. (SEO 참조). 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용. 의미없고 클래스 이름이 붙여져있거나 그렇지.. 2021. 3. 25.
[HTML] OG Tag(Open Graph Tag) 이란? OG Tag 페이스북에서 만들어진 OG Tag는 Open Graph Tag의 줄임말로, 어떤 링크를 공유할 때 어떤 모습으로(미리보기의 제목, 설명, 이미지 등) 보여주고 싶은 지 지정하는 Tag이다. 사용하는 이유 웹 크롤러 또한 하나의 웹 프로그램이기 때문에 HTML 사이트의 3줄 요약이 무엇인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 어렵다. 사용법 References velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 blog.ab180.co/posts/open-graph-as-a-website-preview developers.fac.. 2021. 3. 23.
[MySQL] LAST_INSERT_ID() 사이트의 자유게시판의 게시글을 작성 할 때, 다중파일을 업로드할 수 있게 해주었기에 board 테이블과 file 테이블을 따로 만들어 관리를 하였다. 그럼 서비스에서 이와 같이 게시물을 추가하고 게시물ID를 가져와 그 게시물 ID에 맞게 파일을 넣어줘야 하는데, 게시물 ID는 DB에서 Auto-Increment로 자동생성이 되기 때문에 mapper에서 selectKey를 지정해 주지 않으면 파일 추가 할 때 에러가 나는 것을 확인하였다. oracle을 사용 할때는 Auto_Increment이 없기 때문에 시퀀스를 만들어 주었고, Mapper에서 insert하기 전, 게시판ID가 Null이면 1을 KeyProperty에 넣어줬었다. 이걸 Mysql에서 어떻게 처리할 지 찾아보다가, LAST_INSERT_I.. 2020. 10. 18.
[JSP] 스크립틀릿 Session NPE 체크 프로젝트 사이트의 공통 헤더부분이 다음과 같다. Login과 Register(회원가입) 부분이 항상 공통으로 들어가는데, 로그인이 되었을 때는 세션에 아이디를 체크해서 NULL이 아닐 경우 마이페이지와 로그아웃으로 바꾸려고 하였다. 그러려면 HTML에서 IF문을 써줘야 되는데.. 어떻게 하지 생각하다가 스크립틀릿을 사용해야 겠다고 생각했다. 맨 처음, NULL 체크를 ISEMPTY 함수를 이용해서 하였는데 500에러가 뜨면서 NPE가 발생하였다. 그래서 구글링 하다가 다음 글을 발견하고 (user_id == NULL) 바꿔서 NULL체크를 해서 해결하였다. java.lang.NullPointerException 문제 jsp에서 session 사용 시 java.lang.NullPointerException.. 2020. 10. 15.
[Mac/MySQL] utf8 설정 / Mac & Window 데이터 방식 내 노래 파일들이 있는 fileDTO의 파일명을 불러올 때, 한글로 된 트랙들만 오디오 태그로 불러왔을 때, 재생이 안되는 현상을 경험하였다. 콘솔창을 확인해보니 한글이 깨지는 현상이 발생하였다. mysql db에 저장할 때 한글이 깨진다고 생각하였고, mysql 캐릭터 셋을 utf8로 바꿔주는 작업을 하였다. 구글에 찾아보니 아래와 같이 파일을 복사하라고 나와있다. 파일 복사 $ sudo cp /usr/local/mysql/support-files/my-default.cnf /etc/my.cnf 하지만 support-files 디렉토리에 my-default.cnf가 존재하지 않았다. 그래서 직접 만들어 주기로 했다. cd /usr/local/mysql/support-files 로 디렉토리에 접근하여, .. 2020. 10. 14.
[Spring] service, serviceImpl 구분 이유 / @Resource @Autowired @Inject 차이점 왜 항상 Service는 Service를 만들고 Impl 로 구현하는가 그 해답을 정리하는데 도움이 되는 블로그가 있어 참고 하였다. 내가 내린 한 줄 요약 "Service는 항상 변화 할 여지가 있고 변화에 대응하기 위해 모듈화하여 재사용에 용이하게 만들었다." MVC 구조에서 service와 serviceImpl 이제는 JSP 개발시 MVC 패턴으로 작업하는게 당연시 되고있다. MVC패턴이란 화면에 보여줄 view 에 대한 작업, DB에서 조회 혹은 DB에 저장할 내용을 중간에 가공, 처리하는 비즈니스로직, DB에 연결�� multifrontgarden.tistory.com @Resource @Autowired @Inject 차이점 이것도 항상 궁금했다. 학원에서 배운대로 @Resource를 썼는데,.. 2020. 10. 4.

티스토리툴바