[책 리뷰] 나의 첫 HTML & CSS 웹 디자인 학습 후기
·
📕review/책
저의 첫 웹 프로그래밍 경험은 20살, 대학생 1학년 때였습니다. 당시에는 웹 프로그래밍에 별로 흥미를 느끼지 못했습니다. 입력하는 족족 브라우저에 반영되는 것이 신기하긴 했다만, 그뿐이었고 오히려 margin이니 padding이니 하나하나 설정해주어야 하는게 너무 귀찮았습니다. 더욱이 기말 프로젝트에서 미디어 쿼리 기반 반응형을 구현하면서 질려버렸고, 휴학하고 복학하여  3학년이 될 때까지 html, css는 쳐다도 보지 않았습니다.고등학생 때부터 게임 개발자가 꿈이었기에 웹 프로그래밍은 쳐다도 안봤고, 게임 개발자 꿈을 접고 인공지능을 공부할 때 까지만 해도 웹 프로그래밍은 안중에도 없었습니다만..어쩌다보니 지금은 프론트엔드 개발자를 준비하고 있습니다. 3년전과는 다르게 이제는 CSS가 제일 재미있는..
[Springboot] 0부터 시작하는 스프링부트 도전기 #2. Create
·
🖥️develop/Springboot
프로젝트 버전 변경Spring Initializr에서 프로젝트 생성 때 3.4.0 버전으로 생성하였는데, 교재는 3.1.0 버전을 사용하여 원활한 진행을 위해 스프링부트 버전 변경을 해주었습니다. 스프링부트 버전은 build.gradle 파일을 수정하여 쉽게 변경할 수 있습니다. 위 부분을 3.1.0으로 변경하고, 옆에 나타나는 코끼리 아이콘을 클릭하면 버전 변경 완료입니다.    폼 데이터HTML 요소인 태그에 실려 전송되는 데이터  태그는 웹 브라우저에서 서버로 데이터를 전송할 때 사용합니다. 어디로(where), 어떻게(how) 보낼지 등을 적어서, 서버에 전송하는 것입니다. DTOData Transfer Object, 데이터를 전달하는 객체태그에 실어 보낸 데이터는 서버의 컨트롤러가 객체에 담아..
[Springboot] 0부터 시작하는 스프링부트 도전기 #1. 스프링부트 프로젝트 생성하기
·
🖥️develop/Springboot
백엔드가 너무 싫고 맨날 백엔드는 싫어 절대 안할거야 외쳤지만 컨퍼런스 로또 전부 다 광탈해서 돈 주고 들을 수 있는 컨퍼런스는 백엔드뿐이였고 여기저기 다니다보니 백엔드도 할만할 것같고 그와중에 언니들 다 스프링부트 스터디 한다는데 나만 안하면 소외감 들고 눈물이 날 것 같아서 어쩌다보니 시작하는 스프링부트 도전기 스프링부트를 위한 환경 설정1. JDK 설치먼저 JDK 버전부터 확인해야 합니다. 진짜  시작부터 이러기 있나...싶었는데 JDK가 없으면 이렇게 나온다더라구요..분명 자바 프로그래밍도 했어서 JDK가 없을  수가 없을 텐데🧐. 많이 수상하지만 일단 없다니까 OpenJDK 설치를 해야합니다. (설치 링크 자동 완성도 되는데 상당히 수상하다) 21-LTS가 있고, 17-LTS가 있는데, 일단 ..
[Next.js] 로그인 뒤로가기로 접근 제한하기-router.push vs router.replace
·
🖥️develop/Next.js
인계받은 프로젝트를 확인하던 중 재밌는 상황을 발견했습니다. 로그인 후 홈 화면에서 뒤로가기 버튼을 누르면, 다시 로그인 페이지로 돌아가는 문제였습니다. 상단의 GNB(글로벌 네비게이션 바)를 보면, 로그인 상태임이 분명한데, 콘텐츠 영역에서 로그인 페이지가 표시되는 부자연스러운 상황이었습니다. 생각해보면, 로그인 상태에서는 뒤로가기를 눌러도 로그인 페이지가 표시되지 않는 것이 자연스러운 흐름일텐데, 이 상황은 UX와 보안 측면에서 정상적인 서비스 플로우는 아니라고 판단하여 사용자가 뒤로가기를 눌러도 로그인 페이지로 돌아갈 수 없도록 로그인 페이지 접근 제한을 구현하기로 했습니다. 해결 방법처음에는 토큰 유무를 확인해 리다이렉트 처리하는 방법으로 접근했습니다.이전 프로젝트에서도 이런 방식으로 권한 별 접..
[깃&깃허브] 개발자의 영원한 동반자 Git 쉽게 시작하기
·
🖥️develop/Github
Git이란?Git은 버전 관리 시스템(VSC, Version Control System)의 일종입니다. 파일 변화를 시간에 따라 기록하여, 나중에 특정 시점의 버전을 다시 불러올 수 있게 하는 시스템이죠. 소프트웨어 개발에서 코드의 변경 사항을 추적하고 관리하는데 사용합니다. Git, 왜 필요할까?소프트웨어 개발은 복잡하고 동적인 과정입니다. 혼자 개발할때도 계속해서 코드를 수정하고, 저장하는데 이런 작업을 여러명의 개발자가 동시에 진행하면 어떻게 될까요? 예시를 통해서 확인해봅시다. 개발자 A와 B가 동시에 하나의 프로젝트를 진행하고 있어요. 각자 다른 기능을 개발하고, 하나로 합치려고 합니다. A는 개발한 코드를 B에서 압축해서 전달하고, B는 전달받은 파일을 확인한 후 수정 요구 사항을 다시 파일로..
useEffect 의존성 배열에 onChange 설정 시 발생하는 무한 렌더링 오류 수정
·
⭐project/인턴
프로젝트를 인수인계 받아서 작업 중인데, 작업 목록 중 이미지 수정 시 무한 렌더링 오류 발생 항목이 있었다. 이전부터 오류를 인지하고는 있었는데, 어떤 조건으로 발생하는 오류인지, 원인이 뭔지는 모른다고 하셨다. 내가 작업하기로 하여 일단 조건부터 찾아보려고 하였는데 찾을 것도 없이 이미지 수정만 하면 무조건 발생하는 오류였다. 오류 로그를 보니 useEffect 활용 관련해서 문제가 발생하는 같았다. 그런데 오류 발생 코드에 useEffect가 5개 이상 선언되어 있어서 찾기 너무 어려웠고..모든 useEffect 내에서 콘솔을 찍어 문제를 유발하는 useEffect를 찾아내었다.  콘솔을 찍어보니 문제 발생 컴포넌트에서 무한 렌더링 되어 일정 스택을 찍으면 아래 오류 메시지가 출력되는 구조였다. (..
[책 리뷰] 그림과 실습으로 배우는 깃&깃허브 입문
·
📕review/책
개발자와 깃헙은 떼려야 뗄 수 없는 관계인 것이고..프론트엔드 개발자를 준비하는 저는 깃헙을 매우 자주, 거의 매일 사용 중입니다. 저의 깃, 깃헙 관련 경험을 잠깐 정리해보았습니다.- 2022년 2월 28일 깃헙 계정 개설- 2022년 11월 1일 첫 커밋- 2023년 커밋 87개- 2024년 현재 리뷰글 작성일 기준 커밋 1,056개- 깃헙 활용 협업 경험 5회(이상일수도)- 개발 동아리 내 깃, 깃헙 관련하여 멘토링 자료 제작 경험 有 꽤나 많은 협업 경험을 하였고 멘토링까지 진행해보았지만, 진행하는 프로젝트마다 커밋 실수, 브랜치 오염 한번씩은 저지르는것 같아요. 이전 프로젝트에서는 브랜치 오염 실수를 저질렀고(브랜치 오염을 했다면 빨리 자수하고 용서받읍시다 ), 가장 최근에 진행한 프로젝트에서도..
[책 리뷰] FastAPI로 배우는 백엔드 프로그래밍 with 클린 아키텍처
·
📕review/책
FastAPI로 배우는 백엔드 프로그래밍 with 클린 아키텍처는 가볍고 빠르게 시작할 수 있는 Python 기반 프레임워크인 FastAPI로 백엔드 개발을 쉽게 시작할 수 있게 돕는 책입니다. Java Spring Boot의 방대한 구조에 비해 FastAPI는 간결하고, 비동기 처리를 기본으로 제공하여 개발 속도와 유지보수 효율성 면에서 강력한 장점을 가집니다. 특히 클린 아키텍처를 기반으로 계층별로 백엔드 구조를 설계하는 개념을 다루어 백엔드 개발의 전체적인 흐름을 체계적으로 학습할 수 있습니다. 실습 중심의 예제와 실무에 적용할 수 있는 내용이 입문자에게 큰 도움이 되는 책입니다.   본 서평은 제이펍에서 책을 제공받아 작성되었습니다.   💡개요Python은 웹 개발뿐만 아니라 AI, 데이터 분석..
[Three.js] Three.js를 시작해보자
·
🖥️develop/Three.js
글또를 시작한 후, 쓰리제이에스해보자또 소모임에 가입하여 Three.js 스터디를 하게 되었다. 저번주 전체 온보딩에 이어 이번주 스터디조 오프라인 모임을 했는데, 2주간의 Three.js 스터디 기록을 해보려고한다.  쓰리제이에스해보자또, 첫 번째 오프라인 모임사실 쓰리제이에스해보자또 첫 회의는 온라인으로 진행되었는데, 깜빡 잠들어서 참여하지 못했다. 그래서 첫 번째 오프라인 모임은 무슨 일이 있어도 참여해야겠다고 생각했고, 시험 전날이지만 튜링의 사과까지의 왕복 3시간 모험을 감행했다. 오프라인 모임에서는 "Three.js란 무엇인가"에 대해서 스터디장님께서 발표해주셨다. 발표에서 가장 기억에 남는 내용은 CPU와 GPU의 차이에 대한 설명이었다. 왜 컴퓨터에서 그래픽을 다루기 위해 GPU를 써야 하..