sosow0212의 등록된 링크

키자드에 등록된 총 885개의 포스트를 확인하실 수 있습니다.

Naver Blog

[스프링부트 프로젝트] #3 스터디 모임 관리 프로젝트 - 서버개발(2)

[스프링부트 프로젝트] #3 스터디 모임 관리 프로젝트 - 서버개발(2) 저번에 이어서 오늘은 게시판을 구현했습니다. 새벽 코딩하려고, 일찍 자고 새벽 1시부터 술술 만드려고 했는데, 뜬금없이 게시판에서 오류가 생겨서 4시간이나 잡고 있었는데 결국 해결을 못했습니다. ㅠㅠ 포기할 건 빨리 포기하는 것도 중요한데, 오기가 생겨서 그러기가 쉽지 않은 것 같네요. 게시판 업로드 및 렌더링 구현 1번 게시물을 클릭하면 위에 사진처럼 모달창이 나옵니다. 모달창에 제목, 내용, 작성자, 작성일자가 표시됩니다. 바닐라js로 구현 했는데, 문제는 1번 게시물에만 모달창 적용이 되고 2번 게시물부터는 모달창이 안 뜹니다. 타임리프로 돌리면서 클.......

원문보기 내부링크
Naver Blog

[스프링부트 프로젝트] #4 스터디 모임 관리 프로젝트 - 서버개발 마무리 및 다듬기

[스프링부트 프로젝트] #4 스터디 모임 관리 프로젝트 - 서버개발 마무리 및 다듬기 오늘은 프로젝트의 서버 개발 기본 기능들을 모두 구현했습니다. 뼈대를 전부 구현해서 이제는 살만 붙이면 프로젝트는 끝이납니다! 앞으로 유저 사진 추가 + 게시판 댓글 구현 + 로직 일부 수정 이 세가지가 남았습니다. 본인이 아니면 게시글 수정/삭제가 불가능합니다, To do list는 타임리프를 통해서 상태에 따라 완료 / 삭제 버튼을 보이게 했습니다.

원문보기 내부링크
Naver Blog

[스프링부트 프로젝트] #5 스터디 모임 관리 프로젝트 - 파일 업로드 및 게시판 댓글 처리

[스프링부트 프로젝트] #5 스터디 모임 관리 프로젝트 - 파일 업로드 및 게시판 댓글 처리 마무리 이번에 프로젝트를 마무리 시켰습니다. 저번에 이어서, 이번주에는 회원정보수정 기능을 추가하고, 유저 이미지 업로드를 구현했습니다. 이미지 업로드 할 때 스프링에서 파일크기 때문에 업로드가 안 되는 문제점이 있었습니다. application.properties 에서 간단하게 코드를 추가해서 고쳤습니다. 이렇게 소스코드 두 줄을 넣으면 50MB까지 올릴 수 있게됩니다. 그리고 게시판에 댓글을 구현했습니다. 한가지 문제점이 있었는데, 게시판 글을 쓰고 클릭하면, 새로운 페이지에서 렌더링 되는 것이 아니라 모달을 띄워서 렌더링 되게 만들어서 댓.......

원문보기 내부링크
Naver Blog

