Lyrics

Toolog

<img src="https://image.until.blog/tooearly/article/1727588655799.png" alt="until-1624">아티스트: Cassandra Jenkins 앨범: My Light, My Destroyer 발매일: 24.07.12 장르: 소피스티팝, 인디락 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/Tb-rXdpMiXY">https://youtu.be/Tb-rXdpMiXY</a> * 본 앨범은 9월 22일에 청취했던 앨범입니다.

[TOOLOG] #16 Cassandra Jenkins - My Light, My Destroyer

<img src="https://image.until.blog/tooearly/article/1716209723128" alt="until-102">아티스트: Lizzy McAlpine 앨범: Older 발매일: 24.04.05 장르: 포크, 챔버팝&nbsp;&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/9Ll9kA-avgI">https://youtu.be/9Ll9kA-avgI</a>* 본 앨범은 4월 13일에 청취했던 앨범입니다.

[TOOLOG] #2 Lizzy McAlpine - Older

<img src="https://image.until.blog/tooearly/article/1727588253886.png" alt="until-1618">아티스트: Umi 앨범: Talking To The Wind 발매일: 24.01.19 장르: 얼터알앤비, 알트팝 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/U9rGgfC1aoY">https://youtu.be/U9rGgfC1aoY</a> * 본 앨범은 6월 2일에 청취했던 앨범입니다.

[TOOLOG] #10 Umi - Talking To The Wind

<img src="https://image.until.blog/tooearly/article/1727588331057.png" alt="until-1619">아티스트: Stasys 앨범: The Pilgrimage 발매일: 24.04.26 장르: IDM, 뉴로합 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/LZ0tq7W52XI">https://youtu.be/LZ0tq7W52XI</a> * 본 앨범은 6월 13일에 청취했던 앨범입니다.

[TOOLOG] #11 Stasys - The Pilgrimage

<img src="https://image.until.blog/tooearly/article/1727588600089.png" alt="until-1623">아티스트: Diverse System 앨범: Stream Palette 5: Ranked 발매일: 24.04.28 장르: EDM <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/_9EW5PzLVvk">https://youtu.be/_9EW5PzLVvk</a> * 본 앨범은 8월 10일에 청취했던 앨범입니다.

[TOOLOG] #15 Diverse System - Stream Palette 5: Ranked

Workthrough for prev. projectForm Basics : Controlled Input &amp; UnControlled InputReact &amp; FormsReact-Hook-FormZod + ResolverForm Component &amp; UI Componentfourth project : React-Hook-Form Proj

#4. Form handling in React

<img src="https://image.until.blog/tooearly/article/1727588534479.png" alt="until-1622">아티스트: LØLØ 앨범: Falling For Robots &amp; Wishing I Was One 발매일: 24.06.07 장르: 파워팝, 얼터너티브락 <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/6ZU6GL85u8I">https://youtu.be/6ZU6GL85u8I</a> * 본 앨범은 8월 4일에 청취했던 앨범입니다.

[TOOLOG] #14 LØLØ - Falling For Robots & Wishing I Was One

<img src="https://image.until.blog/tooearly/article/1716091642914" alt="until-83">아티스트: Flowers For Daryl 앨범: A Blessing In Disguise 발매일: 23.01.23 장르: 슈게이징, 얼터너티브락<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/s4ICUXxBh08">https://youtu.be/s4ICUXxBh08</a>* 본 앨범은 4월 6일에 청취했던 앨범입니다.

[TOOLOG] #1 Flowers For Daryl - A Blessing In Disguise

<img src="https://image.until.blog/tooearly/article/1727587919714.png" alt="until-1615">아티스트: kontrakt 앨범: Edge of Hope Pt.1 발매일: 24.02.27 장르: 뉴로펑크, 드럼앤베이스<a target="_blank" rel="noopener noreferrer nofollow" href="https://kontrakt.bandcamp.com/album/edge-of-hope-pt-1">https://kontrakt.bandcamp.com/album/edge-of-hope-pt-1</a> * 본 앨범은 5월 5일에 청취했던 앨범입니다.

