티스토리

주니어 개발자의 성장기

검색하기

블로그 홈

주니어 개발자의 성장기

pygmalion0220.tistory.com/m

개발 기록

구독자: 2

방명록 방문하기

주요 글 목록

주니어 개발자가 직접 만든 Java 문제집 1편 개발자로 성장하며 얻은 아이디어로 만들어봤어요! 혹시 부족한 점이나 잘못된 부분이 보이면 댓글로 알려주시면 정말 감사하겠습니다 🙏 문제는 꾸준히 업데이트할 예정입니다 🌊정답은 "더보기+"를 클릭하면 확인할 수 있어요! 문제 1다음 설명 중 틀린 것은?Java에 기본 자료형(Primitive Type) 종류는 8개다.new int[2]는 기본 자료형(Primitive Type)이다.기본 자료형(Primitive Type)은 null을 할당할 수 없다.Java 에서 각 기본 자료형(Primitive Type)에 대응되는 래퍼 클래스(wrapper class)가 존재한다.기본 자료형은 값 자체를 저장하고, 참조 자료형은 객체의 주소를 저장한다.더보기2번배열은 참조 자료형(Reference Type)이다. .. 공감수 1 댓글수 1 2025. 1. 18.
[Java Wrapper Class] 래퍼 클래스 파헤치기 Wrapper Class란?Java에서 데이터 타입은 크게 기본형(primitive type)와 참조형(reference type)으로 나뉜다.기본형은 int, char, boolean, float 등이 있고, 참조형은 기본형을 제외한 모든 타입을 말한다. Wrapper Class는 기본형에 이것저것 기능을 추가해서 포장한 객체다.“객체로 포장했다”는 의미는 단순한 기본형을 버라이어티하고 so easy~ 하게 사용할 수 있다는 뜻!먼저, Wrapper Class 종류부터 차근차근 알아보자. Wrapper Class 종류기본타입래퍼 클래스byteByteshortShortintIntegerlongLongfloatFloatdoubleDoublecharCharacterbooleanBooleanJava Wrapp.. 공감수 1 댓글수 1 2024. 6. 13.
맥북 유저 필수 무료 앱! 마우스 없이 앱 실행을 더 빠르고 쉽게, HotKey! 안녕하세요!오늘은 맥북을 사용하는 여러분이 절대 놓치면 안 될 필수 앱을 소개하려고 합니다. 혹시 아직도 앱 실행할 때 마우스를 쓰고 계신가요? click! click!?일단 마우스는 던져 던져!이 앱만 있으면 마우스 없이도 모든 앱을 실행할 수 있어요. 그것도 무료로!! 🎉 그건 바로 HotKey아래 링크에서 다운받아보세요!https://apps.apple.com/kr/app/hotkey-app/id975890633?mt=12 ‎HotKey App‎With HotKey You can define keyboard shortcuts to launch Applications or to open folders in Finder. Another way is to open the Apps by selectin.. 공감수 0 댓글수 0 2024. 5. 25.
[Java Immutable Object] 불변 객체 파헤치기 개념불변 객체(Immutable Object)는 생성된 후 내부 상태가 절대로 변하지 않는 객체를 말한다. 끝! 이름만 들으면 복잡해 보일 수 있지만, 사실 쉽고 간단하다.객체 내부 상태를 변경 불가능하게 설계하고 외부에서 변경하지 않고 사용하면 그게 바로. 불변 객체!“객체를 생성하고 변경 못하면 불편하지 않나?! 개발이 가능한가?!”우선 의문은 잠시 접어두고 불변 객체를 만드는 방법부터 차근차근 알아보자. 레고레고! 불변 객체 만들기// Person classpublic final class Person { private final String name; private final String gender; public Person(String name, String gender.. 공감수 1 댓글수 0 2024. 5. 20.
[Java Basic] 자바 표준 라이브러리 소개 개념개발자들이 프로그래밍할 때 산술 기능, 출력 기능, 통신 기능과 같이 자주 사용되는 필수 기능들을 직접 구현하지 않도록 기본으로 제공되는 라이브러리다.Java 개발 위해 JDK를 설치하면 포함되어 있다. 표준 라이브러리 종류java.lang : 객체, 클래스, 시스템, 스레드, 예외 처리 등과 같은 핵심 기능을 포함한다. 이 패키지는 모든 Java 애플리케이션에서 자동으로 import 된다.java.util : 컬렉션 프레임워크를 포함하여 날짜와 시간 처리, 이벤트 모델, 난수 생성, 기본 유틸리티 클래스 등 다양한 유틸리티 클래스와 인터페이스를 제공한다.java.io : 입력과 출력(I/O) 기능을 담당하며, 파일 읽기와 쓰기, 데이터 스트림 처리 등을 위한 클래스와 인터페이스를 포함한다.java... 공감수 1 댓글수 0 2024. 5. 14.
[Java Final] 키워드 파헤치기 개념final은 변수, 메서드, 클래스의 값을 변경할 수 없게 만든다.한마디로 낙장불입!적절한 위치에 final을 사용하여 코드 작성 의도를 명확히 하고, 의도하지 않은 변화로부터 코드를 보호하는데 도움을 준다.변수, 메서드, 클래스 중 어떤 곳에 사용하느냐에 따라 바꿀 수 없는 제약사항이 다르게 적용되기 때문에, 아래 내용을 통해 한번 자세히 알아보자! 변수(variable)에서 final지역변수(local)public static void main(String[] args) { // 지역변수 final String superpil = "hello"; superpil = "world"; // 컴파일 에러}superpil 변수를 선언하는 동시에 “hello”를 초기화했다.다음 "world"를 재할당.. 공감수 0 댓글수 0 2024. 5. 9.
[Webflux] Chatting App Chapter1 (Vue + Rsocket) Introduction 이전 글([WebFlux] RSocket Basic)에서 WebFlux에서 RSocket 기초 사용법을 알아보았다. 이번에는 WebFlux + RSocket를 이용한 간단한 Chatting App을 구현해보자. 기본적인 기술 스택은 Server는 WebFlux, Front는 Vue로 구현한다. 아직 RSocket과 WebFlux를 공부하고 있는 단계라 깊은 지식을 가진 상태는 아니지만 지금까지 공부한 내용을 공유하고 싶어 이번 글을 작성한다. [Webflux] RSocket Basic Introduction 어렴풋 기억을 되살려 보면 RSocket과 첫 만남은 Stack Overflow에서 시작되었다. Java로(정확하게 말하면 Spring Boot)로 채팅 서버를 구축하기 위한 .. 공감수 0 댓글수 0 2022. 4. 10.
[Webflux] RSocket Basic Introduction 어렴풋 기억을 되살려 보면 RSocket과 첫 만남은 Stack Overflow에서 시작되었다. Java로(정확하게 말하면 Spring Boot)로 채팅 서버를 구축하기 위한 기술 스택을 찾던 중 우아한 형제들 기술 블로그를 보게 되었다. 역시나 우아한 형제들은 내가 지금까지 듣도 보도 못한 기술들을 나열했다. 그중 Spring Webflux가 핵심 키워드로 판단하고 구글링을 오지게 했다. (진짜 정말 오지게 했다.😶🤤😐) 오지게 한 결과 Spring Webflux로 Websocket을 사용한 채팅 서버를 구축한 몇몇의 예제를 봤고 따라 해 봤지만 Webflux의 프로그래밍 방식이 익숙지 않아 삽질의 연속이었다. 지속적인 삽질로 배추를 세는 단위인 “포기”를 선언하려다 Stack .. 공감수 1 댓글수 0 2022. 4. 3.
[디자인 패턴] Singleton Pattern 시작하기 이번 프로젝트를 시작하면서 서버에서 서버(server to server)로 데이터를 주고받아 처리하는 작업이 필요했다. 특별히 인증서버를 두지않고 요청할 서버에 토큰을 받아 인증받는 정책이었다. 해당 서버에서 토큰을 받기 위해 계정 정보, 도메인 정보와 같은 필수 정보들을 db에서 한 번만 조회 후 변수에 담아 재사용하고 싶었다. 처음에는 단순하게 static에 담아 재사용 생각을 했는데 문득 싱글톤 패턴이 생각나서 지금 같은 경우에 적용하기 좋은지 생각하게 되었다. 예전에 가볍게 스쳐 지나가듯 공부를 해서 이번에 제대로 알아보려 한다. 개념 싱글톤은 이름 그대로 객체(인스턴스)를 한 개만 생성하는 패턴이다. 즉, 유일무이 하게 단 하나의 객체 생성해서 모두가 공용으로 사용한다. 굳이…!? 왜 .. 공감수 0 댓글수 0 2022. 3. 27.
[Spring Boot] Jackson 기본 개념과 LocalDateTime변환 이슈 개념 Jackson을 공부하기 앞서 기본적인 용어를 알아보자. 직렬화 객체를 문자열로 변환하는 과정 역직렬화 반대로 문자열에서 객체를 변환하는 과정 Jackson은 위에서 언급한 직렬화, 역직렬화를 도와주는 자바 라이브러리다. Jackson이 객체를 문자열로 변환해서 응답해주면 응답받은 곳은 문자열의 형태가 Json포맷을 하고 있어 해당 문자열을 받은 쪽은 Json으로 파싱이 가능한 것이다. 예제에 앞서 spring boot로 프로젝트를 생성하자. 다행스럽게 spring boot의 경우 Jackson라이브러리를 기본으로 제공한다. 즉 dependency를 따로 주입할 필요가 없다. (spring boot버전 따라 다를 수 it다!) 예제 Object to Json 기초 예제 자바 객체에서 Json포맷 형.. 공감수 1 댓글수 0 2022. 3. 21.
[디자인 패턴] Observer Pattern 시작하기 간간이 패턴 공부를 했지만 Observer패턴은 처음 들어봤다.😂 채팅 서버를 한번 구축해 보고 싶다는 생각에 서치하던 중 Spring Webflux, RxJava를 접하게 되었고 Webflux로 채팅서버를 만들어보면 좋겠다는 생각에 공식문서나 기술문서를 이리저리 찾아봤는데 "발행자, 구독자"라는 키워드가 무진장 나오면서 Observer패턴이 등장했다. 걍 무시하고 Webflux지식을 줍줍 할랬는데..... 도통 뭔말인지 이해가 되질 않아 기초인 Observer패턴을 공부하게 되었다. 패턴을 공부한다고 Webflux를 자세히 알지는 못하겠지만 "어느정도 플로우는 알겠지!"라는 느낌적인 느낌으로 공부해 본다. 레고레고! 개념 먼저 위키백과에서 설명하는 옵저버 패턴의 개념을 읽어보자. (습관처럼 위.. 공감수 0 댓글수 0 2022. 3. 13.
[Mysql] Trigger 개념 Trigger란 Trigger가 설정된 테이블에 특정 이벤트가 발생한 경우 미리 설정된 작업이 자동으로 실행되는 것을 말한다. 아래 그림을 보면, Table에 INSERT, UPDATE, DELETE와 같은 이벤트가 발생할 경우 Trigger가 실행된다. Trigger에는 이벤트가 발생되면 동작되는 SQL명령문과 어떤 이벤트에 Trigger가 실행될지를 정의한다. Trigger 속성 및 이벤트 실행 시점 속성 이벤트 발생 시점 기준으로 Trigger 실행 순서를 설정하는 속성이다. 종류는 2가지가 있으며 아래와 같다. AFTER 이벤트 발생 후 Trigger 실행 BEFORE 이벤트 발생 전 Trigger 실행 이벤트 이벤트는 Trigger실행 기준이 된다. 아래의 이벤트가 한개라도 발생된다면 Tr.. 공감수 0 댓글수 0 2022. 3. 6.
템플릿 조각(th:fragment, th:insert, th:replace) 개념 template의 사전적 의미는 견본, 형판이다. 의미를 HTML에 적용하면 특정 영역을 견본처럼 때어낸 독립적인 형태를 말하며, 이런 형태는 견본처럼 여기저기서 사용할 수 있게 한다. 너무 거창하게 설명하는 것 같다....... 아래 그림을 보자. Page1과 Page2에서 공통으로 사용하는 Header영역을 템플릿 조각이다. 이렇게 템플릿 조각을 사용하면 중복되는 코드를 막을 수 있고 Header에 수정사항이 발생해도 공통으로 사용하기 때문에 Page1과 Page2도 동일하게 수정사항이 반영된다. 이제 예제를 보면서 사용방법을 알아보자! 예제 디렉토리 구조 Controller @Controller @RequestMapping("/main") public class MainController { .. 공감수 4 댓글수 0 2021. 12. 29.
[Spring Boot] Rest API 에 Spring Security Form 로그인 적용하기 Rest Api개발 시 Spring Security를 Jwt token방식으로 사용해 왔었다. token방식을 사용하게 되면 신경써야할 사항들이 생긴다. 그래서 Rest Api에 Spring Security Form방식으로 사용할 수 있는 방법을 공부 해보자! 환경 셋팅 및 프로젝트 생성 Spring Boot 2.6.2 Java 1.8 Spring Security 5.6.1 Mysql Mybatis 우선, 기본적인 Spring Boot 프로젝트를 생성한다. 이때 Spring Web, Spring Security, Lombok, DevTool, Mysql connector와 같이 기본적인 dependency와 함께 프로젝트를 만든다. org.springframework.boot spring-boot-sta.. 공감수 2 댓글수 4 2021. 12. 27.
[티스토리] 기본 폰트 변경하기(feat 무료폰트 눈누) 티스토리에 기본 폰트를 바꿔보자! 폰트는 대부분 무료인 눈누와 함께 한다. 폰트 변경 순서는 아래와 같다. 눈누에서 원하는 폰트 찾기 CSS에 찾은 폰트 코드 넣기 순서를 보면 알 수 있듯 폰트 변경은 아주 간단하다. 하지만, 현재 티스토리에 적용된 스킨이 어떤거에 따라 달라질수있다. 나는 티스토리에서 기본으로 제공해주는 Book Club스킨을 사용하고 있는데, 글 본문 폰트가 변경되지 않아 한참 애먹었다. 하지만 난 발자~발자~ 개발자 아닙니까! 사사삭~ 이슈를 해결해버렸지 뭐얌! 여튼 개인이 사용하고있는 스킨에 따라 폰트가 변경되지 않는 영역이 생길 수 있습니다! 자! 쓰짤때기 없는 인트로는 그만하고 폰트를 변경 해보자아~ 폰트 찾기 예쁜 폰트를 무료로 사용할 수 있는 사이트가 있다. 그거슨 바로오 .. 공감수 3 댓글수 2 2021. 11. 5.
[VSCode] 디렉토리(폴더) 구조 보기 방식(전체 나열) 변경 VSCode 디렉토리 구조 보기 방식 변경 VSCode 탐색기 영역에 작업 하고있는 디렉토리 구조를 볼 수 있다. 해당 디렉토리 구조를 보고 재빠르게 현재 작업하고 있는 디렉토리 위치를 알 수 있고 다른 디렉토리 위치도 파악 할 수있다. 하지만 아래와 같이 디렉토리 계층(java/com/example/demo)이 많을 경우 VSCode에서는 한줄로 표시 된다. 생각보다 한눈에 디렉토리 구조를 파악하기 힘들다. 설정을 변경해서 디렉토리 나열 방식을 변경 해보자. VSCode 설정에 가서(단축키: Ctrl + ,) Compact Folders를 검색하자. 기본 default로 Compact Folders가 체크 된 상태다. 해당 체크를 해제하면 아래와 같이 디렉토리구조가 나열되어 표시 된다. 추가로 Ctrl.. 공감수 5 댓글수 0 2021. 9. 7.
[HTTP] Cookie 기본 개념 Cookie 쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 쿠키는 소프트웨어가 아니다. 쿠키는 컴퓨터 내에서 프로그램처럼 실행될 수 없으며 바이러스를 옮길 수도, 악성코드를 설치할 수도 없다. 하지만 스파이웨어를 통해 유저의 브라우징 행동을 추적하는데에 사용될 수 있고, 누군가의 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근권한을 획득할 수도 있다. - 위키백과 - 쿠키에 대한 개념은 위키백과의 설명글을 참고하면 이해.. 공감수 4 댓글수 0 2021. 9. 2.
[Vue] Redirected when going ... via a navigation guard. 모든 에러가 그렇겠지만 이번에 만난 에러도 상당한 답답함을 안겨줬다. 페이지에서 다른 페이지로 이동하여 특정 조건을 체크해서 충족되면 정상 이동하고 불충족되면 다시 이전 페이지로 Redirect하는 기능을 구현하는 중 만났다. 만들고 싶은 기능을 예를 들면 : A페이지에서 B페이지로 router이동을 하는데 query정보가 없거나 잘못된 경우 A페이지로 Redirect하는 것 이다. 해당 기능을 구현하기 위해 라우터가드인 beforeRouteEnter()를 사용하여 B페이지에 접근 시 제일 먼저 query를 체크 한다. query조건이 만족되면 정상적으로 B페이지를 화면에 출력하고 불충족되면 next()를 이용해 A페이지로 Redirect을 한다. 하지만 Redirect를 하게 될경우 오늘 주제인 에러를.. 공감수 3 댓글수 0 2021. 8. 29.
[프로그래밍] SessionStorage 여러 블로그를 보면 LocalStorage와 SessionStorage를 함께 비교하며 이해하기 쉽게 작성된 글이 많다. 처음에는 나도 다른 블로그와 다르지 않게 LocalStorage와 SessionStorage를 비교하면서 덤으로 Cookies까지 곁들이려고 했으나..... 문해력이 턱없이 부족해서.... 쉽지가 않았다.... LocalStorage, SessionStorage, cookies 각각 따로 정리하고 3개 모두 비교하는 정리글을 추가로 작성할 것 이다. 다소 중복되는 내용이 많겠지만 글쓰기 능력이 딸리니깐.... 뭐 어쩔수 없다는 예전부터 LocalStorage와 SessionStorage를 자주 사용했지만 단순 저장소로 생각하고 서로 구분없이 그때그때 마음에 끌리는 저장소를 선택해서 사.. 공감수 1 댓글수 0 2021. 8. 27.
[프로그래밍] LocalStorage LocalStorage 대부분 데이터 저장을 위해 DB를 사용한다. DB만큼 큰 용량을 가진건 아니지만 데이터를 저장할 수 있는 저장소를 브라우저에서 지원한다. 저장소 종류는 LocalStorage, SessionStorage가 있으며, Cookies도 저장소와 같은 역할을 할 수 있다. LocalStorage, SessionStorage는 HTML5에서 추가된 저장소이며, 데이터 저장 시 key=value의 쌍으로 저장 되고 key를 기반으로 데이터를 조회 한다. 보통 localStorage와 sessionStorage를 많이 비교한다. 그도 그럴것이 동일한 기능(데이터 저장)을 가지고 있지만 확연한 차이점을 가지고 있기 때문이다. 이번 편에서는 로컬스토리지만 파헤처본다. 세션스토리지, 쿠키에 대해서는.. 공감수 1 댓글수 0 2021. 8. 24.
[Spring Boot] 파일 다운로드 - 서버에서 다운 시작하기 파일 다운받기 구현 방법은 대표적으로 2가지가 있는 것 같다. 하나는 Front에서 Blob로 변환 시켜 a태그의 download속성을 사용해 구현하는 방법. 하나는 Back에서 byte로 파일을 읽어 응답하면 Front에서 바로 다운받게 하는 방법. 처음에 말한 Front에서 Blob로 변환시켜 다운받는 방법은 IE, Edge, Firefox, Chrome, Safari등 일부 버전에서 지원하지 않는다. 브라우저 지원에 영향을 받지 않는다면 download속성을 사용해 Front에서 작업을 해도 상관 없지만 브라우저 신경을 쓰고 싶지 않다면 Back에서 기능을 구현하는게 좋을 것 같다. Front 파일 다운로드 👉 파일 다운로드 예제를 간단하게 하기 위해 하드코딩으로 파일 다운로드 주소를 hr.. 공감수 3 댓글수 1 2021. 8. 16.
[HTTP] Content-Type Spring boot로 파일 다운로드를 구현 하던 중 Content-Type을 보게 되었다. Content-Type? Content-Type?? Content-Type???????????? 컨텐트 타입???????????? HTTP Header에 Conent-Type을 이래저래 지정하고 File을 Byte으로 읽어서 응답하면 브라우저에서 다운 받을 수 있는 것 같은데...... Content-Type에 대한 개념이 없으니 코드를 봐도 이해할 수 없다. 그래서 먼저 Content-Type을 공부하고 기능 구현을 하기로 했다. 개념 Content-Type이란, HTTP 통신에서 전송되는 데이터의 타입을 나타내는 header정보 중 하나 이다. Content-Type에 따라 데이터를 받는 측에서는 데이터를 어.. 공감수 16 댓글수 1 2021. 8. 16.
[Vue] Dom접근 하기 - $ref, $refs 개념 Vue를 사용하면 직접 Dom요소에 접근할 경우가 거의 없다. 하지만 가끔 Dom을 직접 접근하여 컨트롤 해야 될 경우가 생길 수 있다. (아마 특정 영역에 focus를 주기 위해 많이 사용하지 싶다.) 이때 사용하는 속성이 $ref 이다. (자바스크립트의 querySelector와 같은 역할) $ref 기본기 👉 ref="target" 접근하고 싶은 태그에 ref속성명을 할당 한다. ref는 id처럼 중복이 불가능 하다. 👉 console.log('target', this.$refs.target) $refs로 해당 태그에 접근 할 수 있다. 콘솔에는 가 출력 된다. 👉 mounted(){ ... } $refs는 component가 렌더링 된 후에 접근이 가능하다. 만약, beforeCreate또는.. 공감수 2 댓글수 0 2021. 8. 9.
[Vue] 이벤트 전달 - Props 개념 Vue component와 component의 데이터 전달을 하기 위한 방법 중 하나 이다. Props의 주요 성격은 아래와 같다. component와 component는 부모와 자식 관계가 성립 되어야 한다. 단반향 데이터 흐름을 가진다.(one-way-down binding) component와 component는 부모와 자식 관계가 성립 되어야 한다. // parent component 👉 현재 parent component에 Child component를 불러와 주입 시켰다. 이렇게 parent compoent와 Child component를 부모와 자식 관계로 만들었다. 이제 Props를 사용 할 수 있게 된다. Props는 부모(parent compoent)에서 자식(Child compo.. 공감수 1 댓글수 0 2021. 8. 8.
[Vue] 조건부 렌더링(v-if, v-show) 조건부 렌더링(Conditional Rendering) 개념 조건부 렌더링이란, 조건에 따라 화면에 렌더링 하는 것을 말한다. 조건이 참(true)일 경우 화면에 렌더링되고 거짓(false)일 경우 렌더링 되지 않는다. Vue에서는 v-if, v-show가 조건부 렌더링 역할을 한다. v-if The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value. - vue 공식문서 - vue 공식문서에 따르면, "v-if는 조건에 따라 블록을 렌더링하기 위해 사용되며, true값을 반환할 때만 렌더링 된다." 소개 .. 공감수 1 댓글수 1 2021. 8. 4.
[Vue] input에 숫자만 입력 가능하게 하기 예제 👉 👉 bindNumber(event) { ... } @input로 사용자가 input에 값을 입력 할때 마다 number에 할당한다. event에서 사용자가 입력한 값을 가져올 수 있다. v-model을 사용할 경우 number에 바로 바인딩이 가능하다. 하지만 현재 input이벤트로 bindNumber method를 한번 거친 후 number에 바인딩 한다. 그 이유는 아래에서 확인 가능하다. 👉 number(val){ ... } bindNumber method가 실행 되면, number에 값이 할당 되고, watch에서 number을 감지 해서 내부 로직이 실행 된다. 👉 const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/ 한글, 영어를 감지하는 정규표현식 이다. 정규표현식에 따라 감지하.. 공감수 1 댓글수 1 2021. 8. 2.
[Vue] Naver 간편 로그인 (naverLogin_implicit-1.0.3.js) 구현 "SNS 간편 로그인을 언젠가 한번 만들어 봐야지" 생각은 있었다. 생각은 있었지만 계획은 없었는지 계속 미루고 있다가 만들어야만 하는 경우가 생겨, 자의가 아닌 타의에 의해 만들게 되었다. 그러다 보니 프로세스가 약간 이상할 수 있다. 그래도 SNS 간편 로그인에 대해 많은 공부를 하게 되었다. (Google, Kakao 간편 로그인도 했는데 대부분 프로세스는 같고 용어만 살짝 다르다.) Vue를 이용해 구현한 예제가 많다. 대부분 SDK를 사용한 예제들 이다. 하지만 Naver 개발 문서에 튜토리얼은 naverLogin_implicit-1.0.3.js를 사용한 예제로 짜여있어 참고하여 만들었다. SDK랑 크게 다르지 않는 것 같다. 예제 시퀀스 다이어그램 사용자가 Naver 계정으로 로그인 시 Nav.. 공감수 1 댓글수 2 2021. 7. 31.
[티스토리] 블로그에 TOC( table of contents) 적용하기 (반응형 포함) // 참고 1. tocbot https://www.npmjs.com/package/tocbot 1. https://depast.tistory.com/40#1-html-%EC%88%98%EC%A0%95 // header " target="_blank" rel="noopener">https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"> https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"> // body TOC // script // css .toc-wrap{ z-index: 100; } .toc-wrap-absolute{ position: absolute; right: 1.5re.. 공감수 0 댓글수 0 2021. 7. 25.
[Vue] Watch 개념 While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. - vue공식문서 - 공식문서에 따르면 대부분 "computed 속성이 적합하지만, 사용자가 특정 지정한 값을 감시하는 경우을 위해 w.. 공감수 0 댓글수 0 2021. 7. 21.
[Vue] Lifecycle Hooks Lifecycle Hooks은 Vue에서 아주 중요한 개념 이다. 감히 내가 생각컨데 Lifecycle Hooks를 알고 코드를 작성하는 것과 모르고 코드를 작성하는 것은 큰 차이가 있다. Lifecycle Hooks을 이해하지 않아도 크게 문제 되지 않지만 규모가 커지면서 component간 통신이 다양해 질 수록 Lifecycle Hooks의 이해도가 절실해 진다. (대충 알고 코드 짜다가 분명 "이 왜 안돼노? 아.. 맞는데!" 이런 말 나오면서 칼퇴근은 빠이~ 하게 됨) Lifecycle Hooks을 공부하다 보면 Dom, Virtual Dom 같은 개념이 출몰? 하는데 사뿐히 무시해 버렸다. Dom은 개발 시 수없이 듣고 찾아봐서 어느정도 감은 잡히지만 Virtual Dom은 여전히 감이 잡히지.. 공감수 0 댓글수 0 2021. 7. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.