[개발일기 #14] 22년 2월의 개발 공부 / 프로젝트 만들기와 공부 방향의 전환

[개발일기 #11] 22년 2월의 개발 공부 / 프로젝트 만들기와 공부 방향의 전환 이번 달에도 하루도 놓치지 않고 깃허브 커밋과, 백준 알고리즘 문제 풀이를 했습니다. 알고리즘은 사실 요즘 귀찮긴 하고, 지금까지 한게 너무 아쉬워서 128일 스트릭 채워서 뱃지 받으려고 브론즈 문제 풀고 있습니다. 1월달에는 스프링부트로 쇼핑몰과, 모임서비스를 만들었습니다. 프로젝트를 진행하면서 프론트엔드 개발의 중요성을 많이 알게 되었고, 분업의 이유도 알게 되었습니다. 그렇게 현업에서 하는 일과, 이것저것 찾아보고 슬슬 API 개발을 시작해야겠다고 생각했습니다. 지금까지는 컨트롤러에서 요청에 따라 계산하고 View를 리턴해줬는데, 현업에서.......

원문보기 내부링크
Naver Blog

[스프링부트] Junit5 테스트 - 1

[스프링부트] Junit5 테스트 통합 테스트: - 프로젝트 전체를 테스트해서 완벽하다. - Repository, Service, Controller ... 모든게 IoC에 올리고 테스트 - 느리다는게 단점이다. 단위 테스트 : - 관련된 것들만 IoC에 올려서 테스트한다. - 빠르다는게 장점이다. - 서버에서 완전히 돈다고 보장을 할 순 없다. (분리했기 때문)

원문보기 내부링크
Naver Blog

[리액트 + 스프링부트] RestAPI를 이용한 간단한 CRUD 풀스택 개발하기

[리액트 + 스프링부트] RestAPI를 이용한 풀스택 개발하기 (메타코딩) 먼저 리액트 + 스프링부트 조합을 만드는 방법은 여러가지가 있습니다. 저는 스프링부트 프로젝트를 먼저 인텔리제이에서 만들어주고, VSCode에서 아래 사진과 같이 src 폴더에 리액트 프로젝트를 만들어줬습니다. VSCode에서 백엔드 프로젝트 src 폴더 안으로 들어가서 터미널에 'npx create-react-app@latest reactfront' 라고 입력해줬습니다. 지금 'npx create-react-app 폴더명' 이렇게 입력하면 버전 오류가 떠서 latest를 붙여줬습니다. 참고로 최신버전 리액트는 Router 사용법이 조금 다르니 게시물을 참조해주세요. 위에 사진처럼 설정해주시.......

원문보기 내부링크
Naver Blog

13년지기 4명이서 떠난 2박3일 부산 여행기

13년지기 친구들이랑 최근에 부산여행을 다녀왔습니다. 신도시 이사와서부터 만난 친구들이니 엄청 오래 됐네요 ㅋㅋㅋㅋ 한 친구는 운동을 하는 친구라 기숙사에서 나오지도 못해서 대학 다닐 때, 운동하는 친구 빼고 여행을 다녔는데 이번에 졸업해서 다 같이 여행을 떠났습니다. 원래는 제주도 여행을 가려고 했는데, 항공권이 갑자기 너무 비싸져서 포기하고 부산으로 갔습니다 ㅠㅠ 저희는 내일로 3일권을 신청했습니다. 계속 다들 귀찮아서 미루고 미루다가 출발 3일전에 예약했는데, 벌써 KTX는 다 차가지고 ITX 타고 갔습니다. 부산역에서 내려서 첫 끼를 먹으려고 돌아다녔는데, 그냥 멀리 가기도 귀찮아서 대충 부산역 근처에서 밀면을.......

원문보기 내부링크
Naver Blog

[스프링부트] 쇼핑몰 프로젝트 - 3 / 판매자 통계 및 구매내역 구현하기

[스프링부트] 쇼핑몰 프로젝트 - 3 / 판매자 통계 및 구매내역 구현하기 오늘은 판매자 통계 페이지 및 구매자 구매내역 페이지를 구현했습니다. 위 두가지를 만들기 위해서 Entity 하나를 더 만들어 줬습니다. 위에 Entity는, 구매자가 구매를 할 때 생성되어 판매자와 구매자, 그리고 아이템 정보들이 Entity에 담기게 됩니다. Service 단에서도 Entity 연관관계를 이용해서 판매자 및 구매자에 대한 정보를 History 객체에 넣어줬습니다. 판매통계 페이지에서는 위에 사진과 같이, 구매자 명과 아이템 정보에 대해 나오게 되고 구매자 페이지에서는 위에 사진과 같이 판매자명과, 아이템 정보다 나옵니다. 이렇게 history Entity를 만들었으니.......

원문보기 내부링크
Naver Blog

[JPA] @OneToMany 에 대해 알아보기

[Spring JPA] @OneToMany 에 대해 알아보기 * 일대다 == [1:N] - OneToMany에서 One이 연관관계의 주인이다. > 즉 One 쪽에서 외래키를 관리한다. 가장 대표적인 예시인 팀과 멤버로 확인해보겠습니다. Member는 코드상 연관관계 매핑 X, Team 에서는 일대다 단방향 매핑 설정 Team.java Member.java - 실무에서는 이 모델은 권장하지 않음 > 왜냐하면 Team에서는 Member를 가지는데, Member에서는 Team을 참조하지 않아도 되는 설계가 나올 수 있기 때문입니다. - DB 테이블 입장에서 보면, 무조건 일대다에서 다쪽에 외래키가 들어갑니다. - Team에서 members가 바뀌면 DB의 Member 테이블에 업데이트 쿼리가 나간다. =&#.......

원문보기 내부링크
Naver Blog

[의정부 메리골드 주얼리] 의정부역 시민로 금은방, 커플링 맛집 '메리골드 주얼리' 후기

메리골드 주얼리 경기 의정부시 시민로 123 1층 http://naver.me/53XUfajq '의정부 메리골드 주얼리' 경기 의정부시 시민로 123 1층 031-840-7513 주차 가능 [의정부 메리골드 주얼리] 의정부 제품 많은 금은방 '메리골드 주얼리' 후기 안녕하세요. 최근에 의정부에 갔다가, 금품 구매할 일이 있어서 시민로에 위치한 '메리골드 주얼리' 금은방을 갔습니다. 새로 생긴 금은방입니다. 가게가 되게 예쁘고 깔끔합니다. 기존 의정부 금은방은 40대 이상을 타겟층으로 잡은 곳이 많아서 가게 분위기부터가 좀 올드한 느낌도 있고, 패키징이 너무 마음에 안 들었습니다. 그래도 다른 선택지가 없었기에, 지금까지 가격.......

원문보기 내부링크
Naver Blog

[개발일기 #12] 탈모를 유발하는 스프링부트 리팩토링 과정

최근에 스프링부트를 이용해서 쇼핑몰도 만들고, 기존 프로젝트들을 리팩토링하여 더 효율적으로 만들고 있습니다. 최근에 공부한 것중에 th:sec 라는 것이 있는데, 이걸이용해서 세션을 부르기도하고, 권한에 따라 렌더링을 다르게 해주기도 합니다. 기존에 로그인을 하면 메인페이지를 나누는 방법은 다음과 같았습니다. 1. 로그인을 한다 2. Controller에서 권한별로 렌더링을 각각 다 다르게 해준다 (3개의 html 파일이 만들어짐) 위에 방법은 권한이 많아지면 html 파일도 같이 늘어난다는 치명적인 단점이 있어서 다른 방법을 찾다가 th:sec 라는 것을 알게 됐습니다. th:sec을 이용하면 하나의 html 파일만 만들어도 권한별로 볼 수 있게.......

원문보기 내부링크
Naver Blog

[다슈] '클래식 스타일 그루밍토닉' 리얼 후기 / 사용 방법 및 사용 전 후 차이점

본 제품은 '다슈'로부터 제공 받았습니다. 협찬이라고 편향적으로 작성하지 않고, 제가 느낀점 그대로 제품 후기를 작성했습니다. 안녕하세요. 오늘은 다슈에서 나온 '클래식 스타일 그루밍토닉'을 리뷰해보려고 합니다. 저는 평소에 왁스, 포마드, 무스, 스프레이 등등 여러 헤어 제품을 많이 사용합니다. '그루밍토닉' 이라는 것에 대해서는 들어본 적은 있지만, 굉장히 생소했습니다. 제품 사용 전, 찾아본 결과 그루밍토닉은 드라이를 할 때 볼륨과 컬을 잘 넣을 수 있는 헤어 프라이머링 효과가 있고, 드라이 열손상 보호와 영양 부여 효과가 있는 제품입니다. 사용 방법은 아래에서도 나오지만 머리를 감고.......

원문보기 내부링크
Naver Blog

[스프링부트] 쇼핑몰 프로젝트 완성 - 4 / 판매자 통계 마무리 및 오류 해결

[스프링부트] 쇼핑몰 프로젝트 완성 - 4 / 판매자 통계 마무리 및 오류 해결 쇼핑몰 프로젝트를 최종적으로 끝냈습니다. 구현은 지난주에 끝났지만, 각종 버그를 잡고, 통계 페이지를 추가하면서 이번에 최종적으로 마무리가 되었습니다. 위와 같이 판매량 순위도 history Entity JPA 연관관계를 통해서 성공적으로 구현 했습니다. 아이템 업로드 읽기 수정 삭제 구현 및 판매자 및 구매자 역할 구별, 장바구니, 물품 판매, 물품 구매 기능, 통계페이지까지 모두 만들었습니다. 만들면서 세션 구별등 머리가 아픈 문제들도 있었지만, 구글링과 여러 테스트를 하면서 모두 해결했습니다. 이번 프로젝트를 통해서 배운 것도 많지만 특히나 JPA 연관.......

원문보기 내부링크
Naver Blog

[개발일기 #13] 스프링부트 크롤링을 이용한 주식 서비스 기획하기 - 1

최근에 쇼핑몰을 다 만들었습니다. 평소에 평범한 백엔드 개발자로 남고 싶다는 생각보다는, 남들보다 특화된 개발자가 되고 싶다는 생각이 많아서 백엔드 엔지니어링과 빅데이터, 기계학습을 골고루 공부해서 취업하고 싶다는 생각을 했습니다. 그래서 연휴동안 위에 특성을 조금이나마 살려서 뭘 공부하고 뭘 만들까 고민을 해봤습니다. 일단 API 호출이나, 웹 크롤링을 이용한 서비스를 만들까 생각을 했습니다. 그래서 생각한게 주식 관련된 서비스입니다. 일단 기획은 다음과 같습니다. 1. 스프링부트에 Jsoup를 이용하여 네이버 주식 정보를 크롤링해서 데이터 가공을 합니다. 2. 자신의 주식 상황을 웹에 연결하고, 수익률 계산을 합니다.......

원문보기 내부링크
Naver Blog

[스프링부트] 게시판에서 유저 및 관리자 페이지와 본인이 쓴 게시물을 확인하기 (JPA - @ManyToOne, @OneToMany)

[스프링부트] 게시판에서 유저 및 관리자 페이지와 본인이 쓴 게시물을 확인하기 (JPA - ManyToOne, OneToMany) 안녕하세요. 오늘은 기존에 만든 게시판 프로젝트를 가지고 다음과 같은 기능을 구현해보려고합니다. 1. 로그인을 한 유저가 관리자 등급이면, 관리자 페이지로 가고 일반 등급이면, 유저 페이지로 간다. 2. 유저는 본인이 작성한 글을 본인 프로필에서 따로 확인할 수 있다. 위에 두가지를 구현하려면, 스프링 시큐리티에서 로그인 세션을 이용해야하고, ManyToOne, OneToMany를 이용하여 작성글에 유저번호를 추가해야합니다. 먼저 완성본을 보면 일반 유저가 로그인을 하여 게시판을 들어가면 위와 같은 화면이 뜹니다. (현재 &#.......

원문보기 내부링크
Naver Blog

[명지대 스프링 스터디] #6 스터디 5회차 - 쇼핑몰 만들기 설계 - 2

[명지대 스프링 스터디] #6 스터디 5회차 - 쇼핑몰 만들기 설계 - 2 오늘 스터디는 쇼핑몰 만들기 설계 회의만 했습니다. 전체적인 틀은 잡혔고, 가장 중요한 DB 설계를 했는데, 같이 설계를 하다보니 막상 막히는 부분도 많고, 생각해볼 문제들이 훨 많았습니다. 그래도 다들 열심히 잘 참여해주시고, 의견도 잘 내주셔서 다행히도 프로토타입으로 DB설계를 잘 끝냈습니다. https://app.diagrams.net/ 다음주 목요일까지 CRUD 설계 등등 여러가지 뼈대들을 구현해야해서 이번주부터는 빡세게 코딩을 할 것 같습니다! DB와 JPA 공부도 같이 병행하면서 열심히 만들고, 좋은 결과물을 만들고 싶다는 생각이 들었습니다.

원문보기 내부링크
Naver Blog

[스프링부트] 쇼핑몰 프로젝트 - 1

[스프링부트] 쇼핑몰 프로젝트 - 1 지금까지 배운 걸 총 정리해서, 스프링부트 쇼핑몰 프로젝트를 진행중입니다. 오늘은 CRUD 설계와, DB 설계와 유저의 권한에 따라 렌더링을 다르게 해줬습니다. 먼저 회원가입을 통해서 구매자와 판매자를 나눕니다. 먼저 판매자부터 봐보겠습니다. 아래 사진은 판매자로 로그인 후 렌더링 되는 페이지입니다. 위에 사진과 같이 판매자 계정으로 들어왔습니다. 좌측 상단에는 upload 탭과 우측 상단에는 판매관리 탭이 있습니다. upload 버튼을 클릭하면 위에 사진과 같이 상품 등록을 할 수 있습니다. 상품을 등록하고 상품을 클릭하면 위에와 같이 상세 페이지가 나옵니다. 아이템 수정과 아이템 삭제 기능 이.......

원문보기 내부링크
Naver Blog

[스프링] 이용하여 이미지 업로드 및 thymeleaf를 이용하여 이미지 렌더링하기

[스프링] 이용하여 이미지 업로드 및 thymeleaf를 이용하여 이미지 렌더링하기 먼저 파일을 저장할 디렉토리를 만들어줍니다. 이 포스팅에서는 static 디렉토리 아래에 files 디렉토리를 만들어서 진행했습니다. 1. Entity에 두 개의 변수를 추가해줍니다. ( filename, filepath == 파일이름과 경로) 이때 주의할게 있는데, 바로 String 형식으로 만들어주셔야합니다. 왜냐하면, img 파일은 db에 저장하는게 아니라서 이름을 이용해서 파일을 가져오기 때문입니다. 2. 파일을 업로드할 프론트엔드 파일에 가셔서 아래 소스코드처럼 - form에 enctype = "multipart/form-data" 속성을 줍니다. - input에 type=&quot.......

원문보기 내부링크
Naver Blog

[명지대 스프링 스터디] #7 스터디 6회차 쇼핑몰 만들고 피드백 / sec:authorize

안녕하세요 지난번 스터디에서 DB Entity 설계를 하고 이번 스터디까지 CRUD 기능을 만들고, 최대한 가능한 부분까지 만들기로 했습니다. 다들 열심히 만드시고 피드백을 하였습니다. 쇼핑몰을 만들 때, 세션정보를 이용해 프론트엔드 파일을 여러 개 만들고 세션에 따라 다르게 렌더링 해줬는데, 한 분은 파일을 하나만 만드시고, 타임리프와 sec:authorize 기능을 이용하셔서 간편하게 하셨더라고요. 추후에 공부를 하고, 리팩토링을 해봐야겠다고 생각했습니다. 역시 스터디를 하면, 몰랐던 걸 알 수 있어서 너무 좋은 것 같아요. 같은 걸 구현하더라도, 내가 아는 방식보다 더 효율적인 방법을 알게 되는게 정말 스터디의 순기능인 것 같습니.......

원문보기 내부링크
Naver Blog

[스프링부트] 쇼핑몰 프로젝트 - 2 / 장바구니와 결제기능 구현하기

[스프링부트] 쇼핑몰 프로젝트 - 2 / 장바구니와 결제기능 구현하기 안녕하세요. 지난번에 CRUD 설계와 세션별 렌더링 다르게 하는 걸 구현하였습니다. 지난 설계에 이어, 이번에는 상품 사진 업로드 기능과, 장바구니에 상품 담기 및 결제를 구현했습니다. 구매자가 물품을 장바구니에 담고 구매하는 과정에 대해 먼저 보여드리겠습니다. 구매자 계정으로 로그인 했습니다. 상단에 보시면 '현재 잔액'이 보입니다. 참이슬 상품을 들어가서 소주 3병을 장바구니에 담고, 매운 새우깡도 담아보겠습니다. 장바구니를 가면 이렇게 총 결제금액이 나오게 됩니다. 이때 로직을 설계할 때, 상품의 재고보다 많은 양을 장바구니에 넣지 못하게.......

원문보기 내부링크
Naver Blog

[달봉이네 유기견 보호소] 신년 유기견 봉사를 하고나서

안녕하세요. 1월 초에 유기견 봉사를 참여할 기회가 생겨서 바로 신청을하고 지난주에 봉사를 다녀왔습니다. 장소는 화성에 위치한 '달봉이네 유기견 보호소' 입니다. 정확한 장소를 공개하지 않는 이유는, 장소가 공개되면 사람들이 유기견을 버리고 가기 때문이라고 합니다. 유기견 보호소에 조그만한 강아지들은 실내에서 활동을 합니다. 강아지가 엄청나게 많았습니다. 실외에는, 대형견들도 있는데, 일을 하다가 봐서 사진은 찍지 못했습니다 ㅠㅠ 정말 귀여운 강아지들이 많이 있는데, 여기서 다른 조원들은 강아지 목욕도 시키고 청소도 하고, 고양이 쉼터에 사료도 채워줬습니다. 저희 조는 실외에서 봉사를 했는데, 다 쓴 연.......

원문보기 내부링크
Naver Blog

[자바] 백준 14502 연구소 BFS 풀이

[자바] 백준 14502 연구소 BFS 풀이 https://www.acmicpc.net/problem/14502 1. 벽을 3개 세운다 (가능한 모든 경우를 전체 탐색) 2. 바이러스(2)를 퍼뜨린다. (가능한 모든 경우의 수 탐색) 3. 0의 개수를 구한다 ( bfs를 돌려서 바이러스를 퍼뜨리고 안전 지대의 수 반환) 이때 bfs 함수는 반환 값을 0의 개수를 준다. 이 0의 개수를 리턴 받은 recursive 함수는 0의 개수를 Math.max 를 이용해서 리턴 받은 모든 경우의 수에 대한 안전지역(0)의 값을 비교하고 Main 함수로 결과를 리턴해준다. Main 함수에서는 이 리턴 값을 출력하면 끝난다.

원문보기 내부링크
Naver Blog

[스프링 부트] 메시지와 국제화란? (변수명을 쉽게 관리하기)

[스프링 부트] 메시지와 국제화란? (변수명을 쉽게 관리하기) 메시지란? 프로젝트에서 '상품명' 이라는 단어를 모두 '상품이름' 으로 바꾸고 싶다면 모든 화면을 찾아가며 변경해야합니다. 이런 번거로움을 줄이기위해서 메시지 기능을 사용합니다. 메시지 기능은 다양한 메시지를 한 곳에서 관리하도록 하는 기능을 말합니다. 즉 화면을 찾아 변수명을 모두 바꿔야하는 번거로움을, 메시지를 한 곳에 모아서 한번만 바꾸면 전체적으로 바뀌는 기능을 '메시지 기능'이라고 합니다. 이건 어떻게 사용해야할까요? 먼저 resource 디렉토리 안에 있는 application.properties 파일을 통해 아래 소스를 입력해서 메시지.......

원문보기 내부링크
Naver Blog

[개발 일기 #6] 백준 알고리즘 골드 등급

[개발 일기 #6] 백준 알고리즘 골드 등급 안녕하세요. 작년쯤부터 유튜브 강의와 여러 포스팅을 보면서 알고리즘을 공부하고 파이썬으로 백준 알고리즘 시리즈를 풀었습니다. 어쨋거나 쉽든 어려운 문제든 많이 참고를 하며 풀었기에 스스로 풀지는 않아서 전에 풀던 백준 계정의 등급은 의미가 없다고 생각해서 올해 초에 삭제하고 다시 만들었습니다. 그렇게 웹 공부로 몇 달이 지나고 나서 자바 서버 개발자라는 꿈이 생기고 다시 알고리즘 공부를 계획했습니다. 베이스 언어는 자바로 잡고, 자바로 풀기 어려운 건 파이썬을 이용하기로 결심했고 하루 2문제 이상 꾸준히 푸는 것을 목표로 잡았습니다. 아무래도 외부 문서를 참고하며 푸는 건.......

원문보기 내부링크
Naver Blog

너무나도 바쁜 2021년과 소집해제를 앞둔 공익의 삶

엄청 오랜만에 쓰는 일기장이다. 우연히 블로그를 확인하다가 그동안 잊혀져있던 일기장 메뉴를 발견했다. 글을 확인하니 2018년 게시글이 마지막이라니 너무나도 시간이 느린 것 같으면서도 빠르다. 2021년은 나에게 있어서 굉장히 의미가 크다. 취업이라는 문제에 대해 진지하게 고민하게 되고, 프로그래밍의 여러분야 중에서 내가 정말로 좋아하는 걸 찾기위해서 노력을 많이했다. 수능 보기 전보다 더 열심히 산 것 같다. 올해는 이렇게 현실적인 취업 문제에 대해 많이 고민을하고 방향을 잡은 걸로 만족이다! 사회복무요원(공익)으로 일을 한지 벌써 500일이 지났다. 하 오늘로 딱 100일 남았다. 휴가나 뭐 이것저것 쓰면 실 근무는 6~70일.......

원문보기 내부링크
Naver Blog

아이폰13 미니 핑크 후기

안녕하세요. 오늘은 아이폰13 미니 핑크를 리뷰하겠습니다! 아이폰13 핑크 색상은 새로 나온 컬러로 약간 딸기우유 빛이 나는 예쁜 컬러입니다. 아이폰13 미니 포장 또한 비닐 포장이 안 되어있고, 종이 박스에 사진처럼 개봉씰만 붙어있습니다. 이걸 쭉 당기면 제거가 되고, 박스가 열리게 됩니다. 박스를 열고 핸드폰을 꺼내면 이런 예쁜 핑크 컬러의 아이폰이 반겨줍니다. 대각선 카메라 배치로 처음에는 이상했지만, 볼 수록 예쁜 역시나 늘 그랬듯이 애플의 뇌이징 디자인입니다. 색상은 딱 위에 사진 색상과 같습니다. 화이트 컬러에 핑크우유 색 한방울? 떨어진 느낌이고, 실제로 보면 화이트에 더 가깝습니다. 이게 핑크 컬러이지만, 화.......

원문보기 내부링크
Naver Blog

[A.P.C] 아페쎄 NHW81H7 구스다운 숏패딩 후기

안녕하세요! 이번주 토요일에 패딩을 사려고 강남 신세계 백화점에 갔습니다. 아미부터 산드로 스톤아일랜드 등등 여러 브랜드를 들렀는데, 아페쎄 패딩이 가장 예쁘고 퀄리티가 너무 좋아서 구매하게 되었습니다. 구스다운 숏패딩 NHW81H7 제품입니다. 엄청난 크기의 쇼핑백에 담겼습니다! 항상 쇼핑하고 개봉할 때에는 설레는 것 같아요. 진짜 예쁘지 않나요? 색상이 너무 예쁩니다! 옷도 너무 따숩고 가볍고 마감이 너무 좋았습니다. 투웨이 지퍼이고, 지퍼를 잠구고 버튼으로 한번 더 고정할 수 있게 되어있습니다. 주머니는 겉 주머니가 두개있고, 속 주머니가 하나 있는데, 속에 있는 주머니는 얕아서 물건을 넣어도 잘 빠질 것 같아요. 후.......

원문보기 내부링크
Naver Blog

[스프링 MVC] #5 상품 서비스 웹 페이지 만들기 - 상품 등록 처리하기

[스프링 MVC] #5 상품 서비스 웹 페이지 만들기 - 상품 등록 처리하기 web/basic/BasicItemController.java 여기에 아래 코드를 추가해준다. (사용 하려면 V1~V4 중 하나만 사용하면 되고 예를들어 V4를 쓴다면 나머지 코드에서 @PostMapping을 다 주석 처리해줘야 오류 없이 사용 가능하다.) 상품 정보를 입력하고 상품 등록을 클릭하면 위와 같이 상품이 추가됨을 확인할 수 있다. 아직은 데이터베이스 연결을 안하고 메모리를 사용하기 때문에, 새로고침하면 데이터셋들이 모두 날아간다. 따라서 추후에 서버를 리프레쉬 해도 데이터를 남기고 싶다면 데이터베이스를 연동하면 된다.

원문보기 내부링크
Naver Blog

[스프링 MVC] #6 상품 서비스 웹 페이지 만들기 - 상품 수정

[스프링 MVC] #6 상품 서비스 웹 페이지 만들기 - 상품 수정 web/basic/BasicItemController.java 상품수정 주석 아래 부분 코드를 입력하면된다. @GetMapping은 상품수정 페이지를 여는 것이고, @PostMapping 부분은 상품을 수정하는 부분에 대한 코드이다 templates/basic/editForm.html

원문보기 내부링크
Naver Blog

[스프링 MVC] #7 상품 서비스 웹 페이지 만들기 마무리 - 상품 오류, PRG - Post/Redirect/Get, RedirectAttribute

[스프링 MVC] #7 상품 서비스 웹 페이지 만들기 마무리 - 상품 오류 / PRG Post/Redirect/Get, RedirectAttribute 지금까지 만든 프로젝트를 확인해보면 아래와 같은 오류가 발생한다. 상품을 등록하고나서 확인하는 페이지에서 새로고침을 하고 계속을 누르면 아래 사진들처럼 계속 아이템이 생성된다. 왜 이런 오류가 발생하는지 알아보자. 웹 브라우저에 새로고침은 내가 마지막에 한 것을 다시 실행하는 것이다. 그렇다면 위에 오류는 새로고침 할 시에 Post 요청을 다시 하게 되는 것이다. 그래서 상품이 계속 저장되는 오류가 발생한다. 이걸 수정하는 방법은 다음과 같다. web/basic/BasicItemController.java 상품등록 코드 부분에 위에.......

원문보기 내부링크
Naver Blog

[자바] 프로그래머스 해시#1 완주하지 못한 선수

[프로그래머스] 해시#1 완주하지 못한 선수 - 자바 풀이 프로그래머스 해시 문제 #1 완주하지 못한 선수 자바를 이용해서 풀었습니다. https://programmers.co.kr/learn/courses/30/lessons/42576 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길.......

원문보기 내부링크
Naver Blog

[자바] 프로그래머스 해시#2 전화번호 목록

[프로그래머스] 해시#2 전화번호 목록 - 자바 풀이 https://programmers.co.kr/learn/courses/30/lessons/42577 이 문제는 한 번호가 다른 번호의 접두어인지 확인하는 문제입니다. 예를들어 {112, 1125678} 이런 식으로 있으면 첫 번째 요소는 두 번째 요소의 접두어가 됩니다. 이 문제를 해결하기 위해서 HashMap, ContainsKey, substring을 이용했습니다. 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. * 구조대 : 119 * 박준영 : 97 674 223 * 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담.......

원문보기 내부링크
Naver Blog

[자바] 프로그래머스 정렬#1 K번째수

[프로그래머스] 정렬#1 K번째수 - 자바 풀이 다양한 해결법이 있지만, 저는 Arrays.copyOfRange를 이용했습니다. https://programmers.co.kr/learn/courses/30/lessons/42748 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해.......

원문보기 내부링크
Naver Blog

[자바] 백준 18310 안테나 / 시간초과와 다른 소스코드

[자바] 백준 18310 안테나 / 시간초과와 다른 소스코드 https://www.acmicpc.net/problem/18310 이 문제는 너무나도 쉬운 문제여서 자바로 신나게 코딩을 했습니다. 이렇게 코드를 입력하고 실행을 해보니 잘 나와서 백준에 제출 했는데, 결과는 시간초과 무엇이 문제였나 고민을 하다가 내린 결론은 "코드를 바꾸자"였습니다. 제가 푼 방식은 무식하게 다 돌린 방식이지만, 중앙값을 이용하면 더 쉽게 풀리기에 다시 풀어봤으나 결과는 똑같았습니다. 결국 포기하고 구글링을 해본 결과 BefferdReader 을 이용하면 입출력이 더 빨라진다는 것을 알게 되었고 이걸 이용해서 풀으니 성공이 떴습니다.

원문보기 내부링크
Naver Blog

[스프링부트] JPA와 데이터베이스 없이 초간단 게시판 만들기

[스프링부트] JPA와 데이터베이스 없이 초간단 게시판 만들기 안녕하세요. 제가 좋아하는 스프링 개발자 분께서 주로 말씀하신 것이 스프링 실력을 늘리기 가장 좋은 방법은 게시판을 많이 만드는 것이라고 하셨습니다. 실제로 프로젝트를 진행할 때에도, mvc패턴을 기반으로 게시판을 많이 만들어보면 여러가지 상황에 적용하기 좋습니다. 쇼핑몰 구성도 그렇고, 주문의 구성도 그렇고 살짝만 응용해도 다양한 곳의 백엔드 개발을 할 수 있게됩니다. 보통 게시판을 만든다면, 데이터베이스와 연동해서 서버에 데이터가 남게끔 만들지만, 이번에는 데이터베이스 없이 서버 메모리를 사용한 게시판을 만들어보았습니다. spring boot, thymeleaf, l.......

원문보기 내부링크
Naver Blog

[다이어트] 피티 1개월차(8회) 후기 및 변화

[다이어트] 피티 1개월차(8회) 후기 및 변화 드디어 피티한지 1개월이 됐습니다!! 한달동안 피티를 8번 했는데, 인바디 결과의 차이를 말씀드리려고 합니다! 먼저 처음 피티 신청했을 때보다 체지방은 4kg이 빠지고, 근육량은 2.1kg이 늘었습니다. 이 엄청난 변화 아닌가요?? ㅠㅠㅠ 사실 운동을 1년정도 했다가, 6개월정도? 쉬었는데 그래서 근육량이 돌아온 것도 있지만, 엄청난 변화라고 생각합니다. 팔에 이두와 삼두, 어깨 라인이 눈에 보이기 시작했는데, 너무 기쁩니다! 피티를 받으면서 정말 좋은게, 어디가 부족한지 확실히 알게되었습니다. 피티 선생님이 여러가지 운동을 시키시면서, 코어가 약한 것을 알았고, 밸런스도 안 좋은 걸 알.......

원문보기 내부링크
Naver Blog

[FRAGILED 프레자일드] 친환경 신생 브랜드 프레자일드 후드티 NAVY 색상 후기

[FRAGILED 프레자일드] 친환경 신생 브랜드 프레자일드 후드티 후기 안녕하세요. 가을이 다가와서 최근에 후드티 하나를 구매 했습니다. 후드는 크게 입어야 제맛이라고 생각해서 사이즈를 최우선으로 생각하고 찾아봤습니다. 체격이 있어서 웬만한 브랜드 제품은 크게크게 입지도 못해서 여러 브랜드를 찾다가, 친환경 신생 브랜드인 FRAGILED 브랜드를 접하게 됐습니다. 일단 가장 중요한 사이즈부터 확인했는데, XXS ~ XXL 까지 사이즈가 나와서 바로 실측을 확인했습니다. 기장 넉넉하고, 가슴 둘레도 넉넉하고 첫인상은 너무 마음에 들었습니다! 일단 사이즈는 평소에 XL 사이즈를 입었는데, 조금 크게 입고 싶어서 XXL 사이즈를 눈여겨 봤.......

원문보기 내부링크
Naver Blog

[스프링 MVC] #1 상품 서비스 웹 페이지 만들기 - 프로젝트 설정

[스프링 MVC] #1 상품 서비스 웹 페이지 만들기 - 프로젝트 설정 프로젝트 요구사항 분석 1. 상품 도메인 모델 - 상품 ID - 상품명 - 가격 - 수량 2. 상품 관리 기능 - 상품 목록 - 상품 상세 -상품 등록 -상품 수정 스프링부트 프로젝트 설정 방법은 다음과 같습니다. Gradle project, JAVA11, 최신버전 디펜던시는 Spring Web, Thymeleaf, Lombok 이렇게 프로젝트를 생성해줍니다. resources > static 폴더 안에 index.html을 만들고 아래와 같이 입력 서버를 실행하고, localhost:8080 을 들어가면 이렇게 결과가 나온다. 프로젝트 구조

원문보기 내부링크
Naver Blog

[스프링 MVC] #2 상품 서비스 웹 페이지 만들기 - 상품 도메인 개발

[스프링 MVC] #2 상품 서비스 웹 페이지 만들기 - 상품 도메인 개발 itemservice 폴더 안에 domain 패키지를 만들고 또 그 안에 item 패키지를 만든다. item 패키지 안에 Item 이라는 자바 클래스 파일을 만든다. 그리고 item 패키지 안에 itemRepository 라는 자바 클래스를 만든다. 프로젝트 구조

원문보기 내부링크
Naver Blog

[스프링 MVC] #3 상품 서비스 웹 페이지 만들기 - 상품서비스 HTML, Thymeleaf

[스프링 MVC] #3 상품 서비스 웹 페이지 만들기 - 상품서비스 HTML, Thymeleaf 이번 편은 프론트엔드단을 구현합니다. 백엔드 개발을 하고 있으니, 프론트엔드 구현은 부트스트랩을 이용해서 빠르게 합니다. https://getbootstrap.com/docs/5.0/getting-started/download/ 위에 사이트에서 Compiled CSS and JS 를 다운받고, 압축 풀고 bootstrap.min.css 파일을 static > css 디렉토리 안에 넣는다. 그리고 resources > static 안에 html 디렉토리를 하나 만들고 items.html 파일을 만들고 아래 코드 입력 그리고 item.html addForm.html editForm.html 이렇게 html 폴더 안에 위에 html파일들을 넣어주면 프론트엔드 구현이 끝난다. 타임.......

원문보기 내부링크
Naver Blog

Postman 사용하는 이유 및 여러가지 요청 전송 방법 (GET,POST,PUT,DELETE 등등)

Postman 설치 및 여러가지 요청 전송 방법 (GET,POST,PUT,DELETE 등등) 안녕하세요. 이번 포스팅은 포스트맨 Postman 사용법에 대해 말씀드리려고 합니다. 먼저 포스트맨은 주로 API 분석 혹은, 서버로 데이터를 보내서 확인할 때 사용합니다. 저는 자바 스프링으로 백엔드를 공부하는데, CRUD 게시판을 만들 때 혹은 API 만들 때 테스트하는 용도로 정말 많이 씁니다. 처음에 포스트맨을 사용하시는 분들은 이게 뭔지도 잘 모르고, 왜 쓰는지도 잘 모르실 거에요. 저 또한 그저 강의를 보다가 포스트맨을 사용하는데 그때 당시에는 백엔드 개념에 대해 안 잡혀있어서 왜 쓰는지 조차도 모르고, 심지어 전송 방법도 몰랐습니다. 이번 글로 왜 사.......

원문보기 내부링크
Naver Blog

[개발 일기 #5] 2021년 10월의 개발 일기(CS, 면접, 스프링부트 / 자격증 / 번아웃)

2021년 10월의 개발 일기 안녕하세요. 이번 달은 개발 회고록을 조금 일찍 쓰게 되었습니다. 나중에 면접관 분들이 이 글들을 본다 생각하고 열심히 작성 하는데, 막상 쓰다보니 자기 반성도 되고 계획도 열심히 세우게 되는 것 같아서 좋습니다! 먼저 이번달 깃허브 커밋 상황입니다. 이번달은 하루도 빠짐없이 1일1커밋을 성공했습니다! 나중에 1년을 채워서 잔디 밭을 만들면 너무 뿌듯할 것 같아요. 이번 달에 했던 공부는 순전히 스프링부트와 데이터베이스, 그리고 Computer Science, 면접 준비를 했습니다. 스프링부트는 인프런에 올라온 김영한님의 유료 강의를 듣는데, 확실히 너무 잘 가르쳐주시고, 이해가 쏙쏙 되어서 너무 좋았습니.......

원문보기 내부링크
Naver Blog

[스프링 MVC] #4 상품 서비스 웹 페이지 만들기 - 상품 상세 페이지 만들기

[스프링 MVC] #4 상품 서비스 웹 페이지 만들기 - 상품 상세 페이지 만들기 web/basic/BasicItemController.java @GetMapping 을 이용해서 개별 아이템마다 상세 페이지를 확인할 수 있는 컨트롤러 소스 코드를 만들었다. 이때 addAttribute를 이용해서 Item 별로 정보를 basic/item.html 으로 전달한다. item.html에서 전달된 item 정보는 타임리프를 통해서 가공되고 출력된다. basic/item.html 프로젝트 구조

원문보기 내부링크
Naver Blog

[스프링 MVC] #4 상품 서비스 웹 페이지 만들기 - 상품 등록 페이지 만들기

[스프링 MVC] #4 상품 서비스 웹 페이지 만들기 - 상품 등록 페이지 만들기 web/basic/BasicItemController.java 지난 포스팅과 마찬가지로 GetMapping을 이용해 /add 링크로 들어가면 addForm.html을 호출해주는 컨트롤러를 만들었습니다. basic/addForm.html 타임리프로 몇가지만 수정해주면 상품 등록 폼은 굉장히 쉽게 구현할 수 있습니다

원문보기 내부링크
Naver Blog

[다이어트] PT 30회 신청 및 후기

안녕하세요 작년에 헬스장 다니면서 20키로를 뺐습니다. 그 이후에는 한동안 바쁘기도 했고 코로나가 터져서 가기도 그랬는데 거의 반년만에 술도 많이 마시고 음식도 많이 먹어서 살이 다시 10키로나 쪄버려서 운동을 시작했습니다. 작년에는 체지방 감량이 목적이었다면, 이번에는 근육량 증가가 목적이라서 피티를 신청했습니다. 피티를 하면서 느낀 점은 정말 혼자하는 거랑은 차원이 달랐습니다! 혼자 할 때에도 친구 따라서 웨이트를 했는데 자세도 그렇고 효율적으로 하질 못했습니다. 그래서 근육량 증가는 있었어도, 눈에 크게 보이거나 수치적 상승도 적었습니다. 그래서 근육이 잘 안 붙는 체질인가 생각했는데, 피티를 받고나서 운동.......

원문보기 내부링크
Naver Blog

[CS] 인터넷 네트워크 (IP/TCP, UDP, PORT, DNS)

[CS] 인터넷 네트워크 인터넷 프로토콜 스택의 4계층 어플리케이션 계층 - HTTP, FTP 전송 계층 - TCP, UDP 인터넷 계층 - IP 네트워크 인터페이스 계층 IP (인터넷 프로토콜) - 지정한 IP 주소(IP Address)에 데이터 전달 - 패킷(Packet)이라는 통신 단위로 데이터 전달 - IP 패킷 정보 > 출발지 IP, 목적지 IP, 기타... 와 함께 전송데이터를 인터넷 망에 보내면 출발지에서 서버까지 인터넷망에 있는 노드를 통해 전달된다. > 서버에서 다시 데이터를 받았다는 패킷을 똑같은 방법으로 클라이언트한테 전달한다. IP 프로토콜의 한계 - 비연결성 > 패킷을 받을 대상이 없거나, 서비스 불능 상태여도 패킷 전송 - 비신뢰성 > 중간에.......

원문보기 내부링크
Naver Blog

[아이폰13 프로 실버] 아이폰13 프로 실버 구매 후기 / 신지모루 필름 + 링케 투명 케이스

안녕하세요. 10월1일 부터 시작한 아이폰 사전예약 기간에 사전예약을 놓쳐서 저는 양도를 받아서 아이폰을 구매하게 됐습니다! 쿠팡 1차 상품을 양도 받아서 출시일인 오늘 새벽 7시에 아이폰13프로가 도착했습니다! 아이폰 프로 색상이 이번에 다 예뻐서 너무 고민을 했는데, 골드는 너무 오래 써서 질렸고, 그파도 친구들이 많이 사용하다보니 처음과 같은 감흥이 없고, 시에라블루와 실버를 고민하다가 실버를 구매하게 됐습니다! 용량 또한 기존 64기가를 꽉꽉 채워서 128 가도 될 것 같았는데, 혹시 몰라서 여유있게 256기가로 구매하였습니다. 정확히 새벽 6시쯤 도착했습니다! 쿠팡 로켓배송 사랑해요. 박스는 항상 똑같이 생겼습니다! 뒷.......

원문보기 내부링크
Naver Blog

아이폰13프로 케이스티파이 커스텀 후기 및 배송 기간 / 주문제작중 표시

안녕하세요! 아이폰13을 구매하면서 케이스티파이 케이스까지 구매하였습니다! 케이스티파이 케이스는 배송이 느려서 악명 높은데, 실제로 며칠만에 도착했는지 이번 포스팅으로 말씀드리겠습니다. 먼저 케이스티파이 커스텀 케이스를 주문했고, 2021년 10월 1일에 주문했습니다. 주문하고 예상 도착일이 10월 6일 ~ 14일 이라고 나왔는데 이게 배송 올 때까지 계속 '주문 제작 중' 이라고 뜨더라고요. 그래서 해외배송이기도 한데, 아직도 제작이 안 됐다고 생각을 해서 내심 걱정했는데 배송이 어제 8일에 도착했더라고요! 아직도 홈페이지에는 '주문 제작 중' 표시로 나와있습니다. 그래서 결과적으로 10월 1일 주문하고.......

원문보기 내부링크
Naver Blog

[스프링 이론] 서블릿과 JSP의 한계와, MVC패턴의 등장

서블릿으로 개발할 때에는 뷰(VIew) 화면을 위한 HTML을 만드는 작업이 자바 코드 중간중간 섞여서 지저분하고 복잡했다. => 자바 코드 안에 직접 w.write("<html>"); 같은 코드를 씀 JSP를 사용한 덕분에 뷰를 생성하는 HTML작업을 깔끔하게 가져가고, 중간중간 동적으로 변경이 필요한 부분에만 자바 코드를 적용했다. => JSP파일을 따로 만들어서 자바코드와 HTML을 나눠서 편리하게 작성함. 그런데 이 JSP에도 해결되지 않는 몇가지 문제가 있다. 예를 들어 회원 저장 JSP를 설계했을 때, 코드의 상위 대부분은 회원을 저장하기 위한 비즈니스 로직이고, 나머지는 결과를 HTML로 보여주기 위한 뷰 영역이다.......

원문보기 내부링크
Naver Blog

[자바] 자바 스프링 백엔드 개발자 면접 준비 - 스프링

1. Servlet, JSP, JDBC란? - Servlet이란 Container가 이해할 수 있게 구성된 순수 자바 코드로 이루어진 것입니다. (HTML in JAVA) - JSP(Java Server Page)란 HTML 기반에 JAVA코드를 블록화하여 삽입한 것입니다. (JAVA in HTML) - JDBC(Java Data Base Connection)란 JAVA 언어를 통해 데이터베이스에 접근 할 수 있게 해주는 기술입니다. 2. GET, POST, PUT 방식에 대해 설명하시오 * GET 방식 - 주로 웹 브라우저가 웹 서버에 데이터를 요청할 때 사용합니다. - 클라이언트에서 서버로 데이터를 전달할 때, 주소 뒤에 "이름"과 "값"이 결합된 String 형태로 전달합니다. - 주소창에 쿼리 스트링이 그대로 보여서 보안.......

원문보기 내부링크
Naver Blog

[자바] 자바 개발자 백엔드 면접

1. Override / Overload의 차이 - Overriding은 상속 관계에서 같은 기능을 사용하지만 함수 내용이 다른 경우 자식클래스에서 함수를 재정의 하는 것입니다. - Overloading은 리턴타입, 인자개수, 인자타입이 다를 경우에 이름은 같지만 다른 함수 여러개가 있는 것 입니다. 여기서 매개변수의 타입이 다르거나 개수가 달라야하고, return type과 접근 제어자는 영향을 주지 않습니다. 2. Interface, Abstract 란? * Interface 란? - 일종의 추상 클래스입니다. - 오직 추상 메서드와 상수만을 멤버로 갖습니다. - Implements 키워드를 사용합니다. - 상속의 관계가 없는 클래스 간에 서로 공통되는 로직을 구현하여 쓸 수 있도록 합니다. - Ext.......

원문보기 내부링크
Naver Blog

[스프링 부트] 로깅이란?

로깅이란? 스프링 부트 라이브러리를 사용하면 스프링 부트 로깅 라이브러리(spring-boot-starter-loggin)가 함께 포함된다. 스프링 부트 로깅 라이브러리는 기본으로 다음 로깅 라이브러리를 사용한다. 1. SLF4J 2. Logback 여러 라이브러리가 있는데, 그것을 통합해서 인터페이스로 제공하는게 SLF4J 라이브러리이다. 즉 SL4FJ는 인터페이스이고, 그 구현체로 Logback 같은 로그 라이브러리를 선택하면 된다. 실무에서는 보통 Logback을 사용한다. 이렇게 코드를 입력하고 서버를 실행하고 localhost:8080/log-test 로 가보면 ok가 화면에 출력됨을 확인할 수 있다. 콘솔 창에는 아래와 같은 사진이 뜬다. 다시 소스코드를 보면, @Controller는.......

원문보기 내부링크
Naver Blog

[스프링부트] #6 게시판 만들기 - 게시물 삭제

[스프링부트] #6 게시판 만들기 - 게시물 삭제 1. boardview.html 파일을 아래와 같이 수정 2. BoardService.java 를 아래와 같이 수정 3. BoardController.java 를 아래와 같이 수정 서버 재가동후 localhost:8090/board/list 로 들어가서 아무 글이나 클릭하면 아래와 같이 뜬다. 여기서 글삭제를 누르면 글이 성공적으로 삭제된다.

원문보기 내부링크
Naver Blog

[Spring] 스프링 MVC 모델

[Spring] 스프링 MVC 모델 스프링 MVC (Model - View - Controller) 모델이란? - MVC(모델 - 뷰 - 컨트롤러)는 소프트웨어 공학에서 사용되는 아키텍쳐 패턴이고, 주 목적은 Business logic과 Presentation logic을 분리하기 위함이다. - 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비지니스 로직을 서로 영향 없이 쉽게 고칠 수 있다. * 모델 (Model) 컴포넌트 - 데이터베이스와 연동하여 사용자가 입력한 데이터 혹은 사용자에게 출력할 데이터를 다루는 일을 한다. - 여러개의 데이터 변경 작업(추가, 변경, 삭제)을 하나의 작업으로 묶는 트랜잭션을 다루는 일도 한다. - DAO클래.......

원문보기 내부링크
Naver Blog

아이폰13 프로 실버 256 쿠팡 사전예약 후기 / 실패시 출시 당일날 받는 방법 (양도, 성지)

아이폰13 프로 실버 256 쿠팡 사전예약 후기 / 실패시 출시 당일날 받는 방법 안녕하세요! 10월 1일인 오늘 쿠팡에서 아이폰13 사전예약을 했습니다. 1차 성공하신 분은 할인혜택과, 출시 당일날 바로 받을 수 있고, 실패 하신 분들은 날이 밀려서 받으실 거에요. 저는 어제 수강신청 하는 것처럼 시도를 했는데, 실버가 매물이 적어서 실패를 했어요 ㅠㅠ 1차 이후에 사전예약도 다 실패해서 구매해도 10월 말쯤 받는데, 오늘 이런 분들을 위해 꿀팁을 알려드리겠습니다. 1. 중고나라 / 당근마켓 이용하기 - 이 곳에서 양도를 받는 방법이 있습니다. 지금은 사전예약 놓친 사람들이 많기에 사기꾼도 많습니다. 특히 중고나라 같은 경우는 '.......

원문보기 내부링크
Naver Blog

[맥북 M1] MySQL 설치 방법 / MySQL 오류 났을 때 재설치 방법

맥북 인텔버전이 아닌, 맥북 실리콘칩 기준 입니다. (M1칩셋 기준) [맥북 M1] MySQL 설치 방법 / MySQL 오류 났을 때 재설치 방법 안녕하세요. 스프링을 공부하다가, 맥북이 강제재부팅이 됐는데, 맥북을 다시 키고 인텔리제이에서 서버를 돌리니깐 오류가 떴습니다. 구글링해서 찾아본 결과, 데이터베이스 오류가 나서 생긴 문제더라고요. 그래서 데이터베이스를 확인해보니 데이터가 다 날아가있더라고요ㅠㅠ MySQL은 강제종료가 돼서 그런지, 터미널에 mysql.server start 명령어를 입력해도 pid 오류가 떠서 구글링했는데, MySQL 디렉토리도 다르고 내용이 전부 인텔맥에 해당하는 내용이더라고요. 그래서 너무 짜증나서 MySQL을 삭제하고 다.......

원문보기 내부링크
Naver Blog

[스프링부트 시큐리티 #1] 환경설정

1. MySQL에 security 데이터베이스 생성하고, 쿼리에 아래와 같은 소스를 입력하고 한줄마다 컨트롤+엔터를 입력한다. 2. 스프링부트 프로젝트를 Maven 으로 만든다. 디펜던시는 아래와 같다. Spring Boot DevTools, Lombok, Spring Data JPA, MySQL Driver, Spring Security, Mustache, Spring Web 3. resources 폴더에 application.yml 로 이름을 리팩터링해주고 아래 코드를 붙여준다. 4. 메인 패키지 안에 Controller 패키지를 만들고 그 안에 IndexController 자바 파일을 만들어주고 아래와 같은 코드를 입력해준다. 5. templates 폴더안에 index.html 파일을 만들고 아래와 같이 입력한다. 6. 메인 패키지 안에 Config 패키지를 만들어주.......

원문보기 내부링크
Naver Blog

[개발 일기] 웹 개발 프론트엔드와 백엔드 차이, 전공생이 생각하는 쉽게 이해하고 공부하는 방법

[개발 일기] 웹 개발 프론트엔드와 백엔드 차이, 전공생이 생각하는 쉽게 이해하고 공부하는 방법 저의 생각이 담긴 주관적인 글입니다. 글에 오류가 있을 수도 있으니 편하게 피드백 해주세요 :) 쉽게 설명하는 글인만큼 전문성은 떨어지지만 이해하기 쉽게 작성하였습니다. 서두 안녕하세요. 저는 웹 개발을 하는 전공생입니다. 1,2 학년 때에는 학교에서 배우는 C, JAVA 등 언어로 막연히 '코딩'을 하면 취업을 할 수 있다고 생각했습니다. 사실 기본 코딩만 잘해도 코테를 통해 취업을 할 수 있지만, 실무적인 부분을 알면 면접을 볼 때 유리할 수 밖에 없으니 꼭 알고 공부를 해야합니다! 오늘 저는 웹 개발에서 프론트엔드와 백.......

원문보기 내부링크
Naver Blog

[스프링 이론] 스프링 핵심 개념 정리, 좋은 객체 지향 설계를 위한 SOLID 원칙

[스프링 이론] 스프링 생태계 필수 : 스프링 프레임워크, 스프링 부트 선택 : 스프링 데이터, 스프링 세션, 스프링 시큐리티, 스프링 Rest Docs, 스프링 배치, 스프링 클라우드 스프링 프레임워크 핵심기술 : 스프링 DI 컨테이너, AOP, 이벤트, 기타 웹 기술: 스프링MVC, 스프링 WebFlux 데이터 접근 기술: 트랜잭션, JDBC, ORM지원, XML 지원 기술 통합: 캐시, 이메일, 원격접근, 스케쥴링 테스트: 스프링 기반 테스트 지원 언어: 코틀린 그루비 스프링 부트 - 스프링을 편리하게 사용할 수 있도록 지원, 최근에는 기본으로 사용 - 단독으로 실행할 수 있는 스프링 애플리케이션 쉽게 생성 - 톰캣 같은 웹 서버를 내장해, 별도의 웹 서버를 설치.......

원문보기 내부링크
Naver Blog

[스프링부트] Restful API 구현해보기 / GET, PUT, POST, DELETE

* 인텔리제이를 이용해서 진행했습니다 * 환경설정 1. 인텔리제이에서 Maven으로 새 프로젝트 생성 2. porm.xml 파일을 아래 코드로 설정 ( 붙여넣고 윈도우는 CTRL + ALT + L, 맥은 Control + Option + L 로 소스코드 정리해주세요.) 3. 인텔리제이 우측에 Maven 탭 클릭 후, 새로고침 아이콘 클릭 >> 왼쪽에 External Libraries 설치가 됨을 확인할 수 있다. 4. java 폴더 안에 com.아무이름 패키지 하나 만들고, startApp 라는 이름의 자바클래스를 만들어주고 아래와 같은 코드를 입력한다. >> 스프링부트를 실행할 파일을 생성하는 과정입니다. * 오류가 뜨는 경우는, 저랑 폴더 이름이 달라서 그러니깐 확인해보세요! 5. 인텔.......

원문보기 내부링크
Naver Blog

#7 - 다시 시작한 헬스

#7 - 다시 시작한 헬스 작년 6월부터 올해 4월정도까지 운동을 하면서 약 20kg을 감량했다. 한창 운동 했을 때에는 주 5일은 꼭 갔는데, 올해 4월부터 코로나로 한달동안 헬스장이 닫고, 이것저것 바쁘기도 해서 운동을 안하게 됐다. 그러다가 다시 8kg가 쪄버리고, 위기감을 느껴서 이번에 다시 빡세게 해보자는 생각으로 PT를 신청하게 됐다. 확실히 운동을 안하다가 다시 시작하니깐 규칙적으로 가는게 너무 힘든 것 같다 ㅠㅠ 상담을 받으면서 3분할로 나눠 운동하기로 했다. 가슴+팔 / 등+어깨 / 하체 그래서 피티는 주3회 총 50회 신청했는데, 신청한 이유는 친구들과 운동하면서, 제대로 된 자세로 운동을 못하고, 음식 같은 것도 대충대.......

원문보기 내부링크
Naver Blog

포메라니안 분양 후기 - 웰컴 달수

고등학교 1학년 때, 봉구를 분양 받았습니다! 봉구랑 오랜시간 보내면서 동생이 있으면 좋을 것 같다고 생각해서, 토요일에 분양을 받으러 갔습니다. 봉구가 퍼그+잉글리쉬불독 믹스견이라 너무 커서, 손이 많이 가는데, 이번에는 그나마 키우기 쉬운 소형견을 데려오려고 원래 말티푸를 점찍어놨습니다. 그런 생각으로 아빠랑 같이 분양 받으러 갔습니다! 그런데 분양 받으러 간 곳에 우리 달수가 있었는데, 너무 귀엽고 성격도 좋아서 바로 빠져버렸어요 ㅠㅠ 블랙탄 포메라니안인데, 너무 흑곰같지 않나요?? 성격이 어찌나 깨발랄인지 다른 강아지를 타기도하고, 사람을 따라다니기도하고 너무 예쁘더라고요. 그래서 바로 데려왔습니다. 차타.......

원문보기 내부링크
Naver Blog

아이폰13 시리즈 사전예약 방법과, 실패시 빠르게 수령하는 구매방법

아이폰13 시리즈 사전예약 방법과, 실패시 빠르게 수령하는 구매방법 안녕하세요. 기존에 쓰던 아이폰xs 뒷면이 박살나서 핸드폰을 구매하려고 아이폰13을 알아봤습니다. 이번에 아이폰13 시리즈 사전예약 구매 방법과, 사전예약에 실패했을 때 출고 당일부터 +3일 내로 빠르게 받을 수 있는 방법을 알려드리려고 합니다. 당일 수령할 수 있는 구매 방법은 총 두가지로 나뉩니다. 1. 사전예약 (쿠팡, 애플공홈, 하이마트, 위메프 등등) 2. 성지 방문 1. 사전예약 (쿠팡, 애플공홈, 하이마트, 위메프) 21년도 9월 30일 기준으로 사전예약 시작은 10월 1일 00시 00분부터입니다. 사전예약의 장점으로는 출시 당일날 빠르게 받을 수 있다는 장점이 있.......

원문보기 내부링크
Naver Blog

[스프링부트] #1 게시판 만들기 - 개발환경 세팅

[스프링부트] #1 게시판 만들기 - 개발환경 세팅 게시판은 백엔드에서 구현할 수 있는 많은 기능을 구현할 수 있습니다. 이번 포스팅을 통해 게시판을 구현해보겠습니다. 개발환경 세팅하기 1. 도커, mysql, mariadb, MySQLWorkbench 설치한다. 2. 도커로 mariaDB 서버를 키고 MySQLWorkbench에서 mariaDB를 열어준다. 그리고나서 통모양 버튼을 누르고 board 라는 이름의 스키마를 생성해준다. 3. Spring Initializer에 들어가서 Gradle, jar, java8 Dependencies는 Spring Web, Spring Data JPA, MariaDB Driver, Thymleaf, Lombok 을 넣어준다. 4. 프로젝트 내에서 application.properties 파일안에 아래와 같은 코드를 입력한다. (패스워드는.......

원문보기 내부링크
Naver Blog

[스프링부트] #2 게시판 만들기 - MariaDB에 테이블 생성 / 게시물 작성 폼 생성

[스프링부트] #2 게시판 만들기 - MariaDB에 테이블 생성 / 게시물 작성 폼 생성 MariaDB에 테이블 생성하기 1. MySQL Workbench 들어가서 스키마에 테이블 우클릭 후 create 누른다음에 아래 사진처럼 작성한다. * NN = Not null = 데이터를 받지 않으면 안된다. = 무조건 데이터를 받아야한다. 다 작성하고 Apply를 눌러 저장해준다. 게시물 작성 폼 생성하기 1. templates 폴더 안에 boardwrite.html 파일을 만들고 아래와 같은 소스코드를 작성한다. 2. controller 패키지 안에 BoardController 라는 자바 클래스를 아래와 같은 코드로 수정해준다. 서버를 재실행하고 localhost:8090/board/write 로 들어가보면 아래 사진과.......

원문보기 내부링크
Naver Blog

[스프링부트] #3 게시판 만들기 - 글 작성 처리

[스프링부트] #3 게시판 만들기 - 글 작성 처리 templates 폴더 안에 boardwrite.html 파일을 아래와 같이 작성한다 전과 달라진 점은 폼을 추가하고, 포스트로 전송하는 것을 추가했다. 그리고 com.xxxx.xxxx 안에 하위 패키지로 entity를 만들고 그 안에 Board 라는 자바 클래스를 생성하고 아래 코드를 작성한다. com.xxxx.xxxx 폴더 안에 repository 라는 패키지를 만들고 그 안에 BoardRepository 라는 인터페이스를 만들고 아래 코드를 작성한다. com.xxxx.xxxx 폴더 안에 service라는 패키지를 만들고 BoardService 라는 자바 클래스를 만들어주고 코드를 작성한다. boardController 파일을 아래와 같이 작성해준다. 서버를 재가동 시킨 후.......

원문보기 내부링크
Naver Blog

[스프링부트] #4 게시판 만들기 - 게시글 리스트

[스프링부트] #4 게시판 만들기 - 게시글 리스트 1. MySQL Workbench 들어가서 테이블에 아래와 같은 코드를 입력해준다. 그리고 use board; 드래그하고 컨트롤+엔터 누르고 DELIMITER $$ 부터 DELIMITER $$ 까지 드래그 후 컨트롤 + 엔터, 마지막으로 call testDataInsert 드래그 후 컨트롤 + 엔터를 누르고나서 좌측 탭에 있는 board의 테이블 모양 누르면 데이터가 들어온 것을 확인할 수 있다. templates 폴더 안에 boardlist.html 파일을 만들고 아래와 같은 소스코드를 입력한다. service 패키지 안에 있는 BoardService 클래스에 아래와 같은 코드를 입력한다. controller 패키지 안에 BoardController 클래스에 아래와 같은 코드를 입력.......

원문보기 내부링크
Naver Blog

[스프링부트] #5 게시판 만들기 - 게시글 상세 페이지 생성

[스프링부트] #5 게시판 만들기 - 게시글 상세 페이지 생성 1. templates 폴더 안에 boardview.html 파일 생성 후 아래 코드 작성 2. BoardController.java 파일 안에 아래와 같은 소스코드 입력 3. BoardService.java 파일에 아래와 같은 코드 입력 4. boardview.html 파일에 아래와 같은 코드 작성 서버를 재가동 시키고 localhost:8090/board/list 에 들어가면 아래와 같은 페이지가 뜬다. (데이터베이스에 있는 정보) 링크를 클릭하면 해당 ID의 글로 들어가진다.

원문보기 내부링크
Naver Blog

웹에 광고 붙여서 수익 내기 (구글 애드센스, 카카오 애드핏)

웹에 광고 붙이기 1. 애드 네트워크 사용하기 - Google Adsense - Kakao Adfit https://adfit.kakao.com/ 1. 위에 링크 타고 들어가서 로그인하기 2. 광고관리 탭에 들어가서 새 매체 클릭 3. 매체 등록하기 > 매체 고유값은 배포한 웹의 주소를 입력 4. 광고 단위 설정 후 스크립트를 코드에 붙여넣기 위와 같이 카카오 비즈니스 팝이 뜬 걸 확인할 수 있다. 나중에 1~2 영업일이 지나면 광고가 활성화 되고, 카카오 애드핏에서 광고 분석도 할 수 있게된다.

원문보기 내부링크
Naver Blog

네이버에 웹 서비스 등록하기

1. 네이버 웹마스터 도구에 내 사이트 등록하기 https://searchadvisor.naver.com/ 위에 사이트 들어가서, 우측 상단에 웹마스터 도구 클릭하기 2. 클릭후 링크 올리고 광고 등록하기 3. 검증 탭에 robots.txt 들어가서 모든 검색로봇 수집허용 누르고, robots.txt를 다운 받아, 파일이 있는 곳에 넣는다. https://www.xml-sitemaps.com/ 1. 위에 사이트에 들어간 후, URL 입력후 Start를 누른다. 그 후 완료되면 View sitemap detail 클릭하고 Download XML 클릭한다. 2. 다운 받은 걸 마찬가지로 소스코드가 있는 곳에 넣는다. 여기까지 했으면, 깃허브에 업데이트 하고, 다시 네이버 웹마스터 도구 들어가서 1. 검증 탭에 - robots.txt - 수집.......

원문보기 내부링크
Naver Blog

[개발 일기 #4] 9월의 개발 일기

[개발 일기 #4] 9월의 개발 일기 이번 달은 굉장히 빠르게 지나갔습니다. 일단 저번 달에 목표해둔 하루 4시간 이상 공부와, 깃허브 1일 1커밋은 추석, 데이트한 날을 빼고는 잘 실천했습니다!! 예이~ 나중에 잔디밭이 될 때까지 열심히 해봐야겠어요. 9월달에는 프론트엔드와 백엔드 공부 둘다 열심히 했습니다. 프론트엔드 공부로는 리액트와 바닐라 자바스크립트를 공부했고, 백엔드 공부는 사용해보지 않은 익스프레스를 시도해봤습니다. 익스프레스와 스프링부트를 둘다 사용하고, 데이터베이스 개념에 대해 많이 알게 됐습니다. 백엔드 공부를 하면서 코딩만 하는 것보다는, 이론을 바탕으로 코드를 설계하는 것이 무엇인지 알게 되었고, 어.......

원문보기 내부링크
Naver Blog

여자친구 생일을 맞이한 간단한 웹사이트 만들기

여자친구 생일을 맞이한 간단한 웹사이트 만들기 안녕하세요 곧 여자친구 생일이라서 특별한 선물을 하고 싶어서 뭐 할까 고민하다 웹사이트를 만들어봤습니다. 원래 리액트를 이용해서 하고싶은데, 시간이 되질 않아서 리액트를 사용하진 못했습니다 ㅠㅠ 메인은 위에 사진처럼 nav, header, main 세 부분으로 나눴습니다. header 부분은 '만난지 N일 째' 라는 문구가 있는데, 자바스크립트로 날짜 계산을 해서 자동으로 계산이 되게 구현했고, Main 부분은 컬러박스를 이용해서 각각의 컨텐츠를 만들었습니다. 컬러박스는 애니메이션 효과를 적용해서 마우스를 올리면, 확대되게 만들었습니다. 컬러박스를 누르면 각각의 컨텐츠 색을.......

원문보기 내부링크
Naver Blog

[자바스크립트] Axios를 이용한 오늘 총 코로나 확진자, 사망자수 데이터 가공하기

[자바스크립트] Axios를 이용한 코로나 확진자, 사망자수 데이터 가공하기 날마다 갱신되는 오늘의 코로나 총 확진자 수와, 총 사망자 수 구하기 자바스크립트 axios.get을 이용해서 코로나 api 데이터를 받아오고, 그 데이터를 처리해서 index.html에 출력한다. index.html style.css getToday.js main.js

원문보기 내부링크
Naver Blog

[리액트 + 스프링 부트 + MySQL] #1 ToDoList 만들기 / 개발환경 준비하기

[풀스택 - 리액트 + 스프링 부트 + MySQL] #1 ToDoList 만들기 / 준비하기 - 개발환경 설정 > AdoptOpenJDK ( JDK11, HotSpot) > IntelliJ IDEA CE > Node.js > VSCode > Postman > MySQL ( + Docker) >> 도커 설치후 터미널에 아래 코드 입력 (M1맥북용) (DATABASE 이름과, USER, PASSWORD는 아무거나 기억할 수 있는걸로 입력하시면 됩니다.) > DBeaver >> 설치 후 MySQL 연결 후 MAIN 옆에 Driver properties - allowPublicKeyRetrieval : TRUE 로 바꿔주셔야 "Public Key Retrieval is not allowed" 오류가 안뜹니다. Spring Initializer 검색 후 Gradle Project - Kotlin - 괄호 없는 버전 선택.......

원문보기 내부링크
Naver Blog

[리액트 + 스프링 부트 + MySQL] #2 ToDoList 만들기 / 코틀린 스프링부트 개발

[풀스택 - 리액트 + 스프링 부트 + MySQL] #2 ToDoList 만들기 / 코틀린 스프링부트 개발 인텔리제이에서 Main-kotlin-~todolist 로 들어간 후 repository 패키지를 만든 후 Todo 라는 이름의 코틀린 파일을 만들고 아래 코드 넣기 이후 repository 폴더에 TodoRepository 라는 이름의 인터페이스 생성 후 아래 코드를 작성한다. Spring MVC(Service) ~ com.xxxx.todolist 디렉토리에 service 패키지를 만들고 안에 코틀린 파일로 TodolistApplication 파일을 만든다. 밑에 소스 코드를 입력한다. >> 패키지명은 사용자마다 다르니 확인해야함 Spring MVC (Controller) ~com.xxxx.todolist 디렉토리에서 controller 패키지를 만들고 ".......

원문보기 내부링크
Naver Blog

[리액트 + 스프링 부트 + MySQL] #3 ToDoList 만들기 / 리액트 개발과 스프링 부트와 연결하기

풀스택 [풀스택 - 리액트 + 스프링 부트 + MySQL] #3 ToDoList 만들기 / 리액트 개발과 스프링 부트와 연결하기 리액트 환경을 세팅해준다. Vscode에 작업 폴더로 들어가서 터미널에 npx create-react-app . 입력해서 리액트 환경을 만들어주고, 터미널에 npm i axios 를 입력해서 axios를 받아준다. 그리고 마지막으로 App.js에 아래와 같은 코드를 입력한다. 위에 코드를 입력하고 터미널에 npm run start를 입력해서 화면을 띄워보면, 콘솔창에 CORS (교차 출처 리소스 공유) 오류가 뜬다. 이게 뭐냐면, 스프링 부트 프로젝트 포트는 8080인데, 리액트앱은 포트번호가 3000번이기 때문에 발생하는 것이다. 이걸 해결하기 위해서, 두 가지 방법.......

원문보기 내부링크
Naver Blog

웹에 SNS 공유 기능 만들기

웹에 SNS 공유 기능 만들기 https://www.addthis.com 1. 위에 사이트 들어가서 회원가입하기 2. 로그인 한 후 Share buttons 클릭 그리고 원하는 타입 선택 3. 다 고르고 제공되는 코드를 소스코드에 붙여넣으면 끝 위에처럼 만들 수가 있습니다!

원문보기 내부링크
Naver Blog

[리액트] API를 이용하여, 코로나 집계 사이트 만들기

[리액트] API를 이용하여, 코로나 집계 사이트 만들기 리액트를 사용하여, 코로나 집계 사이트를 만들었습니다. 코로나 집계시에 필요한 데이터는 https://documenter.getpostman.com/view/10808728/SzS8rjbc 여기서 API를 따와서 정보를 가공한 후에 데이터 처리를 했습니다. Axios, react-chartjs-2 를 이용했습니다. *리액트 컴포넌트를 만들 때, vscode 확장 프로그램인 "ES7 React/Redux ...." 을 받으시고, rafce 를 입력후 엔터치면 자동으로 리액트 코드가 완성됩니다. App.js App.css components / Header.js components / Contents.js

원문보기 내부링크
Naver Blog

[리액트] #1 API를 이용하여, 인기 영화 순서대로 불러오기 및 영화 상세정보를 받아오는 사이트 만들기 ++ API 와 컴포넌트의 중요성

[리액트] #1 API를 이용하여, 인기 영화 순서대로 불러오기 및 영화 상세정보를 받아오는 사이트 만들기 ++ API 와 컴포넌트의 중요성 안녕하세요. 오늘 리액트를 이용해서 API를 받아오고, 영화를 현재 인기 순대로 카드식으로 배열한 후에 아무 영화 포스터를 클릭하면, 라우터를 이용하여, 그 영화의 상세정보를 볼 수 있게끔 만들었습니다. 먼저 준비할게 있습니다. https://www.themoviedb.org/ TMDB 사이트에 들어가셔서, 회원가입을 한 후에 이 사이트에서 제공하는 API 키를 받으셔야합니다. API를 받으셨으면, fetch를 이용하여 데이터를 받고 가공합니다. 그 후에는 가공한 데이터를 가지고 필요한 컴포넌트를 만들어서 코딩을 하시면.......

원문보기 내부링크
Naver Blog

[개발 일기 #3] 8월을 회고하며 올리는 개발 일기 (프로젝트)

[개발 일기] 8월을 회고하며 올리는 개발 일기 (프로젝트) 8월에는 진로에 대한 고민을 많이 했습니다. 프론트엔드, 백엔드 개발 둘다 하면서 슬슬 한가지로 방향을 잡아야하는데, 고민을 해도 끝이 안났습니다. 적어도 올해 말까지는 정리를 해야지 내년에 대규모 프로젝트도 할텐데 걱정입니다 ㅠㅠ 지난 달에는 프로젝트를 많이 진행 했습니다. 메인 프로젝트로 팀원들과 전기차 서비스 관련 웹 서비스를 만들었습니다. 굉장히 준비를 많이하고 공부도 많이 했지만, 생각보다 결과가 좋지는 않아서 마음이 아프지만, 다음 프로젝트에서는 경험 삼아서, 더 좋은 결과를 만들고 싶다고 생각했습니다. 서브 프로젝트로는 뭐 이것저것 여러개 만들.......

원문보기 내부링크
Naver Blog

[자바스크립트] Axios 사용하기 (Parcel bundler)

[자바스크립트] Axios 사용하기 1. 프로젝트 폴더를 생성한다. 2. Vscode로 프로젝트 폴더 들어간 후, 터미널을 열고 npm init -y 입력 3. npm install parcel-bundler -D 입력 4. package.json 들어간 후 scripts 부분을 아래와 같은 코드로 바꾼다. 5. index.html을 생성한 후 터미널에서 npm run dev 를 입력해서 개발서버를 띄워주고 잘 작동되는지 확인한다. 6. 작동이 잘 되면, 터미널에 npm i axios 를 입력해서 Axios를 다운 받아준다. Axios 사용할 준비 끝 index.html main.js 위에처럼 소스코드를 입력한 후 결과를 확인해보면 위에 사진처럼 나오는 것을 확인할 수 있다. main.js 파일에서 axios.get(url) 코드를 통해서 api 정보를.......

원문보기 내부링크
Naver Blog

이케아와 헤이홈을 이용한 개발용 데스크 셋업 공개

안녕하세요! 오늘은 이케아와 헤이홈 제품을 이용한 저의 데스크 셋업을 공개하려고 합니다! 먼저 제 책상의 전체적인 모습입니다. 이케아 높낮이 수동 조절 책상, 이케아 2층 수납장, 시디즈 의자, 주연테크 28인치 모니터, 헤이홈 라인 LED와 조명, 만랩 3 in 1 충전기 이렇게 구성되어 있습니다. 먼저 만랩 3 in 1 무선 충전기입니다. 아이폰, 에어팟, 애플워치를 전부 사용하는 저에게는 꼭 필수인 제품이에요. 충전케이블이 달라서 지저분한데, 이거 하나로 깔끔하게 해결 가능합니다! 요거는 제가 없으면 코딩을 못할만큼 큰 존재인 주연테크 모니터입니다. 맥북과 연결하면 충전까지 60w로 되고, 큰 화면으로 코딩을 할 수 있어서 정말정.......

원문보기 내부링크
Naver Blog

[파이썬] 프로그래머스 - 두 개 뽑아서 더하기

[파이썬] 프로그래머스 월간 코드 챌린지 시즌1 - 두 개 뽑아서 더하기 https://programmers.co.kr/learn/c...

원문보기 내부링크
Naver Blog

[Docker 도커 실전 가이드] 웹 개발자 필수 기술스택인 도커, 도커 강의서 추천 후기

안녕하세요. 오늘 도커 책을 제공 받았습니다. 도커는 요즘 개발자 현업에서 거의 필수 수준이죠? 도커를 ...

원문보기 내부링크
Naver Blog

[개발일기 #1] 회고록, 기술 블로그, 공부 지옥

1. 회고록 대학에 입학하고 벌써 23살이 됐다. 입학하고 1,2 년동안 학교에서 배운 전공은 사물인터넷, 기...

원문보기 내부링크
Naver Blog

[Node.js] Node.js 백엔드 맛보기 #1 nodeJS + Express 웹서버 설정, Request,Response 처리 기본

[Node.js] Node.js 백엔드 맛보기 #1 nodeJS + Express 웹서버 설정, Request,Response 처리 기본 a...

원문보기 내부링크
Naver Blog

[영통 빌에반스 헤어] 두 번째 아이비리그컷 후기와 머리 기르는 과정 (영통, 광교, 기흥 미용실 추천)

[영통 빌에반스 헤어] 두 번째 아이비리그컷 후기와 머리 기르는 과정 (영통, 광교, 기흥 미용실 추천) 안...

원문보기 내부링크
Naver Blog

[흥덕지구 핑거워시] 여름맞이 세차하기, 흥덕지구 세차장 핑거워시 후기

[핑거워시 영덕점] 여름맞이 세차하기, 흥덕지구 세차장 핑거워시 후기 안녕하세요. 오늘은 용인 흥덕지구 ...

원문보기 내부링크
Naver Blog

제주도 만 21세 완전 자차 렌터카 업체 추천 [레드캡렌터카]

안녕하세요. 최근에 제주도 여행을 다녀왔는데, 렌터카 때문에 굉장히 걱정이 많았습니다. 아무리 유명한 ...

원문보기 내부링크
Naver Blog

[Aesop] 이솝 테싯 오 드 퍼퓸 향수 구매 후기

안녕하세요. 오늘 광교 갤러리아에 가서 쇼핑을 하면서 이솝 향수를 구매했습니다. 원래는 휠 제품을 구매...

원문보기 내부링크
Naver Blog

[자바 알고리즘] 이진탐색 (Binary Search) 구현하기

# 1. 자바로 풀어본 알고리즘 이진탐색의 원리는 간단하다. 1 ~ 100 까지에서 한 숫자를 맞추는 게임을 할 ...

원문보기 내부링크
Naver Blog

[자바 알고리즘] DFS, BFS 구현하기

UndirectedGraph.java DfsSearch.java BfsSearch.java 세가지 소스코드로 구성되고, UndirectedGra...

원문보기 내부링크
Naver Blog

[프론트엔드] 카카오톡 클론 코딩

[프론트엔드] 카카오톡 클론 코딩 안녕하세요 오늘은 8월에 공부한 걸 올려보려고 합니다. 최근에는 프론트엔드 공부를 많이했습니다. 아무래도 프로젝트를 하고 있어서 많이 하지 못했지만, 남는 시간동안 열심히 했습니다! 니꼬쌤 강의도 열심히 듣고 디자인적인 부분도 많이 늘은 것 같습니다. 사실 자바스크립트 이용하는 줄 알았는데, 순수 HTML, CSS만 이용한거라서 당황했었습니다. 하지만 진짜 도움은 많이 돼서 프론트엔드 공부하시는 분들이라면 한번 들어보시는 걸 추천드려요 :) 로그인창 구현 친구목록 구현 채팅창 구현 find 탭 구현

원문보기 내부링크
Naver Blog

[프론트엔드] 과거의 나에게 보내는 편지 - 토이 프로젝트

[프론트엔드] 과거의 나에게 보내는 편지 - 토이 프로젝트 8월에 짧게 토이 프로젝트로 앞으로 진행할 개인 프로젝트의 프로토타입을 만들어봤습니다. 텍스트를 뭐라할지 모르겠어서 대충 구글에서 끌고온 문장도 많습니다. 상단 nav탭을 position: fixed; 로 고정시키고, 나머지는 틀 짜고 내용을 넣었습니다. 지금 공부하는 걸 마치고 추후에 백엔드랑 같이해서 회원가입, 로그인, 서비스를 모두 구현할 생각입니다.

원문보기 내부링크
Naver Blog

[프론트엔드] To do list 다시 구현해보기

[프론트엔드] To do list 다시 구현해보기 8월에 진행한 프로젝트 중 하나로, 이번년도 봄 쯤에 자바스크립트를 처음 공부할 때, html, css등 다 몰라서 무작정 구글링과 따라하기로 만들어서 계속 미련이 남았었습니다. 전에 만들었던 버전과는 조금 다르게 자바스크립트를 이용해서 페이지 하단에 3초마다 명언이 바뀌도록 설정했고, 시간에 따라 배경화면이 바뀌게 설정했습니다. 추후에 리액트를 이용해서 페이지에 게임 탭을 만들어 미니게임을 만들 생각입니다.

원문보기 내부링크
Naver Blog

[웹 프로젝트] #1 취업용 포트폴리오 사이트 만들기

[웹 프로젝트] 취업용 포트폴리오 사이트 만들기 안녕하세요. 드디어 오늘 전기차 프로젝트가 다 끝나고, 이제 사이드 프로젝트로 저의 취업을 위한 사이트를 만들기 시작했습니다. 레이아웃 > 디자인 > 애니메이션 및 JS > 반응형 이 순서로 만들 예정입니다. 서브메뉴는 저를 소개하는 것과, 깃헙, 블로그 등등 개인 사이트 지금까지 만든 프로젝트, 커리어에 대한 메뉴 총 4가지를 만들 계획이고 오늘은 서브메뉴 4가지중 2가지를 만들었습니다. 일단 틀을 얼른 만들고 디자인을 해야하는데, 가장 걱정되는 부분이 바로 디자인이에요. 색 조합, 폰트 생각하는게 정말 너무 고통입니다 ㅠㅠ

원문보기 내부링크
Naver Blog

[리액트] #1 영화 검색 만들기 / 리액트 개발 환경 포함

[리액트] #1 영화 검색 만들기 / 리액트 개발 환경 포함 - 리액트 개발 환경 만들기 (맥북 M1 기준) 1. 구글에 Node.js 검색 후 설치하기. (최신버전) 2. 프로젝트 폴더 생성하기 > 터미널에 mkdir 폴더명 입력하기. 3. 프로젝트 폴더 이동하기 > 터미널에 cd 폴더명 입력하기. 4. 리액트 개발환경 구축하기 > 터미널에 npx create-react-app 프로젝트명 입력하기. 5. Vscode 실행 후 프로젝트 폴더로 이동한 후에 vscode 터미널에 npm start 입력하기 그러면 자동으로 웹 브라우저에 리액트가 작동하는 것을 확인할 수 있습니다. src 폴더에 들어가서 App.js 와 index.js 만 냅두고 나머지 파일은 다 삭제하기. (삭제하고 페이지를 보.......

원문보기 내부링크
Naver Blog

[웹 프로젝트] #2 취업용 포트폴리오 사이트 만들기

[웹 프로젝트] #2 취업용 포트폴리오 사이트 만들기 이번에는 서브메뉴 Who Am I 에 div로 세개의 항목씩 감싸주고 flex 속성을 이용해서 상하좌우 정렬을 맞췄습니다. 기존에는 위아래 아이콘 정렬이 안 됐는데 위와 같이 css 속성을 추가해서 정렬했습니다. 또한 서브메뉴 PROJECT와 CAREER 그리고 Footer와 우측하단에 상단으로 올라가는 버튼을 추가했습니다. 틀 안에 내용은 올해 말 ~ 내년 초쯤 정리해서 넣을 생각입니다. 이제 애니메이션과 자바스크립트 작업으로 스크롤하는 것만 하면 대충 끝이나는데, 다 만들고 나중에 리액트로 변환을 할 생각입니다 !

원문보기 내부링크
Naver Blog

[리액트] #2 영화 검색 만들기 / 컴포넌트 css 적용

[리액트] #2 영화 검색 만들기 / 리액트 개발 환경 포함 Genres 추가하고, Movie.js에 데이터를 더 연결시켰습니다. 마지막으로 CSS로 꾸몄습니다! App.js App.css Movie.js Movie.css

원문보기 내부링크
Naver Blog

나이키 덩크로우 바시티그린 구매 후기

안녕하세요. 최근에 크림에서 덩크로우 바시티그린을 구매했습니다. 정말 지금까지 드로우를 많이 했지만, ...

원문보기 내부링크
1 2 3 4 5 6 7 8 9