[TOOLOG] #7 Kontrakt - Edge of Hope Pt.1

웹 개발 세계에서 작은 기능들이 사용자 경험에 큰 차이를 만들 수 있다. 그 중 하나가 "맨 위로" 버튼이다. 이 간단하면서도 효과적인 도구는 사용자가 긴 콘텐츠가 많은 페이지에서 특히 지루한 스크롤 없이 빠르게 페이지 상단으로 돌아갈 수 있게 해준다. 이 글에서는 <code spellcheck="false">Astro</code>프로젝트에서 <code spellcheck="false">Tailwind CSS</code>와 <code spellcheck="false">daisyUI</code>를 사용하여 세련되고 접근성 높은 "맨 위로" 버튼을 구현하는 방법을 정리해보려고 한다.아래와 같은 코드로 해당 버튼을 구현할 수 있다.<img src="https://image.until.blog/woongsnote/article/1719763602869" alt="until-689">더 자세한 내용은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.woongsnote.dev/blog/enhance-ux-add-back-to-top-button-astro">여기</a>에서 확인할 수 있다. :)

Tailwind CSS와 daisyUI를 활용하여 Astro 프로젝트에 세련되고 접근성 높은 "맨 위로" 버튼을 구현하는 방법 학습하기

Astro에서 "맨 위로" 버튼 추가로 사용자 경험 향상하기

<blockquote><ul class="tight" data-tight="true"><li>Spring JAVA 버전은 17이 제일 깔끔함</li><li>project Facets &gt; Java (Version 1.6) &gt; 11로 변경<ul class="tight" data-tight="true"><li>properties → java compiler에서 11로 바꾸면 됨</li></ul></li><li>스프링 두 가지 XML 파일<ol class="tight" data-tight="true"><li>전체 설정 파일</li><li>서블릿 파일 : &lt;WEB&gt; 설정</li></ol></li></ul></blockquote><h3>설치 (아래 링크 참고)</h3><a target="_blank" rel="noopener noreferrer nofollow" href="http://thedata.kr/down/spring4/01.spring-setup.html">http://thedata.kr/down/spring4/01.spring-setup.html</a><h3>회원가입 &amp; 로그인</h3><ol class="tight" data-tight="true"><li>패키지 새로 생성 : hello2 만들기<img src="https://image.until.blog/hyerin1225/article/1718775387242" alt="until-573"><img src="https://image.until.blog/hyerin1225/article/1718775635460" alt="until-575"></li></ol><ol class="tight" data-tight="true" start="2"><li>Version 설정<ul class="tight" data-tight="true"><li>Package &gt; Properties<ul class="tight" data-tight="true"><li>java compiler<img src="https://image.until.blog/hyerin1225/article/1718775742761" alt="until-576"></li><li>Project Facets : Dynamic Web Module / Java 설정<img src="https://image.until.blog/hyerin1225/article/1718775756954" alt="until-577"></li></ul></li></ul></li><li>pom.xml 설정<ul class="tight" data-tight="true"><li>hello.pom을 복사해서 hello2.pom에 갖다 붙여넣기<ul class="tight" data-tight="true"><li>mybatis, lombok, jstl, springjdbc, mysql, DB tool 등</li></ul></li></ul></li></ol><ol class="tight" data-tight="true" start="4"><li>web.xml 설정<ul class="tight" data-tight="true"><li>Tomcat이 제일 먼저 읽는 파일로 한글 필터 작업 해줘야 함<pre spellcheck="false"><code>&lt;filter&gt;
	&lt;filter-name&gt;encodingFilter&lt;/filter-name&gt;
	&lt;filter-class&gt;org.springframework.web.filter.CharacterEncodingFilter&lt;/filter-class&gt;
	&lt;init-param&gt;
		&lt;param-name&gt;encoding&lt;/param-name&gt;
		&lt;param-value&gt;UTF-8&lt;/param-value&gt;
	&lt;/init-param&gt;
	&lt;init-param&gt;
		&lt;param-name&gt;forceEncoding&lt;/param-name&gt;
		&lt;param-value&gt;true&lt;/param-value&gt;
	&lt;/init-param&gt;		
