자바스크립트 동작원리 자바스크립트를 사용하다보면 여러 특이한 장면을 볼 수 있습니다. 예를 들어 이런 코드를 실행하고 싶다 칩시다.//1+1을 하고 1초를 쉰 후 2+2를 하고 그 후 3+3을 했으면 좋겠다! console.log(1+1) setTimeout(function(){console.log(2+2)},1000) //setTimeout = 몇초동안 쉬고 실행하라는뜻 console.log(3+3) 어디 자바스크립트로 한번 짜봅시다. 결과가 어떻게 나올까요? 첫쨰줄이 실행된 후 1초 쉰 후에 2번째 줄이 실행되는건 맞는데 그걸 기다려주지 않고 3번째 줄이 실행됩니다. 이처럼 자바스크립트는 다른언어랑 다르게 좀 특이한데요 오늘은 이러한 자바스크립트의 동작 원리에 대해 알아보겠습니다. 웹브라우저 위 사진은 웹브라우저를 나타낸.. [JS] 함수형 프로그래밍의 이해 함수형 프로그래밍 왜 우리(웹 프론트)는 함수형 프로그래밍을 배워야 할까요? 우리는 javascript를 써야 하는 운명 프로그래밍 방법에는 여러가지 패러다임이 존재합니다. 절차식 프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍 이런것들은 한번씩은 접해봤을법한 용어들입니다. 함수형 프로그래밍이 객체지향 프로그래밍보다 더 낫기 때문에 함수형 프로그래밍을 배워야 할까요? 아닙니다. 웹 개발을 하기 위해서 우리는 언어의 선택권이 없이 javascript를 해야만 하기 때문입니다. javascript 탄생비화 javascript를 창시한 Brendan Erich는 언어를 개발할 당시 유행하던 객체지향에 한계를 느끼고 LISP, scheme등 함수형 프로그래밍에 관심을 가지고 있었기에 함수형 프로그래밍의 형태.. [NextJS] Cypress 테스트 코드 작성 해보기 매번 오류를 픽스할 때마다 느끼는 것이 있습니다. 바로.... 이 코드를 짠게 내가 맞나?? 왜 이렇게 했더라? 내가 작성했음에도 불구하고 30분은 다시 뜯어봐야 코드의 목적을 알 수 있는 경우들이 많았습니다. 그래서 오늘은 Cypress를 이용한 테스트 코드 작성법을 알아보려고 합니다! 코드 작성 이전에 테스트 코드에 대해 조금 알아보겠습니다. 테스트코드 작성의 목적 코드가 올바르게 작동하는가에 대한 확인 다양한 조건 및 입력에서 컴포넌트가 제대로 (예상대로) 작동하는지 확인 수월한 리팩토링을 위함 - 프로젝트가 성장하면 리팩토링이 필요하기 마련 → 테스트코드로 최소한의 기준, 안전망이 만들어짐 테스트코드 작성의 장점 작성한 코드가 기획 의도를 제대로 반영하였는지 확인 가능 기획자와의 소통 도구로 사용.. [NextJS] CSR, SSR 그리고 SSG의 차이 CSR, SSR (feat. SSG) CSR, SSR이 무엇인지 알기전에 먼저… 브라우저 렌더링(Browser Rendering)?! 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말합니다. 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 화면에 그려주는 원리입니다. 예를 들어, 크롬에 접속해 주소창에 www.google.com을 입력한다면 브라우저는 구글 서버로부터 구글 웹사이트에 대한 정보를 받아 브라우저 화면에 구글 홈페이지를 그려주게 되는 것입니다. 그리고 이러한 브라우저 렌더링은 크게 CSR(Client Side Rendering) - 클라이언트 사이드 렌더링 SSR(S.. 주니어 프론트엔드 개발자 2023 회고 ⭐ 나는 올해로 2년차가 된 주니어 프론트엔드 개발자이다. 사실 만 경력으로 따지면 9개월 이지만 햇수로 따지면 2년차가 되어버리는 매직...🤣현재 작은 스타트업에서 크리에이터들이 효과적으로 협업하고,창작물을 공유할 수 있는 플랫폼을 개발하고 있다....!(디테일한 부분은 앞으로 블로그에 기록해볼 예정이다) 2023년 회고를 1월 1일에 올리고 싶었는데,바쁘고(?) 귀찮음( = 게으른 나 자신) 때문에 미루고 미루다가2월이 되어서야 올리게 되었다.이것도 여러번 수정해서 올리는건 안비밀... 1월 ~ 5월 2022년 12월 30일을 마지막으로 ICT 인턴십이 끝나고,나는 본격적으로 프론트엔드 개발자 취업 준비를 시작했다.2월에 대학 졸업도 해버려서 사실상 백수였다 ㅋ_ㅋ 인턴십을 수행했던 회사에서 너무 .. [ICT 프로젝트 인턴십] 후기 및 회고 2022년 9월1일부터 2022년 12월 30일 4개월 간의 ICT 인턴십을 마쳤다. 인턴십을 마치고 재정비의 시간을 가진 뒤 약 3주 가량이 지나서야 회고를 작성하게 되었다....!! 사실 4개월이 어떻게 지나갔을지도 모를 만큼 매우 빠르게 지나간 것 같다. 첫 달은 적응하느라 금새 지나갔고, 나머지 개월은 일하느라 더더욱 빠르게 지나갔다....! 회사에서 좋은 분들을 만났지만 좋았던 점, 아쉬웠던 점이 공존했던 것 같다. 기획부터 개발까지의 전반적인 프로젝트 과정을 볼 수 있었던 것, 현업에서는 어떤 툴을 사용하는지 알 수 있었던 것은 큰 장점으로 작용할 것 같다. 다만 인턴십을 시작하기 전 코드 작성에 대해 성장하고자 했던 바램은 약간 기대에 못 미쳤던 것 같다는 생각에 아쉬움이 남는다. 이러한 것.. [ICT 프로젝트 인턴십] 2개월차 회고 첫 달보다 나아진 점 1개월 차에는 회사에 적응하기 바빴던 시기라면, 2개월 차에는 업무적으로 집중할 수 있었던 것 같다. 다만 회사 규모가 작다보니 다른 분들은 외주 프로젝트들을 처리하느라 바쁘셨고, 나는 혼자 사내 프로젝트의 프론트엔드를 맡아서 진행했다. 회사를 다니며 좋은 점과 아쉬운 점 회사를 다니면서… 그리고 프로젝트를 진행하면서 장, 단점이 있었는데 작성하면서 회고해보려고 한다… 첫 번째 장점 장점 중 첫 번째는 내가 사용하고 싶은 기술 스택들을 대부분 사용해볼 수 있었다는 것이다. 예를 들어 react-hook-form, react-query 같은 것들 말이다. 예전 수위키 작업을 진행할 때 회원가입 폼에서 팀원들이 직접 유효성 검사 로직을 짜고, 메시지도 넣어줬었는데 당시에 react-ho.. [ICT 프로젝트 인턴십] 1개월차 회고 ICT 프로젝트 인턴십 22년 7월 쯤 학교 공지사항을 둘러보다가 ICT 프로젝트 인턴십이라는 눈에 확 띄는 공고를 발견하였다. 마침 나는 다음 학기가 마지막 학기였고, 학교를 다니며 수업을 듣기보다는 학점도 얻고 지원금도 받고 실무 경험도 쌓을 수 있는 인턴 활동을 하는게 낫겠다 싶어서 ICT 인턴십 프로그램에 참여하게 되었다. 총 세 개 기업에 프론트엔드 분야로 지원을 할 수 있었고, 그 중 두 개 기업에 합격을 해서 집과 거리가 가까운 회사를 선택하였다. 8월에는 이것저것 인턴 관련 서류들을 작성하고 학교에 제출하였고, 9월 1일부터 출근 해서 오늘은 딱 한 달 째 되는 날이다. 아직 3개월의 인턴 기간이 남았지만, 한 달마다 인턴십을 진행하며 있었던 일과 느꼈던 점을 적어보려고 한다. 첫 출근 및.. [강의평가사이트] SUWIKI 전공 즐겨찾기 로직 변경 - 성능개선 웹 SUWIKI 배포 전부터 성능상 불만이 있는 부분이 있었는데 아래의 학과 즐겨찾기 모달이었다. 기존 로직에 불필요하고 비효율적인 서버 요청들이 있어서 매번 고치고 싶었는데 마땅한 방법이 생각나지 않다가 오늘 번뜩 떠올라서 바로 수정하고 배포본도 업데이트 했다. {db .filter((v) => { return searchMajor === '' ? v : v.includes(searchMajor) ? v : null; }) .map((v, i) => { return ( {v} ); })} 즐겨찾기 설정/해제 작동원리는 db(전공 리스트)가 favoriteDb(즐겨찾기 리스트) 안에 포함된 값을 가지고 있으면 꽉 찬 별을 보여주고, 그게 아니라면 빈 별을 보여주는 방식이다. 기존 onClick(onFav.. [강의평가사이트-SUWIKI] 로그인 로직 및 발생 문제 수위키 로그인 로직 클라이언트에서 서버로 id,pw 넘겨줌 -> 데이터 일치하면 액세스,리프레시 토큰 내려줌 현재 토큰 만료 시간 : 액세스토큰 - 1분 / 리프레시토큰 - 7일 ----------------------------------------------- API - 인터셉터로 관리(API모듈화) 인터셉터 : 클라이언트와 서버 사이의 미들웨어 역할(프론트 측에서 에러 처리) 클라이언트측에서 서버로 요청 보낼 때 서버에 요청 도착하기 전에 인터셉터가 요청 가로채고 발생될 오류 파악해서 config/error 반환해줌 인터셉터로 모든 GET요청 헤더에 액세스토큰 넣어놔서 편함 const instance = axios.create({ baseURL: `${PROXY_URL}`, timeout: 5000.. [강의평가사이트] 개발일지 - axios interceptors의 사용 API 사용을 단순화 하기 위해서 axios interceptors 를 사용하여 api를 모듈화하기로 그리고 어제 조금이나마 구현을 했다. 기존에 사용하던 Api와 이후에 구현된 Api의 코드 길이가 차이가 많이 난다. //공지사항 자세히보기 api export const noticeDetailApi = async (notice) => { const url = `${PROXY_URL}/notice/?noticeId=${notice}` const options = { method: "GET", headers: { "Content-Type": "application/json", AccessToken: getCookie("AccessToken") }, url, } try { const response = aw.. [강의평가사이트] 개발 일지 개발 일지를 꽤 오랫동안 작성하지 못했다. 강의평가사이트 프로젝트에 많은 변화가 있었다. 디자이너가 영입이 되어, 페이지 디자인이 한층 업그레이드 되었다. 플랫폼의 이름도 수강 -> 수위키 로 변경이 되었고, 메인 페이지부터 시작하여 전체페이지의 디자인이 대폭 수정되었다. 이전에는 내가 로그인, 아이디/비밀번호 찾기, 내 정보 페이지 등 상당 페이지의 디자인을 맡고 있었지만, 팀원 중에 디자인 코딩을 잘하시는 분이 계셔서 이제는 그 분이 페이지 전체 디자인을 담당하신다. 사실 이제 대부분의 작업은 거의 완료되었고, 검색기능과 토큰재발급 로직만 구현이 완료되면 1.0.0 버전은 배포할 수 있을 것으로 보인다. 나랑 나머지 한 분은 axios를 이용한 서버 통신과, 데이터 바인딩에 주력하고 있다. expor.. 이전 1 2 3 4 ··· 9 다음
