728x90 반응형 Frontend24 Frontend Challenge: February Edition 참가 후기! (javascript, css) + winner 선정!!!😆 dev.to 프론트엔드 챌린지 참가후기! + Winner 선정!메일을 확인하다 눈에 띈 Dev.to의 Frontend Challenge!!항상 글은 자주 읽어왔지만 이렇게 챌린지가 있는 건 또 처음 알았다!게다가 시간도 넉넉하게 남아 참을 수 없었다!!! 챌린지 내용은제공되는 HTML구성은 변경 불가능하고 js, css로만 변경가능한 챌린지였다제법 재밌을 거 같아 바로 시작! 전체적인 틀안에서 구조변경이나 레이아웃 변경은 불가능햇다하지만 자바스크립트로는 가능하기때문에하나의 html이지만 주제별로 분리하는 것이 UI/UX측면에서도 편리할 것 같아 분리하는 것으로 정했다. 분리한 페이지들을 라우터로 연결하는 것이 나을까..싶다가도 그렇게까지는 큰 의미가 없을 것 같아네비게이션 바를 만들고 display n.. 2025. 3. 7. Netlify 환경변수(.env) 설정하기 배포는 에러없이 잘 됐는데 화면이 안보이길래 콘솔을 확인해보니Installations: Missing App configuration value: "projectId" (installations/missing-app-config-values).환경변수 에러가 낫구나당연함~~ .env파일은 git에 안 올렸으니까..이렇게 테스트 서버가 중요하다!!!테스트 서버가 있었으면 바로 알았을텐데~~~~그리고 빌드하기전에 환경변수 확인하는 습관가지기 netlify에서 환경변수 넣는건 너무 쉽다 Site configuration - environment variables 환경변수별로 하나씩 넣거나 여러개 한 번에 넣을 수 있음!import file로 환경변수가 많아서 여러개 한 번에 넣음환경변수명=값 형식으로 넣어주면.. 2025. 2. 14. 서버만들긴 애매하고 하드코딩은 하기싫고 json도 만들기 싫다면!? Firestore Database사용하기 기존 포트폴리오 사이트는 하드코딩으로 되어 있어 오타라도 있으면 무조건 배포를 다시해야했음물론 배포자동화가 연결되어 있지만 그래도 귀찮은 건 귀찮은 것임혹시라도 배포가 안된다면!!! 기존에 사용하던 서버에 그냥 api 추가하면 되긴하지만,,,뭔가 이것저것 믹스되는게 싫어서 방법을 찾아봄 번역파일 만들었던 것 처럼 json 파일을 만들까싶기도했지만하드코딩만 안하는거지...빌드는 해야해서 패스 ChatGpt에게 물어보니 명쾌한 답을 줌 크게 Headless CMS와 Firestore Database를 사용할 수 있는 것으로 보였다.둘 중에서 뭘 쓸까 찾아보니 Headless CMS는 ui가 있어서 좀 더 손쉽게 추가 수정 삭제가 가능한 것으로 보였다.이런게 있었다니..!해당 부분은 나중에 기획자나 마케터.. 2025. 2. 7. 패스트캠퍼스 1년차부터 3년차까지 수강한 온라인 강의 후기 : 프론트엔드 개발 올인원 패키지 with React 프론트엔드 개발자로 일하게 된지 벌써 3년차로 이번해가 지나면 만 3년을 일하게 된다. 그동안 나의 이야기를 살짝 풀어보자면 나는 사수가 없는 환경에서 신입부터 일하게 되었다. 사실 학부시절은 제법 공부를 잘했다는 주변의 이야기와 객관적인 성적표 지표들이 나 자신에게 증명해주었기에 사수가 없어도 괜찮겠지라는 근거없는 자만심이 하늘을 찌른상태로 입사를 하게 되었다. 하지만 컴퓨터 공학을 전공했음에도 불구하고 1년차 나의 실력은 정말 끔찍했다고 말 할 수 있겠다. 실무에서 많은 좌절감을 겪고 있던 도중 개인 공부가 없다면 이대로 코더도 되지 못하는 2년차 3년차가 될 것 만 같았다. 프론트엔드의 가장 기본인 자바스크립트부터 제대로 공부해야겠다고 생각했다. 유데*와 인프*에서 많은 자바스크립트 강의가 있었고 .. 2023. 12. 13. 리액트 - 스크롤에 따라 변경되는 드랍다운 컴포넌트 만들기 포트폴리오의 메뉴 부분을 작업하는 도중 드랍다운 메뉴가 필요해져 재사용성을 위해 컴포넌트로 따로 빼면 좋을 것 같아서 구성해보았다. 작업에 들어가기 전 2가지를 최우선적으로 생각하고 작업하였다. 1. 드랍다운 children에 유저가 원하는 컴포넌트를 넣을 수 있게 2. 영역(화면) 밖으로 나가면 화면 안으로 구성될 수 있게 ( 스크롤 포함 ) 드랍다운을 단순 메뉴로 쓰는 경우도 많지만 메뉴안에 checkbox, radio와 같은 다양한 요소들이 들어가는 경우도 많았다. 이를 위해서 드랍다운의 내용은 드랍다운 컴포넌트를 호출하는 부모 컴포넌트에서 정의하고 드랍다운 컴포넌트에는 껍데기만 제공하는 방식으로 구성하였다. 물론 전체적인 디자인은 비슷해야되기때문에 틀이되는 css는 dropdown.css에서 작성.. 2023. 12. 3. 리액트 - useEffect ( vue의 watch 랑 비슷한 걸까? ) useEffect 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 사실 해당 정의만 보면 뭔소릴까...라는 생각이 들긴한다 렌더링 될 때 특정 작업이면 리렌더링 될때도 특정 작업을 실행하는 것인가? 아니면 초기 렌더링일때만 작업이 실행되는 것일까의 두가지 의문이 들 수 있다. 살펴보니 크게 3가지 경우의 수가 있다. 1. 초기에 컴포넌트가 렌더링될 때 한번 실행되고 이 후로 다시 호출 되지 않음 2. 컴포넌트가 재렌더링 될 때마다 실행 3. 특정 변수의 값이 변경될 때마다 실행 어 이거 약간 Vue의 watch 느낌아닌가? 싶은데 동작방식이 조금 다른 것 같다 useEffect는 렌더링이 완료된 이후에 실행! watch는 데이터가 변경되는 것과 동시에 콜백함수를 실행한다. 둘다.. 2023. 11. 30. 이전 1 2 3 4 다음 728x90 반응형