&lt;/filter&gt;
	
&lt;filter-mapping&gt;
	&lt;filter-name&gt;encodingFilter&lt;/filter-name&gt;
	&lt;url-pattern&gt;/*&lt;/url-pattern&gt;
&lt;/filter-mapping&gt;</code></pre></li></ul></li></ol><ol class="tight" data-tight="true" start="5"><li>root-context.xml 파일에 DB 설정<ul class="tight" data-tight="true"><li>bean : spring이 new 해서 만든 것 (= class 생성)</li></ul><pre spellcheck="false"><code>&lt;bean 
	id="dataSource" 
	class="org.apache.commons.dbcp2.BasicDataSource"
	destroy-method="close"&gt;
	&lt;property name="driverClassName" value="com.mysql.cj.jdbc.Driver" /&gt;
	&lt;property name="url" value="jdbc:mysql://localhost:3306/kdigital?serverTimezone=UTC" /&gt;
	&lt;property name="username" value="root" /&gt;
	&lt;property name="password" value="rpass"&gt;&lt;/property&gt;	
&lt;/bean&gt;

&lt;bean 
	id="sqlSessionFactory" 
	class="org.mybatis.spring.SqlSessionFactoryBean"&gt;
	&lt;property name="dataSource" ref="dataSource"&gt;&lt;/property&gt;
	&lt;property name="configLocation" value="classpath:/sqlmap/mybatis-config.xml"&gt;&lt;/property&gt;
&lt;/bean&gt;
&lt;bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate"&gt;
	&lt;constructor-arg index="0" ref="sqlSessionFactory"&gt;&lt;/constructor-arg&gt;
&lt;/bean&gt;</code></pre></li><li>폴더 생성<ul class="tight" data-tight="true"><li>views 하위에 member 폴더 생성<img src="https://image.until.blog/hyerin1225/article/1718776241747" alt="until-580"></li><li>DB에 테이블이 만들어져야 DTO가 만들 수 있음<pre spellcheck="false"><code>CREATE TABLE `member` (
 `id` varchar(50) NOT NULL,
 `pw` varchar(50) NOT NULL,
 `name` varchar(50) NOT NULL,
 `age` int NOT NULL DEFAULT '0',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;</code></pre></li></ul></li><li>DTO 생성 후 @Data 생성 (lombok)<img src="https://image.until.blog/hyerin1225/article/1718776329849" alt="until-581"></li><li>Controller에 스프링 설정<img src="https://image.until.blog/hyerin1225/article/1718776358827" alt="until-582"></li><li>파일 준비<ul class="tight" data-tight="true"><li>MemberController<pre spellcheck="false"><code>package com.spring.hello2.controller;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
 
import com.spring.hello2.service.MemberService;
 
@Controller
public class MemberController {
	
	MemberService service;
	
	@Autowired
	public MemberController() {
		System.out.println("MemberController()");
 		this.service = service;
 	}
}</code></pre></li></ul><ul class="tight" data-tight="true"><li>MemberDAO<pre spellcheck="false"><code>package com.spring.hello2.dao;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class MemberDAO {
	
	SqlSessionTemplate sqlSession; //root-context.xml에서 bean으로 생성함
	
	@Autowired
	public MemberDAO() {
		System.out.println("MemberDAO()");
		this.sqlSession = sqlSession;
	}
}</code></pre></li><li>MemberDTO<pre spellcheck="false"><code>package com.spring.hello2.dto;

import lombok.Data;

@Data
public class MemberDTO {
	String id;
	String pw;
	String name;
	int age;
}</code></pre></li><li>MemberService<pre spellcheck="false"><code>package com.spring.hello2.service;

public interface MemberService { }</code></pre></li><li>MemberService.impl<pre spellcheck="false"><code>package com.spring.hello2.service.impl;

import org.springframework.stereotype.Service;

import com.spring.hello2.dao.MemberDAO;
import com.spring.hello2.service.MemberService;

@Service
public class MemberServiceImpl implements MemberService {
	
	MemberDAO dao;
	
	public MemberServiceImpl() {
		System.out.println("MemberServiceImpl()");
		this.dao = dao;
	}
}</code></pre>=&gt; 이대로 실행하면 mapper 파일이 없어 오류가 나므로 mapper 파일 생성해줘야 함<img src="https://image.until.blog/hyerin1225/article/1718777256496" alt="until-591"></li><li>mybatis-config<pre spellcheck="false"><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
&lt;!DOCTYPE configuration
 PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
 "https://mybatis.org/dtd/mybatis-3-config.dtd"&gt;
&lt;configuration&gt;
 
 &lt;mappers&gt;
 &lt;mapper resource="/sqlmap/mapper/member-mapper.xml"/&gt;
 &lt;/mappers&gt;
&lt;/configuration&gt;</code></pre></li><li>member-mapper.xml<pre spellcheck="false"><code>&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
&lt;!DOCTYPE mapper
 PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
 "https://mybatis.org/dtd/mybatis-3-mapper.dtd"&gt;
&lt;mapper namespace="member"&gt;
	&lt;insert id="insert" parameterType="MemberDTO"&gt;
	&lt;![CDATA[
		insert into book(id, pw, name, age) values (#{id}, #{pw}, #{name}, #{age})
	]]&gt;
	&lt;/insert&gt;

	&lt;update id="update" parameterType="MemberDTO"&gt;
 &lt;![CDATA[
 update member set pw = #{pw}, name = #{name}, age = #{age}
 where id = #{id}
 ]]&gt;
	&lt;/update&gt;

	&lt;delete id="delete" parameterType="MemberDTO"&gt;
	&lt;![CDATA[
		delete from member where id = #{id}
	]]&gt;
	&lt;/delete&gt;

	&lt;select id="list" resultType="MemberDTO"&gt;
	&lt;![CDATA[
		select id, pw, name, age
		from member
		where 1 = 1
	]]&gt;
	&lt;/select&gt;

	&lt;select id="detail" parameterType="MemberDTO" resultType="MemberDTO"&gt;
	&lt;![CDATA[
		select id, pw, name, age
		from member
		where id = #{id} 
	]]&gt;
	&lt;/select&gt;

&lt;/mapper&gt;</code></pre></li></ul></li><li>home.jsp 경로 설정<pre spellcheck="false"><code>&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt;
&lt;%@ page session="false" %&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Home&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;
	Member
&lt;/h1&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="member/list"&gt;List&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="member/create"&gt;Create&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="member/login"&gt;Login&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="member/logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre></li></ol>

Spring JAVA 버전은 17이 제일 깔끔함project Facets &gt; Java (Version 1.6) &gt; 11로 변경properties → java compiler에서 11로 바꾸면 됨스프링 두 가지 XML 파일전체 설정 파일서블릿 파일 : &lt;WEB&gt; 설정설치 (아래 링크 참고)http://thedata.kr/down/spri

Spring

<img src="https://image.until.blog/tooearly/article/1727587664510.png" alt="until-1612">아티스트: Cute Girls Doing Cute Things 앨범: LoveㆍMe 발매일: 24.04.22 장르: 일렉트로하우스, 카와이 퓨처 베이스<a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/MAqZCaLWyKQ">https://youtu.be/MAqZCaLWyKQ</a>* 본 앨범은 4월 28일에 청취했던 앨범입니다.

[TOOLOG] #5 Cute Girls Doing Cute Things - LoveㆍMe